一、如何封装网络请求

1.新建项目

vue create item_1

2.src下新建文件config.js

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

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

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

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

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

process.env

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

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

npm install axios

新建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;

新建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'})
}

渲染ui

  async mounted() {let result = await getBannerData();console.log(result);let results = await getTabData();console.log(results);}

二、如何解决跨域问题

同源策略
 同源策略是一种约定，由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')
})

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

const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: {'/api': {target: 'http://localhost:3000', //这里填入你要请求的接口的前缀ws: true, //代理websockedchangeOrigin: true, //虚拟的站点需要更换originsecure: true, //是否https接口，我用的http但是我变成false他打包后会报错，所以先truepathRewrite: {'^/api': '' //重写路径}}}}
})

谷歌浏览器设置跨域

如何使用mock模拟后端数据

npm install mockjs

新建mock.js

// 使用 Mock
var Mock = require('mockjs')
//请求延迟
Mock.setup({timeout:1000
})
Mock.mock('/api/tabBarData',{"username":"凌霄","age":10
})

main文件中引入

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

使用rem

(function() {function resize() {//设计稿的宽度是750px 设计稿的100px相当于1rem 屏幕宽度相当于7.5remvar 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)
}())

gitHub源码