小米商城（下）

技术点

• 路由守卫
• keep-alive
• 封装api
• 封装element-ui（按需引入）
• 设置全局组件
• 设置全局变量

代码如下

封装api和element-ui

import axios from '../utils/request'
export default{
    // 获取收藏列表
    getCollect(data={}){
        return axios({
            url:'/api/user/collect/getCollect',
            method:"POST",
            data:data
        })
    },
    // 添加收藏
    addCollect(data={}){
        return axios({
            url:"/api/user/collect/addCollect",
            method:"POST",
            data:data
        })
    },
    // 删除收藏
    deleteCollect(data={}){
        return axios({
            url:"/api/user/collect/deleteCollect",
            method:"POST",
            data:data
        })
    }
}

路由守卫

router.beforeEach(function(to,from,next){
  if(to.path == '/about/shopping'||'/about/order'||'/about/collect'){
    if(store.state.user !== null){
      next()
    }else{
      store.commit("setlogin")
      next('/about/home')
    }
  }else{
    next()
  }
})

全局组件

// 创建全局组件
import homeshopli from '@/components/HomeShopLi.vue'
import allshopli from '@/components/AllShopLi.vue'
import login from '@/components/login.vue'

Vue.component(homeshopli.name,homeshopli)
Vue.component(allshopli.name,allshopli)
Vue.component(login.name,login)

使用全局组件时直接引入并使用就行

总结

小米商城在布局方面需要费心，然后一些东西的逻辑会比较复杂，比如搜索，搜索更多等等，其中搜索更多就是把参数找出并传递到url后面，在全部商品页面取出然后调用api找到数据进行渲染，还有一些稍简单些的模块，只要用心就可以写出来，如购物车，登录鉴权。