一个vue-springboot前后端分离简单的员工增删改查练手demo
前端技术栈：vue+axios+element-ui
后端技术栈：springboot+mybatis+druid+pagehelper+redis

vue+springboot练手demo（一）——环境搭建
 vue+springboot练手demo（二）——查询功能的实现
 vue+springboot练手demo（三）——删除功能的实现
 vue+springboot练手demo（四）——新增和修改功能的实现
 vue+springboot练手demo（五）——校验功能
 vue+springboot练手demo（六）——Swagger、Druid监控和日志

后端环境搭建

创建数据库

CREATE TABLE `dept` (
  `d_id` int(4) NOT NULL AUTO_INCREMENT,
  `d_name` varchar(50) NOT NULL,
  PRIMARY KEY (`d_id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8

CREATE TABLE `emps` (
  `e_id` int(11) NOT NULL AUTO_INCREMENT,
  `e_name` varchar(50) NOT NULL,
  `e_email` varchar(50) NOT NULL,
  `e_sex` char(4) NOT NULL,
  `e_phone` char(11) NOT NULL,
  `e_date` varchar(20) NOT NULL,
  `d_id` int(4) DEFAULT NULL,
  PRIMARY KEY (`e_id`),
  KEY `e_d` (`d_id`),
  CONSTRAINT `e_d` FOREIGN KEY (`d_id`) REFERENCES `dept` (`d_id`)
) ENGINE=InnoDB AUTO_INCREMENT=63 DEFAULT CHARSET=utf8

添加依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.12</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
    </dependencies>

编写配置文件

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/company?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    username: root
    password: 123456
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    #初始化时建立物理连接的个数。
    initialSize: 5
    #最小连接池数量
    minIdle: 5
    #最大连接池数量
    maxActive: 20
    #获取连接时最大等待时间，单位毫秒
    maxWait: 60000
    #配置检测可以关闭的空闲连接间隔时间
    timeBetweenEvictionRunsMillis: 60000
    # 配置连接在池中的最小生存时间
    minEvictableIdleTimeMillis: 300000
    #   检测连接是否有效得select语句。
    #   如果validationQuery为null，testOnBorrow、testOnReturn、testWhileIdle都不会其作用
    validationQuery: SELECT 1 FROM DUAL
    #  建议配置为true，不影响性能，并且保证安全性。申请连接的时候检测，
    #   如果空闲时间大于timeBetweenEvictionRunsMillis，执行validationQuery检测连接是否有效。
    testWhileIdle: true
    #   申请连接时执行validationQuery检测连接是否有效，做了这个配置会降低性能。
    testOnBorrow: false
    #   归还连接时执行validationQuery检测连接是否有效，做了这个配置会降低性能
    testOnReturn: false
    #是否缓存preparedStatement，也就是PSCache。PSCache对支持游标的数据库性能提升巨大，比如说oracle。在mysql下建议关闭。
    poolPreparedStatements: false
    #   指定每个连接上PSCache的大小
    maxPoolPreparedStatementPerConnectionSize: 20
    #   配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    #   stat   监控统计,logback   日志,wall    防御sql注入
    filters: stat,wall,slf4j
    #   合并多个DruidDataSource的监控数据
    useGlobalDataSourceStat: true
    #    SQL合并配置mergeSql=true
    #        当你程序中存在没有参数化的sql执行时，sql统计的效果会不好。比如：
    #        select * from t where id = 1 select * from t where id = 2 select * from t where id = 3
    #        在统计中，显示为3条sql，这不是我们希望要的效果。StatFilter提供合并的功能，能够将这3个SQL合并为如下的SQL。
    #        select * from t where id = ?
    #   lowSqlMillis用来配置SQL慢的标准，执行时间超过slowSqlMillis的就是慢
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql
logging:
  level:
    com.feng.employees.dao: debug
    com.feng.employees.controller: info
mybatis:
  type-aliases-package: com.feng.employees.entity
  mapper-locations: classpath:mapper/*.xml
  configuration:
    #驼峰命名
    map-underscore-to-camel-case: true

编写统一json返回类

public class Msg {
    private int code;//状态码100---成功，200---失败
    private String msg;//提示信息
    //用户要返回给浏览器的数据
    private Map<String, Object> extend = new HashMap<String, Object>();
    public static Msg success() {
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功");
        return result;
    }
    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理失败");
        return result;
    }
    public Msg add(String key, Object value) {
        this.getExtend().put(key, value);
        return this;
    }
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Map<String, Object> getExtend() {
        return extend;
    }
    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }
}

后端环境暂时搭建完成！

前端环境搭建

通过脚手架创建项目

通过vue-cli创建项目,vue init webpack 项目名

1-1 创建vue项目.PNG

引入axios

引入axios，npm install axios

1-2 引入axios.PNG

再main.js中添加

import axios from 'axios';
axios.defaults.baseURL = "http://localhost:8080"
Vue.prototype.$http = axios

引入element-ui

引入element-ui，npm i element-ui -S

1-3 引入element-ui.PNG

在main.js中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

完整的main.js文件如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);
axios.defaults.baseURL = "http://localhost:8081"
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

搭建主页

主页暂时先由一个表格和一个分页条组成，直接从elemen-ui官网选择喜欢样式的拷贝过来即可！下面是我搭建的简单页面，并添加一条数据查看效果。

<template>
  <div>
    <h1 align="center" style="margin-top: 1%">职工信息</h1>
    <el-row style="margin-top: 2%">
      <el-col :span="16" :offset="5">
        <el-input type="text" placeholder="请输入姓名的关键字进行查找" style="width: 40%" v-model="searchname">
          <el-button slot="append" icon="el-icon-search" @click="SearchEmps"></el-button>
        </el-input>
        <el-button icon="el-icon-circle-plus-outline" type="primary" style="margin-left: 10px" round
                   @click="addEmpBtn = true">添加员工
        </el-button>
        <el-button icon="el-icon-circle-plus-outline" type="danger" style="margin-left: 10px" round
                   @click="DelEmpBtn">删除员工
        </el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 2%">
      <el-col :span="16" :offset="4">
        <el-table
          ref="multipleTable"
          :data="EmpsInfo"
          tooltip-effect="dark"
          style="width: 100%"
          border>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="eId"
            v-if="false"
            v-model="checked"
          >
          </el-table-column>
          <el-table-column
            prop="eName"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="eEmail"
            label="邮箱"
            width="220">
          </el-table-column>
          <el-table-column
            prop="eSex"
            label="性别"
            width="80">
          </el-table-column>
          <el-table-column
            prop="ePhone"
            label="手机号"
            width="220">
          </el-table-column>
          <el-table-column
            prop="eDate"
            label="出生日期"
            width="120">
          </el-table-column>
          <el-table-column
            prop="deptList"
            label="部门"
            width="100">
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button round
                         size="small"
                         type="primary"
                         icon="el-icon-edit"
                         @click="EditEmp(scope.row.eId)"
              >编辑
              </el-button>
              <el-popconfirm
                confirmButtonText='好的'
                cancelButtonText='不用了'
                icon="el-icon-info"
                iconColor="red"
                title="确定要删除当前用户吗？"
                @onConfirm="DelEmpById(scope.row.eId)"
              >
                <el-button type="danger" icon="el-icon-delete" size="small"
                           slot="reference" round>删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-col :span="7" :offset="16">
        <el-pagination
          @current-change="findPage"
          background
          layout="prev, pager, next"
          :current-page="currentpage"
          :total=total>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      total: null,
      currentpage: null,
      endpage: null,
      EmpsInfo:[
        {
          eId: "1",
          eName: "张三",
          eEmail: "feng@qq.com",
          eSex: "男",
          ePhone: "1532631563",
          eDate: "1997-06-05",
          deptList: "技术部"
        }
      ]
    }
  },
  methods: {
    findPage(){
    },
    EditEmp(id){
    },
    DelEmpById(id){
    },
    SearchEmps(){
    },
    DelEmpBtn(){
    },
  }
}
</script>
<style>
</style>

在控制台输入npm start，访问页面。

1-4 测试.PNG

vue+springboot练手demo（一）——环境搭建

目录