个人及技术总结

个人技术总结

在第一次作业“准备篇”中你为自己制定了学习路线，现在学习了怎么样了？你在团队开发中是否担任了开发角色，你在开发中解决了哪些技术问题？获得了哪些技术进展？

我在作业准备篇的学习路线是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

},

总结

学习新知识要多查资料，多时间，在遇到问题时及时与团队沟通，自己的问题也许别人很早就解决了能避免浪费时间。

参考博客与文献

axios中文说明
解决跨域问题博客
axios简单使用