Vue2实现仿小米商城练手项目前端篇(2-首页实现)

缘由

去年寒假里学习了Vue.js，开学后想做一个完整的练手项目实战一下，最后决定模仿小米手机官网做一个网站项目，具体参考了Github上一位作者的项目。
现在已经基本完成了，分享在CSDN作为学习记录。

简介

1. 技术支持 ：该项目采用前后端分离的设计结构，使用Vue2+Vue-Router+Vuex+Axios+ElementUI作为前端技术框架，后端采用了Koa框架，使用MySQL数据库作为数据存储支持。
2. 项目功能：项目包含登录、注册、商品浏览、商品检索、收藏、购物车、订单生成与结算等功能
3. 项目页面：项目整体页面分为首页、全部商品、商品详情页、登录注册、我的购物车、我的订单、订单结算等
4. 后端模式：使用MVC模式，设计对应的模型层、控制层。
5. 数据支持：使用Github项目中的小米商城数据

首页实现

首页主要分为4个部分：头部信息栏、导航栏、商品列表、底部信息栏。

1. 头部信息栏

头部信息栏主要功能为：登录注册按钮、登录成功后显示用户信息、我的订单、我的收藏、购物车商品数目信息。

效果图

效果实现

1. 源码

<template>
  <div class="topbar">
    <div class="nav">
      <ul>
        <li v-if="!this.$store.getters.getUser">
          <el-button type="text" @click="login">登录</el-button>
          <span class="sep">|</span>
          <el-button type="text" @click="register = true">注册</el-button>
        </li>
        <li v-else>
          欢迎
          <el-popover placement="top" width="180" v-model="visible">
            <p>确定退出登录吗？</p>
            <div style="text-align: right; margin: 10px 0 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="logout">确定</el-button>
            </div>
            <el-button type="text">{
   {
   this.$store.getters.getUser.userName}}</el-button>
          </el-popover>
        </li>
        <li>
          <router-link to="/order">我的订单</router-link>
        </li>
        <li>
          <router-link to="/collect">我的收藏</router-link>
        </li>
        <li :class="getNum > 0 ? 'shopCart-full' : 'shopCart'">
          <router-link to="/shoppingCart">
            <i class="el-icon-shopping-cart-full"></i> 购物车
            <span class="num">({
   {
   getNum}})</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

2. 逻辑实现

• 进入首页之后，判断localStorage内是否存在登录用户，若不存在则设置登录列表初始状态为隐藏。
• 点击触发 login 事件后更改vuex中的setShowLogin显示登录组件。
• 登录成功后将用户信息存入vuex中，通过watch监听vuex的登录状态。
• 若已经登录，从后台查询该用户的购物车信息，并通过vuex中的setShoppingCart方法更新购物车信息，从而获取购物车内的商品数量并显示在头部栏中。
• 为我的订单和我的收藏添加路由信息，实现点击跳转对应页面。

<script>
export default {
   
	data() {
   
	   return {
   
	     activeIndex: "", // 头部导航栏选中的标签
	     search: "", // 搜索条件
	     register: false, // 是否显示注册组件
	     visible: false // 是否退出登录
	   };
	},	
	created() {
   
		if (localStorage.getItem("user")) {
   
			this.setUser(JSON.pars