springboot+vue之处理json 数据

一、前言：springboot+vue 项目，项目用到了spring security，前端登陆时，需要传json给后端，但是spring 默认是不接受json的。

处理方式，可以在后端配置，但是我这里采用前端处理的方式。

建立一个前端工具文件，里面来处理请求和数据发送
我这里文件 apj.js

let base = ''; //定义前缀 方便信息更改

export const postKeyValueRequest = (url, params) => {
    return axios({
        method: 'post', //登陆必须为post
        url: `${base}${url}`, 登陆请求接口
        data: params, 传递的参数
        transformRequest: [(data) => {  //利用transformRequest 方法处理json
            let ret = '';
            //data里面的格式： 这种格式spring security 会出错
            //我们需要传换成 username='user'&password='123'
           // {
           //   username:'user'
           //   password:'123'
           // }
            for (let i in data) { 
                ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
            }
            console.log(ret);// username='user'&password='123'
            return ret; //ok返回即可
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
}

当然这里还可以写方法，例如，我们经常需调用请求，可以定义一个 getRequest() 方法

export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
};

怎么使用呢?
我们需要在main.js里面导入如下两行代码

import {postKeyValueRequest} from "./utils/api";
import {getRequest} from "./utils/api";
Vue.prototype.getRequest = getRequest;
Vue.prototype.postKeyValueRequest = postKeyValueRequest;

然后在login.vue组件中的methods 钩子函数中添加如下方法

submitForm(){
    this.$refs.loginForm.validate((valid) => {
        if (valid) {
            this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{ //这里的resp 里面返回就是api.js 里面处理过的
                //这里直接判断 resp 是否为空  如果为空不用处理 api里面已经处理过了，只需要处理成功的即可
                if(resp){
                    window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                    this.$router.replace('/home');//replace 方法替换当前页 为home，不可以返回，push方法则可以返回到登录页
                }
            })
        } else {
            this.$message({
                message: '请填写必要信息！',
                type: 'warning'
            });
            return false;
        }
    });

本例中使用到了 element-ui框架

二、前言：vue动态路由，处理后端返回的json数据

1，首先来看下后端的json格式：

{
      "id": 2,
      "url": "/",
      "path": "/home",
      "component": "Home",
      "name": "员工资料",
      "icon": "fa fa-user-circle-o",
      "meta": {
          "isalive": null,
          "islogin": true
      },
      "children": [
          {
              "id": 7,
              "url": null,
              "path": "/basic",
              "component": "EmpBasic",
              "name": "基本资料",
              "iconcls": null,
              "meta": {
                  "keepalive": null,
                  "requireauth": true
              },
              "children": null,
              "parentid": 2,
              "enabled": true
          },
          {
              "id": 8,
              "url": null,
              "path": "/adv",
              "component": "EmpAdv",
              "name": "高级资料",
              "iconcls": null,
              "meta": {
                  "keepalive": null,
                  "requireauth": true
              },
              "children": null,
              "parentid": 2,
              "enabled": true
          }
      ],
      "parentid": 1,
      "enabled": true
      },

很明显，这段json 数据和vue-router 里面的路由格式一致，但是有一个地方不一样 “component”: “xxx” component 在vue-router里面 它的值是一个引用 而不是字符串也就是说，“xxx” 应该是 xxx ，
那怎么处理呢？
创建一个menu.js工具类 文件

export const formatRoutes=(routes)=>{ //routes ：后端返回的菜单json数据
    let fmRoutes = [];
    routes.forEach(router=>{
        let {
            path,
            component,
            name,
            meta,
            iconCls,
            children
        } = router;
        if (children && children instanceof Array){//判断children里面是否有值
            children = formatRoutes(children)
        }
        let fmRouter = {
            path:path,
            name:name,
            iconCls:iconCls,
            meta:meta,
            children:children,
            component(resolve){
                require(['../views' + component + '.vue'],resolve);
            }
        };
        fmRoutes.push(fmRouter)
    });
    return fmRoutes;
}

ok，到此就完成了调用该方法即可.
项目学习