SpringBoot+Vue前后端分离（CURD）Demo

我发现我好久没有更新了，写一篇证明我还活着。
既然是前后端分离的话，肯定是要有前端和后端的。
这里前端我使用的Vue+ElementUI,后端采用的是SpringBoot+Mybatis+Swagger2。
下面的话，我就做一个简单的Demo吧。
写的不好，请大家各位大佬们指点

1、后端

后端的话，我是使用之前基础上面改的。EasyCode(代码神器)

1.1 pom.xml

   
        
            io.springfox
            springfox-swagger2
            2.5.0
        
        
            com.github.xiaoymin
            swagger-bootstrap-ui
            1.9.3
        

1.2 添加Swagger配置类

image.png

/**
 * Swagger2
 * 该项目访问地址：http://127.0.0.1:8089/doc.html
 * @author wangxl
 * @date 2019/8/16 20:19
 */
@Configuration
public class Swagger2 {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.vue.demo"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Vue接口测试")
                .description("简单优雅的restful风格")
                .termsOfServiceUrl("[email protected]")
                .version("1.0")
                .build();
    }
}

1.3 添加注解

image.png

• 在启动类中，需要添加一个注解

  
  
  image.png

1.4 然后启动项目

浏览器输入网址：http://127.0.0.1:8089/doc.html

image.png

• 测试完，所有的接口没有问题了，现在我们就来编写前端的界面。

2、前端

前端，我使用的是Vue+ElementUi写的，界面简洁美观。

2.1 新建一个Vue项目

这里的话，我就不多说了，直接贴上一个链接：使用webstorm来创建并且运行vue项目详细教程

2.2 前端目录：

前端目录.png

• 前端界面，我是用的是element-ui，感觉界面看起来很舒服。
  官网教程：Vue中安装element-ui

2.3 页面与配置

2.3.1 配置

解决跨域问题：
Vue中解决跨域问题，请参照这篇文章：https://segmentfault.com/a/1190000011715088

• 1.config/index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // modeify
    proxyTable: {
      //modify
      '/api/**': {
        target: 'http://127.0.0.1:8089',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,//這裡true表示实现跨域
        pathRewrite: {
          '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },

• 2.src/main.js

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

Vue.use(ElementUI)

axios.defaults.baseURL = 'http://localhost:8089/api'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

2.3.2 页面 table.vue

3、测试

• 用户列表

  
  
  用户列表展示.png

• 添加用户.

  
  
  添加用户.png

• 修改用户.

  
  
  修改用户.png

• 删除用户

  
  
  删除用户.png

• 删除成功

  
  
  删除成功.png