【博学谷学习记录】超强总结，用心分享 _ 前端开发 优医问诊H5项目(2)

---

二次封装axios

1. 二次封装axios

import { useUserStore } from '@/stores'
import axios from 'axios'
import { showToast } from 'vant'
// 1、axios配置
// 1.1 创建一个新的axios实例，配置基准地址，配置响应超时时间
// 1.2 添加请求拦截器，在请求头携带token
// 1.3 添加响应拦截器，401错误拦截去登录页面，判断业务是否成功，剥离无效数据
const baseURL = 'https://consult-api.itheima.net/'
const instance = axios.create({
  baseURL,
  timeout: 10000
})

instance.interceptors.request.use(
  (config) => {
    // 请求成功要执行的操作，修改config
    const store = useUserStore()
    if (store.user?.token && config.headers) {
      config.headers.Authorization = `Bearer ${store.user.token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 将来 axios.get()
// .then(res=>{ // res 就是后台的数据，之前的res.data })
// .catch(e=>{ // 200+10001这种情况，e就是res.data，如果是状态码的错误 401 403 404 ，e就是错误对象})
instance.interceptors.response.use(
  (res) => {
    // 响应成功要执行的操作
    // status 是200响应成功，res.data.code 是10000业务成功（后台成功）
    if (res.data.code !== 10000) {
      showToast(res.data.message || '网络异常')
      return Promise.reject(res.data) // 将错误信息返回，以后axios.get()请求时，可以拿到响应的错误信息
    }
    return res.data
  },
  (err) => {
    // 响应错误要执行的操作
    // 当遇到401时跳转登录：现在在/user/patient页面下，发起获取用户信息的请求，但此时token失效了，跳转登录页后，登陆成功后，需要跳转回 /user/patient 页面（默认跳转 /user页面）

    if (err.response.status === 401) {
      const store = useUserStore()
      store.delUser()
      // /user/patient?id=1000
      // path  /user/patient 不带查询参数
      // fullPath  /user/patient?id=1000f 完整路径
      router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
    }
    return Promise.reject(err)
  }
)

2. 请求工具函数

// 参数：url(请求地址) method(请求方式) submitData(提交数据:params或是data，所以要区分是get还是post)
// 返回：instance(axios)调用接口的promise对象  (利用instance发请求)
type Date<T> = {
  code: string
  message: string
  data: T
}
// axios提供类型叫Method，限制了method的类型只能是哪些值。即既可以从axios中导出js对象，也可以导出类型
const request = <T>(
  url: string,
  method: Method = 'get',
  submitData?: object
) => {
  // 类型可以传递2个参数，底层会将第一个会传递给第二个，所以第二个才是真正的返回数据类型
  return instance.request<T, Date<T>>({
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData   //[]中的内容是动态的
  })
}

3. 导出

export { baseURL, instance }


// 在App.vue页面进行测试
<script setup lang="ts">
import { Button as VanButton } from 'vant'
import { useUserStore } from './stores'
import type { User } from './types/user'
import { request } from './utils/request'

const store = useUserStore()
const login = () => {
  request<User>('/login/password', 'POST', {
    mobile: '13230000060',
    password: 'abc12345'
  })
    .then((res) => {
      store.setUser(res.data)
    })
    .catch((e) => {
      // 报错，业务失败
      console.log(e)
    })
}

const getUserInfo = () => {
  request('/patient/myUser').then((res) => {
    console.log(res)
  })
}
</script>

<template>
  <VanButton type="success" @click="login">登录</VanButton>
  <VanButton type="success" @click="getUserInfo">获取用户信息</VanButton>
</template>

---

vant组件自动按需加载

通过 pnpm 安装
pnpm add unplugin-vue-components -D

//在vite.config.ts中配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
	    // 自动导入的插件，解析器可以是 vant element and-vue（包括components文件夹下的）
	    Components({
	    // 默认是 true开启自动生成组件的类型声明文件，vant的组件已经有类型声明文件，只要导入就会使用类型声明
	      dts: false,
	    // 在main.ts中已经引入了所有的样式，不需要自动导入样式，只需要自动导入组件即可
	      resolvers: [VantResolver({ importStyle: false })]
	    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

---

打包svg图标组件

安装插件：
pnpm install vite-plugin-svg-icons -D

//使用插件：  vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入的插件，解析器可以是 vant element and-vue
    Components({
      // 默认是 true开启自动生成组件的类型声明文件，vant的组件已经有类型声明文件，只要导入就会使用类型声明
      dts: false,
      // 在main.ts中已经引入了所有的样式，不需要自动导入样式，只需要自动导入组件即可
      resolvers: [VantResolver({ importStyle: false })]
    }),
    // 打包svg图标
    createSvgIconsPlugin({
      // 指定图标目录
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

//导入main：
	import 'virtual:svg-icons-register'
	
//使用svg精灵地图：
    <!-- 测试svg图标 -->
    <!-- 'icon-[dir]-[name]' dir图标所在目录 name图标名称 -->
    <svg aria-hidden="true">
      <use href="#icon-login-eye-off" />
    </svg>

---

@vueuse/core 组合api库

安装：pnpm add @vueuse/core
• 是一个基于 组合API 封装的库
• 提供了一些网站开发常用的工具函数，切得到的是响应式数据

useWindowSize 取得当前设备的宽高
根据设备大小自动设置标签的宽度

import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
width="(150 / 页面宽度) * width"

useClipboard 剪切板 复制功能
1. copy(需要拷贝的内容)
2. copied 是否拷贝成功，默认1.5s恢复状态
3. isSupported 浏览器是否支持，需要授权读取粘贴板和写入粘贴板权限

const { copy, copied, isSupported } = useClipboard()
// 点击复制按钮，复制订单编号(给标签绑定onCopy函数)
const onCopy = () => {
  if (!isSupported.value) return showToast('不支持或未授权复制功能')
  copy(item.value?.orderNo as string) // 复制的内容
}
// 检测是否复制成功
watch(copied, () => {
  if (copied.value) showToast('复制成功')
})