vue3商城类源码分享 期末作业 注册登录，状态管理，搜索，购物车订单页面

项目整体分析

1. 项目结构

该项目是一个基于Vue 3构建的本地生活线上超市网站，纯前端展示。项目的主要文件和目录结构如下：

install.bat
start.bat
README.md
.gitignore
package.json
package-lock.json
vue.config.js
网站设计文档.docx
演示.mp4
src/
public/

• src 目录：存放项目的源代码，包括组件、视图、路由、状态管理等。
• public 目录：存放静态资源，如HTML模板文件。
• package.json：项目的配置文件，包含项目的依赖和脚本命令。
• vue.config.js：Vue项目的配置文件，用于配置项目的构建选项。

2. 技术栈

• 前端框架：Vue 3
• 路由管理：Vue Router 4
• 状态管理：Vuex

3. 主要功能模块

• 商品展示：展示商品列表、商品详情页。
• 购物车：添加商品到购物车、修改商品数量、删除商品、全选/反选商品。
• 订单管理：生成订单、查看订单列表。
• 用户登录：用户登录验证，未登录用户访问部分页面时跳转到登录页。

网站设计思路

1. 页面布局

• Header：包含登录/注册链接、导航菜单、购物车和订单链接。
• Main：作为主容器，包含路由视图组件，用于展示不同页面内容。
• Footer：底部信息，如版权信息、友情链接等。

2. 功能流程

• 用户访问网站：用户打开网站后，首先看到首页，展示商品列表和轮播图。
• 商品浏览：用户可以浏览商品列表，点击商品进入商品详情页。
• 加入购物车：在商品详情页，用户可以点击“加入购物车”按钮将商品添加到购物车。
• 购物车操作：用户可以在购物车中修改商品数量、删除商品、全选/反选商品。
• 生成订单：用户点击“结算”按钮，生成订单。
• 用户登录：未登录用户访问购物车、订单页面时，系统会提示用户先登录。

核心功能及代码片段

1. 路由配置

路由配置定义了网站的页面导航规则，确保用户可以通过URL访问不同的页面。

// filePath:豆包/src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Cart from '../views/Cart.vue';
import Detail from '../views/Detail.vue';
import Home from '../views/Home.vue';
import List from '../views/List.vue';
import Login from '../views/Login.vue';
import Main from '../views/Main.vue';
import Order from '../views/Order.vue';

const routes = [
    {
        path: '/',
        component: Main,
        redirect: '/Home',
        children: [
            {
                path: '/Home',
                name: 'Home',
                component: Home
            },
            {
                path: '/detail/:id',
                name: 'Detail',
                component: Detail
            },
            {
                path: '/List',
                name: 'List',
                component: List
            },
            {
                path: '/cart',
                name: 'Cart',
                component: Cart
            },
            {
                path: '/Order',
                name: 'Order',
                component: Order
            }
        ]
    },
    {
        path: '/Login',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'register',
        component: () => import('@/views/Register.vue')
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

router.beforeEach((to, from, next) => {
    const store = useStore()
    const authList = ['Order', 'Cart', 'List']
    if (authList.find(name => name == to.name)) {
        if (store.state.isLogin) {
            next()
        } else {
            alert('请先登录')
            next('/Login')
        }
    } else {
        next();
    }
})

export default router;

2. 商品列表展示

商品列表页展示了商品的基本信息，用户可以点击商品进入详情页。

<!-- filePath:豆包/src/views/List.vue -->
<template>
  <div class="goods-list">
    <ul v-if="goodsList.length > 0">
      <li class="gl-item" v-for="item in goodsList" :key="item.id">
        <router-link :to="`Detail/${item.id}`">
          <div class="Borders">
            <div class="img">
              <img :src="item.pic" />
            </div>
            <div class="name">{{ item.title }}</div>
            <div class="yushou">
              <div class="yushou-p fl">
                ¥<strong>{{ item.price }}</strong>
              </div>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
    <div v-else class="no-data">没有找到相关的商品</div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import productlist from "../assets/js/procuctlist";

const route = useRoute();
const goodsList = ref(productlist);
</script>

3. 购物车功能

购物车页面允许用户管理购物车中的商品，包括修改数量、删除商品和全选/反选。

<!-- filePath:豆包/src/views/Cart.vue -->
<template>
  <div class="cart-warp">
    <!-- 头部模块 -->
    <div class="cart-thead">
      <div class="t-checkbox">
        <input type="checkbox" class="checkall" @click="checkall" /> 全选
      </div>
      <div class="t-goods">商品</div>
      <div class="t-price">单价</div>
      <div class="t-num">数量</div>
      <div class="t-sum">小计</div>
      <div class="t-action">操作</div>
    </div>
    <!-- 商品列表模块 -->
    <div class="cart-item-list" v-for="item in carlist" :key="item.id">
      <div class="cart-item">
        <div class="p-checkbox">
          <input
            type="checkbox"
            @change="item.checked = e.target.checked"
            v-model="item.checked"
            class="j-checkbox"
          />
        </div>
        <div class="p-goods">
          <div class="p-img">
            <img :src="item.pic" alt="" style="width: 81px; height: 81px" />
          </div>
          <div class="p-msg">{{ item.title }}</div>
        </div>
        <div class="p-price">￥{{ item.price }}</div>
        <div class="p-num">
          <div class="quantity-form">
            <a
              href="javascript:;"
              @click="item.number === 1 ? false : item.number--"
              class="decrement"
              >-</a
            >
            <input type="text" class="itxt" :value="item.number" />
            <a href="javascript:;" @click="item.number++" class="increment"
              >+</a
            >
          </div>
        </div>
        <div class="p-sum">￥{{ item.price * item.number }}</div>
        <div class="p-action">
          <a href="javascript:;" @click="remove(item.id)">删除</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import productlist from '../assets/js/procuctlist';

const carlist = ref(productlist.map(item => ({ ...item, number: 1, checked: false })));

const checkall = () => {
  const isChecked = carlist.value.every(item => item.checked);
  carlist.value.forEach(item => item.checked = !isChecked);
};

const remove = (id) => {
  carlist.value = carlist.value.filter(item => item.id !== id);
};
</script>

4. 用户登录验证

在路由导航守卫中进行用户登录验证，确保未登录用户无法访问需要权限的页面。

// filePath:豆包/src/router/index.js
router.beforeEach((to, from, next) => {
    const store = useStore()
    const authList = ['Order', 'Cart', 'List']
    if (authList.find(name => name == to.name)) {
        if (store.state.isLogin) {
            next()
        } else {
            alert('请先登录')
            next('/Login')
        }
    } else {
        next();
    }
})

以上核心代码片段展示了项目的主要功能实现，包括路由配置、商品展示、购物车管理和用户登录验证。通过这些代码，你可以了解项目的基本架构和功能逻辑。