{"id":13672973,"url":"https://github.com/yucccc/vue-mall","last_synced_at":"2025-05-16T06:06:56.356Z","repository":{"id":41583735,"uuid":"95841955","full_name":"yucccc/vue-mall","owner":"yucccc","description":"🔨 基于 vue+node+mongodb 实现一个锤子商城","archived":false,"fork":false,"pushed_at":"2018-04-16T02:23:45.000Z","size":2587,"stargazers_count":1485,"open_issues_count":12,"forks_count":394,"subscribers_count":63,"default_branch":"master","last_synced_at":"2025-04-08T16:05:03.170Z","etag":null,"topics":["node-mongodb","vue","vue-demo","vue-mall","vuejs","vuejs2","vuex"],"latest_commit_sha":null,"homepage":"http://mall.yucccc.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yucccc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-30T02:57:35.000Z","updated_at":"2025-04-06T08:08:02.000Z","dependencies_parsed_at":"2022-09-16T17:00:13.215Z","dependency_job_id":null,"html_url":"https://github.com/yucccc/vue-mall","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yucccc%2Fvue-mall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yucccc%2Fvue-mall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yucccc%2Fvue-mall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yucccc%2Fvue-mall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yucccc","download_url":"https://codeload.github.com/yucccc/vue-mall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478190,"owners_count":22077676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["node-mongodb","vue","vue-demo","vue-mall","vuejs","vuejs2","vuex"],"created_at":"2024-08-02T09:02:01.426Z","updated_at":"2025-05-16T06:06:51.335Z","avatar_url":"https://github.com/yucccc.png","language":"Vue","funding_links":[],"categories":["Vue","Vue (45)"],"sub_categories":[],"readme":"# 做个锤子\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://github.com/yucccc/mall-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- 一般默认是在 ``/usr/local/nginx/conf/nginx.conf``\n- 修改配置 找到 server 如图\n\n![nginx配置](./demo/nginx.conf.png)\n- 重启 ``/usr/local/nginx/sbin/nginx -s reload``\n\n## 项目运行\n\n```shell\ngit clone https://github.com/yucccc/vue-mall.git\n\ncd vue-mall\n\ncnpm i\n\nnpm run dev\n\n// 如果运行出现代理错误 请确保 config 文件下 index.js proxyTable代理正确\n\n// 直接运行代理应为\nhttp://mall.yucccc.com\n\n// 通过运行node-api请求本地api代理应为\nhttp://127.0.0.1:3333\n\n```\n\n## 说明\n\n- 如果对您有帮助，您可以点右上角 \"Star\" 支持一下 十分感谢!\n- 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR\n\n## 效果演示\n\n[锤子商城demo](http://mall.yucccc.com/) （请使用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://github.com/Exrick/xmall-front) \n基于该项目改造一套更完整的流程 作者[Exrick](https://github.com/Exrick)\n\n## 项目交流群\n\u003e QQ群: 697878084\n\n## 续\n\n- \u003cdel\u003e更多的功能后期还会陆续的补上.\u003c/del\u003e\n- \u003cdel\u003e更多的细节会陆续修复.代码会陆续优化.\u003c/del\u003e\n- 由于作者精力有限，后续可能只会修复某些bug\n- 秉着学习的态度,感谢大家.\n\n## 项目布局\n\n```txt\n.\n├── build                                       // webpack配置文件\n├── config                                      // 项目打包路径\n├── dist                                        // 打包文件\n├── src                                         // 源码目录\n│   ├── api                                     // 请求接口\n│   ├── common                                  // 公共组件\n│   ├── components                              // 组件\n│   ├── page                                    // 页面\n│   │   └── Cart                                // 购物车\n│   │   └── Checkout                            // 提交订单\n│   │   └── Goods                               // 商品\n│   │       ├── goods                           // 商品列表\n│   │       ├── goodsDetails                    // 商品详情\n│   │   └── Home                                // 主页\n│   │   └── Login                               // 登陆\n│   │   └── Order                               // 订单\n│   │       ├── order                           // 商品列表\n│   │       ├── payment                         // 提交订单\n│   │       ├── paysuccess                      // 提交成功\n│   │   └── User                                // 个人中心\n│   │       ├── children\n│   │       │   ├── addressList                 // 地址列表\n│   │       │   ├── information                 // 个人信息\n│   │       │   └── order                       // 订单列表\n│   │   └── index.vue                           // 主页\n│   ├── store                                   // vuex的状态管理\n│   │   ├── action.js                           // 配置actions\n│   │   ├── index.js                            // 引用vuex，创建store\n│   │   ├── modules                             // store模块\n│   │   ├── mutation-types.js                   // 定义常量muations名\n│   │   └── mutations.js                        // 配置mutations\n│   ├── App.vue                                 // 页面入口文件\n│   ├── main.js                                 // 程序入口文件，加载各种公共组件\n├── favicon.ico                                 // 图标\n├── index.html                                  // 入口html文件\n.\n\n```\n\n## 帮作者续费一天的服务器..\n\n支付宝 | 微信\n------|------\n![](./demo/alipay.jpeg)|![](./demo/wxpay.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyucccc%2Fvue-mall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyucccc%2Fvue-mall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyucccc%2Fvue-mall/lists"}