基于Vue的蔬菜购买APP
- 基于Vue的蔬菜购买APP
- 1.系统功能模块介绍
- 2.系统基本功能介绍及分析
- 实现效果
- Github链接
基于Vue的蔬菜购买APP
使用Vue脚手架和Vant搭建的H5界面的蔬菜购买App，集成登录、注册、购物车展示等功能，由本地存储储存数据，未加后端数据传输和数据库，有兴趣的同学可自行添加。
1.系统功能模块介绍
该蔬菜购物APP主要包含系统首页、商品分类、购物车、个人设置页面四⼤设计模块。中⼼模块为商品分类展示模块，包括展示商品、将商品添加至购物车、显示商品详情三⼤功能，商品展示功能展示商品标题、价格、简述，⽤户可以通过点击商品查看详细信息，包含商品产地、详细介绍、存储方式、推荐理由等，喜欢可点击添加到购物车。
2.系统基本功能介绍及分析
组件设计及功能分析：
根据系统功能，设计了相应的Vue⻚⾯级组件及⼀些⼩组件，具体如下表格所示。
Views中的组件：
组件名称 | 功能描述 |
GuideView.vue | 引导页，由轮播图构成 |
LoginView.vue | APP登录注册界面 |
MainView.vue | 主界面，负责四大模块显示 |
GoodsView.vue | 展示所有商品信息 |
DetailView.vue | 商品详情 |
CartView.vue | 购物车界面 |
OrderView.vue | 订单信息 |
MineView.vue | 个人设置页面 |
LocationView.vue | 收货地址页面 |
components中组件
组件名称 | 功能描述 |
TheHeader.vue | 顶部组件，包含定位和搜索，用于首页和所有商品页 |
TheHome.vue | 首页组件，展示首页情况和推荐商品，在MainView中使用 |
GirdGoods.vue | 宫格式商品组件，在TheHome、MineView中使用 |
GoodsList.vue | 列表式商品组件，在GoodsView中使用 |
GoodsShow.vue | 商品展示组件，在GirdGoods、GoodsList中使用 |
NavBar.vue | 自定义样式NavBar组件 |
ForgetPasswd.vue | 忘记密码页面 |
AddressSet.vue | 收货地址设置组件，在LocationView.vue、MineView.vue中使用 |
AddressEdit.vue | 收货地址编辑组件，在AddressSet中使用 |
SearchGoods.vue | 搜索商品组件，在TheHeader中使用 |
CartList.vue | 购物车商品列表展示，在CartView中使用 |
OrderList.vue | 订单展示页组件，在OrderView中使用 |
SettingInfo.vue | 个人设置组件，在MineView中使用 |
data.js | 所有商品数据 |
util.js | 公共工具，用于在本地存储中存储、获取相关信息 |
系统路由情况：此处请粘贴index.js中的路由代码
const routes = [
{
path: "/",
name: "guide",
component: () => import("../views/GuideView.vue"),
},
{
path: "/login",
name: "login",
component: () => import("../views/LoginView.vue"),
},
{
path: "/main",
redirect: "/main/home",
component: () => import("../views/MainView.vue"),
children: [
{
path: "home",
component: () => import("../components/TheHome.vue"),
},
{
path: "goods",
component: () => import("../views/GoodsView.vue"),
},
{
path: "cart",
component: () => import("../views/CartView.vue"),
},
{
path: "mine",
component: () => import("@/views/MineView.vue"),
},
],
},
{
path: "/location",
redirect: "/location/addressset",
component: () => import("../views/LocationView.vue"),
children: [
{
path: "addressset",
component: () => import("../components/AddressSet.vue"),
},
{
path: "addressedit",
component: () => import("../components/AddressEdit.vue"),
},
],
},
{
path: "/forget",
component: () => import("../components/ForgetPasswd.vue"),
},
{
path: "/order",
component: () => import("../views/OrderView.vue"),
},
{
path: "/setting",
component: () => import("../components/SettingInfo.vue"),
},
{
path: "/detail",
component: () => import("../views/DetailView.vue"),
},
{
path: "/search",
component: () => import("../components/SearchGoods.vue"),
},
];实现效果
