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

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

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

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

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

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