springboot vue之處理json 資料

2021-10-02 16:38:24 字數 1666 閱讀 4178

處理方式,可以在後端配置,但是我這裡採用前端處理的方式。

建立乙個前端工具檔案,裡面來處理請求和資料傳送

我這裡檔案 apj.js

let base = ''; //定義字首 方便資訊更改

export const postkeyvaluerequest = (url, params) => $`, 登陸請求介面

data: params, 傳遞的引數

transformrequest: [(data) =>

for (let i in data)

console.log(ret);// username='user'&password='123'

return ret; //ok返回即可

}],headers:

})}

當然這裡還可以寫方法,例如,我們經常需呼叫請求,可以定義乙個 getrequest() 方法

export const getrequest = (url, params) => $`,

data: params

})};

怎麼使用呢?

我們需要在main.js裡面匯入如下兩行**

import  from "./utils/api";

import from "./utils/api";

vue.prototype.getrequest = getrequest;

vue.prototype.postkeyvaluerequest = postkeyvaluerequest;

然後在login.vue元件中的methods 鉤子函式中新增如下方法

submitform()

})} else );

return false;

}});

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

1,首先來看下後端的json格式:

,

"children": [

,"children": null,

"parentid": 2,

"enabled": true},,

"children": null,

"parentid": 2,

"enabled": true}],

"parentid": 1,

"enabled": true

},

很明顯,這段json 資料和vue-router 裡面的路由格式一致,但是有乙個地方不一樣 「component」: 「***」 component 在vue-router裡面 它的值是乙個引用 而不是字串也就是說,「***」 應該是 *** ,

那怎麼處理呢?

建立乙個menu.js工具類 檔案

export const formatroutes=(routes)=> = router;

if (children && children instanceof array)

let fmrouter =

};fmroutes.push(fmrouter)

});return fmroutes;

}

ok,到此就完成了呼叫該方法即可.

專案學習

springboot vue (跨域問題)

在後端使用spring boot。spring boot跨域非常簡單,只需書寫以下 即可。configuration public class customcorsconfiguration bean public corsfilter corsfilter spring boot應用用nginx反...

springboot vue (跨域問題)

if request method get 其中 add header access control expose headers 務必加上你請求時所帶的header。例如本例中的 token 其實是前端傳給後端過來的。如果記不得也沒有關係,瀏覽器的偵錯程式會有詳細說明。chrome firefox...

springboot vue 許可權管理系統

注意因為給了超級管理員的許可權給大家玩,所有資訊都可以操作,建議還是新建一些資訊自己隨便操作,隨意修改的話有可能改不回來 系統原始碼,可能存在一些小問題,如果需要幫助,可以加qq群 850482997 新建立的使用者密碼是 czh123,密碼重置之後也是這個 demo 前端後端 簡介該許可權管理專案...