1.先建立一pom個項目
2.在pom項目下面在建立三個子項目
注冊中心pom.xml
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>cn.ps</groupId>
<artifactId>SPRINGCLOUD</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>SPRINGCLOUD_CRETER</artifactId>
<dependencies>
<!-- 引入注冊中心 -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
</dependency>
</dependencies>
<!-- 不加此依賴打出來的jar包不可用,因為沒有第三方面的包 -->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
注冊中心main方法
package cn.ps;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.cloud.netflix.eureka.server.EnableEurekaServer;
@SpringBootApplication
@EnableEurekaServer
public class CenterController {
public static void main(String[] args) {
new SpringApplicationBuilder(CenterController.class).web(true).run(args);
}
}
注冊中心application.yml檔案
server:
#注冊中心端口号
port: 8761
eureka:
instance:
#本機ip位址
hostname: localhost
#将來注冊到注冊中心的微服務包括注冊中心都是用ip位址
preferIpAddress: true
client:
#是否注冊到注冊中心 注冊中心自己不需要注冊
registerWithEureka: false
#是否抓取注冊中心的注冊資訊
fetchRegistry: false
serviceUrl:
#是微服務和用戶端用來注冊和發現的位址
defaultZone: http://${eureka.instance.hostname}:${server.port}/eureka/
Service微服務pom.xml
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>cn.ps</groupId>
<artifactId>SPRINGCLOUD</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>SPRINGCLOUD_SERVICE</artifactId>
<dependencies>
<!-- 引入微服務 -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-eureka</artifactId>
</dependency>
<!-- 引入mysql驅動 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- 引入資料源 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!-- 引入mybatis-plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.0.5</version>
</dependency>
<!-- 引入分頁插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
<!-- 引入小辣椒 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
</project>
入口ServiceMain
package cn.ps;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
import org.springframework.cloud.netflix.feign.EnableFeignClients;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
@EnableEurekaClient
//啟動feign
@EnableFeignClients
@RestController
public class EmpService {
public static void main(String[] args) {
new SpringApplicationBuilder(EmpService.class).web(true).run(args);
}
}
Service微服務application.yml檔案
eureka:
instance:
#将來注冊到注冊中心的微服務包括注冊中心都是用ip位址
preferIpAddress: true
client:
#是否注冊到注冊中心 注冊中心自己不需要注冊
registerWithEureka: true
#是否抓取注冊中心的注冊資訊
fetchRegistry: true
serviceUrl:
defaultZone: http://192.168.153.132:8761/eureka/
spring:
application:
name: empservice
datasource:
url: jdbc:mysql://localhost/unit02
username: root
password: ps123456
driver-class-name: com.mysql.jdbc.Driver
server:
port: 8899
控制層Controller
package cn.ps.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import cn.ps.entity.Emp;
import cn.ps.entity.Result;
import cn.ps.service.EmpService;
@RestController
public class EmpController {
@Autowired
EmpService es;
@GetMapping(value="/emps")
public Result queryEmp(String ename,String page,String limit) {
try {
Result queryEmp = es.queryEmp(ename, page, limit);
return queryEmp;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
@PostMapping(value="/emp")
public Result addEmp(@RequestBody Emp emp) {
Result result = new Result();
try {
es.addEmp(emp);
} catch (Exception e) {
result.setCode(1);
result.setMsg("新增出錯:"+e.getMessage());
}
return result;
}
@DeleteMapping(value="/emp/{empno}")
public Result delEmp(@PathVariable("empno") String empno) {
Result result = new Result();
try {
es.delEmp(empno);
} catch (Exception e) {
result.setCode(1);
result.setMsg("删除出錯:"+e.getMessage());
}
return result;
}
@PutMapping(value="/emp")
public Result update(@RequestBody Emp emp) {
Result result=new Result();
try{
es.update(emp);
}catch (Exception e){
result.setCode(1);
result.setMsg("修改出錯:"+e.getMessage());
}
return result;
}
}
實體類entiry
Emp
package cn.ps.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
//表名
@TableName("epm")
public class Emp {
//mysql主鍵自動生成,不加可能會報讀取逾時
@TableId(type=IdType.AUTO)
private String empno;
private String ename;
private String sal;
private String phone;
private String email;
}
Result
package cn.ps.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@NoArgsConstructor
//表名
@TableName("epm")
public class Emp {
//mysql主鍵自動生成,不加可能會報讀取逾時
@TableId(type=IdType.AUTO)
private String empno;
private String ename;
private String sal;
private String phone;
private String email;
}
自動寫sql語句Mapper
package cn.ps.mapper;
import org.apache.ibatis.annotations.Mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import cn.ps.entity.Emp;
@Mapper
public interface EmpMapper extends BaseMapper<Emp>{
}
接口實作ServiceImpl
package cn.ps.service.impl;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import cn.ps.entity.Emp;
import cn.ps.entity.Result;
import cn.ps.mapper.EmpMapper;
import cn.ps.service.EmpService;
@Service
public class EmpServiceImpl implements EmpService {
@Autowired
EmpMapper em;
@GetMapping(value="/emps")
public Result queryEmp(String ename, String page,String limit) {
if(StringUtils.isEmpty(ename)) {
ename="";
}
//拼接like查詢條件
QueryWrapper<Emp> qw=new QueryWrapper();
qw.like("ename", ename);
//目前頁數
int curPageI=Integer.parseInt(page);
//目前條數
int pageNumI=Integer.parseInt(limit);
//進行分頁和條件查詢
IPage<Emp> pageData=em.selectPage(new Page(curPageI,pageNumI), qw);
Result result =new Result();
result.setCode(0);
result.setCount((int)pageData.getTotal());
result.setData(pageData.getRecords());
return result;
}
@PostMapping(value="/emp")
public void addEmp(@RequestBody Emp emp) {
em.insert(emp);
}
@DeleteMapping(value="/emp/{empno}")
public void delEmp(@PathVariable("empno") String empno) {
em.deleteById(empno);
}
@PutMapping(value="/emp")
public void update(@RequestBody Emp emp) {
em.updateById(emp);
}
}
工具類utils
分頁掃描
package cn.ps.utils;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
//Spring boot方式
@EnableTransactionManagement
@Configuration
@MapperScan("cn.ps.controller.*.*")
public class ConfBean {
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}
View微服務pom.xml
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>cn.ps</groupId>
<artifactId>SPRINGCLOUD</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>SPRINGCLOUD_EMPVIEW</artifactId>
<dependencies>
<!-- 引入微服務 -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-eureka</artifactId>
</dependency>
<!-- 引入小辣椒 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<!-- 引入feign -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
</dependencies>
</project>
入口ViewMain
package cn.ps;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.feign.EnableFeignClients;
@SpringBootApplication
//掃描Feign
@EnableFeignClients
public class EmpView {
public static void main(String[] args) {
SpringApplication.run(EmpView.class, args);
}
}
View微服務application.yml
eureka:
instance:
#将來注冊到注冊中心的微服務包括注冊中心都是用ip位址
preferIpAddress: true
client:
#是否注冊到注冊中心 注冊中心自己不需要注冊
registerWithEureka: true
#是否抓取注冊中心的注冊資訊
fetchRegistry: true
serviceUrl:
defaultZone: http://192.168.153.132:8761/eureka/
spring:
application:
name: empview
server:
#程式入口使用80端口
port: 80
控制層Controller
package cn.ps.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
import cn.ps.entity.Emp;
import cn.ps.entity.Result;
import cn.ps.feign.EmpFeign;
@RestController
public class EmpController {
@Autowired
EmpFeign ef;
@GetMapping(value="/emps")
public Result queryEmp(String ename,String page,String limit){
Result queryEmp = ef.queryEmp(ename,page,limit);
return queryEmp;
}
@PostMapping(value="/emp")
public Result addEmp(Emp emp) {
Result result = new Result();
ef.addEmp(emp);
return result;
}
@DeleteMapping(value="/emp/{empno}")
public Result delEmp(@PathVariable("empno") String empno) {
Result result = new Result();
ef.delEmp(empno);
return result;
}
@PutMapping(value="/emp/{empno}")
public Result updEmp(@PathVariable("empno") String empno, Emp emp) throws Exception {
Result result=new Result();
emp.setEmpno(empno);
ef.update(emp);
return result;
}
}
Feign調用Service微服務的控制層
注意:必須加注解不加調用不了
package cn.ps.feign;
import org.springframework.cloud.netflix.feign.FeignClient;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import cn.ps.entity.Emp;
import cn.ps.entity.Result;
關聯Service微服務
@FeignClient(name = "EMPSERVICE")
public interface EmpFeign {
@GetMapping(value="/emps")
public Result queryEmp(@RequestParam("ename") String ename,@RequestParam("page") String page,@RequestParam("limit") String limit);
@PostMapping(value="/emp")
public void addEmp(@RequestBody Emp emp);
@DeleteMapping(value="/emp/{empno}")
public void delEmp(@PathVariable("empno") String empno);
@PutMapping(value="/emp")
public void update(@RequestBody Emp emp);
}
實體類對應Service服務的實體類可不加@TableId
前端layui
在resources下
建立一個static檔案(可以是static或者public)
在static下建立一個html放入一下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<script src="resources/layui/layui.js"></script>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
layui.use('form',function () {
var form = layui.form;
form.on('submit(myForm)', function(data){
layui.table.reload('empTable', {
url: 'emps'
,where: data.field
,page: curr = 1
});
return false;
});
form.on('submit(addForm)', function(data){
$.ajax({
url:'emp',
dataType:'json',
type:'post',
data:data.field,
success:function (da) {
if(da.code==0){
alert("新增成功");
layer.close(addWindow);
layui.table.reload('empTable', {
url: 'emps'
});
}else{
alert(da.msg);
}
}
})
return false;
});
form.on('submit(updateForm)', function(data){
data.field["_method"]="put";
$.ajax({
url:'emp/'+data.field.empno,
dataType:'json',
type:'post',
data:data.field,
success:function (da) {
if(da.code==0){
alert("修改成功");
layer.close(addWindow);
layui.table.reload('empTable', {
url: 'emps'
});
}else{
alert(da.msg);
}
}
})
return false;
});
})
layui.use('table', function(){
var table = layui.table;
//第一個執行個體
table.render({
elem: '#empTable'
,height: 312
,url: 'emps' //資料接口
,page: true //開啟分頁
,cols: [[ //表頭
{field: 'empno', title: '雇員編号', width:160, sort: true, fixed: 'left'}
,{field: 'ename', title: '名稱', width:160}
,{field: 'sal', title: '薪水', width:160}
,{field: 'email', title: '郵箱', width: 160}
,{field: 'phone', title: '手機号碼', width: 160, sort: true}
,{field: 'dle', title: '操作', width: 160, sort: true,templet: function(d){
var data = JSON.stringify(d);
return "<button onclick='empDelete("+d.empno+")' >删除</button> " +
"<button onclick=\"empUpdate(this)\" data='"+data+"' >修改</button>" ;
}}
]]
});
});
function empUpdate(_this) {
var data = JSON.parse($(_this).attr("data"));
// var source = JSON.parse(event.srcElement.getAttribute("data"));
layui.use('layer', function() {
addWindow = layer.open({
type: 1,
area:['500px','450px'],
content: $("#updateForm")
});
});
layui.form.val("updateForm",data);
}
var addWindow = null;
function empAdd() {
layui.use('layer', function() {
addWindow = layer.open({
type: 1,
area:['500px','450px'],
content: $("#addForm")
});
});
}
function empDelete(empno) {
$.ajax({
url:'emp/'+empno,
dataType:'json',
type:'post',
data:{
"_method":"delete"
},
success:function (da) {
if(da.code==0){
alert("删除成功");
layui.table.reload('empTable', {
url: 'emps'
});
}else{
alert(da.msg);
}
}
})
return false;
}
</script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-inline">
<label class="layui-form-label">雇員名稱</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="ename" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline" style="width: 100px;">
<button class="layui-btn" lay-submit lay-filter="myForm">查詢</button>
</div>
<div class="layui-input-inline" style="width: 100px;">
<a href="javascript:empAdd()" class="layui-btn" >新增</a>
</div>
</div>
</form>
<table id="empTable" lay-filter="test"></table>
</body>
</html>
<form id="addForm" class="layui-form" style="display: none" >
<div class="layui-form-item">
<label class="layui-form-label">名稱</label>
<div class="layui-input-block">
<input type="text" name="ename" lay-verify="required" placeholder="請輸入名稱" autocomplete="off" 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="sal" lay-verify="number" placeholder="請輸入薪水" autocomplete="off" 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="email" lay-verify="email" placeholder="請輸入郵箱" autocomplete="off" 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="phone" lay-verify="phone" placeholder="請輸入标題" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addForm">立即送出</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 修改 -->
<form id="updateForm" class="layui-form" lay-filter="updateForm" style="display: none" >
<input type="hidden" name="empno">
<div class="layui-form-item">
<label class="layui-form-label">名稱</label>
<div class="layui-input-block">
<input type="text" name="ename" lay-verify="required" placeholder="請輸入名稱" autocomplete="off" 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="sal" lay-verify="number" placeholder="請輸入薪水" autocomplete="off" 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="email" lay-verify="email" placeholder="請輸入郵箱" autocomplete="off" 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="phone" lay-verify="phone" placeholder="請輸入标題" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="updateForm">立即送出</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>