个人技术总结
在第一次作业“准备篇”中你为自己制定了学习路线，现在学习了怎么样了？你在团队开发中是否担任了开发角色，你在开发中解决了哪些技术问题？获得了哪些技术进展？
我在作业准备篇的学习路线是javaee，基本学习完成了，因为这学期有选javaee的选修课，除了没有从零开发一个javaee的项目以外基本完成了学习。
在开发过程中担任了前端页面开发的角色，学习了vuecli的使用，使用axios获得数据，使用js来处理获得的数据渲染到页面中，解决了axios的跨域问题。
axios技术简介
axios是基于promise用于浏览器与node.js的http服务端的一种js。
特点：
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)
详述
以用户的信息数据读取为例子
现用vue的特性设置好双向绑定的一下数据
{{username}}
{{allowance}}
{{points}}
{{profile}}
再在js里面设置好数据
data(){
return {
yes:false,
no:false,
isemptycomment:false,
thispagecomments:[],
works:{},
tableData:[],
comments:{},
workid:'',
workItem:{},
username:'',
nickname:'',
allowance:'',
points:'',
profile:'',
input:'',
}
},
在创建时运行一下函数，从服务器上获取数据，方法为post方法。再把数据交给双向绑定好的data实现渲染
getPersonInfo(){
const _this=this
const token={'access_token':window.sessionStorage.getItem('token')}
console.log('输出token')
console.log(window.sessionStorage.getItem('token'))
console.log(this.$qs.stringify(token))
this.$axios({
method: 'post',
url: '/api/user/getbyaccess',
data: this.$qs.stringify(token),
}).then(function (r) {
console.log(r)
//将用户id保存至sessionstorage
window.sessionStorage.setItem('user_id',r.data.data.id)
_this.username=r.data.data.username
_this.nickname=r.data.data.nickname
_this.allowance=r.data.data.allowance
_this.points=r.data.data.points
_this.profile=r.data.data.profile
}).catch(function (res) {
_this.$message.error('获取用户信息失败')
})
},
流程图
问题与解决
遇到了跨域问题当时花了一天的时间没有解决，最后在会议上问了组长解决的办法。
问题是：使用axios后，在浏览器的控制台里返回代码500。在网上找了很多资料最后加了一个配置文件。我们的配置代码如下，在项目的根目录的config文件夹中的index.js加这段代码。
dev: {
// Paths
assetsSubDirectory: 'static',
//yjc
/*assetsPublicPath: '/vue-peashooter/',*/
assetsPublicPath: '/',
//proxyTable: {},
//yjc
proxyTable: {
'/api': {
target:'http://129.204.247.165/',
changeOrigin:true,
pathRewrite:{
'^/api': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8181, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
总结
学习新知识要多查资料，多时间，在遇到问题时及时与团队沟通，自己的问题也许别人很早就解决了能避免浪费时间。