基于网络聊天室的社交游戏 -- vueaxios

Posted 2020-09-23

前一篇系列博文的传送门：http://www.cnblogs.com/lastpairs/p/6993237.html

客户端代码github地址 https://github.com/xxyjskx1987/lastpairswebapp

服务器端代码github地址 https://github.com/xxyjskx1987/lastpairsnodeserver

项目演示地址

axios，建议在vue2.0替换resource的开发组件，用于请求资源。

安装axios

npm install axios -save

代码中引用

import axios from ‘axios‘

axios.defaults.withCredentials = true;
Vue.prototype.$http = axios;
Vue.prototype.$apidomain = ‘http://127.0.0.1:3000‘;

这里面只提出了域名，如果项目比较大可自定义api层，withCredentials属性是用于在请求中带上cookie，以实现session功能。

post请求

 

        this.$http({
          url: this.$apidomain + ‘/login‘,
          method: ‘post‘,
          data: {},
          transformRequest: [function (data) {
            // Do whatever you want to transform the data
            let ret = ‘‘
            for (let it in data) {
              ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
            }
            return ret
          }],
          headers: {
            ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
          }
        }).then(function (res) {
          console.log(res.data);
        }).catch(function (error) {
          console.log(error);
        });    

 

get请求

                    this.$http.get(this.$apidomain).then((res)=>{
                   　　　　console.log(res.data);
                  　　}).catch((err)=>{
                  　　　　console.log(err);
                  　　});