Vue学习-基础篇9

目录

 封装 - request.js

封装 - 将所有的网络请求进行统一封装

封装 - localstorage 的操作

补充 - 使用系统文件启动项目

拦截器 - axios的config属性

全局组件

vue - 插件

补充 - vue.use

时间处理第三方包

缓存 - keep-alive

缓存 - include

缓存 - 钩子函数

动态路由传参

antv-F2 - 简单介绍

$set 基本使用

---

 封装 - 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