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

最新推荐文章于 2024-10-07 17:53:56 发布

freshfish丶

最新推荐文章于 2024-10-07 17:53:56 发布

阅读量3k

点赞数 6

分类专栏：前端学习文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_39064418/article/details/129362713

版权

本文详细介绍了使用 Vue2 开发仿小米商城首页的过程，包括头部信息栏、导航栏与轮播图、商品列表及切换、底部信息栏的实现。项目采用 Vue2+Vue-Router+Vuex+Axios+ElementUI 技术栈，实现了登录、注册、商品浏览等功能。文章通过效果图和源码分析，展示了各个部分的具体实现细节。

摘要由CSDN通过智能技术生成

缘由

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

简介

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

首页实现

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

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>

逻辑实现

进入首页之后，判断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.