后端servlet不能处理json的情况下前端怎么发请求?qs插件将对象转成key=value形式发送给后台

qs插件

首先呢说说为啥不用json ,嗯因为…懒 因为我自己写后端我还得拿过json字符串来转成集合的形式那不如前端发请求直接给我 key=value的形式呢 怎么做呢?

下依赖

根目录下集成终端打开

npm i qs -S //回车
npm i axios -S //回车

Vue工程的配置

Vue脚手架的main.js文件,导包

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import qs from 'qs'//主要是它 
import axios from 'axios'//和它

Vue.use(elementUI)
axios.defaults.baseURL='http://localhost:8080' //从这给基本的baseURL
Vue.prototype.$http =axios
Vue.prototype.$qs = qs
Vue.config.productionTip = false;

new Vue({
    
    
  router,
  store,
  render: h => h(App)
}).$mount("#app");

看过我以前文章的知道,我以前会再建一个util文件夹里面放request再把baseURL写进去…调用的时候再在dao层拼接url发请求…当然了细腻一点总是好的,不过有些繁琐,我这里就粗糙一点写了,毕竟省事儿,

奥 再说一点 我后端服务器是tomcat 所以baseURL是8080,前端工程用的8081,至于跨域问题 前面的文章说过大家可以参考servlet解决跨域问题,后端如何跨域?

看请求怎么发

举个简单的例子 queryData()

queryData() {
    
    
      this.$http
        .post(
          "/student",
          this.$qs.stringify({
    
    
            whattodo: "list",
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            name: this.formInline.name,
            school: this.formInline.school,
          })
        )
        .then((response) => {
    
    
          this.tableData = response.data.data.rows;
          this.total = response.data.data.total;
        });
    }

哎效果就达到了,发送请求的格式是这样的

     this.$http
        .post(
          "servlet的地址",
          this.$qs.stringify({
    
    
           xxx:xxx
           xxx:xxx
           ...
           //key:value
          })
        )
        .then((response) => {
    
    
        	consol.log(response.data)
        });

总结

ok有了这个工具是不是vue代码更轻量化了呢,好吧…其实是就是懒,嘻嘻,也不怕后端不处理json了 至于后端如何处理json字符出 后面我会专门再写一篇文章 总不能让前端把活都干了吧