Vue-Mall -- Vue全家桶+Node后端服务实现的商城

原创 kiss19861127 随笔 Vue 506阅读 2018-05-24 10:41:35 举报

Vue-Mall

A Vue.js project

一、简介

Vue全家桶项目,该项目是基于Vue全家桶开发的商城网站,采用的技术栈为 Webpack + Vue + Vuex + Vue-router + Sass + Es6 + LocalStorage + Css3 + Node(express) + MongoDB;整个项目前后端分离开发,前端基于Vue全家桶进行渲染,后端由NodeJs+MongonDB提供服务。整个项目前后端由本人独自开发,基本实现了一个商城应有的功能!

1、项目依赖基本核心版本:

  • body-parser: "~1.17.1",
  • cookie-parser: "~1.4.3",
  • debug: "~2.6.3",
  • express: "~4.15.2",
  • jade: "~1.11.0",
  • moment: "^2.20.1",
  • morgan: "~1.8.1",
  • serve-favicon: "~2.4.2",
  • vue: "^2.5.2",
  • vue-router: "^3.0.1",
  • vuex: "^3.0.1"

2、项目前端搭建:

  • 基于Vue全家桶进行前端页面渲染
  • 基本样式基于Bootstrap
  • 引入了Moment.js格式化前端页面显示时间

3、项目后端搭建:

  • 使用NodeJs的express框架完成项目后端搭建;
  • 使用mongodb完成数据存储,通过mongoose模块完成对mongodb数据的构建;

4.该商城基本功能:

项目正常访问无需管理员权限,对个人中心资料的修改,需要用户登录,对商城产品及分类的基本操作(增删改查),需要有管理员权限,默认一个管理员(chenjun/123456),具体功能如下:

  • 基本的用户登录、注册、个人资料修改
  • 用户权限管理、登录做session处理(失效期暂为5天)
  • 商城产品及产品分类的增加、删除、更新,查询(可分页查询)
  • 加入购物车及结算、下单功能
  • 收货地址的增加、编辑、删除
  • 关键字搜索功能
  • 订单查询功能

5、项目Github地址:vue-mall

二、项目预览

整体效果,截图看这里

三、运行环境

整个项目的运行,首先要确保 Node + MongoDB 安装并配置好。

四、项目安装及运行

  • 克隆项目,进入项目目录;
  • 安装依赖
  • 启动后端服务
  • 执行
  • 浏览
  • 打包

五、项目总结

整个项目由于是本人独自开发,UI部分基于Bootstrap(没有UI设计师),整体UI细节有待优化完善;部分功能有细微瑕疵,譬如订单的操作(增删改查)未根据订单的状态来判断、产品分类列表未做分页查询等等,这些都需要完善!觉得项目不错的,可以给个Star,谢谢!

六、重要提示

Tips:在npm install or yarn install 的时候,请确保网络良好,如个别依赖安装不了,请设置淘宝镜像为安装源;

强烈推荐使用 Yarn ,Npm 真的太慢了!

运行此项目一定要先启动 Mongo 服务,并连接 MongoDB 数据库。

如有问题:请 Issue 或联系QQ:402074940

评论 ( 14 )
最新评论
lawrence 13F 2018-05-25 11:06:55 14F

精通webpack否

kiss19861127 10F 2018-05-25 11:04:52 13F

不是,后台略懂

kiss19861127 11F 2018-05-25 11:01:09 12F

权限去数据库里改一下,把role改成100就可以了

Crapulence 2018-05-25 10:56:34 11F

楼主 登录chenjun/123456这个管理员显示没有注册呀 注册了也没有权限

lawrence 9F 2018-05-25 10:27:42 10F

你是后台转前端么

kiss19861127 8F 2018-05-25 10:20:06 9F

不清楚你的能力,这个前后端一起,技术点太多了,我是工作之余才做这个东西,做了将近两月吧

lawrence 7F 2018-05-25 10:16:22 8F

从开始碰vue到写出这个例子,要多久

kiss19861127 6F 2018-05-25 10:12:44 7F

没有参考,想哪做哪,顶多参考了一下京东,淘宝,

lawrence 2018-05-25 09:56:22 6F

你这个全家桶,界面参考了哪个站点呢

kiss19861127 4F 2018-05-25 09:53:03 5F

个人倾向使用react

lawrence 3F 2018-05-25 09:26:43 4F

平时主要用React还是Vue呢?

kiss19861127 2F 2018-05-25 09:21:38 3F

当然会啊,去我github看项目

lawrence 2018-05-24 20:36:31 2F

楼主会React么

kiss19861127 2018-05-24 10:42:17 1F

分享一下项目,求给个STAR