目录
封装 - request.js
步骤:
-
在
utils
下创建一个文件request.js
-
在
reqeust.js
中-
导入
axios
-
设置
axios
的基地址 -
设置
axios
拦截器 -
将
axios
暴露出去
-
-
在需要使用的页面中导入
fetch
//导入 axios
import axios from 'axios'
// 创建一个axios实例
// axios.create:创建一个新的 axios 实例,它的作用与 axios相同,也是用来发送网络请求的
const _fetch = axios.create({
//设置基地址
baseURL: process.env.VUE_APP_URL
})
// 添加请求拦截器
_fetch.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
// config :所有请求发送时的配置信息
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
//添加响应拦截器
_fetch.interceptors.response.use(
function (response) {
// 对响应数据做些什么
// response:所有服务器响应回来的数据
// 如果想要得到响应体中的数据必须要通过 response.data
return response.data
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
//将 _fetch 暴露给外界
export default _fetch
封装 - 将所有的网络请求进行统一封装
步骤:
-
在
api
下创建一个文件login.js
-
login.js
文件的作用:用来管理所有与登录相关的网络请求
-
-
在
login.js
中-
导入
fetch
-
封装网络请求
-
封装 - localstorage 的操作
将服务器返回的 token 保存到 localstorage 中,而 localstroage 的操作非常频繁,最好单独封装为一个模块
步骤:
-
1.0 在
utils
下面添加文件:local.js
-
2.0 在文件中封装操作
localstorage
的方法-
getlocal:添加
localstorage
-
setlocal:获取
localstorage
-
removelocal:删除
localstorage
-
// 封装 - localstorage 的操作
// 将服务器返回的 token 保存到 localstorage 中
// setlocal:获取localstorage
export function setlocal (key, value) {
window.localStorage.setItem(key, value)
}
// getlocal:添加 localstorage
export function getlocal (key, value) {
return window.localStorage.getItem(key, value)
}
// removelocal:删除localstorage
export function removelocal (key) {
window.localStorage.removeItem(key)
}
-
3.0 登录提交参数之后,将返回数据中的 jwt保存到
localstorage
中
// 保存jwt(token)
setlocal('heimamm_web_token', res.data.jwt)
补充 - 使用系统文件启动项目
说明:
-
每次启动服务器都需要:
-
在服务器目录下打开 CMD
-
输入指令:
npm run develop
-
-
太麻烦了
简化:
-
在服务器的根目录下创建一个文件:
start.txt
-
打开
.txt
文件添加指令:npm run develop