软件系统定制开发Axios的使用及跨域处理-巴掌软件-高性价比的软件定制开发解决方案

Axios软件系统定制开发是一个开源的、软件系统定制开发可以在浏览器端和node.js的框架，软件系统定制开发它的主要作用就是实现ajax异步通信。

axios的实现异步通信功能特点有如下几种：

从浏览器中间创建xmlhttprequest
从node.js创建http请求
支持promise api
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
客户端支持防御XSRF（跨域请求伪造）

1.1 为什么使用axios呢？

由于vue.js是一个视图层框架并且作者（尤玉溪）严格遵守（关注度分离原则），所以vue.js并不包含ajax的通信功能，为了解决通信功能，作者单独开发了一个名为vue-resource的插件，但是在2.0之后停止了对该插件的维护，并推荐了Axios框架

1.2 Axios的使用：

第一步：新建一个webpack-simple项目后，安装vue axios

npm install --save axios vue-axios

第二步：在main.js文件中对axios进行引入（在项目中使用axios模块）


import Vue from 'vue'
import App from './App.vue'
 
import axios from  'axios'
import VueAxios from  'vue-axios'
Vue.use(VueAxios,axios)
new Vue({
  el: '#app',
  render: h => h(App)
})

第三步：发送Ajax请求


  this.axios({
          method:'get',
          url:'http://localhost:8080/Ssm-demo01/regist?mail='+this.mail+'&password='+this.password,
          data:{}
        }).then(function (response) {
          console.log(response.data)
        })

第四步：在服务端处理跨域问题。处理跨域之前首先要有一个后端工程（ssm、ss）都可，这里用的是用ssm搭建的后端，后端搭建可参考。搭建好后在springmvc.xml中加入下列代码处理跨域问题

后端controller代码：


package com.xgsm.Controllers;
 
import com.xgsm.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
 
 
@Controller
@ResponseBody
public class axiosController {
    @RequestMapping(value = "regist")
    public User regist(String mail, String password){
        System.out.println(mail);
        System.out.println(password);
        User user = new User(1,"zhangsan","dsdsdss");
        return user;
    }
}

跨域问题指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，指的是浏览器对JavaScript施加的安全限制，跨域处理：


  <!--处理跨域问题-->
    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="*"
                     allowed-methods="POST, GET, PUT, DELETE, OPTIONS"
                     allowed-headers="Content-Type, Data-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Accept, DataType, responseType"
                     allow-credentials="true"
 
        />
    </mvc:cors>

第五步：在apipost中进行后端接口测试，测试成功后返回user对象

1.3 发送ajax请求的两种方式

1.3 发送get请求


  this.axios({
          method:'get',
          url:'http://localhost:8080/Ssm-demo01/regist?mail='+this.mail+'&password='+this.password,
          data:{}
        }).then(function (response) {
          console.log(response.data)
        })

1.4 发送post请求


  this.axios({
          method:'get',
          url:'http://localhost:8080/Ssm-demo01/regist,
          data:{
            mail:this.mail，
            password:this.password}
        }).then(function (response) {
          console.log(response.data)
        })