Springboot+Vue 前后端分离开发用户管理系统

妖狐艹你老母 2023-07-04 12:58 16阅读 0赞

## Springboot+Vue 前后端分离开发用户管理系统 ##

前面学习了springboot 和 vue的基本使用方法，刚好这段时间也不能出门，就在家帮同学搞搞毕设（随缘接毕设。。。）顺便拿来练练手。。。先给大家分享最基本的增删改查的用户管理功能吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1][]

**后端代码参考上次springboot的博客...这边主要讲解分离前后端**

**1、使用vue-cli工具生成vue工程**

在之前vue的博客中有分享一个课程里面有讲到。。。没看的或者不会的这边也给出链接 [傻瓜式创建Vue工程][Vue] 一看就会的那种。

**2、集成后的目录因为比较简洁，需要一些配置文件 在根目录下创建vue.config.js**

module.exports = {
      devServer: {
        port: 8110, // 端口号
        proxy: { // 跨域代理
          '/api': {
            target: 'http://localhost:8111',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
      }
    
    }

**3、因为要和后端通信这边用到官方推荐的axios **

npm install --save axios 安装axios模块 其实和ajax差不多

在main.js里使用axios模块

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 2][]

// 设置反向代理，前端请求默认发送到 http://localhost:8111/
    var axios = require('axios')
    axios.defaults.baseURL = 'http://localhost:8111/api'
    // 全局注册，之后可在其他组件中通过 this.$axios 发送数据
    Vue.prototype.$axios = axios

**4、安装完后使用element做个简单的表单来获取数据**

<template>
      <div id="userTable">
        <el-table :data="tableData"
                  border
                  style="width: 100%"
                  :row-style="{height:'80px'}">
          <el-table-column prop="createTime"
                           label="创建日期"
                           width="180">
          </el-table-column>
          <el-table-column prop="username"
                           label="用户名"
                           width="180">
          </el-table-column>
          <el-table-column prop="password"
                           label="密码"
                           width="180">
          </el-table-column>
          <el-table-column prop="email"
                           label="邮箱"
                           width="200">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
    
          </el-table-column>
        </el-table>
        <div>
          <div class="pageMsg">
            <el-pagination background
                           layout="prev, pager, next"
                           :total="total"
                           :pageSize=5
                           :current-page.sync="currentPage">
            </el-pagination>
          </div>
    
          <el-dialog title="编辑用户信息"
                     width="30%"
                     :visible.sync="dialogFormVisible">
            <el-form :model="editForm"
                     status-icon
                     ref="editForm"
                     :rules="rulesEdit"
                     label-width="100px"
                     class="editForm">
              <el-form-item label="账户"
                            prop="username">
                <el-input type="text"
                          v-model="editForm.username"
                          autocomplete="off"
                          disabled></el-input>
              </el-form-item>
              <el-form-item label="密码"
                            prop="password">
                <el-input type="text"
                          v-model="editForm.password"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱"
                            prop="email">
                <el-input v-model="editForm.email"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="submitEdit('editForm')">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    
    </template>
    
    <script>
    export default {
      name: 'User',
      created () {
        this.$axios.get('/selectAllUser')
          .then(successResponse => {
            this.tableData = successResponse.data.list
            // console.log(successResponse.data.pages)
            this.total = successResponse.data.total
            // this.total = 10
          })
      },
      data () {
        // 验证Username规则
        var validateUser = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('账户不能为空'))
          } else {
            callback()
          }
        }
        // 验证Password规则
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('密码不能为空'))
          } else {
            callback()
          }
        }
    
        return {
          tableData: [],
          total: 1,
          currentPage: 1,
          dialogFormVisible: false,
          editForm: {
            username: this,
            password: '',
            email: ''
          },
          rulesEdit: {
            username: [
              { validator: validateUser, trigger: 'blur' }
            ],
            password: [
              { validator: validatePass, trigger: 'blur' }
            ],
            email: [
              // element自带的邮箱检测
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]
    
          }
    
          // tableData: [{
          //   date: '2016-05-02',
          //   username: 'admin',
          //   password: '123456',
          //   email: '123456@qq.com'
          // }]
        }
      },
      watch: {
        currentPage (newPage, oldPage) {
          console.log(newPage)
          this.exchangeCurrentPage(newPage)
        }
      },
      methods: {
        exchangeCurrentPage (newPage) {
          this.$axios.get('/selectAllUser', {
            params: {
              pageNum: newPage
            }
          })
            .then(successResponse => {
              this.tableData = successResponse.data.list
              // console.log(successResponse.data.pages)
              // this.total = successResponse.data.total
            // this.total = 10
            })
        },
        handleEdit (index, row) {
          this.dialogFormVisible = true
          this.editForm = Object.assign({}, row)
          console.log(this.editForm.username)
          // (console.log'index==' + index + '  row=' + row)
        },
        handleDelete (index, row) {
          // console.log(row.username)
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.get('/deleteUser', {
              params: {
                username: row.username
              }
            }).then(successResponse => {
              if (successResponse.data.code === 200) {
                this.exchangeCurrentPage(this.currentPage)
              }
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        submitEdit (Form) {
          this.$refs[Form].validate((valid) => {
            if (valid) {
              this.$axios
                .post('/updateUser', {
                  username: this.editForm.username,
                  password: this.editForm.password,
                  email: this.editForm.email
                })
                .then(successResponse => {
                  if (successResponse.data.code === 200) {
                    console.log('更新成功')
                    this.dialogFormVisible = false
                    this.exchangeCurrentPage(this.currentPage)
                  } else if (successResponse.data.code === 404) {
                    console.log('更新失败')
                  }
                })
                .catch(failResponse => {
                })
            }
          })
          // console.log(this.editForm.password)
        }
    
      }
    }
    </script>
    
    <style scoped>
    .pageMsg {
      margin-top: 15px;
    }
    </style>

5、再配上后端的就完成啦。。。

找个时间写个完成课程分享。。。。。

*  需要源码的小伙伴直接上github 前端vue工程 [后端springboot工程][springboot]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200211152937447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020021115295695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[Vue]: https://blog.csdn.net/wang1006008051/article/details/93506592
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200211155354113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[springboot]: https://github.com/Goodnamelzw/springboot-mybatis