Xiaomi icon indicating copy to clipboard operation
Xiaomi copied to clipboard

基于Vue + SpringBoot实现的前后端分离的仿小米商城项目,包含秒杀模块。

仿小米商城

前言

本项目是基于GitHub上一个作者hai-27开发的补充。他是使用vue、node.js做的前后端分离项目。

我是对他的前端进行采用并进行修改,后端使用SpringBoot框架实现的一个仿小米商城。

感谢 hai-27 的开源 vue-store 项目提供前端页面及框架支持

项目简介

本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现。后端基于SpringBoot +Redis+ RabbitMQ + MySQL实现。

实现了用户注册与登录商城首页展示商品分类展示商品详情页购物车订单结算我的收藏等功能。

并在原作者的基础上添加了商品秒杀部分。

后端接口全部采用Resultful风格,因此前端接口以及部分内容也有修改。

前端项目地址:https://github.com/ZeroWdd/vue-store

后端项目地址:https://github.com/ZeroWdd/Xiaomi

项目已部署

仿小米商城: http://47.95.254.97:8080/

技术栈

  • 前端:Vue+Vue-router+Vuex+Element-ui+Axios
  • 后端:SpringBoot +Redis+ RabbitMQ
  • 数据库:Mysql

功能实现

  • [x] 用户注册与登录
  • [x] 商品首页展示
  • [x] 商品分类列表展示
  • [x] 商品详情页
  • [x] 购物车
  • [x] 订单结算
  • [x] 我的收藏
  • [ ] 我的地址
  • [x] 秒杀商品
  • [ ] 商品支付

运行项目

前端运行

1. Clone project

git clone https://github.com/ZeroWdd/vue-store.git

2. Project setup

cd vue-store
npm install

3. Compiles and hot-reloads for development

npm run serve

4. Compiles and minifies for production

npm run build

后端运行

1. 修改application.yml文件中的mysql、redis、rabbitmq的地址
2. 运行SpringBoot项目

页面截图

首页

全部商品

购物车

我的收藏

我的订单

登录

注册