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

我就是我 2022-12-20 03:19 282阅读 0赞

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

*  [1.搭建Zookeeper][1._Zookeeper]
 *  [2. 整体项目代码(使用分模块开发)][2.]
 *   *  [2.1. 项目pom文件][2.1. _pom]
     *  [2.2.common(工具类模块)][2.2.common]
     *   *  [2.2.1.pom文件][2.2.1.pom]
         *  [2.2.2.User类][2.2.2.User]
         *  [2.2.3.UserService][]
         *  [2.2.4.CommonUtil类][2.2.4.CommonUtil]
         *  [2.2.5.PageRequest类][2.2.5.PageRequest]
     *  [2.3.Provider(提供者)][2.3.Provider]
     *   *  [2.3.1.pom文件][2.3.1.pom]
         *  [2.3.2.yml文件][2.3.2.yml]
         *  [2.3.3.spring-dubbo.xml][]
         *  [2.3.4.UserMapper][]
         *  [2.3.5.UserImpl][]
         *  [2.3.6.启动类上加入注解][2.3.6.]
     *  [2.4.Customer(消费者)][2.4.Customer]
     *   *  [2.4.1.pom文件][2.4.1.pom]
         *  [2.4.2.yml文件][2.4.2.yml]
         *  [2.4.3.spring-dubbo.xml][]
         *  [2.4.4.UserController][]
         *  [2.4.5启动类上加入注解][2.4.5]
     *  [2.5.启动项目][2.5.]
 *  [3.Vue项目搭建][3.Vue]
 *   *  [3.1.创建一个vue项目][3.1._vue]
     *  [3.2.下载axios 命令: npm install axios][3.2._axios _ npm install axios]
     *  [3.3.下载element组件 命令:npm i element-ui][3.3._element_ _npm i element-ui]
     *  [3.4.加入样式][3.4.]
     *  [3.5.修改mian.js][3.5._mian.js]
     *  [3.6.创建Userlist.Vue][3.6._Userlist.Vue]
     *  [3.7.修改router下的index.js][3.7._router_index.js]
     *  [3.8.启动项目 命令: npm run dev][3.8._ _ npm run dev]
 *  [4.项目源码][4.]

# 1.搭建Zookeeper #

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

# 2. 整体项目代码(使用分模块开发) #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70]

## 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>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-jdbc</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>${mybatis.starter.version}</version>
            </dependency>
            
            <dependency>
                <groupId>tk.mybatis</groupId>
                <artifactId>mapper-spring-boot-starter</artifactId>
                <version>${mapper.starter.version}</version>
            </dependency>
            
            <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>
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid-spring-boot-starter</artifactId>
                <version>${durid.starter.version}</version>
            </dependency>
            
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.16.10</version>
            </dependency>
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>dubbo</artifactId>
                <version>${dubbo.version}</version>
                <exclusions>
                    <exclusion>
                        <groupId>log4j</groupId>
                        <artifactId>log4j</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            
            <dependency>
                <groupId>com.101tec</groupId>
                <artifactId>zkclient</artifactId>
                <version>${zkclient.version}</version>
            </dependency>
    
        </dependencies>

## 2.2.common(工具类模块) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 1]

### 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(提供者) ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 2][]

### 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"/>
        
        <dubbo:registry address="zookeeper://127.0.0.1:2181"/>
        
        <dubbo:annotation package="service.impl"/>
    
        
        <dubbo:protocol name="dubbo" port="20880"/>
    
        
        <bean id="userService" class="com.capgemini.service.impl.UserImpl"/>
        
        <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(消费者) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 3]

### 2.4.1.pom文件 ###

继承父项目并加入common

### 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 ###

### 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项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 4]

## 3.2.下载axios 命令: npm install axios ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 5]

## 3.3.下载element组件 命令:npm i element-ui ##

![在这里插入图片描述][20200520125910523.png]

## 3.4.加入样式 ##

![在这里插入图片描述][20200520125242135.png]

/*
    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 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 7]

# 4.项目源码 #

https://gitee.com/du\_jing\_tao/springboot\_zookeeper\_dubbo\_vue.git

[1._Zookeeper]: https://blog.csdn.net/qq_42990567/article/details/106230740#1Zookeeper_1
[2.]: https://blog.csdn.net/qq_42990567/article/details/106230740#2__6
[2.1. _pom]: https://blog.csdn.net/qq_42990567/article/details/106230740#21_pom_8
[2.2.common]: https://blog.csdn.net/qq_42990567/article/details/106230740#22common_104
[2.2.1.pom]: https://blog.csdn.net/qq_42990567/article/details/106230740#221pom_106
[2.2.2.User]: https://blog.csdn.net/qq_42990567/article/details/106230740#222User_115
[2.2.3.UserService]: https://blog.csdn.net/qq_42990567/article/details/106230740#223UserService_275
[2.2.4.CommonUtil]: https://blog.csdn.net/qq_42990567/article/details/106230740#224CommonUtil_307
[2.2.5.PageRequest]: https://blog.csdn.net/qq_42990567/article/details/106230740#225PageRequest_417
[2.3.Provider]: https://blog.csdn.net/qq_42990567/article/details/106230740#23Provider_475
[2.3.1.pom]: https://blog.csdn.net/qq_42990567/article/details/106230740#231pom_477
[2.3.2.yml]: https://blog.csdn.net/qq_42990567/article/details/106230740#232yml_492
[2.3.3.spring-dubbo.xml]: https://blog.csdn.net/qq_42990567/article/details/106230740#233springdubboxml_506
[2.3.4.UserMapper]: https://blog.csdn.net/qq_42990567/article/details/106230740#234UserMapper_533
[2.3.5.UserImpl]: https://blog.csdn.net/qq_42990567/article/details/106230740#235UserImpl_546
[2.3.6.]: https://blog.csdn.net/qq_42990567/article/details/106230740#236_626
[2.4.Customer]: https://blog.csdn.net/qq_42990567/article/details/106230740#24Customer_646
[2.4.1.pom]: https://blog.csdn.net/qq_42990567/article/details/106230740#241pom_648
[2.4.2.yml]: https://blog.csdn.net/qq_42990567/article/details/106230740#242yml_663
[2.4.3.spring-dubbo.xml]: https://blog.csdn.net/qq_42990567/article/details/106230740#243springdubboxml_676
[2.4.4.UserController]: https://blog.csdn.net/qq_42990567/article/details/106230740#244UserController_694
[2.4.5]: https://blog.csdn.net/qq_42990567/article/details/106230740#245_793
[2.5.]: https://blog.csdn.net/qq_42990567/article/details/106230740#25_814
[3.Vue]: https://blog.csdn.net/qq_42990567/article/details/106230740#3Vue_818
[3.1._vue]: https://blog.csdn.net/qq_42990567/article/details/106230740#31vue_819
[3.2._axios _ npm install axios]: https://blog.csdn.net/qq_42990567/article/details/106230740#32axios___npm_install_axios_821
[3.3._element_ _npm i element-ui]: https://blog.csdn.net/qq_42990567/article/details/106230740#33element_npm_i_elementui_823
[3.4.]: https://blog.csdn.net/qq_42990567/article/details/106230740#34_825
[3.5._mian.js]: https://blog.csdn.net/qq_42990567/article/details/106230740#35mianjs_898
[3.6._Userlist.Vue]: https://blog.csdn.net/qq_42990567/article/details/106230740#36UserlistVue_935
[3.7._router_index.js]: https://blog.csdn.net/qq_42990567/article/details/106230740#37routerindexjs_1184
[3.8._ _ npm run dev]: https://blog.csdn.net/qq_42990567/article/details/106230740#38__npm_run_dev_1210
[4.]: https://blog.csdn.net/qq_42990567/article/details/106230740#4_1213
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70]: /images/20221120/4e6ad73d2a0946daa147c69b588a85c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200520123937113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020052012390510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200520111405733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200520130816588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200520125812455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70
[20200520125910523.png]: https://img-blog.csdnimg.cn/20200520125910523.png
[20200520125242135.png]: https://img-blog.csdnimg.cn/20200520125242135.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200520130329327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200520130345266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTkwNTY3,size_16,color_FFFFFF,t_70