[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8905":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},8905,"vue-mall","yucccc\u002Fvue-mall","yucccc","🔨 基于 vue+node+mongodb 实现一个锤子商城","http:\u002F\u002Fmall.yucccc.com",null,"Vue",1483,390,62,12,0,1,55.88,"MIT License",false,"master",true,[24,25,26,5,27,28,29],"node-mongodb","vue","vue-demo","vuejs","vuejs2","vuex","2026-06-12 04:00:41","# 做个锤子\n\n## 前言\n\n个人一直想尝试用vue与node结合，做一个全栈电商型的网站，最后选择了锤子手机商城，这个项目从0开发到部署前前后后大概花了一个多月的时间，涉及登录、商品展示、购物车、下单等等，是一个非常完整的流程。其中交易的逻辑也比较复杂，所以可能存在一些细节问题(页面美观度就请放过我....).\n\n锤子商城的技术栈是 __Angular__，罗永浩的产品，感觉还是挺简洁美观.页面商品数据是通过爬虫抓取然后写入数据库的.\n__注: 项目数据与锤子商品数据并无关系,并不是通过proxy代理请求的锤子商城接口__\n\n## 技术栈\n\nvue2 + vuex + vue-router + webpack + ES6 + axios + sass + flex + svg + node + mongoDB\n\n## 关于接口数据\n\n接口项目地址   [mall-api](https:\u002F\u002Fgithub.com\u002Fyucccc\u002Fmall-api)  使用的是 node + mongodb\n\n商品数据通过爬虫抓取写入数据库 (eventproxy + superagent)，因为锤子手机的数据结构十分复杂，所以在首页热门部分通过转发包装简化了数据，__如果你发现部分商品不见了，有可能是锤子手机改变了数据结构__. 正常情况下不会存在这种问题，大可放心.\n\n如果想要做个人项目却苦于没有数据,也可请求该项目的接口(后期有时间会把文档补上)，或者自己clone项目运行\n\n## 关于部署\n\n使用 nginx 做反向代理，解决跨域问题.\n\n1. 先在服务器安装 Nginx.\n2. 上传nodejs代码.\n- 把上传通过各种方式(命令行或者ftp)上传到服务器 进入目录下安装node依赖(与本地开发并无区别)\n- 使用pm2启动 此时会打开一个端口 假设 3333\n- 此时node已运行在服务端\n3. 将打包后的前端静态文件dist目录上传到服务器\n4. 配置反向代理\n- 找到Nginx配置文件，如果不知道在哪,可以上百度搜一下有命令提示\n- 一般默认是在 ``\u002Fusr\u002Flocal\u002Fnginx\u002Fconf\u002Fnginx.conf``\n- 修改配置 找到 server 如图\n\n![nginx配置](.\u002Fdemo\u002Fnginx.conf.png)\n- 重启 ``\u002Fusr\u002Flocal\u002Fnginx\u002Fsbin\u002Fnginx -s reload``\n\n## 项目运行\n\n```shell\ngit clone https:\u002F\u002Fgithub.com\u002Fyucccc\u002Fvue-mall.git\n\ncd vue-mall\n\ncnpm i\n\nnpm run dev\n\n\u002F\u002F 如果运行出现代理错误 请确保 config 文件下 index.js proxyTable代理正确\n\n\u002F\u002F 直接运行代理应为\nhttp:\u002F\u002Fmall.yucccc.com\n\n\u002F\u002F 通过运行node-api请求本地api代理应为\nhttp:\u002F\u002F127.0.0.1:3333\n\n```\n\n## 说明\n\n- 如果对您有帮助，您可以点右上角 \"Star\" 支持一下 十分感谢!\n- 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR\n\n## 效果演示\n\n[锤子商城demo](http:\u002F\u002Fmall.yucccc.com\u002F) （请使用PC打开，并不是一个移动端项目 ~~~）\n\n__注:为了更好的体验,需要自己注册一个账号,账号密码随意.__\n\n为了方便演示，这里提供了两个账号.当然可能存在多个用户同时操作一个账号.\n\n```txt\n 账号: admin  密码: admin\n 账号: admin1 密码: 123\n```\n\n## 目标功能\n\n- [x] 登陆、登出功能\n- [x] 注册\n- [x] 加入、删除、修改购物\n- [x] 新增、修改、删除收货地址\n- [x] 下单功能\n- [x] 支付功能 -- 由于没权限申请到蚂蚁金服支付宝开发接口,因此只是模拟支付.\n- [x] 商品详情\n- [x] 个人中心\n- [x] 订单列表\n- [x] 更换头像 -- 头像上传到七牛云,由于免费的七牛云空间有限,希望各位大佬不要搞我..\n\n## 相关链接\n[XMall-Front](https:\u002F\u002Fgithub.com\u002FExrick\u002Fxmall-front) \n基于该项目改造一套更完整的流程 作者[Exrick](https:\u002F\u002Fgithub.com\u002FExrick)\n\n## 项目交流群\n> QQ群: 697878084\n\n## 续\n\n- \u003Cdel>更多的功能后期还会陆续的补上.\u003C\u002Fdel>\n- \u003Cdel>更多的细节会陆续修复.代码会陆续优化.\u003C\u002Fdel>\n- 由于作者精力有限，后续可能只会修复某些bug\n- 秉着学习的态度,感谢大家.\n\n## 项目布局\n\n```txt\n.\n├── build                                       \u002F\u002F webpack配置文件\n├── config                                      \u002F\u002F 项目打包路径\n├── dist                                        \u002F\u002F 打包文件\n├── src                                         \u002F\u002F 源码目录\n│   ├── api                                     \u002F\u002F 请求接口\n│   ├── common                                  \u002F\u002F 公共组件\n│   ├── components                              \u002F\u002F 组件\n│   ├── page                                    \u002F\u002F 页面\n│   │   └── Cart                                \u002F\u002F 购物车\n│   │   └── Checkout                            \u002F\u002F 提交订单\n│   │   └── Goods                               \u002F\u002F 商品\n│   │       ├── goods                           \u002F\u002F 商品列表\n│   │       ├── goodsDetails                    \u002F\u002F 商品详情\n│   │   └── Home                                \u002F\u002F 主页\n│   │   └── Login                               \u002F\u002F 登陆\n│   │   └── Order                               \u002F\u002F 订单\n│   │       ├── order                           \u002F\u002F 商品列表\n│   │       ├── payment                         \u002F\u002F 提交订单\n│   │       ├── paysuccess                      \u002F\u002F 提交成功\n│   │   └── User                                \u002F\u002F 个人中心\n│   │       ├── children\n│   │       │   ├── addressList                 \u002F\u002F 地址列表\n│   │       │   ├── information                 \u002F\u002F 个人信息\n│   │       │   └── order                       \u002F\u002F 订单列表\n│   │   └── index.vue                           \u002F\u002F 主页\n│   ├── store                                   \u002F\u002F vuex的状态管理\n│   │   ├── action.js                           \u002F\u002F 配置actions\n│   │   ├── index.js                            \u002F\u002F 引用vuex，创建store\n│   │   ├── modules                             \u002F\u002F store模块\n│   │   ├── mutation-types.js                   \u002F\u002F 定义常量muations名\n│   │   └── mutations.js                        \u002F\u002F 配置mutations\n│   ├── App.vue                                 \u002F\u002F 页面入口文件\n│   ├── main.js                                 \u002F\u002F 程序入口文件，加载各种公共组件\n├── favicon.ico                                 \u002F\u002F 图标\n├── index.html                                  \u002F\u002F 入口html文件\n.\n\n```\n\n## 帮作者续费一天的服务器..\n\n支付宝 | 微信\n------|------\n![](.\u002Fdemo\u002Falipay.jpeg)|![](.\u002Fdemo\u002Fwxpay.png)\n","该项目基于Vue+Node+MongoDB实现了一个全栈电商网站，名为锤子商城。它具备登录、商品展示、购物车管理、下单等核心功能，并采用Vuex进行状态管理，通过Webpack构建工具及ES6语法编写。项目使用了Sass和Flex布局来优化界面样式，并通过Axios处理HTTP请求。适合于前端开发者学习全栈开发技术或作为小型电商平台的参考案例。此外，还提供了详细的部署指南，包括Nginx反向代理配置，帮助用户轻松地将应用部署到服务器上。",2,"2026-06-11 03:20:14","top_language"]