Skip to content

openScipt/cat-mall

 
 

Repository files navigation

猫咪商城说明文档

项目地址

预览地址:https://mall.cxmmao.com/#/

接口文档:https://mall.cxmmao.com/cat-mall-api-doc/

后端源码:https://github.com/ccxm/cat-mall-server

体验账号:cxmmao@163.com,123456

(ps: 此账号是真实的邮箱,要用到验证码的地方还是要自己注册一个账号哦)

简介

这是一个基于vue.js实现的电商项目,模拟了整一个购物流程。从注册到登录、挑选商品、加入购物车、编辑收货地址、下单、修改个人信息等等功能。此项目的初衷是为前端初学者提供一个项目参考,此项目包含了前后端以及接口文档(后台管理在计划开发中),初学者可以用此项目练练手(ui方面我一直不太具有艺术细胞,界面就丑一些啦,求大家放过...)

技术栈

  • vue
  • vuex
  • vue mixins、vue filters
  • element
  • scss
  • axios(深度封装)
  • node.js
  • typescript
  • mongodb
  • jwt

项目功能

  • 注册

  • 登录与登出

  • 商品价格的筛选与排序

  • 查看商品详情

  • 实现看了又看功能

  • 加入购物车

  • 设置支付密码

  • 收货地址的添加、修改、删除

  • 下单

  • 查看历史支付订单

  • 短评

  • 评论

  • 修改个人信息,如修改昵称、更换头像

项目运行

git clone https://github.com/ccxm/cat-mall.git

cd cat-mall

cnpm i

npm run serve

项目截图

首页

img-1

首页-筛选价格

img-2

首页-选中商品

img-3

商品详情

img-4

评论与短评

img-5

下单-选择收获地址

img-6

下单-预览商品

img-7

下单-输入支付密码

img-8

下单-成功下单

img-9

订单列表

img-10

修改个人信息

img-11

购物车

img-12

赞赏作者续费服务器~~

支付宝 微信
img-alipay imag-wechat

觉得写得还不错的记得给个star哦,持续更新~

About

基于vue全家桶的pc端商城 猫咪商城

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 79.0%
  • JavaScript 19.7%
  • Other 1.3%