项目部署重要部分，axios二次封装，API接口统一管理

5.10 axios二次封装

目的:
1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

在项目中安装axios
pnpm i axios
在src文件下新建utils/request.ts

文件配置如下

// 进行axios的二次封装
import axios from "axios";
import { ElMessage } from "element-plus";
// 第一步：利用axios对象的create方法，去创建axios实例(其他的配置:基础路径，超时的时间)
let request=axios.create({
  // 基础路径
  baseURL:import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
  timeout:5000//超时的时间的设置
});
// 第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config)=>{
  // config配置对象，headers属性请求头，经常给服务器端携带公共参数
  // 返回配置对象
  return config
})
// 第三步：响应拦截器
request.interceptors.response.use((response)=>{
  // 成功回调
  // 简化数据
  return response.data
},(error)=>{

  // 失败回调：处理http网络问题 
  // 定义一个变量：存储网络错误信息
  let message=''
  // http状态码
  let status=error.response.status
  switch(status){
    case 401:
      message='TOKEN过期'
      break;
    case 403:
      message ='无权访问'
      break;
    case 404:
      message ='请求地址错误'
      break;
    case 500:
      message ='服务器出现问题'
      break; 
    default:
      message='网络出现问题' 
      break
  }
  // 提示错误信息
  ElMessage({
    type:'error',
    message
  })
  return Promise.reject(error)
})

// 对外暴露
export default request

测试一下封装的axios是否好用
路径在mock下的user静态路径
测试代码

import request from './utils/request';
import { onMounted } from 'vue';

// 当组件挂载完毕测试发一个请求
onMounted(()=>{
  request({
    url:'/user/login',
    method:'post',
    data:{
      username:'admin',
      password:'111111'
    }
  }).then(res=>{
    console.log(res);
    
  }).catch
})

如果成功访问，console会显示成功代码200，

如果失败则应该是路径问题
只需把多余的路径删除即可

使用请求拦截器，可以携带参数过去

5.11 API接口统一管理

一般需要在项目文件夹下新建API文件夹
src/api,有多少个页面使用到api就有多少个子文件夹

比如获取user接口数据需要进行如下操作
mock/user.ts 下的获取方式
const { username, password } = body; return { code: 200, data: { token } }
都是对象，因此type.ts类型需要写成

// 登录接口需要携带参数ts类型
export interface loginForm{
  username:String,
  password:string
}
interface dataType{
  token:string
}

// 登录接口返回数据类型
export interface loginResponseData{
  code:number,
  data:dataType
}
interface userInfo{
  userId:number,
  avatar:string,
  username:string,
  password:string,
  desc:string,
  roles:string[],
  buttons:string[],
  routes:string[],
  token:string
}
interface user{
  checkUser:userInfo
}
// 定义服务器返回用户信息相关的数据类型
export interface userResponseData{
  code:number,
  data:user
}

封装如下


部署完成之后需要进行测试

import { onMounted } from 'vue';
import {reqLogin} from './api/user'
onMounted(()=>{
  reqLogin({username:'admin',password:'111111'})
})

5.11 模板路由配置

安装pnpm i vue-router
src下新建文件夹router

配置如下
index.ts

// 通过vue-router插件实现模板的配置
import {createRouter,createWebHashHistory}from 'vue-router'
import { constantRoute } from './routers'
// 创建路由器
let  router =createRouter({
  // 路由模式hash
  history: createWebHashHistory(),
  routes:constantRoute,
  // 滚动行为
  scrollBehavior(){
    return{
      left:0,
      top:0
    }
  }
})
export default router

router.ts

// 对外暴露配置路由(常量路由)
export const constantRoute=[
  {
    // 登录
  path:'/login',
  component:()=>import('@/views/login/index.vue'),
  name:'login',//命名路由
  },
  {
    // 登录成功后展示数据的路由
    path:'/',
    component:()=>import('@/views/home/index.vue'),
    name:'layout'
  },
  {
    // 404
    path:'/404',
    component:()=>import('@/views/404/index.vue'),
    name:'404'
  },
  {
    path:'/:pathMatch(.*)*',
    redirect:'/404',//重定向redirect
    name:'Any'
  }
]

配置完毕之后需要在main.ts中引入路由，并注册

// 引入路由
import router from './router'
// 注册模板路由
app.use(router)

成功之后重启项目测试是否完成路由配置
默认路径 /

登录路径 login


报错路由 404

未知路径 重定向404