发表于： 2019-12-29 22:48:18

今日完成的事情

今天完成的事情是把登录页面用vue框架的形式把它实现，通过aixos取得和后端服务器的联系，存取数据实现登录的功能。在写代码的过程中实现的步骤首先是要用v-model双向绑定输入框中的值，在让我们的提交按钮绑定一个click事件，其中的方法就是我们写axios执行的地方，通过定义一个变量绑定我们要传到后端去的数据是什么，

 var op="name="+this.value[1]+"&pwd="+this.value[0]

在axios中用post指令让我们发送值相应的url中，

axios({
           url:'/api/a/login',
           method:"post",
           data:op
         })

在这个url中可以看到使用的路径是/api加我们的端口地址，这样的做法是因为我们要对这个请求做出一个跨域的动作实现跨域的方式是在config这个基础的配置文件中改写内容

module.exports = {
  devServer: {
      open: true,
      host: 'localhost',
      port: 8080,
      https: false,
      //以上的ip和端口是我们本机的;下面为需要跨域的
      proxy: {//配置跨域
          '/api': {
              target: 'http://dev.admin.carrots.ptteng.com/',//这里后台的地址模拟的;应该填写你们真实的后台接口
              ws: true,
              changOrigin: true,//允许跨域
              pathRewrite: {
                  '^/api': ''//请求的时候使用这个api就可以
              }
          }
          
      }
  }
}

在内容中可以清楚的看到我我们请求的后台地址是

'http://dev.admin.carrots.ptteng.com/'

设置它的方式是允许跨域，并让我们使用到/api的时候是来替换为我的目的地址中的内容。今天还遇到的一点内容是在写我们的条件判断的过程中，在接收到的数据做条件判断的过程中发现，不能直接写成response.code的形式，一定要将它的属性名data的内容写出来。

response.status==200

response.data.code===0

还有一个比较有问题的地方是在使用定时器的时候，首先我需要清除定时器，并让他隔三秒展示一次空的内容

 clearInterval(timer);

这个定时器时一直提醒timer这个定时器未定义而之前写登录时将timer定时器放于下方也没什么问题，

  clearInterval(timer);
                oMsg.innerHTML = resdata.message;
                timer = setTimeout(function() {
                    oMsg.innerHTML = '';
                }, 3000)