Vue2学习笔记4 - 前后端数据交互

1. 安装依赖

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。所以我们先来追加依赖包axios,以及ps这两个包。另外，作为login登录，调用cookie,追加js-cookie依赖包

npm i -D axios ps js-cookie

2.建立模拟API数据

这里我们先做最简单的API数据模拟，在public目录下创建user.json文件，代码如下：

{
	“username“:"admin",
	“password“:"222222"
}

我们启动npm服务，在地址栏里输入http://localhost/user.json,如下图所示，模拟API接口就算是完成了。

3.使用axios调用接口数据

第一步：我们首先需要在main.js中加载axios模块

// step1：引入 axios
import Axios from 'axios'

// step2：把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求,
// 不需要每次都 import一下 axios了，直接使用 $axios 即可
Vue.prototype.$axios = Axios

// step3：使每次请求都会带一个 /api 前缀，本地访问的时候注释掉，跨域的时候再开启
// Axios.defaults.baseURL = '/api'

第二步：我们在login.vue中调用axios,我们在handleLogin函数中，增加一段axios请求的代码，如下：

    handleLogin: function() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$axios.get('/user.html')
          .then(response => {
            if (response.data) {
              console.log(response.data)
              alert(response.data);
            }
          }).catch(err => {
              alert('请求失败')
          })
          // this.$router.push({ path: this.redirect || '/' })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      
    },

我们验证一下，在chorme浏览器中可以看到，已经成功取到了user.json的数据

4.axios进行跨域访问配置

第一步：创建vue.config.js文件，vue.config.js文件是和package.json同目录的文件，在vue.config.js中，追加代理服务器配置。

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost', // 你请求的第三方接口，注意结尾不要带 '/'
                changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                // ws: true,
                pathRewrite: {  // 路径重写，
                    '^/api': '/api' // 替换target中的请求地址，也就是说以后你在请求 http://localhost/api 这个地址的时候直接写成 /api 即可。
                }
            }
        }
    }
}

第二步：创建跨域的接口，你可以在本地安装一个apache或nginx服务，或者干脆用npm指令另外在启动一个服务，只要确保是不同的域名或者端口，都会被认为是跨域访问。在另外的地址中，user.html中的数据，我们可以略作更改，以区分取到的数据是跨域访问的数据。我这里在本地启动了apache服务器，调用的是80端口，接口访问的路径是http://localhost/api/user.html，这里apache相关的安装，部署就做说明，这不是我们的重点，如果不懂，请自查资料。

注意：这里api的路径中，有api这个二级目录存在，所以在main.js文件中，开启Axios.defaults.baseURL=‘/api’的设定

第三步：重启npm服务，访问login地址，http://localhost:8080/#/login ,来确认是否已经切换到新的接口数据。

可以看到数据中password的值都换为111111了，说明已经调用的是跨域数据了，这里需要注意的是，有时候没有跳转过去，也可能是缓存问题，npm服务一定要重启！！！！

注意：

虽然，已经成功进行了跨域访问，但是在调试过程中，曾经想要通过注释vue.config.js中的配置，来进行自主切换跨域和非跨域之前的访问，但是总是出现问题，初步估计是npm后台服务中有缓存，会默认从缓存数据中，曾经已经把apache服务器停止，都还能继续获取到跨域数据，另外，哪怕跨域访问都配置正确了，但是本地访问也可以的情况下，始终不去进行跨域访问，只有当我更改了本地访问的文件名，导致本地访问失败了，才正确显示跨域访问的路径，所以建议本地访问和跨域访问在路径中要有所区别，以便可以正确显示跨域访问数据。

4.获取数据处理

从后台获取了数据之后，我们这里做一个数据处理尝试，为了方便直观，我们把数据反过来再赋值给input框，整个login表单绑定的是loginForm这个Json对象，为了更方便处理，我们改造一下接口数据，让数据输出也直接为Json对象，这里我用php代码来实现。上面的接口路径改为：http://localhost/api/user.php

<?php
// user.php

header('content-type:application/json');

echo json_encode([
	'username'=>'editor',
	'password' => '123456'
]);

?>

接下来改造login.vue的script脚本

  methods: {
    handleLogin: function() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$axios.get('/user.php')    // 从user.html改为user.php
          .then(response => {
            if (response.data) {
              // 确认绑定的数据源是否和输入框内的数据一致
              console.log('输入框内值：'+ JSON.stringify(this.loginForm))
              // 给绑定的数据源从新赋值
              this.loginForm = response.data
              // 查看赋值是否成功
              console.log('后台数据赋值后：'+JSON.stringify(this.loginForm))
              // 确认返回的接口数据内容
              console.log(response.data)
            }
          }).catch(err => {
              alert('请求失败')
              console.log(err)
          })
          // this.$router.push({ path: this.redirect || '/' })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      
    },
    
  },

开始启动serve，验证改造效果,从chrome的调试模式中，可以看到控制台的输出记录变更，以及页面上输入框的数据变化。可以确认数据更新成功。

注意：刚开始的时候，我打算使用this.loginForm = JSON.parse(response.data)的方式，将返回的字符串转为json对象，再赋值给绑定的数据源，但是，总是提示错误Unexpected token u in JSON at position 4，表示json数据格式错误。最终干脆用php直接输出json格式来解决。

参考资料：

https://www.cnblogs.com/l-y-h/p/11815452.html

https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

https://blog.csdn.net/wh_xmy/article/details/87705840

https://segmentfault.com/a/1190000017008697