小白用vue写项目的心路历程，前后端数据交互篇

大家好，这是介绍我的项目经历的第三篇，我讲我的全部的坑和心得拿出来与大家分享，希望对大家在开发项目以及面试中介绍项目经历的时候有帮助，这一篇讲的是前后端的数据交互问题，我加入这个项目的时候，其他人已经接触这个项目半年了，他们前半年是在熟悉业务，我加入后我的后端已经写的差不多了，这就是最坑的，他不知道该给我什么样的数据，而我只接收到他给我的一整块数据，然后我拿过来处理后渲染到页面上，这里还是由于我之前组件划分的不合理导致我的js代码翻倍，我要把那一整块数据划分成若干块，分发给各个组件，然后我又要在各个组件汇总数据再发给后端，可能有不少小伙伴都有与后端对接数据时的无奈，但是他的逻辑都已经写好了，我只能硬着头皮把功能完成，光顾着吐槽了，忘了给大佬们递上vue的axios请求数据的方法了，接下来我给同学们讲一下axios，他其实是一个vue的包，用起来非常方便，他可以跨域，需要跨域的话在config文件夹中的index.js文件中修改。先把代码亮出了，看完代码我逐个讲解。

const path = require('path')

module.exports = {
dev: {

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://192.168.137.1:8081',
changeOrigin: true,
pathRewrite: {
'^/api': 'http://192.168.137.1:8081'
}
}
},

主要看’/api’对象中的值，target写上要发送数据的目标url，相信大家也看到了两个相同的值，下边那个是可以让你在调用axios的时候省去’http://192.168.137.1:8081’这段代码，直接写接口名；这个还是比较方便的。changeOrigin 是控制是否跨域，由于我还没有看axios的源码所以就不多说着一块了，感兴趣的同学在各个博客上找找，当然了也可以在我学完源码后写出博客来，来光临我的博客看一下我的土鳖式表达。上代码供各位理解我这段话。

//请求课题列表
getProList({ commit }) {
console.log(sessionStorage.getItem('id'))
axios.get(`/subjectservice/getsubbytea/${sessionStorage.getItem('id')}`).then(data => {
console.log(data)
commit('setMyProject',data.data.data.subjects);
commit('setMySpec',data.data.data.subspecs);
});
},

这个是我写在store中的actions中的方法，sessionStorage是我之前讲过的解决保存登录状态的一种手段，这是一种缓存方式，这个缓存的时间是窗口存在期间，也就是说窗口关闭sessionStorage才会被清空，当然了我们还是需要一个md5戳来加密防止角色校验码被篡改。
给大家再来点干货，在数据交互的时候以及编码的各个阶段都要一步一个脚印的写，千万不要想一步到位，我们的另一个系统的前端就是每次都想一步到位，但是每次都有若干问题，都让后端给解决，就像请求数据后不要先处理数据，先看一下这个数据的结构，然后在一步一步的处理这个数据，如果你的后端特别勤劳主动给你把数据切成块还是很舒服的。当然了这都得考虑性能，不能是怎么编码方便怎么处理，有时候后端处理比前端更耗费性能的话就需要前端把这个数据逐个分解，当然了这种情况很少，后端的处理速度还是非常快的。这节就先到这吧，下一节讲处理异步。