最近有点烦人的问题是关于网站内部前后端联调，源头是我没注意文字发送时的格式。最近研究了下Vue，突然发现请求的方式居然有这么多种！所以今儿想分享下这期间遇到的小问题。
这破事儿让我前端上不去，后端发消息也不行。他们的接口参数绝对没问题，无论是params还是body都试过了，但就是接收不到任何信息，真可谓傻眼了！
axios.post('/api/home/login',{
params: {
username: this.username,
password: this.password
}
}).then(this.handleLoginSucc)
先说下，我猜可能是我这边的后端接口有问题，但我用Postman测试没啥事呀。咋滴？不信邪？那就说实话，我试了各种方法提交信息，还考虑到了跨域问题，结果还是不行。
// main.js配置
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8088/caeser/'
Vue.prototype.$http = axios
// 代码调用
// 设置同步方法 async
const{ data: res } await this.$http.post('users', { params: this.queryInfo })
但没啥用，发出去还是老样子，能不着急吗？
搞定！原来要用formdata这个格式噢。后来我找到一个叫qs的工具帮忙把信息转换了一下给后台，果然就收到了！
var params = new URLSearchParams()
// 参数保存
params.append('username', this.loginForm.username)
params.append('password', this.loginForm.password)
// post发送
axios.post('/api/home/login', params).then(this.handleLoginSucc)
你知道，关于浏览器把文件、数据传给服务器的事儿，其实很简单就能区分开来。主要就看它们的”content – type”字段，就能知道是用那种方式传的了：要是看到“application / x – www – form – urlencoded”，那肯定是formdata方式；而要是遇到“application / json”或者“multipart / form – data”这种情况，那就得换个策略，而是用payload来传输数据。
// 安装 // npm install url-search-params-polyfill --save
话说，你要给 Request Payload 加个 @RequestBody 的参数，这样才能把请求信息准确无误地放到 Bean 中去。记住，不能直接从 request 对象里拿请求原文，要用 request.getReader()这个方法才有效果。有时候可能会有点绕头，但是别急，慢慢来就好啦～
import 'url-search-params-polyfill';
唉原来我后端代码写得不对！原因在于我没调用request.getReader()获取请求正文，这可是误区！学Vue容易多了，上手快，语法还容易。关键要学会调试不同版和插件，别怕试。为了做出更好的前端效果，我还特意下了CSS样式文件(虽然有部分样式忘了)，新的功能我都不懂。学前端真有趣！
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });
哥们儿，听说过这样的经历没？来评论聊聊，看看大家都遇到啥了。别忘了给咱们点个赞
axios.post(url,{data:{},
headers:{content-type:'application/x-www-form-unlencoded'}
})
今天咱来聊聊后端前端一块搞事儿时候咋搞定那些小事儿，大家随便看看省得走冤枉路。没事多瞅瞅我动态还有超多好东东等着你们发现嘞~
评论0