An online-shop designed and developed by VueJS and NodeJS, along with their related tech stacks.
vue-shop,一个采用VueJS和NodeJS及其相关技术栈设计和开发的网上商店。
Vue2 + VueRouter + Vuex + ElementUI + Webpack + ES6 + Axios + SCSS + NodeJS + MongoDB + ...
由于项目开发比较紧促,为了节省时间,此次先暂时使用github上的另一位开发者提供的接口,通过爬虫脚本将所获得的数据写进database作为缓存,以方便今后的使用。
注:商品数据通过爬虫抓取写入数据库 (eventproxy + superagent),因为数据结构十分复杂,所以在首页热门部分通过转发包装简化了数据,如果你发现部分商品不见了,可能是原有的数据结构已经发生了改变。
这只是权宜之计,日后将会利用空余时间,独立设计和搭建一个完整的小型数据库服务器。
git clone https://github.com/Geolage/vue-shop.git
cd vue-shop
npm install // 如果网速慢,建议使用cnpm安装
npm run dev
// 如果运行出现代理错误,请检查 config 文件目录下的 index.js 文件里的 proxyTable 配置是否正确!!
// 通过运行node-api请求本地api代理应为
http://127.0.0.1:6666 // 即 localhost:6666
注:为了更好地体验整个商店服务流程,请用户自己注册一个账号登录使用
默认账号如下:
账号: admin 密码: admin
- 登录、登出功能
- 注册
- 加入、删除、修改购物
- 新增、修改、删除收货地址
- 下单功能
- 支付功能 -- 由于没权限申请到蚂蚁金服支付宝开发接口,因此只是模拟支付
- 商品详情
- 个人中心
- 订单列表
- 更换头像 -- 头像暂时上传到七牛云
更多功能正在开发当中,后期将会陆续补上 细节和bugs也将会不断完善和修复 如果您有更好的idea或者任何疑问,欢迎Issues,我将永远保持积极学习的态度,谢谢!
... vue-shop
│
├── client // client目录
│ ├── build // webpack配置文件
│ ├── config // 项目打包路径
│ ├── dist // 打包文件
│ ├── src // 源码目录
│ │ ├── api // 请求接口
│ │ ├── common // 公共组件
│ │ ├── components // 组件
│ │ ├── page // 页面
│ │ │ └── Cart // 购物车
│ │ │ └── Checkout // 提交订单
│ │ │ └── Goods // 商品
│ │ │ ├── goods // 商品列表
│ │ │ ├── goodsDetails // 商品详情
│ │ │ └── Home // 主页
│ │ │ └── Login // 登录
│ │ │ └── Order // 订单
│ │ │ ├── order // 商品列表
│ │ │ ├── payment // 提交订单
│ │ │ ├── paysuccess // 提交成功
│ │ │ └── User // 个人中心
│ │ │ ├── children
│ │ │ │ ├── addressList // 地址列表
│ │ │ │ ├── information // 个人信息
│ │ │ │ └── order // 订单列表
│ │ │ └── index.vue // 主页
│ │ ├── store // vuex的状态管理
│ │ │ ├── action.js // 配置actions
│ │ │ ├── index.js // 引用vuex,创建store
│ │ │ ├── modules // store模块
│ │ │ ├── mutation-types.js // 定义常量muations名
│ │ │ └── mutations.js // 配置mutations
│ │ ├── App.vue // 页面入口文件
│ │ ├── main.js // 程序入口文件,加载各种公共组件
│ ├── favicon.ico // 图标
│ ├── index.html // 入口html文件
│
├── server // server目录
│ ├── bin // server执行文件目录
│ │ └── www // 服务器执行配置
│ ├── image // 图片存放目录
│ ├── init // server初始化配置
│ │ └── admin.js // 初始化连接数据库用户
│ │ └── getGoods.js // 抓取商品数据
│ │ └── initData.js // 初始化数据
│ ├── models // data模型配置
│ │ └── goods.js // 商品模型
│ │ └── user.js // 用户模型
│ ├── public // 公共文件目录
│ │ ├── stylesheets // 样式目录
│ ├── routes // server路由配置
│ │ └── goods.js // 商品相关
│ │ └── index.js // 首页相关
│ │ └── users.js // 用户相关
│ ├── util // 工具库
│ │ └── dateFormat.js // 日期格式化模块
│ ├── views // server视图(尚未完成)
│ │ └── error // 404页面
│ │ └── index // 首页
│ │ └── layout // 布局
│ ├── app.js // server入口文件
│