前端电商项目

项目介绍：

该项目是基于vue-cli创建的一个综合性的电商购物网站，类似于淘宝，京东商城。登录后用户可以在该网站浏览商品，加入购物车，下订单以及各种各样的活动。未登录的用户可以不能进行下单，他们可以通过手机号注册或者qq登录的方式进行登录完成购物。

技术栈：

vue3.0（使用组合API的方式来开发），axios，vue-router（单页路由），vuex（状态管理， vuex数据持久化），@vueuse/core（组合api常用工具库）， vee-validate（表单校验）

遇到的问题：

（1）后台接口请求完毕，但是数据缺乏（分类，商品），所以会有一些本地的moke数据

（2）绝大多数第三方UI组件库不支持vue3.0，大多数组件由自己封装（轮播图，复选框，对话框消息提示和消息确认组件，城市选择组件）

（3）第三方登录也是有点难度

vuex-持久化：

让在vuex中存储的状态和数据存储在本地。

在开发过程中，用户的信息（名字，头像，token等）需要在vuex中存储且需要存储在本地

购物车未登录状态下也支持，管理在vuex中的数据需要存储在本地

所以，通过安装vuex插件来支持vuex的状态持久化

请求工具：

基于axios封装的请求工具，调用接口时使用

（1）创建一个新的axios实例

（2）请求拦截器：如果有token进行头部携带

（3）相应拦截器：①剥离无效数据   ②处理token失效

（4）导出一个函数，调用当前的axios实例发请求，返回一个promise

请求拦截器：

instance.interceptors.request.use(config => {
  // 拦截业务逻辑
  // 进行请求配置的修改
  // 如果本地又token就在头部携带
  // 1. 获取用户信息对象
  const { profile } = store.state.user
  // 2. 判断是否有token
  if (profile.token) {
    // 3. 设置token
    config.headers.Authorization = `Bearer ${profile.token}`
  }
  return config
}, err => {
  return Promise.reject(err)
})

响应拦截器：

// res => res.data  取出data数据，将来调用接口的时候直接拿到的就是后台的数据
instance.interceptors.response.use(res => res.data, err => {
  // 401 状态码，进入该函数
  if (err.response && err.response.status === 401) {
    // 1. 清空无效用户信息
    // 2. 跳转到登录页
    // 3. 跳转需要传参（当前路由地址）给登录页码
    store.commit('user/setUser', {})
    // 当前路由地址
    // 组件里头：`/user?a=10` $route.path === /user  $route.fullPath === /user?a=10
    // js模块中：router.currentRoute.value.fullPath 就是当前路由地址