基于vue+node+mongo实现一个锤子商城

做个锤子官网demo练习

个人一直想尝试用vue与node结合，做一个全栈电商型的网站，最后选择了锤子手机商城，这个项目从0开发到部署前前后后大概花了一个多月的时间，涉及登录、商品展示、购物车、下单等等，是一个非常完整的流程。其中交易的逻辑也比较复杂，所以可能存在一些细节问题(页面美观度就请放过我…)，此后都会慢慢修复.

锤子手机用的是 Angular，罗永浩的产品，感觉还是挺简洁美观.页面商品数据是通过爬虫抓取然后写入数据库的.虽然锤子的页面也是动态生成的，不过还是很简单就可以拿到.注: 项目数据与锤子商品数据并无关系,并不是通过proxy代理请求的锤子商城接口

技术栈

vue2 + vuex + vue-router + webpack + ES6 + axios + sass + flex + svg + node + mongoDB

 

2关于数据接口

 

接口项目地址   node-api  使用的是 node + mongodb

商品数据通过爬虫抓取写入数据库 (eventproxy + superagent) ，由于锤子手机的数据结构十分复杂并且页面是动态的，因此我通过转发包装简化了数据，但不影响正常业务逻辑，如果你发现部分商品不见了，有可能是锤子手机改变了数据结构.正常情况下不会存在这种问题，大可放心.

如果想要做个人项目却苦于没有数据,也可请求该项目的接口(后期有时间会把文档补上)，或者自己clone项目运行

关于部署

使用 nginx 做反向代理，解决跨域问题.

项目运行

git clone https://github.com/yucccc/vue-mall.gitcd vue-mall

cnpm i

npm run dev

说明

如果对您有帮助，您可以点右上角 “Star” 支持一下 十分感谢！ ^ _ ^如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR

 

3效果演示

 

效果演示

锤子商城demo （请使用PC打开，并不是一个移动端项目 ~~~）

注:为了更好的体验,需要自己注册一个账号,账号密码随意.

为了方便演示，这里提供了两个账号.当然可能存在多个用户同时操作一个账号.

项目地址 https://github.com/yucccc/vue-mall

 账号: admin  密码: admin 账号: admin1 密码: 123

目标功能

• [x] 登陆、登出功能

• [x] 注册

• [x] 加入、删除、修改购物

• [x] 新增、修改、删除收货地址

• [x] 下单功能

• [x] 支付功能 – 由于没权限申请到蚂蚁金服支付宝开发接口,因此只是模拟支付.

• [x] 商品详情

• [x] 个人中心

• [x] 订单列表

• [x] 更换头像 – 头像上传到七牛云,由于免费的七牛云空间有限,希望各位大佬不要搞我…

   

•  

续

更多的功能后期还会陆续的补上.更多的细节会陆续修复.代码会陆续优化.秉着学习的态度,感谢大家.