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

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 安装并配置好。

四、项目安装及运行

  • 克隆项目,进入项目目录;
git clone git@github.com:chenjun1127/vue-mall.git
cd vue-mall
  • 安装依赖
npm install or yarn install
  • 启动后端服务
npm run server
  • 执行
npm run dev or npm start
  • 浏览
http://localhost:4000/
  • 打包
npm run build

五、项目总结

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

六、重要提示

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

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

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

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
易购商城是一个基于Vue框架开发的前端毕设项目。在该项目中,我使用了VueVuex、Vue Router、Element UI、Axios等技术和库来实现各种功能。 首先,Vue是一种流行的前端框架,它具有响应式的数据绑定和组件化的特性,使得开发者可以轻松构建交互性强、高效的单页面应用。 其次,我使用了Vuex来管理应用的状态。Vuex提供了一种集中式的状态管理方案,帮助我管理和共享全局的数据,使得不同组件之间的通信更加便捷。 Vue Router是Vue官方提供的路由管理库,用于实现页面之间的导航和路由跳转。我使用它来定义和管理不同页面之间的跳转逻辑,使得用户可以通过URL来访问和导航各个页面。 Element UI是一套基于Vue的桌面端组件库,它提供了丰富的UI组件和样式,使得我可以快速构建出美观和功能完善的界面。 为了与后端进行数据交互,我使用了Axios库。Axios是一个基于Promise的HTTP客户端,可以在前端与后端进行异步数据交互,使得用户可以实现登录、注册、添加购物车、结算等功能。 最后,我还使用了Vue插件vue-echarts和vue-awesome-swiper来实现商品数据的可视化展示和轮播图功能。这些插件都提供了强大且易用的功能,使得易购商城的用户界面更加丰富和吸引人。 总体来说,通过使用VueVuex、Vue Router、Element UI、Axios等技术和库,我成功地实现了易购商城的前端开发工作,提供了丰富的功能和良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值