---

VBlog项目代码理解之前后端交互

资源

项目地址
前端代码理解
后端代码理解
推荐：整个项目几乎是只用到了SpringBoot、Vue、Mybatis、ElementUI，没有用到Redis、RabbitMQ等内容，很适合刚学完SpringBoot和Vue的同学练手，感谢作者！帮作者打个广告吧~

PS：这是本人第一个学习的项目，难免会有错误的地方，哪里有问题烦请指正，感谢！

---

前后端交互

跨域：使用前端的config/index.js来解决开发时的跨域问题。

权限验证：使用Spring Security来做权限验证。

其他依赖：使用了mavon-editor和vue-echarts，这个包都在package.json表示了，直接安装就行。

使用与二次开发：
这个项目是把Vue资源都整合到了SpringBoot中，运行npm run build来将前端资源打包，vueblog目录下生成一个dist文件夹，将该文件夹中的两个文件static和index.html拷贝到SpringBoot项目中resources/static/目录下，就可以直接访问了。
二次开发的时候要使用Vue，设置了端口转发（是在config/index.js中），可以与Springboot联动，开发完了重新build再打包到SpringBoot中。

前后端分离特点：
后端controller全都是@RestController，只负责返回结果，跳转都被前端Vue负责了。

交互方法：
通过使用这些内容来与后端的Controller交互，传递参数过去，然后前端用then接收后端输出的RespBean类结果。

import axios from 'axios'
// base意义是啥
let base = '';
// 这些要在component用到的时候import
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      // 这边就是参数传递的标准表达式了
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`
  });
}
export const getRequest = (url,params) => {
  return axios({
    method: 'get',
    data:params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    url: `${base}${url}`
  });
}

前端例子：

      enabledChange(enabled, id, index){
        var _this = this;
        _this.cardloading.splice(index, 1, true)
        putRequest("/admin/user/enabled", {enabled: enabled, uid: id}).then(resp=> {
          if (resp.status != 200) {
            _this.$message({type: 'error', message: '更新失败!'})
            _this.loadOneUserById(id, index);
            return;
          }
          _this.cardloading.splice(index, 1, false)
          _this.$message({type: 'success', message: '更新成功!'})
        }, resp=> {
          _this.$message({type: 'error', message: '更新失败!'})
          _this.loadOneUserById(id, index);
        });
      },

后端例子：

    @RequestMapping(value = "/user/enabled", method = RequestMethod.PUT)
    public RespBean updateUserEnabled(Boolean enabled, Long uid) {
        if (userService.updateUserEnabled(enabled, uid) == 1) {
            return new RespBean("success", "更新成功!");
        } else {
            return new RespBean("error", "更新失败!");
        }
    }

RespBean类：

package org.sang.bean;

/**
 * Created by sang on 2017/12/17.
 */
public class RespBean {
    private String status;
    private String msg;

    public RespBean() {
    }

    public RespBean(String status, String msg) {

        this.status = status;
        this.msg = msg;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}