1.搭建Zookeeper
2. 整体项目代码(使用分模块开发)
- 2.1. 项目pom文件
- 2.2.common(工具类模块)
- 2.2.1.pom文件
- 2.2.2.User类
- 2.2.3.UserService
- 2.2.4.CommonUtil类
- 2.2.5.PageRequest类
- 2.3.Provider(提供者)
- 2.3.1.pom文件
- 2.3.2.yml文件
- 2.3.3.spring-dubbo.xml
- 2.3.4.UserMapper
- 2.3.5.UserImpl
- 2.3.6.启动类上加入注解
- 2.4.Customer(消费者)
- 2.4.1.pom文件
- 2.4.2.yml文件
- 2.4.3.spring-dubbo.xml
- 2.4.4.UserController
- 2.4.5启动类上加入注解
- 2.5.启动项目
- 3.Vue项目搭建
- 3.1.创建一个vue项目
- 3.2.下载axios 命令: npm install axios
- 3.3.下载element组件 命令:npm i element-ui
- 3.4.加入样式
- 3.5.修改mian.js
- 3.6.创建Userlist.Vue
- 3.7.修改router下的index.js
- 3.8.启动项目 命令: npm run dev
- 4.项目源码
1.搭建Zookeeper
关于 Zookeeper 的介绍和搭建,博主写了另外一篇博文,比较简短,详情请看:
2. 整体项目代码(使用分模块开发)
2.1. 项目pom文件
<modules>
<!-- 服务消费者工程 -->
<module>customer</module>
<!-- 服务提供者工程-->
<module>provider</module>
<!-- 主要放实体、接口、也可以放一些公用的工具类工程-->
<module>common</module>
</modules>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<mybatis.starter.version>1.3.2</mybatis.starter.version>
<mapper.starter.version>2.0.2</mapper.starter.version>
<mysql.version>5.1.32</mysql.version>
<pageHelper.starter.version>1.2.5</pageHelper.starter.version>
<durid.starter.version>1.1.10</durid.starter.version>
<dubbo.version>2.5.5</dubbo.version>
<zkclient.version>0.10</zkclient.version>
<spring-boot.version>1.5.7.RELEASE</spring-boot.version>
<durid.starter.version>1.1.10</durid.starter.version>
</properties>
<dependencies>
<!-- SpringBoot整合SpringMVC的启动器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- SpringBoot整合jdbc和事务的启动器 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- mybatis启动器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis.starter.version}</version>
</dependency>
<!-- 通用Mapper启动器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>${mapper.starter.version}</version>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- 分页助手启动器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pageHelper.starter.version}</version>
</dependency>
<!-- Druid连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>${durid.starter.version}</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok-maven -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.10</version>
</dependency>
<!-- Dubbo依赖 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>dubbo</artifactId>
<version>${dubbo.version}</version>
<exclusions>
<exclusion>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--zookeeper的客户端依赖-->
<dependency>
<groupId>com.101tec</groupId>
<artifactId>zkclient</artifactId>
<version>${zkclient.version}</version>
</dependency>
</dependencies>
2.2.common(工具类模块)
2.2.1.pom文件
继承父项目
<parent>
<groupId>com.capgemini</groupId>
<artifactId>dubbospringbootzookeeper</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
2.2.2.User类
package com.capgemini.domain;
import com.fasterxml.jackson.annotation.JsonFormat;
import org.springframework.format.annotation.DateTimeFormat;
import java.io.Serializable;
import java.util.Date;
import javax.persistence.*;
/**
* Created with IntelliJ IDEA.
* User: jingtao
* Date: 2020/5/14 0028
* Time: 10:00
* Description:
*/
@Table(name = "`user`")
public class User implements Serializable {
@Id
@Column(name = "id")
@GeneratedValue(generator = "JDBC")
private Integer id;
@Column(name = "username")
private String username;
@Column(name = "age")
private Integer age;
@Column(name = "sex")
private String sex;
@Column(name = "birthday")
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
private Date birthday;
@Column(name = "phone")
private String phone;
@Transient
private String sencode;
@Transient
private String code;
public String getSencode() {
return sencode;
}
public void setSencode(String sencode) {
this.sencode = sencode;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
/**
* @return id
*/
public Integer getId() {
return id;
}
/**
* @param id
*/
public void setId(Integer id) {
this.id = id;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
/**
* @return username
*/
public String getUsername() {
return username;
}
/**
* @param username
*/
public void setUsername(String username) {
this.username = username;
}
/**
* @return age
*/
public Integer getAge() {
return age;
}
/**
* @param age
*/
public void setAge(Integer age) {
this.age = age;
}
/**
* @return sex
*/
public String getSex() {
return sex;
}
/**
* @param sex
*/
public void setSex(String sex) {
this.sex = sex;
}
/**
* @return birthday
*/
public Date getBirthday() {
return birthday;
}
/**
* @param birthday
*/
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
@Override
public String toString() {
StringBuilder sb = new StringBuilder();
sb.append(getClass().getSimpleName());
sb.append(" [");
sb.append("Hash = ").append(hashCode());
sb.append(", id=").append(id);
sb.append(", username=").append(username);
sb.append(", age=").append(age);
sb.append(", sex=").append(sex);
sb.append(", birthday=").append(birthday);
sb.append(", phone=").append(phone);
sb.append(", sencode=").append(sencode);
sb.append(", code=").append(code);
sb.append("]");
return sb.toString();
}
}
2.2.3.UserService
package com.capgemini.service;
import com.capgemini.domain.User;
import com.capgemini.vo.BaseResult;
import com.capgemini.vo.PageRequest;
/**
* @author jingtao
* @date 2020/5/13 0028 10:04
*/
public interface UserService {
//分页查询用户数据
BaseResult page(PageRequest pageRequest);
//增加数据
void addUser(User user);
//修改数据
void updateUser(User user);
//删除数据
void delUser(Integer id);
//批量删除
void delAllUser(String arr[]);
}
2.2.4.CommonUtil类
package com.capgemini.util;
public class CommonUtil {
// 常量:常量必须大写
public final static Integer SUCCESS = 1;
public static final Integer FAIL = 0;
}
BaseResult类
package com.capgemini.vo;
import java.io.Serializable;
/**
* Created by yxq on 2020/5/12.
* 返回结果的基类/父类
*/
public class BaseResult implements Serializable {
// 0 失败 1 成功
private Integer code;
// 失败原因 或者 成功的说明
private String msg;
// 数据
private Object data;
//页数
private Long total;
//姓名
private String username;
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public BaseResult() {
}
public BaseResult(Integer code, String msg) {
this.code = code;
this.msg = msg;
}
public BaseResult(Integer code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public BaseResult(Integer code, String msg, Object data, String username) {
this.code = code;
this.msg = msg;
this.data = data;
this.username = username;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
@Override
public String toString() {
return "BaseResult{" +
"code=" + code +
", msg='" + msg + '\'' +
", data=" + data +
'}';
}
}
2.2.5.PageRequest类
package com.capgemini.vo;
import java.io.Serializable;
/**
* Created by yxq on 2020/5/12.
* 工具类
*/
public class PageRequest implements Serializable {
// 页码
private Integer page;
// 每页条数
private Integer rows;
private String key;
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getRows() {
return rows;
}
public void setRows(Integer rows) {
this.rows = rows;
}
public String getKey() {
return key;
}
public void setKey(String key) {
this.key = key;
}
@Override
public String toString() {
StringBuilder sb = new StringBuilder();
sb.append(getClass().getSimpleName());
sb.append(" [");
sb.append("Hash = ").append(hashCode());
sb.append(", page=").append(page);
sb.append(", rows=").append(rows);
sb.append(", key=").append(key);
sb.append("]");
return sb.toString();
}
}
2.3.Provider(提供者)
2.3.1.pom文件
继承父项目并加入common
<parent>
<groupId>com.capgemini</groupId>
<artifactId>dubbospringbootzookeeper</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<dependency>
<groupId>com.capgemini</groupId>
<artifactId>common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
2.3.2.yml文件
server:
port: 8082
servlet:
context-path: /
spring:
datasource:
url: jdbc:mysql://localhost:3306/work?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: root
driver-class-name: com.mysql.jdbc.Driver
2.3.3.spring-dubbo.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://code.alibabatech.com/schema/dubbo
http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
<dubbo:application name="provider"/>
<!-- 注册中心的ip地址 -->
<dubbo:registry address="zookeeper://127.0.0.1:2181"/>
<!-- 扫描注解包路径,多个包用逗号分隔,不填pacakge表示扫描当前ApplicationContext中所有的类 -->
<dubbo:annotation package="service.impl"/>
<!-- use dubbo protocol to export service on port 20880 -->
<dubbo:protocol name="dubbo" port="20880"/>
<!-- service implementation, as same as regular local bean -->
<bean id="userService" class="com.capgemini.service.impl.UserImpl"/>
<!-- declare the service interface to be exported -->
<dubbo:service interface="com.capgemini.service.UserService" ref="userService"/>
</beans>
2.3.4.UserMapper
package com.capgemini.mapper;
import com.capgemini.domain.User;
@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends tk.mybatis.mapper.common.Mapper<User> {
}
2.3.5.UserImpl
package com.capgemini.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.capgemini.domain.User;
import com.capgemini.mapper.UserMapper;
import com.capgemini.service.UserService;
import com.capgemini.vo.BaseResult;
import com.capgemini.vo.PageRequest;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import tk.mybatis.mapper.entity.Example;
import java.util.List;
/**
* Created with IntelliJ IDEA.
* User: jingtao
* Date: 2020/5/14 0028
* Time: 12:44
* Description:
*/
@Service(version = "1.0.0")
public class UserImpl implements UserService {
@Autowired
private UserMapper userMapper;
//分页
@Override
public BaseResult page(PageRequest pageRequest) {
//模糊查询姓名
Example example = new Example(User.class);
if (pageRequest.getKey() != null && pageRequest.getKey() != "") {
example.createCriteria().andLike("username", "%" + pageRequest.getKey() + "%");
}
//开启分页
PageHelper.startPage(pageRequest.getPage(), pageRequest.getRows());
//查询数据
List<User> users = userMapper.selectByExample(example);
PageInfo<User> userPageInfo = new PageInfo<>(users);
//存储数据
BaseResult baseResult = new BaseResult();
baseResult.setData(userPageInfo.getList());
baseResult.setTotal(userPageInfo.getTotal());
return baseResult;
}
//添加用户
@Override
public void addUser(User user) {
userMapper.insert(user);
}
//修改用户信息
@Override
public void updateUser(User user) {
userMapper.updateByPrimaryKeySelective(user);
}
//删除用户
@Override
public void delUser(Integer id) {
userMapper.deleteByPrimaryKey(id);
}
//批量删除
@Override
public void delAllUser(String[] arr) {
for (String s : arr) {
userMapper.deleteByPrimaryKey(Integer.parseInt(s));
}
}
}
2.3.6.启动类上加入注解
package com.capgemini;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ImportResource;
@SpringBootApplication
@ImportResource({"classpath:spring-dubbo.xml"})
public class ProviderApplication {
public static void main(String[] args) {
SpringApplication.run(ProviderApplication.class, args);
}
}
2.4.Customer(消费者)
2.4.1.pom文件
继承父项目并加入common
<parent>
<groupId>com.capgemini</groupId>
<artifactId>dubbospringbootzookeeper</artifactId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<dependency>
<groupId>com.capgemini</groupId>
<artifactId>common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
2.4.2.yml文件
server:
port: 8083
spring:
datasource:
url: jdbc:mysql://localhost:3306/work?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
username: root
password: root
driver-class-name: com.mysql.jdbc.Driver
2.4.3.spring-dubbo.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://code.alibabatech.com/schema/dubbo
http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
<dubbo:application name="consumer"/>
<dubbo:registry address="zookeeper://127.0.0.1:2181"/>
<dubbo:protocol name="dubbo" port="20880"/>
<dubbo:reference id="userService" check="false" interface="com.capgemini.service.UserService"/>
<dubbo:annotation package="controller"/>
</beans>
2.4.4.UserController
package com.capgemini.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.capgemini.domain.User;
import com.capgemini.service.UserService;
import com.capgemini.util.CommonUtil;
import com.capgemini.vo.BaseResult;
import com.capgemini.vo.PageRequest;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
/**
* Created with IntelliJ IDEA.
* User: jingtao
* Date: 2020/5/13 0028
* Time: 12:45
* Description:
*/
@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {
@Resource
@Reference(version = "1.0.0")
private UserService userService;
//分页+模糊查询
@GetMapping
public ResponseEntity<BaseResult> page(PageRequest pageRequest) {
System.out.println(pageRequest);
BaseResult br = null;
br = userService.page(pageRequest);
try {
br = userService.page(pageRequest);
} catch (Exception e) {
br = new BaseResult(CommonUtil.FAIL, "查询数据失败");
}
return new ResponseEntity<>(br, HttpStatus.OK);
}
//添加用户
@PostMapping
public ResponseEntity<BaseResult> addUser(@RequestBody User user) {
BaseResult br = null;
try {
userService.addUser(user);
br = new BaseResult(CommonUtil.SUCCESS, "添加成功");
} catch (Exception e) {
br = new BaseResult(CommonUtil.FAIL, "添加失败");
}
return new ResponseEntity<>(br, HttpStatus.OK);
}
//修改用户信息
@PutMapping
public ResponseEntity<BaseResult> updateUser(@RequestBody User user) {
BaseResult br = null;
try {
userService.updateUser(user);
br = new BaseResult(CommonUtil.SUCCESS, "修改成功");
} catch (Exception e) {
br = new BaseResult(CommonUtil.FAIL, "修改失败");
}
return new ResponseEntity<>(br, HttpStatus.OK);
}
//删除用户
@DeleteMapping("/{id}")
public ResponseEntity<BaseResult> delUser(@PathVariable Integer id) {
BaseResult br = null;
try {
userService.delUser(id);
br = new BaseResult(CommonUtil.SUCCESS, "删除成功");
} catch (Exception e) {
br = new BaseResult(CommonUtil.FAIL, "删除失败");
}
return new ResponseEntity<>(br, HttpStatus.OK);
}
//批量删除用户
@DeleteMapping("/delAll/{arr}")
public ResponseEntity<BaseResult> delAllUser(@PathVariable String arr[]) {
BaseResult br = null;
try {
userService.delAllUser(arr);
br = new BaseResult(CommonUtil.SUCCESS, "批量删除成功");
} catch (Exception e) {
br = new BaseResult(CommonUtil.FAIL, "批量删除失败");
}
return new ResponseEntity<>(br, HttpStatus.OK);
}
}
2.4.5启动类上加入注解
package com.capgemini;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ImportResource;
@SpringBootApplication
@ImportResource({"classpath:spring-dubbo.xml"})
public class CustomerApplication {
public static void main(String[] args) {
SpringApplication.run(CustomerApplication.class, args);
}
}
2.5.启动项目
1.先启动Zookeeper 2.启动Provider 3.启动Customer
3.Vue项目搭建
3.1.创建一个vue项目
3.2.下载axios 命令: npm install axios
3.3.下载element组件 命令:npm i element-ui
3.4.加入样式
/*
KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
3.5.修改mian.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'
/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)
/** 导入公共样式
*/
import '@/assets/reset.css'
/**
全局引入axios
*/
import axios from "axios"
axios.defaults.baseURL = "http://localhost:8083"
axios.defaults.timeout = 3000
Vue.prototype.$http = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.6.创建Userlist.Vue
<template>
<div>
<!-- 添加-->
<el-button type="primary" @click="open()">添加</el-button>
<!--添加弹窗开始-->
<el-dialog title="添加" :visible.sync="dialogFormAdd">
<el-form :model="AddUser">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="AddUser.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="AddUser.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth">
<el-input v-model="AddUser.sex" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="生日" :label-width="formLabelWidth">
<el-date-picker
v-model="AddUser.birthday"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormAdd = false">取 消</el-button>
<el-button type="primary" @click="add()">确 定</el-button>
</div>
</el-dialog>
<!--添加弹窗结束-->
<!--添加弹窗开始-->
<el-dialog title="修改" :visible.sync="dialogFormUpdate">
<el-form :model="UpdateUser">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="UpdateUser.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="UpdateUser.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth">
<el-input v-model="UpdateUser.sex" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="生日" :label-width="formLabelWidth">
<el-date-picker
v-model="UpdateUser.birthday"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormUpdate = false">取 消</el-button>
<el-button type="primary" @click="update()">确 定</el-button>
</div>
</el-dialog>
<!--添加弹窗结束-->
<!-- 批量删除-->
<el-button type="danger" @click="delAll()">批量删除</el-button>
<!-- 搜索-->
<el-button type="success" @click="findUserList()">Search</el-button>
<el-input v-model="PageRequest.key" placeholder="请输入内容" style="width: 200px"></el-input>
<!-- 搜索-->
<el-table
ref="multipleTable"
:data="UserList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="Id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="username">
</el-table-column>
<el-table-column
label="年龄"
prop="age">
</el-table-column>
<el-table-column
label="性别"
prop="sex">
</el-table-column>
<el-table-column
label="生日"
prop="birthday">
</el-table-column>
<el-table-column
align="right">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row)">Edit
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)">Delete
</el-button>
</template>
</el-table-column>
</el-table>
<!--开启分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PageRequest.page"
:page-sizes="[2, 4, 6, 8]"
:page-size="PageRequest.rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<!--分页结束-->
</div>
</template>
<script>
export default {
name: "UserList",
data() {
return {
//用户集合
UserList: [],
//用户对象
AddUser: {},
//修改对象
UpdateUser: {},
//分页对象
PageRequest: {
page: 1,
rows: 2,
key: ""
},
//多少页
total: 0,
//删除存储的数组
multipleSelection: [],
//弹窗关闭与开启
dialogFormAdd: false,
dialogFormUpdate: false,
//样式
formLabelWidth: '120px'
}
},
methods: {
//查询所有分页
initList() {
this.$http.get("/user", {
params: this.PageRequest
}).then(res => {
this.UserList = res.data.data;
console.log(this.UserList)
//给total赋值
this.total = res.data.total
})
},
//改变每页多少条
handleSizeChange(val) {
this.PageRequest.rows = val;
//改变后从新调用显示改变后的数据
this.initList()
},
//改变那一页
handleCurrentChange(val) {
this.PageRequest.page = val;
//改变后从新调用显示改变后的数据
this.initList()
},
//获取选中多少条数据
handleSelectionChange(val) {
this.multipleSelection = val;
},
//模糊查询
findUserList() {
this.initList()
},
//打开添加框
open() {
this.AddUser = {};
this.dialogFormAdd = true
},
//添加
add() {
this.$http.post("/user", this.AddUser).then(res => {
alert(res.data.msg)
this.dialogFormAdd = false
this.initList();
})
},
//修改用户数据
update() {
this.$http.put("/user", this.UpdateUser).then(res => {
alert(res.data.msg)
this.dialogFormUpdate = false
this.initList();
})
},
//修改回显
handleEdit(row) {
this.UpdateUser = row
this.dialogFormUpdate = true
},
//删除用户
handleDelete(row) {
this.$http.delete("/user/" + row.id).then(res => {
alert(res.data.msg)
this.initList();
})
},
//删除选中用户
delAll() {
let listId = [];
for (let i in this.multipleSelection) {
listId.push(this.multipleSelection[i].id)
}
if (listId.length == 0) {
alert("未选中");
return
}
this.$http.delete("/user/delAll/" + listId).then(res => {
alert(res.data.msg)
this.initList()
})
},
},
created() {
//初始化调用查询所有分页方法
this.initList();
}
}
</script>
<style scoped>
</style>
3.7.修改router下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/UserList.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'UserList',
component: Login
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3.8.启动项目 命令: npm run dev
4.项目源码
https://gitee.com/du_jing_tao/springboot_zookeeper_dubbo_vue.git