SpringBoot+zookeeper+Dubbo整合+前端vue页面效果展示

1.搭建Zookeeper

关于 Zookeeper 的介绍和搭建，博主写了另外一篇博文，比较简短，详情请看：
https://blog.csdn.net/qq_42990567/article/details/106230072

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.基于最新主流浏览器
维护：玉伯([email protected]), 正淳([email protected])
*/

/* 清除内外边距 */
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>
        &nbsp;
        <!--添加弹窗开始-->
        <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