高仿小米商城用户端

高仿小米商城用户端(分为商城前端(tongyimall-vue)和商城后端(tongyimall-api)两部分),是Vue + SpringBoot的前后端分离项目,用户端包括首页门户、商品分类、首页轮播、商品展示、商品推荐、购物车、地址管理、下订单、扫码支付等功能模块。

主要技术栈

前端:vue2 + vue-router + vuex + axios + sass (vue-cli4搭建的)
后端:SpringBoot + MyBatis注解版 + MySQL + redis6

一、功能与版本

    当前版本v1.4.0
    目前项目开发中,存在诸多不足,以下是目前已开发的功能。

V 1.0.0
1,首页轮播图左侧的商品分类弹出框
2,首页轮播图
3,首页顶部商品下拉栏
4,首页品牌列表分类
5,商品详情页
6,购物车

V 1.1.0
1,首页底部增加了推荐商品功能
3,完善了网页底公共栏
4,增加了下单前地址管理,实现了选择省市的二级联动功能
5,订单下单

V 1.2.0
1,首页左侧弹出框后台管理 2,首页商品大类推荐后台管理 3,首页底部推荐后台管理

V 1.3.0
1,引入布隆过滤器 2,完善订单功能 3,首页商品大类引入redis缓存,小米秒杀部分页面做成

V 1.4.0
1,所有商品信息都引入redis缓存

V 1.5.0
1,完成模拟支付功能 2,完成订单超时30分钟取消功能

V 1.6.0
1,引入支付宝扫码支付,需要用沙箱钱包,2,引入事务乐观锁避免超卖问题(库存不足时会提示下单失败) 3,使用监听线程监听,超时30分钟未付款则取消订单,删除数据库中相应表记录,并恢复预减的库存 

 

二、运行环境

    为保证项目能够运行,请至少安装好以下运行环境:

  • 1、Maven(项目对象模型,可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件
    )
  • 2、MySQL 8.0+版本
  • 3、Node环境
  • 4、JDK1.8
  • 5、Redis

三、快速启动

1、前端部分

git clone https://github.com/ZTY18873242003/tongyimall    //下载到本地

cd /高仿小米商城前端    //进入到前端目录

npm install          // 安装项目依赖(需要电脑上装有Node环境),等待安装完成之后,安装失败可用 cnpm 或 yarn


npm run serve        // 开启服务器,浏览器访问 http://localhost:8080


npm run build        // 执行构建命令,生成的dist文件夹放在服务器下即可访问
2、后端部分

使用root用户权限在本地新建名为xiaomi的mysql数据库,可在 /高仿小米商城后台/src/main/resources/application.yml文件中修改密码

cd /高仿小米商城后台    //进入到后端目录

使用数据库管理工具(如Navicat)运行xiaomi.sql脚本文件(用户端也是这个数据库),或复制其中内容在命令行执行

打开IDEA或者Eclipse 运行 高仿小米商城后台/src/main/java/com/zty/xiaomiadmin/server/ServerApplication.java文件,默认是8080端口

四、商城部分界面(可参考小米官网,很多界面类似)

1、商品分类及轮播图 

在这里插入图片描述

 2、商品细节图 

在这里插入图片描述

 3、登录注册模块

在这里插入图片描述

 4、购物车模块

在这里插入图片描述

 5、地址管理 

在这里插入图片描述

 6、商品推荐 

在这里插入图片描述

 7、订单模块 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/555516.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker Volume (存储卷)

什么是存储卷? 存储卷就是将宿主机的本地文件系统中存在的某个目录直接与容器内部的文件系统上的某一目录建立绑定关系。这就意味着,当我们在容器中的这个目录下写入数据时,容器会将其内容直接写入到宿主机上与此容器建立了绑定关系的目录。在宿主机上…

「51媒体」权重高新闻源央级媒体邀约资料有哪些?

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 权重高的央级媒体邀约资源包括了中国一些最具影响力和权威性的新闻机构。具体如下: 人民日报:作为中国共产党中央委员会的机关报,人民日报具有极高的权…

openEuler-23.03下载

下载地址:openEuler下载 | 欧拉系统ISO镜像 | openEuler社区官网 下载版本:openEuler-23.03-x86_64-dvd.iso

生产者,消费者,队列缓冲区,线程

public class CustomQueue {private BlockingQueue<Integer> queue;public CustomQueue() {// 初始化一个容量为1的阻塞队列queue new LinkedBlockingQueue<>(1);}public void put(int num) throws InterruptedException {// 将数字放入队列queue.put(num);}publi…

给一个新项目配置conda环境的完整流程

创建环境&#xff0c;并指定python的版本&#xff0c;我这边指定为3.7&#xff1a; conda create --name [自定义的环境名] python3.7我这边假定我的环境名为grand&#xff1a; conda create --name grand python3.7创建成功后&#xff0c;初始化一下conda&#xff1a; source …

Google DeepMind: Many-Shot vs. Few-Shot

本文介绍了如何通过增大上下文窗口&#xff0c;利用大型语言模型&#xff08;LLMs&#xff09;进行多实例上下文学习&#xff08;Many-Shot In-Context Learning&#xff0c;ICL&#xff09;的方法。主要描述了现有的几实例上下文学习方法虽然在推理时能够通过少量例子学习&…

基于Java+SpringBoot+vue动物救助平台设计和实现

基于JavaSpringBootvue动物救助平台设计和实现 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &#…

树莓派使用总结

手上拿到了一块Raspberry Pi 4B板子。研究一下怎么用。 安装系统 直接到官网【Raspberry Pi 】下载在线安装助手 安装好后&#xff0c;打开软件&#xff0c;选择好板子型号、系统、TF卡&#xff0c;一路下一步就行。 树莓派接口 直接查看官方的资料【Raspberry Pi hardwar…

基础算法之二分算法

前言 本次博客&#xff0c;将要介绍二分算法的基本原理以及如何使用&#xff0c;深入浅出 二分可以针对整型以及浮点型接下来对其讲解希望对小白有所帮助吧 整型的二分法 一般要在一个数组中猜出一个数是否存在我们可以遍历一遍整个数组&#xff0c;判断是否存在&#xff0…

Java面向对象编程

标题&#xff1a;Java面向对象编程 文章目录 标题&#xff1a;Java面向对象编程前言&#xff1a;面向对象的三条主线一、面向对象编程概述1.1 程序设计思路1.2 Java语言的基本元素&#xff1a;类和对象1.3 对象的内存解析 二、类的成员1—成员变量2.1 “变量”定义&分类2.2…

蓝桥杯备赛

关闭同步流&#xff1a; ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); 注意数据范围&#xff1a;数据范围较大时干脆所有变量类型都定义成longlong等。 stl&#xff1a; sort函数 时间复杂度为nlog(n); sort(数组指针&#xff0c;从指针开始多少个数&#xff0c;great…

如何辨别:DNS污染or DNS劫持?

DNS劫持和DNS污染的情况在互联网中并不少见&#xff0c;到底是出现了DNS污染还是DNS劫持。什么是DNS污染&#xff1f;什么是DNS劫持&#xff1f;我们该如何辨别DNS污染和DNS劫持&#xff1f; DNS劫持&#xff1a; DNS 劫持是指恶意攻击者通过非法手段篡改了网络中的 DNS 服务…

HTML快速入门

HTML简介 HTML&#xff08;超文本标记语言&#xff09;是一种用于创建网页和Web应用程序的标记语言。它由一系列标签组成&#xff0c;每个标签通过尖括号来定义&#xff0c;并用于标记文本、图像、链接和其他内容。HTML标签描述了网页中的信息结构和布局&#xff0c;并定义了文…

[MySQL数据库] 索引与事务

1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针.可以对表中的一列或多列创建索引,并指定索引的类型&#xff0c;各类索引有各自的数据结构实现. 1.2 作用 数据库中的表、数据、索引之间的关系&#xff0c;类似于书架上的图书、书籍…

【Redis】面试题汇总

Redis什么是Redis、使用场景有哪些Redis 为什么这么快&#xff1f;Redis 数据类型及使用场景五种常见的 Redis 数据类型是怎么实现&#xff1f;Redis是单线程吗Redis 采用单线程为什么还这么快&#xff1f;Redis 如何实现数据不丢失&#xff1f;Redis 如何实现服务高可用&#…

【复习笔记】FreeRTOS(六) 队列操作

本文是FreeRTOS复习笔记的第六节&#xff0c;队列操作。 上一篇文章&#xff1a; 【复习笔记】FreeRTOS(五)时间片调度 文章目录 1.队列操作1.1.队列操作过程1.2.队列操作常用的API函数 二、实验设计三、测试例程四、实验效果 1.队列操作 队列是为了任务与任务、任务与中断之间…

极狐GitLab x LigaAI,AI 时代研发提效新范式

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 近日&#xff0c;极狐GitLab 和 LigaAI 宣布合作&#xff0c;双…

分布式锁设计

一、为什么需要分布式锁 1.1 单体项目同步实现 在单进程&#xff08;启动一个jvm&#xff09;的系统中&#xff0c;当存在多个线程可以同时改变某个变量&#xff08;可变共享变量&#xff09;时&#xff0c;就需要对变量或代码块做同步&#xff0c;使其在修改这种变量时能够线…

vue2中props属性设置一个对象或数组的默认值

在Vue.js中&#xff0c;如果您想要为一个props属性设置一个对象或数组的默认值&#xff0c;您应该使用一个函数来返回这个默认值。这是因为对象和数组是引用类型&#xff0c;直接将它们作为默认值可能会导致预设的默认值被所有实例共享&#xff0c;这不是我们想要的结果。 下面…

zabbix 自定义模板,邮件报警,代理服务器,自动发现与自动添加及snmp

目录 一. 自定义监控内容 1. 在客户端创建自定义 key 2. 在 web 页面创建自定义监控项模块 2.1 创建模板 2.2 创建应用集 2.3 创建监控项 2.4 创建触发器 2.5 创建图形 2.6 将主机与模板关联起来 登录测试 2.7 设置邮件报警 测试邮件报警 3. nginx 服务状况的检测…