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层接参常用方法总结
其实我是严重偏科后端的,最近才开始做一些前端内容,也会慢慢把自己踩坑过程记录下来,如果有帮助的话可以点个赞哈~
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章