网站建设管理与维护ppt,网页设计版式图片,网站如可引导客户,泰安房产中介公司终极实战----大事件项目
1.简介#xff1a; 2.创建项目#xff1a;
1.创建#xff08;159-163#xff09;#xff1a;
还是对着视频操作吧 2.路由#xff1a; 3.element Plus:
导入element Plus 后不需要再导入插件配置#xff0c;就连组件导入也不用 4.pinia构建用…终极实战----大事件项目
1.简介 2.创建项目
1.创建159-163
还是对着视频操作吧 2.路由 3.element Plus:
导入element Plus 后不需要再导入插件配置就连组件导入也不用 4.pinia构建用户仓库和持久化 持久化 单独管理和导出 5.数据交互-请求工具设计 配置 import axios from axios
import {ElMessage} from element-plus
import router from /router
import { useUserStore } from /store
const baseURL http://big-event-vue-api-t.itheima.net
const instance axios.create({ baseURL, timeout: 5000, headers: { X-Custom-Header: foobar }
}) // 请求拦截器
instance.interceptors.request.use( (config) { // TODO 2. 携带token const userStore useUserStore() if (userStore.token) { config.headers.Authorization userStore.token } return config }, (err) Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use( (res) { // TODO 3. 处理业务失败 // TODO 4. 摘取核心响应数据 if (res.data.code 0) { return res } ElMessage.error(res.data.message || 服务异常) // 处理业务失败给错误提示异常抛出 return Promise.reject(res.data) }, (err) { // TODO 5. 处理401错误 // 错误的特殊情况 401 权限不足 或 token 过期 拦截到登录 if (err.message?.status 401) { router.push(/login) } // 错误的默认情况 只要给提示 ElMessage.error(err.response.data.message || 服务异常) return Promise.reject(err) }
)
export default instance
// 其实这里导出基础路由我不是很理解
export { baseURL } 6.整体路由设计 7.登录页加载 8.校验 9.预校验 注意在我们开始导入组建的时候我们是按需导入的所以我们不用在第二次在页面中导入。像这种做法就是错的。 我们可以这么做再eslintrc中声明全局变量解决ElMesage报错问题
