Vue框架和前后端开发【Axios】

Axios

Axios中文说明

1. 安装依赖:npm install axios --save

axios网络请求基础

<template>
  <div class="hello">
    <h3>Hello World</h3>
    <ul>
      <li v-for="(item, index) in banner" :key="index">
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import qs from "querystring";

export default {
  name: "HelloWorld",
  data() {
    return {
      banner: [],
    };
  },
  created() {},
  mounted() {
     axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>{
       this.banner = res.data.banner
     })

     /**
      * user_id=iwen@qq.com&password=iwen123
      */
     axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
       user_id:"iwen@qq.com",
      password:"iwen123",
       verification_code:"crfvw"
     })).then(res =>{
       console.log(res.data);
     })
  },
  updated() {},
  destoryed() {},
};
</script>

axios网络请求封装

新建utils文件夹，并创建request.js

import axios from "axios"
import qs from "querystring"


/**
 * 错误信息处理函数
 */
const errorsHandle = (status,info) =>{
    switch(status){
        case 400:
            console.log("语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。")
            break;
        case 401:
            // token:令牌
            console.log("服务器认证失败")
            break;
        case 403:
            console.log("服务器已经理解请求，但是拒绝执行它");
            break;
        case 404:
            console.log("请检查网络请求地址")
            break;
        case 500:
            console.log("服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。")
            break;
        case 502:
            console.log("作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。")
            break;
        default:
            console.log(info)
            break;
    }
}


/**
 * 创建Axios的实例对象
 */
var instance = axios.create({
    timeout: 5000,
});

/**
 * 拦截器
 */

instance.interceptors.request.use(
    config =>{
        if(config.method === "post"){
            config.data = qs.stringify(config.data)
        }
        return config;
    },
    error =>{
        return Promise.reject(error);
    }
)

instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error  =>{
        const { response } = error;
        if(response){
            errorsHandle(response.status,response.info);
        }else{
            console.log("请求被中断了");
        }
    }
)

// 封装get 和 post请求

export default instance

base.js

/**
 * 存储网络请求路径
 */

const base = {
    baseUrl:"http://iwenwiki.com",                  // 公共地址
    banner:"/api/blueberrypai/getIndexBanner.php",  // 主页banner数据
    login:"/api/blueberrypai/login.php",            // 登陆地址
}

export default base;

index.js

/**
 * 提供网络请求方法 
 */

import axios from "../utils/request"
import base from "./base"

const api = {
    getBanner(){
        return axios.get(base.baseUrl + base.banner)
    },
    getLogin(params){  // params = {}
        return axios.post(base.baseUrl + base.login,params)
    }
}

export default api;

修改HelloWorld.vue页面

<template>
  <div class="hello">
    <h3>Hello World</h3>
    <ul>
      <li v-for="(item, index) in banner" :key="index">
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import api from "../api";

export default {
  name: "HelloWorld",
  data() {
    return {
      banner: [],
    };
  },
  created() {},
  mounted() {
    // axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>{
    //   this.banner = res.data.banner
    // })

    // /**
    //  * user_id=iwen@qq.com&password=iwen123
    //  */
    // axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
    //   user_id:"iwen@qq.com",
    //   password:"iwen123",
    //   verification_code:"crfvw"
    // })).then(res =>{
    //   console.log(res.data);
    // })
    api.getBanner().then((res) => {
      this.banner = res.data.banner;
    });

    api.getLogin({
      user_id: "iwen@qq.com",
      password: "iwen123",
      verification_code: "crfvw",
    }).then(res =>{
      console.log(res.data);
    }).catch(error =>{
      console.log(error);
    })
  },
  updated() {},
  destoryed() {},
};
</script>

Axios跨域解决方案

官网跨域解决方案

模拟跨域
创建文件夹server,并新建index.js

const express = require("express");
const app = express();

app.get("/list",(req,res) =>{
    res.send({
        status:200,
        result:"Hello"
    })
})

app.listen(3000,()=>{
    console.log("服务器运行在3000端口上");
})

Ctrl+C退出运行状态，安装express

 cnpm install express--save

重新启动前台

npm run serve

再开启一个终端启动后台

访问localhost:3000/list,后台访问正常

修改HelloWorld.vue

<template>
  <div class="hello">
    
  </div>
</template>

<script>

import axios from "axios"

export default {
  name: 'HelloWorld',
  mounted(){
    axios.get("http://localhost:3000/list").then(res =>{
      console.log(res.data);
    })
  }
}
</script>

解决方案

1. 后台解决

       cors解决跨域问题
       npm install cors --save
   

   
   
2. 前端解决:开发环境下跨域
   在项目的根目录下增加 vue.config.js文件，书写跨域配置

   module.exports = {
       devServer: {
           proxy: {
               '/api': {
                   target: 'http://localhost:3000/',
                   changeOrigin: true,
                   //重写路径
                   pathRewrite:{
                       '^/api':""
                   }
               }
           }
       }
   }
   

   修改HelloWorld.vue

<template>
  <div class="hello">
    
  </div>
</template>

<script>

import axios from "axios"

export default {
  name: 'HelloWorld',
  mounted(){
    axios.get("/api/list").then(res =>{
      console.log(res.data);
    })
  }
}
</script>

Vuex：Vue状态管理