Vue【实战三件套】如何封装网络请求、如何解决跨域问题，如何使用mock模拟后端数据，快来一起来看看吧~

一、如何封装网络请求

1.新建项目

vue create item_1
1

2.src下新建文件config.js

什么是开发环境
在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说用户访问资源权限、服务器地址、接口地址等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。

NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境(dev-vs-prod)下，服务器工具、构建脚本和客户端 library 的行为。

if(process.env.NODE_ENV === 'development'){ 
    //开发环境 do something
}else{
    //生产环境 do something
}
1
2
3
4
5

先来看一下process和process.env的官方解释：

process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js
应用程序始终是可用的，故无需使用 require()。

process.env

process.env属性返回一个包含用户环境信息的对象。

首先配置开发环境和生产环境的地址

npm install axios
1

新建axios文件

import axios from "axios";
import config from "../../config"
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro//判断是否是开发还是生产环境
class HttpRequest{
    constructor(//构造器
        baseUrl
    ){
        this.baseUrl = baseUrl;
        this.queue = {}
    }
    interceptors(instance,url){ //拦截
        instance.interceptors.request.use(config => {
        return config;
        }),error => {
            return {
                error:"网络出错"
            };
        };
        instance.interceptors.response.use(res => {
            return res.data;
        }),error => {
            return {
                error:"网络出错"
            };
        }

    }
    getInsideConfig(){
    const config = {
        baseURL:this.baseUrl,
        header:{
        }//配置
    }
        return config;
    }
    request(options){
        const instance = axios.create();
        options = Object.assign(this.getInsideConfig(), options)//ES6合并集合
        this.interceptors(instance,options.url)
        return instance(options);
    }
}
const axiosObj = new HttpRequest(baseUrl)
export default axiosObj;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

新建data.js
传入配置参数

import axios from "../axios/axios"
export const getBannerData = ()=>{
    return axios.request({url:'banner',method:'get'})
}
export const getTabData = ()=>{
    return axios.request({url:'tabBarData',method:'get'})
}
1
2
3
4
5
6
7

渲染ui

  async mounted() {
    let result = await getBannerData();
    console.log(result);
        let results = await getTabData();
    console.log(results);
  }
1
2
3
4
5
6

二、如何解决跨域问题

同源策略
 同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
跨域
顾名思义，非同源请求就是跨域
如何解决跨域问题

三种前端跨域方法

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无需设置；若要带cookie请求：前后端都需要设置。

通过Access-Control-Allow-Origin响应头，就告诉了浏览器。如果请求我的资源的页面是我这个响应头里记录了的"源"，则不要拦截此响应，允许数据通行。

举例
node搭建简单的后台服务

let express = require('express');
let app = express();
app.use((req,res,next) => {
    res.append('Access-Control-Allow-Origin', '*');//服务器设置CORS,允许浏览器跨域
    res.append('Access-Control-Allow-Content-Type', '*');
    res.append('Access-Control-Allow-headers', '*');
    next();
})
app.get('/banner',(req,res) => {
    res.json({
        msg: '这是banner'
    })
})
app.listen(3000,() => {
    console.log('http://localhost:3000')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

代理跨域
vue3演示代理跨域
新建vue.config.js

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {

      '/api': {

        target: 'http://localhost:3000', //这里填入你要请求的接口的前缀

        ws: true, //代理websocked

        changeOrigin: true, //虚拟的站点需要更换origin

        secure: true, //是否https接口，我用的http但是我变成false他打包后会报错，所以先true

        pathRewrite: {

          '^/api': '' //重写路径

        }

      }

    }

  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

谷歌浏览器设置跨域

如何使用mock模拟后端数据

npm install mockjs
1

新建mock.js

// 使用 Mock
var Mock = require('mockjs')
//请求延迟
Mock.setup({
    timeout:1000
})
Mock.mock('/api/tabBarData',{
    "username":"凌霄",
    "age":10
})
1
2
3
4
5
6
7
8
9
10

main文件中引入

if( process.env.NODE_ENV === "development") {
     require('@/api/mock')
}
1
2
3

使用rem

(function() {
    function resize() {
        //设计稿的宽度是750px 设计稿的100px相当于1rem 屏幕宽度相当于7.5rem
        var designWidth = 750;
        var baseFontSize = 100;
        var width = window.innerWidth;
        var currrentFontSize = (width / designWidth) * 100;
        console.log(currrentFontSize)
        document.querySelector('html').style.fontSize = currrentFontSize + 'px'
    }
    window.onresize = function () {
        resize();
    }
    document.addEventListener('DOMContentLoaded', resize)
}())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

gitHub源码