自从接触了NodeJs之后,一直想结合Vue做一个完整的前端 + 后端商城,原本计划是有移动端、PC端以及管理后台,采用前后端完全分离开发,但是一系列开发下来,发现想完成这个计划需要不少的时间,其中也出现很多意想不到的问题,同时也在不断的学习成长,奈何时间有限。花了约半个月左右,目前就只开发了移动端,以及部分后台(只有接口和数据...),以后有时间会逐渐完善
前端部分:
IDE: Visual Studio Code
框架: Vue2.0
技术栈: vuex 、vue-router 、vue-cli 、ES6 、flexible.js 、axios、 webpack3.0
后端部分:
语言环境: NodeJs
框架: express
数据库: MongoDB / mongoose
数据库管理: Robo 3T
数据加密: md5
前端所有代码通过eslint的standard风格检查,如果报错请注意是否有多余的空格、换行、分号、变量,或者使用了双引号等等
跨域问题,在 config/index.js 可以修改proxyTable中的地址,使用代理来连接接口
1、本地已安装MongoDB
2、新建库 vueMall
3、新建两个表分别名为 users 和 goods 存放用户数据和产品数据
4、分别导入根目录下json文件夹里的数据
5、启动数据库
PS:由于篇幅过长,方法请自行百度,谢谢!
把整个项目clone到本地
git clone https://github.com/yeguangcheng/vueMall.git
在vueMall - service目录下安装依赖包(由于文件不多放在了一起,但是依赖是分开的,可以单独运行)
cd vueMall
cd service
npm install
在service/mongodb/db.js下检查数据库地址是否一致,然后启动服务器
node service.js
回到vueMall目录,安装依赖包
cd ../
npm install
在config/index.js 下检查proxyTable中的地址和端口是否和服务器一致,然后启动开发环境
npm run dev
vueMall目录下
npm run build
打包的文件在vueMall/dist下,复制到service/data目录下,打开地址
http://localhost:3000/ //服务器的地址,不用输多余路由
- 如果对您有帮助,您可以点右上角 "Star" 支持一下 十分感谢!
- 如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR
- 注册、登陆、登出、找密功能
- 加入、删除、修改购物车
- 新增、删除收货地址
- 支付功能(模拟支付)
- 商品详情
- 首页滚动加载
- 个人中心-订单列表
注:其他功能待开发中~~
.
├── build // webpack配置文件
├── config // webpack配置文件
├── json // 数据库导出文件
│ ├── users.json // 用户数据
│ ├── goods.json // 商品数据
├── dist // 打包文件目录
├── service // 服务器文件
│ ├── data // 静态资源管理
│ ├── mongodb // 数据库配置
│ │ └── db.js // 数据库基本配置
│ │ └── goodsListModel.js // 产品数据模型
│ │ └── user.js // 修改数据函数
│ │ └── userModel.js // 用户数据模型
│ ├── router // 路由配置
│ │ └── goods.js // 修改产品接口
│ │ └── users.js // 修改用户接口
│ ├── util // 公共库
│ │ └── index.js // 公共方法
│ ├── package.json // 依赖包管理
│ ├── service.js // 服务器入口文件
├── src // 源码目录
│ ├── assets // 静态资源目录
│ │ └── css // css文件
│ │ └── images // 图片图标
│ │ └── js // js文件
│ ├── components // 组件
│ │ └── AddressList.vue // 地址列表
│ │ └── Cart.vue // 购物车
│ │ └── Classify.vue // 产品分类
│ │ └── FindPassword.vue // 找回密码
│ │ └── Header.vue // 头部组件
│ │ └── Home.vue // 首页
│ │ └── Login.vue // 登录
│ │ └── Modal.vue // 弹窗组件
│ │ └── Nav.vue // 导航组件
│ │ └── NewAddress.vue // 新建地址
│ │ └── Order.vue // 确认订单
│ │ └── OrderDetail.vue // 订单详情
│ │ └── OrderList.vue // 订单列表
│ │ └── Product.vue // 产品详情
│ │ └── Register.vue // 注册
│ │ └── Success.vue // 支付成功
│ ├── router // 路由
│ │ ├── index.js // 路由配置
│ ├── store // 状态管理
│ │ ├── store.js // vuex配置
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件
├── static // 外部静态资源
├── index.html // 入口html文件
.