SpringBoot+Vue+Element-ui前后端分离(增删改查)(八)_springboot+vue+elementui前后端分离 后台用户信息增删改查

本文主要是想通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个增删改查demo，该demo以简单、方便理解的方式来记录前后端结合使用的过程，方便正式开发复杂项目时能提前整体理解流程，资源链接链接：https://pan.baidu.com/s/1xQ3R-IoGRK7KxAZEgENhUg
提取码：vase
复制这段内容后打开百度网盘手机App，操作更方便哦
demo最终实现的效果如下图:
一，后台

1. properties配置

server.port=8080
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/db01?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8&allowPublicKeyRetrieval=true
#扫描xml
mybatis.mapper-locations= classpath:mapper/*.xml
#分页
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.pageSizeZero=true
pagehelper.params=countSql
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. pom.xml依赖

 <!--web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mysql依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!--mybatis依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>
        <!--druid连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.21</version>
        </dependency>
        <!--加入分页依赖-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3. 项目结构
   
4. 实体类

public class Dept {
    private Integer deptno;
    private String dname;
    private String loc;

    @Override
    public String toString() {
        return "Dept{" +
                "deptno=" + deptno +
                ", dname='" + dname + '\'' +
                ", loc='" + loc + '\'' +
                '}';
    }

    public Integer getDeptno() {
        return deptno;
    }

    public void setDeptno(Integer deptno) {
        this.deptno = deptno;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getLoc() {
        return loc;
    }

    public void setLoc(String loc) {
        this.loc = loc;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

5. mapper接口

@Mapper
public interface DeptMapper {
    int addDept(Dept dept);
    int deleteById(Integer deptno);
    int updateDeptById(Dept dept);
    List<Dept> findAllDept(@Param("keywords") String keywords);
}
1
2
3
4
5
6
7

6. service

public interface DeptService {
    int addDept(Dept dept);
    int deleteById(Integer id);
    int updateDeptById(Dept dept);
    List<Dept> findAllDept(String keywords);
}
1
2
3
4
5
6

7. serviceimpl

@Service
public class DeptServiceImpl implements DeptService {
    @Autowired
    private DeptMapper deptMapper;
    @Override
    public int addDept(Dept dept) {
        return deptMapper.addDept(dept);
    }

    @Override
    public int deleteById(Integer id) {
        return deptMapper.deleteById(id);
    }

    @Override
    public int updateDeptById(Dept dept) {
        return deptMapper.updateDeptById(dept);
    }

    @Override
    public List<Dept> findAllDept(String keywords) {
        return deptMapper.findAllDept(keywords);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

8. controller接口

@RestController
@RequestMapping("/dept")
public class DeptController {
    @Autowired
    private DeptService deptService;

    /**
     * 分页查询
     * @param page
     * @param size
     * @param keywords
     * @return
     */
    @GetMapping("/")
    public RespPageBean findAll(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, String keywords){
        PageHelper.startPage(page, size);
        List<Dept> list = deptService.findAllDept(keywords);
        PageInfo pageInfo = new PageInfo(list);
        RespPageBean bean = new RespPageBean();
        bean.setData(pageInfo.getList());
        bean.setTotal(pageInfo.getTotal());
        return bean;
    }

    /**
     * 删除
     * @param deptno
     * @return
     */
    @DeleteMapping("/{deptno}")
    public RespBean deleteDept(@PathVariable Integer deptno){

       if(deptService.deleteById(deptno)==1){
            return RespBean.DELETE_SUCCESS;//删除成功
       }
        return RespBean.DELETE_ERROR;//删除失败
    }

    /**
     * 添加
     * @param dept
     * @return
     */
    @PostMapping("/")
    public RespBean addDept(@RequestBody Dept dept){
        if(deptService.addDept(dept)==1){
            return RespBean.ADD_SUCCESS;//添加成功
        }
        return RespBean.ADD_ERROR;//添加失败
    }

    /**
     * 更新
     * @param dept
     * @return
     */
    @PutMapping("/")
    public RespBean updateDept(@RequestBody Dept dept){
         if(deptService.updateDeptById(dept)==1){
              return RespBean.UPDATE_SUCCESS;//添加成功
           }
        return RespBean.UPDATE_ERROR;//添加失败
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

9. 还有两个帮助类

public class RespBean {
    private Integer status;
    private String msg;
    private Object obj;

    public RespBean(Integer status, String msg) {
        this.status = status;
        this.msg = msg;
    }

    public static final RespBean DELETE_SUCCESS = new RespBean(200,"删除成功");
    public static final RespBean DELETE_ERROR = new RespBean(-1,"删除失败");

    public static final RespBean ADD_SUCCESS = new RespBean(200,"添加成功");
    public static final RespBean ADD_ERROR = new RespBean(-1,"添加失败");

    public static final RespBean UPDATE_SUCCESS = new RespBean(200,"更新成功");
    public static final RespBean UPDATE_ERROR = new RespBean(-1,"更新失败");

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getObj() {
        return obj;
    }

    public void setObj(Object obj) {
        this.obj = obj;
    }

    private RespBean(Integer status, String msg, Object obj) {
        this.status = status;
        this.msg = msg;
        this.obj = obj;
    }

    private RespBean() {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

public class RespPageBean {
    private Long total;
    private List<?> data;

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

10. mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.song.mapper.DeptMapper">

<insert id="addDept" parameterType="com.song.entity.Dept">
    insert into dept(dname,loc)values (#{dname},#{loc})
</insert>

<delete id="deleteById">
    delete from dept where deptno=#{deptno}
</delete>

<update id="updateDeptById" parameterType="com.song.entity.Dept">
    update dept set dname=#{dname},loc=#{loc} where deptno=#{deptno}
</update>

<select id="findAllDept" resultType="com.song.entity.Dept" >
    select*from dept where 1=1
    <if test="keywords!=null">
        and dname like concat('%',#{keywords},'%')
    </if>
</select>
</mapper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

二 前端，首先构建vue项目
效果图



安装axiox(npm i axios)

安装element-ui

在 main.js 中写入以下内容：

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12
13

1. 项目结构
   
2. 添加vue.config配置跨域代理

//跨域代理
let proxyObj={};

proxyObj['/']={
    ws: false, //webstock
    target:'http://localhost:8080',//代理对象
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
}
//vue项目启动端口
module.exports={
    devServer:{
        host: 'localhost',
        port: 8085,
        proxy: proxyObj
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.添加api.js封装 get,put,post,delete请求

import axios from 'axios'
import {Message} from 'element-ui';

//结果拦截
axios.interceptors.response.use(success => {
    //data.msg 是后端RespBean中响应的信息
    if (success.status && success.status == -1 && success.data.status == 500) {
        Message.error({message: success.data.msg})
        return;
    }
    //data.msg 是后端RespBean中响应的信息
    if (success.data.msg) {
        Message.success({message: success.data.msg})
    }
    return success.data;
}, error => {
        //data.msg 是后端RespBean中响应的信息
        if (error.response.data.msg) {
            Message.error({message: error.response.data.msg})
        } else {
            Message.error({message: '未知错误!'})
        }
    return;
})
/**
 * post请求
 * @param url  请求地址
 * @param params 请求参数
 * @returns {AxiosPromise}
 */
export const postRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${url}`,
        data:params
    })
}
/**
 *  get请求
 * @param url  请求地址
 * @param params  请求参数
 * @returns {AxiosPromise}
 */
export const getRequest=(url,params)=>{
    return axios({
        method:'get',
        url:`${url}`,
        data:params
    })
}
/**
 * put请求
 * @param url  请求地址
 * @param params  请求参数
 * @returns {AxiosPromise}
 */
export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:`${url}`,
        data:params
    })
}
/**
 * delete请求
 * @param url  请求地址
 * @param params  请求参数
 * @returns {AxiosPromise}
 */
export const deleteRequest=(url,params)=>{
    return axios({
        method:'delete',
        url:`${url}`,
        data:params
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

4. 路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 编写页面

<template>
  <div class="home">
      <div>
          <el-input placeholder="请输入部门进行搜索，可以直接回车搜索..."
                    @clear="initAllDept"
                    prefix-icon="el-icon-search"
                    style="width: 350px;margin-right: 10px"
                    clearable
                    :clear="initAllDept"
                    v-model="keywords"
                    @keydown.enter.native="initAllDept"
          >
          </el-input>
          <el-button icon="el-icon-search" size="small" type="primary" @click="initAllDept" >
              搜索
          </el-button>
          <div style="display: flex;justify-content: space-between">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="addDept">添加部门</el-button>
          </div>
      </div>
      <!--表格开始-->
      <div style="margin-top: 8px">
      <el-table
              :data="depts"
              border
              style="width: 100%">
          <el-table-column
                  prop="deptno"
                  label="编号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="dname"
                  label="部门名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="loc"
                  label="地址">
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button size="small" @click="updateDept(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteDept(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
          <div style="display:flex;justify-content:flex-end ">
              <el-pagination
                      background
                      layout="sizes, prev, pager, next, jumper, ->, total, slot"
                      @current-change="currentChange"
                      @size-change="sizeChange"
                      :total="total">
              </el-pagination>
          </div>
      </div>
      <!--表格结束-->
      <!--弹出层开始-->
      <el-dialog
              :title="dialogTitle"
              :visible.sync="dialogVisible"
              width="50%">
          <el-form ref="form" :model="dept" label-width="80px">
              <el-form-item label="部门名称">
                  <el-input v-model="dept.dname"></el-input>
              </el-form-item>
              <el-form-item label="部门地址">
                  <el-input v-model="dept.loc"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>
      <!--弹出层结束-->
  </div>


</template>

<script>
// 导入封装的请求
import {getRequest} from "../uitls/api";
import {postRequest} from "../uitls/api";
import {putRequest} from "../uitls/api";
import {deleteRequest} from "../uitls/api";

export default {
  name: 'Home',
    data() {
        return {
            keywords:'',
            depts:[],//显示数据
            total:0,
            dialogTitle:"添加",
            dialogVisible:false,
            size:10,//分页每页10条数据
            page:1,//从第一页开始
            dept:{
                dname:'',
                loc:''
             }
        }
    },
    methods:{
       //分页
        currentChange(currentChange){
            this.page=currentChange
            this.initAllDept()
        },
        sizeChange(sizeChange){
            this.size=sizeChange
            this.initAllDept()
        },
        /**
         * /dept  请求地址
         */
        initAllDept(){
            //调用get请求
          getRequest("/dept/?keywords="+this.keywords+"&page="+this.page+"&size="+this.size).then(res=>{
              if(res){
                  this.depts=res.data
                  this.total=res.total
              }
          })
      },
        onSubmit(){
          if(this.dept.deptno){//this.dept.deptno有值就是修改，否则就是删除

              //修改
              //调用put请求
              putRequest("/dept/",this.dept).then(res=>{
                  if(res){
                      this. dialogVisible=false
                      //修改成功刷新数据
                      this.initAllDept()
                      //清空弹出层数据
                      this.dept.dname='';
                      this.dept.loc='';
                  }
              })
          }else{
              //添加
              //调用post请求
              postRequest("/dept/",this.dept).then(res=>{
                  if(res){
                      this. dialogVisible=false
                      //添加成功刷新数据
                      this.initAllDept()
                      //清空弹出层数据
                      this.dept.dname='';
                      this.dept.loc='';
                  }
              })
          }
        },
        addDept(){
            //打开弹出层
            this.dialogVisible=true
            //改变弹出成title
            this.dialogTitle="添加"
            //清空弹出层数据
            this.dept.dname='';
            this.dept.loc='';
        },
        updateDept(data){
            //填充数据  数据回显
            this.dept=data
            //打开弹出层
            this.dialogVisible=true
            //改变弹出成title
            this.dialogTitle="修改"
        },
        deleteDept(data){
            this.$confirm('此操作将永久删除【' + data.dname + '】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用delete请求
                deleteRequest("/dept/"+data.deptno).then(res=>{
                    if(res){
                        this.initAllDept()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    //初始化数据
    mounted(){
      this.initAllDept();
    }

}
</script>
<style>
    .home{
        width: 800px;
        margin: 20px auto;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

数据库字段