Vue.js配置全局參數並向後端SpringBoot接口發Get/Post請求

先說配置,在axios發送請求的地方要加請求路徑,但是如果分散在不同的地方很明顯不好管理,我們要統一在一個路由文件管理。具體看這位大佬的文章寫得非常好:VueX(Vue狀態管理模式)

(1)npm i vuex -s
安裝管理工具,讓它來管理我們全部的請求路徑。
(2)新建一個store文件夾,新增一個index.js文件作爲我們的全部請求路徑管理文件
在這裏插入圖片描述

這裏我只是寫了請求路徑,當然也可以寫其他的全局參數,比如域名,比如區分不同環境下的不同配置參數,又或者定義一些全局常量,一些枚舉類型,統一的狀態碼…等等東西都可以放在這裏。

(3)修改main.JS文件
在這裏插入圖片描述

(4)在要使用的地方,直接按照下圖使用:
在這裏插入圖片描述

Get請求:

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

Post請求:

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

這裏的Post請求接參我用了@RequestBody,參數類型是一個POJO,所以只要參數名一樣,就自動映射進去了。
那麼有的情況下我們Post的參數並不是POJO,只是單純的JSON,怎麼接受:

(1)引入FASTJSON依賴

// 獲取參數方式7:post請求JSON數據格式,各參數名與POJO定義的字段完全不一樣, 通過HttpServletRequest獲取(需要引入fastJson依賴)
    @PostMapping("/httpServletRequest")
    public String httpServletRequest(HttpServletRequest param){
        JSONObject jsonParam = null;
        try {
            // 獲取輸入流
            BufferedReader streamReader = new BufferedReader(new InputStreamReader(param.getInputStream(), "UTF-8"));

            // 寫入數據到Stringbuilder
            StringBuilder sb = new StringBuilder();
            String line = null;
            while ((line = streamReader.readLine()) != null) {
                sb.append(line);
            }
            jsonParam = JSONObject.parseObject(sb.toString());
            // 直接將json信息打印出來
            System.out.println("轉換出來的JSON:"+jsonParam.toJSONString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "轉換出來的JSON:"+jsonParam.toJSONString();
    }

(2)在全局請求路徑配置文件新增一條:
在這裏插入圖片描述
(3)
在這裏插入圖片描述
(4)
在這裏插入圖片描述

這樣就OK啦,其實重點不在於前端如何傳,而是在於後端如何用各種方式接。請看我另外一篇博客是做得比較齊全的總結:SpringBoot在Controller層接參常用方法總結
其實我是嚴重偏科後端的,最近纔開始做一些前端內容,也會慢慢把自己踩坑過程記錄下來,如果有幫助的話可以點個贊哈~
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章