1.创建一个maven项目
2.然后将创建的maven项目的其他文件删除只留下pom.xml。
父容器的pom.xml文件如下：
在这里插入代码片
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.1.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.zking</groupId>
<artifactId>spring-cloud01</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>spring-cloud01</name>
<packaging>pom</packaging>
<description>主模块</description>
<properties>
<!--常规配置-->
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<spring-cloud.version>Hoxton.RELEASE</spring-cloud.version>
</properties>
<!--配置子模块-->
<modules>
<module>eureka-server</module>
<module>eureka-provider</module>
<module>eureka-consumer01</module>
<module>eureka-consumer02</module>
<module>common</module>
</modules>
<dependencies>
<!--导入vo模块-->
<dependency>
<groupId>com.zking</groupId>
<artifactId>common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
<!--lombok-->
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.10</version>
<scope>provided</scope>
</dependency>
<!--pagehelper-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.13</version>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>${spring-cloud.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>3.然后再到maven文件中添加子文件,配置服务注册-注册中心（yml 配置）
4.配置生产者（pom配置）
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.zking</groupId>
<artifactId>spring-cloud01</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>eureka-provider</artifactId>
<packaging>pom</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>eureka-provider</name>
<description>生产者</description>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
<version>5.1.44</version>
</dependency>
<!--<!–lombok–>-->
<!--<dependency>-->
<!--<groupId>org.projectlombok</groupId>-->
<!--<artifactId>lombok</artifactId>-->
<!--<optional>true</optional>-->
<!--</dependency>-->
<!--redis-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
<groupId>redis.clients</groupId>
<artifactId>jedis</artifactId>
</dependency>
<!--druid数据库连接池-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.10</version>
</dependency>
</dependencies>
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>*.yml</include>
<include>*.xml</include>
<include>*.properties</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.2</version>
<dependencies>
<!--使用Mybatis-generator插件不能使用太高版本的mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.44</version>
</dependency>
</dependencies>
<configuration>
<overwrite>true</overwrite>
</configuration>
</plugin>
</plugins>
</build>
</project>生产者yml配置
server:
port: 7201
eureka:
client:
serviceUrl:
defaultZone: http://localhost:7101/eureka/
spring:
freemarker:
suffix: .ftl
template-loader-path: classpath:/templates
charset: UTF-8
cache: false
content-type: text/html
application:
name: eureka-provider
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/t227?useUnicode=true&characterEncoding=utf8
username: root
password: 123
druid:
initial-size: 5
min-idle: 5
max-active: 20
max-wait: 60000
time-between-eviction-runs-millis: 60000
min-evictable-idle-time-millis: 30000
validation-query: SELECT 1 FROM DUAL
test-while-idle: true
test-on-borrow: true
test-on-return: false
pool-prepared-statements: true
max-pool-prepared-statement-per-connection-size: 20
filter:
stat:
merge-sql: true
slow-sql-millis: 5000
web-stat-filter:
enabled: true
url-pattern: /*
exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
session-stat-enable: true
session-stat-max-count: 100
stat-view-servlet:
enabled: true
url-pattern: /druid/*
reset-enable: true
login-username: admin
login-password: admin
allow: 127.0.0.1
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.zking.eurekaprovider.model
configuration:
map-underscore-to-camel-case: true
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql5.生产者具体业务，controller,mapper,model,service，generatorConfig.xml,jdbc.properties配置
controller层代码
package com.zking.eurekaprovider.controller;
import com.zking.common.model.Book;
import com.zking.common.model.User;
import com.zking.common.utils.PageBean;
import com.zking.common.vo.BookVo;
import com.zking.eurekaprovider.service.IBookService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@Slf4j
public class HelloController {
@Autowired
private IBookService bookService;
@RequestMapping("/hello/{name}")
public String hello(@PathVariable("name")String name){
System.out.println("我是生产者"+name+"");
return "我是身缠者"+name+"";
}
@RequestMapping( "/bookquery")
private Map<String,Object> queryBookPager(@RequestBody BookVo bookVo,HttpServletRequest request){
Map<String,Object> json=new HashMap<>();
PageBean pageBean=new PageBean();
// bookVo.setRequest(request);
//
pageBean.setRequest(request);
// bookVo.setRequest(bookVo.getRequest1());
// bookVo.setRequest(request);
try {
List<Map<String,Object>> books = bookService.queryBookPager(bookVo,pageBean);
json.put("tatol",bookVo.getTotal());
json.put("success",true);
json.put("rows",books);
json.put("msg",0);
} catch (Exception e) {
e.printStackTrace();
}
return json;
}
@RequestMapping("/bookAdd")
@ResponseBody
public Map<String,Object> bookAdd(@RequestBody Book book){
System.out.println(book);
int i = bookService.insert(book);
Map<String,Object> json=new HashMap<>();
if(i>0) {
json.put("success",true );
json.put("msg","新增成功！");
}else{
json.put("success",false );
json.put("msg","新增失败！");
}
return json;
}
@RequestMapping("delbook")
@ResponseBody
public Map<String,Object> delbook(@RequestBody Book book){
System.out.println("id===="+book.getId());
int i = bookService.delBook(book.getId());
Map<String,Object> json=new HashMap<>();
if(i>0){
json.put("success",true);
json.put("msg",1);
}else{
json.put("success",false);
json.put("msg",0);
}
return json;
}
@RequestMapping("updateBook")
@ResponseBody
public Map<String ,Object> editBook(@RequestBody Book book){
System.out.println("逆境如ul:"+book.getId()+book.getBookname()+book.getBooktype()+book.getPrice());
Map<String,Object> json=new HashMap<String, Object>();
try {
bookService.updataBook(book);
json.put("msg","编辑书本信息成功！");
json.put("success",true);
} catch (Exception e) {
e.printStackTrace();
json.put("msg","编辑书本信息失败！");
json.put("success",false);
}
return json;
}
@RequestMapping("/hello2")
public String Hello(@PathVariable("name") String name){
System.out.println("我是生产者："+name);
return "我是生产者："+name;
}
@GetMapping("/hello3")
public String Hello1(String name ){
String msg="你好"+name;
System.out.println(msg);
return msg;
}
@RequestMapping("/hello4")
public String Test(String name,String password){
String msg="你好，你的账号："+name+",你的密码"+password;
System.out.println(msg);
return msg;
}
@RequestMapping(value = "/add",produces= {"application/json;charset=UTF-8"})
private User addUser(@RequestBody User user){
System.out.println(user.toString());
return user;
}
}书本增删改查方法
package com.zking.eurekaprovider.mapper;
import com.zking.common.model.Book;
import com.zking.common.vo.BookVo;
import org.springframework.stereotype.Repository;
import java.util.List;
import java.util.Map;
@Repository
public interface BookMapper {
List<Map<String ,Object>> queryBookPager(BookVo bookVo)throws Exception;
int insert(Book record);
Book querySingleBook(Integer id);
int delBook(Integer id);
int updataBook(Book book);
}bookMapper.xml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zking.eurekaprovider.mapper.BookMapper" >
<resultMap id="BaseResultMap" type="com.zking.common.model.Book" >
<constructor >
<idArg column="id" jdbcType="INTEGER" javaType="java.lang.Integer" />
<arg column="bookname" jdbcType="VARCHAR" javaType="java.lang.String" />
<arg column="price" jdbcType="INTEGER" javaType="java.lang.Integer" />
<arg column="booktype" jdbcType="VARCHAR" javaType="java.lang.String" />
<arg column="bookimage" jdbcType="VARCHAR" javaType="java.lang.String" />
</constructor>
</resultMap>
<sql id="Base_Column_List" >
id, bookname, price, booktype, bookimage
</sql>
<update id="updataBook" parameterType="com.zking.common.model.Book">
update t_book set bookname = #{bookname},
price = #{price},
booktype=#{booktype}
where id = #{id}
</update>
<delete id="delBook" >
delete from t_book where id=#{id}
</delete>
<select id="querySingleBook" resultType="com.zking.common.model.Book">
SELECT <include refid="Base_Column_List"/> FROM t_book WHERE id=#{id}
</select>
<select id="queryBookPager" resultType="java.util.Map" parameterType="com.zking.common.vo.BookVo">
select <include refid="Base_Column_List"/> from t_book where 1=1
<if test="null!=bookname and ''!=bookname">
and bookname like concat('%',#{bookname},'%')
</if>
</select>
<insert id="insert" parameterType="com.zking.common.model.Book" >
insert into t_book (bookname,price,booktype,bookimage) VALUES (#{bookname},#{price},#{booktype},#{bookimage})
</insert>
</mapper>model实体
package com.zking.common.model;
import com.zking.common.utils.PageBean;
import lombok.Data;
import lombok.ToString;
import javax.servlet.http.HttpServletRequest;
import java.io.Serializable;
@ToString
public class Book extends PageBean implements Serializable {
private Integer id;
private String bookname;
private Integer price;
private String booktype;
private String bookimage;
public Book(Integer id, String bookname, Integer price, String booktype, String bookimage) {
this.id = id;
this.bookname = bookname;
this.price = price;
this.booktype = booktype;
this.bookimage = bookimage;
}
public Book() {
super();
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public Integer getPrice() {
return price;
}
public void setPrice(Integer price) {
this.price = price;
}
public String getBooktype() {
return booktype;
}
public void setBooktype(String booktype) {
this.booktype = booktype;
}
public String getBookimage() {
return bookimage;
}
public void setBookimage(String bookimage) {
this.bookimage = bookimage;
}
}配置自动生成
然后找到如下图的位置
在找到里面的maven 点击 然后修改Working directory:生产实体路径
Command.line:按照我给的代码敲（如图）
自动生成mapper配置
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
"http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd" >
<generatorConfiguration>
<!-- 引入配置文件 -->
<properties resource="jdbc.properties"/>
<!--指定数据库jdbc驱动jar包的位置-->
<classPathEntry location="D:\repository\mvn-repository\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>
<!-- 一个数据库一个context -->
<context id="infoGuardian">
<!-- 注释 -->
<commentGenerator>
<property name="suppressAllComments" value="true"/><!-- 是否取消注释 -->
<property name="suppressDate" value="true"/> <!-- 是否生成注释代时间戳 -->
</commentGenerator>
<!-- jdbc连接 -->
<jdbcConnection driverClass="${jdbc.driver}"
connectionURL="${jdbc.url}" userId="${jdbc.username}" password="${jdbc.password}"/>
<!-- 类型转换 -->
<javaTypeResolver>
<!-- 是否使用bigDecimal， false可自动转化以下类型（Long, Integer, Short, etc.） -->
<property name="forceBigDecimals" value="false"/>
</javaTypeResolver>
<!-- 01 指定javaBean生成的位置 -->
<!-- targetPackage：指定生成的model生成所在的包名 -->
<!-- targetProject：指定在该项目下所在的路径 -->
<javaModelGenerator targetPackage="com.zking.eurekaprovider.model"
targetProject="src/main/java">
<!-- 是否允许子包，即targetPackage.schemaName.tableName -->
<property name="enableSubPackages" value="false"/>
<!-- 是否对model添加构造函数 -->
<property name="constructorBased" value="true"/>
<!-- 是否针对string类型的字段在set的时候进行trim调用 -->
<property name="trimStrings" value="false"/>
<!-- 建立的Model对象是否 不可改变 即生成的Model对象不会有 setter方法，只有构造方法 -->
<property name="immutable" value="false"/>
</javaModelGenerator>
<!-- 02 指定sql映射文件生成的位置 -->
<sqlMapGenerator targetPackage="com.zking.eurekaprovider.mapper"
targetProject="src/main/java">
<!-- 是否允许子包，即targetPackage.schemaName.tableName -->
<property name="enableSubPackages" value="false"/>
</sqlMapGenerator>
<!-- 03 生成XxxMapper接口 -->
<!-- type="ANNOTATEDMAPPER",生成Java Model 和基于注解的Mapper对象 -->
<!-- type="MIXEDMAPPER",生成基于注解的Java Model 和相应的Mapper对象 -->
<!-- type="XMLMAPPER",生成SQLMap XML文件和独立的Mapper接口 -->
<javaClientGenerator targetPackage="com.zking.eurekaprovider.mapper"
targetProject="src/main/java" type="XMLMAPPER">
<!-- 是否在当前路径下新加一层schema,false路径com.oop.eksp.user.model， true:com.oop.eksp.user.model.[schemaName] -->
<property name="enableSubPackages" value="false"/>
</javaClientGenerator>
<!-- 配置表信息 -->
<!-- schema即为数据库名 -->
<!-- tableName为对应的数据库表 -->
<!-- domainObjectName是要生成的实体类 -->
<!-- enable*ByExample是否生成 example类 -->
<!--<table schema="" tableName="t_book" domainObjectName="Book"-->
<!--enableCountByExample="false" enableDeleteByExample="false"-->
<!--enableSelectByExample="false" enableUpdateByExample="false">-->
<!--<!– 忽略列，不生成bean 字段 –>-->
<!--<!– <ignoreColumn column="FRED" /> –>-->
<!--<!– 指定列的java数据类型 –>-->
<!--<!– <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> –>-->
<!--</table>-->
<!--<table schema="" tableName="t_book" domainObjectName="Book"-->
<!--enableCountByExample="false" enableDeleteByExample="false"-->
<!--enableSelectByExample="false" enableUpdateByExample="false">-->
<!--<!– 忽略列，不生成bean 字段 –>-->
<!--<!– <ignoreColumn column="FRED" /> –>-->
<!--<!– 指定列的java数据类型 –>-->
<!--<!– <columnOverride column="LONG_VARCHAR_FIELD" jdbcType="VARCHAR" /> –>-->
<!--</table>-->
</context>
</generatorConfiguration>jdbc配置
6.消费者配置 （pom配置）
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.zking</groupId>
<artifactId>spring-cloud01</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>eureka-consumer02</artifactId>
<packaging>pom</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>eureka-consumer02</name>
<description>消费者</description>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
</dependencies>
</project>消费者yml配置
server:
port: 7302
spring:
freemarker:
suffix: .ftl
template-loader-path: classpath:/templates
charset: UTF-8
cache: false
content-type: text/html
application:
name: eureka-consumer02
eureka:
client:
serviceUrl:
defaultZone: http://localhost:7101/eureka/
```配置一个HelloFeign的类 用来接受生产者的controller.
```java
package com.zking.eurekaconsumer02.service;
import com.zking.common.model.Book;
import com.zking.common.model.User;
import com.zking.common.vo.BookVo;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
@Service
@FeignClient("eureka-provider")//生产者服务名（yml里面的name），来自注册中心
public interface HelloFeign {
/**
* @RequestMapping("/hello/{name}")来自生产者提供的方法 与生产者里面的concroller方法同名
* @param name
* @return
*/
@RequestMapping("/hello/{name}")//与生产者里面的concroller方法同名
String test(@PathVariable("name")String name);
@RequestMapping("/bookquery")
Map<String,Object> queryBookPager( BookVo bookVo);
@RequestMapping("/")
String Toindex();
@RequestMapping("/hello2")
String Hello(@PathVariable("name") String name);
@RequestMapping(value = "/add",produces= {"application/json;charset=UTF-8"})
User addUser( User user);
@RequestMapping("/bookAdd")
Map<String,Object> bookAdd( Book book);
@RequestMapping("/delbook")
Map<String,Object> delbook( Book book);
@RequestMapping("/updateBook")
Map<String ,Object> editBook( Book book);
}controller类方法 （书本怎删改查）
@RequestMapping(value = "/bookList",produces= {"application/json;charset=UTF-8"})
public Map<String,Object> bookList(BookVo bookVo,HttpServletRequest request){
return helloFeign.queryBookPager(bookVo);
}
@RequestMapping(value = "/add",produces= {"application/json;charset=UTF-8"})
@ResponseBody
public Map<String,Object> bookAdd(@RequestBody Book book){
return helloFeign.bookAdd(book);
}
@RequestMapping(value = "/del",produces= {"application/json;charset=UTF-8"})
public Map<String,Object> delbook( Book book){
return helloFeign.delbook(book);
}
@RequestMapping(value = "/upd",produces= {"application/json;charset=UTF-8"})
@ResponseBody
public Map<String ,Object> editBook(@RequestBody Book book){
return helloFeign.editBook(book);
}7.前台配置搭建
页面搭建
<!DOCTYPE html>
<html lang="en">
<head>
<#include "../common/head.ftl"/>
<script type="text/javascript" src="js/book/bookList.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote">
<!--编辑 新增-->
<div class="layui-row" id="EditUser" style="display:none;">
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" id="updateUser" style="margin-top:20px" >
<div class="layui-form-item">
<label class="layui-form-label">ID:</label>
<div class="layui-input-block">
<input type="text" name="id" id="id" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书本名称：</label>
<div class="layui-input-block">
<input type="text" name="bookname" id="bookN" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书本价格</label>
<div class="layui-input-block">
<input type="text" name="price" id="price" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">书本类型：</label>
<div class="layui-input-block layui-form" lay-filter="selFilter">
<select name="booktype" id="booktype" lay-verify="required" >
<option value=""></option>
<option value="武侠" >武侠</option>
<option value="玄幻" >玄幻</option>
<option value="神话" >神话</option>
<option value="言情" >言情</option>
<option value="青春" >青春</option>
<option value="悬疑" >悬疑</option>
</select>
</div>
</div>
<div class="layui-form-item" style="margin-top:40px" id="check">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="formDemo" >确认修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<!--搜索维度 -->
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">书本名称：</label>
<div class="layui-input-inline">
<input type="text" id='bookname' name="bookname" lay-verify="required" placeholder="请输入书籍名" autocomplete="true" class="layui-input">
</div>
<#-- <%--<i class="layui-icon layui-anim layui-icon-search" style="font-size: 40px"></i>--%>-->
<button class="layui-btn layui-btn-normal" id="btn_search"><i class="layui-icon layui-icon-search" ></i>查询</button>
<input type="button" class="layui-btn layui-btn-checked layui-btn-radius" value="新增" id="xz">
<#--<%--<a class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新建</a>--%>-->
</div>
</div>
</blockquote>
<!--根据table id 来展示表格数据 -->
<table class="layui-hide" id="tb_booklist" lay-filter="tb_booklist"></table>
<!--行内样式按钮 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>js部分
var $,table,form,element,layer;
layui.use(['table','jquery','form','element','layer'],function(){
$=layui.$,
table=layui.table,
form=layui.form,
element=layui.element,
layer=layui.layer;
//初始化表格
initTable();
//绑定查询点击事件
$('#btn_search').click(function(){
query();
});
//新增
$('#xz').click(function () {
layer.open({
type:1,
title:"新增书本",
area:['500px','500px'],
content:$("#EditUser")
})
$("#id").val('');
$("#bookN").val('');
$("#price").val('');
$("#booktype").html('');
})
element.init();
form.render();
query();
});
function initTable(){
table.render({
id:'tb_booklist',
elem:'#tb_booklist',//表格id
loading:false,//不加载
page:false,//不分页
cols:[[
/*根据数据库的表格所对应的名称*/
{field:'id', width:120,title:'书本编号', sort: true},
{field:'bookname', width:120,title:'书本名称'},
{field:'price', width:120,title:'书本价格'},
{field:'booktype', width:120,title:'书本类型'},
, {field: 'add', title: '操作', width: 187, toolbar: "#barDemo"}
]]
});
}
function query(){
table.reload('tb_booklist',{
url:'bookList',
method:'post',
loading:true,
page:true,
where:{
//查询条件,json格式
bookname: $('#bookname').val()
},
request: {
//自定义而分页请求参数名
pageName: 'page',//页码的参数名称，默认：page
limitName: 'rows'//每页数据量的参数名，默认：limit
},
response: {
//自定义分页响应结果集
statusName: "success",//数据状态的字段名称，默认：code
statusCode: true,
msgName: 'msg', //状态信息的字段名称，默认：msg
countName: 'tatol', //数据总数的字段名称，默认：count
dataName: 'rows'//数据列表的字段名称，默认：data
},
done: function (res, curr, count) {
console.log(res);
}
})
table.on('tool(tb_booklist)',function (obj) {
var row=obj.data;
alert(row.id)
//删除
if(obj.event==='del'){
alert(row.id)
layer.confirm('真的删除吗？',function (index) {
$.ajax({
url:'del?id='+row.id,
type:'post',
contentType : "application/json;charsetset=UTF-8",
success:function (msg) {
if(msg.msg=="1"){
layer.msg("删除成功", {icon: 6});
//刷新表格
query()
setTimeout(function(){
layer.closeAll();//关闭所有的弹出层
}, 1000);
}else{
layer.msg("删除失败", {icon: 5});
}
}
})
obj.del();
layer.close(index);
})
}//编辑
else if(obj.event==='edit'){
$("#check").show();
//绑值
$("#id").val(row.id);
$("#bookN").val(row.bookname);
$("#price").val(row.price);
$("#booktype").val(row.booktype);
//渲染下拉框邦值
form.render('select','selFilter')
layer.open({
type:1,
title:"修改书本",
area:['500px','500px'],
content:$("#EditUser")
})
}
})
//确认修改
form.on('submit(formDemo)', function(data) {
if($("id").val()!='') {
$.ajax({
url: 'upd',
type: 'post',
contentType: 'application/json',
data: JSON.stringify(data.field),
success: function (msg) {
if (msg.success) {
layer.closeAll('loading');
layer.load(2);
layer.msg("修改成功", {icon: 6});
setTimeout(function () {
layer.closeAll();//关闭所有的弹出层
table.reload("book");
query();
}, 1000);
} else {
layer.msg("修改失败", {icon: 5});
}
}
})
return false;
}else{
$.ajax({
url:'add',
type:'post',
contentType:'application/json',
data:JSON.stringify(data.field),
success:function (msg) {
if(msg.success){
layer.closeAll('loading');
layer.load(2);
layer.msg("新增成功", {icon: 6});
setTimeout(function(){
layer.closeAll();//关闭所有的弹出层
table.reload("test");
//刷新表格
query()
}
, 1000);
}else{
layer.msg("新增失败", {icon: 5});
}
}
})
return false;
}
})
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
