欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-06 16:12:00
...

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

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

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模块

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

// 设置反向代理,前端请求默认发送到 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: 'aaa@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、再配上后端的就完成啦。。。

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

相关标签: Vue Springboot