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

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