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

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

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

1、使用vue-cli工具生成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模块

// 设置反向代理，前端请求默认发送到 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工程