宠物商城说明文档
项目预览地址:项目预览
完整项目源码下载
https://download.csdn.net/download/DeepLearning_/87337771
简介
这是一个基于vue.js实现的电商项目,模拟了整一个购物流程。从注册到登录、挑选商品、加入购物车、编辑收货地址、下单、修改个人信息等等功能。此项目的初衷是为前端初学者提供一个项目参考,此项目包含了前后端以及接口文档,初学者可以用此项目练练手~~
技术栈
- vue全家桶
- vant
- scss
- axios(深度封装)
- node.js
项目功能
-
注册
-
登录与登出
-
商品价格的筛选与排序
-
查看商品详情
-
实现看了又看功能
-
加入购物车
-
设置支付密码
-
收货地址的添加、修改、删除
-
下单
-
查看历史支付订单
-
短评
-
评论
-
修改个人信息,如修改昵称、更换头像
项目运行
cd pet-mall-h5
npm i
npm run serve
项目截图
- 注册与登录
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/86573e00-f10f-11eb-8281-558369f69f71.png)
- 首页
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/96ee1180-f10f-11eb-8281-558369f69f71.png)
- 详情页
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/9e1fcde0-f10f-11eb-8281-558369f69f71.png)
- 下单页
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/a51c4970-f10f-11eb-8281-558369f69f71.png)
- 支付页
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/aa8c7fb0-f10f-11eb-8281-558369f69f71.png)
- 订单列表页
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/aea75f20-f10f-11eb-8281-558369f69f71.png)
- 写评论
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/b25c50d0-f10f-11eb-8281-558369f69f71.png)
- 分类页
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/b6f90a70-f10f-11eb-8281-558369f69f71.png)
- 购物车
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/bac0c0d0-f10f-11eb-8281-558369f69f71.png)
- 个人中心
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/c163d1c0-f10f-11eb-8281-558369f69f71.png)
- 收货地址
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/c5ffef20-f10f-11eb-8281-558369f69f71.png)
- 设置密码
![](https://blog.cxmmao.com/blog-images/article-bg-photos/u_06444357027/c9ee1940-f10f-11eb-8281-558369f69f71.png)