基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统

简介: 基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统

一、基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统


基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统,主要分为用户端和管理端两个模块。

用户端主要支撑首页、商品信息、商品咨询、个人中心、后台管理、购物车、在线客服等功能。

管理端主要支撑首页、个人中心、用户管理、商品分类管理、商品信息管理、订单评价管理、系统管理、订单管理等功能。


二、技术框架


基于Springboot+MybatisPlus+Vue的前后端分离电子商城系统

开发语言:Java JDK1.8

数据库:mysql5.7

前端:Bootstrap框架+jstl标签语法+JSP技术/VUE框架

后端:Springboot框架、Spring框架、持久层MyBatis+PageHelper分页插件

开发工具:Idea2020/Eclipse VScode Navicat Maven3.6


三、运行步骤及地址


1.Navicat中创建数据库。

2.在数据库中运行src/main/resources下的sql文件。

3.修改src/main/resources的主配置文件中的的数据库用户名和密码。

4.启动Tomcat服务器,或者启动springboot项目。

5.运行启动项目。

6.登陆地址:

管理员账号:

用户账号:

源码+数据库:

a73c7db1c0e7450884f669af675f883e.png

80a6a1ba7b864ef69efd9d5b34008aa0.png

b895d97adbe34b91afa9783dbcfe93de.png

四、展示页


直接描述图片就好【前台和后台页面】


4.1 前台页面


  • 首页
    进行商品信息推荐,提供依据商品名称的搜索功能。


daab6d49158345ebb173bd9a90594f2d.png


商品信息

显示商品的名称、品牌、展示图等信息,可通过商品种类进行筛选。


image.png


选择手机后仅展示此品类下的商品信息。

image.png


个人中心

可对用户名、密码、姓名、性别、头像、联系电话、余额等内容进行更新信息。


image.png



购物车

对添加到购物车的产品名称和价格进行显示,可修改数量,进行删除或购买操作。


79c64685310e41fbb5b8dff30d80ef0e.png


在线客服

可与在线客服进行沟通询问。

bf0413a8e15e4bdcace01f40e32fe8b5.png


4.2 后台页面


  • 用户管理
    以列表形式展示索引、用户名、姓名、性别、头像、联系电话等信息。
    可进行详情、修改、删除操作。


829d39cd75f541069bbe36e71fba3ad9.png


商品分类管理

以列表形式展示索引、商品分类等信息。

可进行详情、修改、删除、新增等操作。

可按照商品费雷进行查询。

0f25c757115d460c94dc931cf3589eaf.png


商品信息管理

以列表形式展示商品信息。

可进行详情、修改、查看评论、删除等操作。


1d1e71f43458419497891532fc3c4947.png

具体查看商品名称、商品分类、图片、品牌、规格、价格、商品详情等内容。


89c9863096dc412cac07217f5397bf2b.png


输入商品内容、商品分类、图片、品牌、规格、价格、商品详情等内容进行编辑操作。


5d10df5c62b844efb9c78624bcb0b0c0.png

订单评价管理

以列表形式展示索引、订单编号、商品名称、商品分类、品牌、规格、评分、添加图片、评价内容、评价日期、用户名等信息。

可以通过商品名称、品牌、评分、用户名进行查询。。

可进行删除、统计报表等操作。


a1683f9f995c42739beeeae30195c611.png


轮播图管理

以列表形式展示索引、名称、值等信息。

可以进行详情、修改、删除、新增等操作。


1461130fbc634906b94cf5b8526234c3.png

商品咨询

以列表形式展示索引、标题、简介、图片等信息。

可进行详情、修改、删除、新增等操作。

可通过标题进行查询。


b9df7094384d4236be4f42a34c760b2e.png

已退款订单

以列表形式展示索引、订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息。

可进行删除等操作。

可通过订单编号、商品名称进行查询。

535c977c197b43ea85203bf0d3774f75.png

已完成订单

以列表形式展示索引、订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息。

可进行删除等操作。

可通过订单编号、商品名称进行查询。


c3002d500c26460fb317f493e78076d9.png

目录
相关文章
|
8月前
|
搜索推荐 JavaScript Java
基于springboot的家具商城销售系统
在数字化转型背景下,传统家具销售面临挑战。本研究基于Java、MySQL、Vue和Spring Boot技术,构建高效、智能的家具商城销售系统,推动行业线上线下融合,提升用户体验与企业竞争力,助力家具产业可持续发展。
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
821 7
|
12月前
|
Java 数据库连接 数据库
Spring boot 使用mybatis generator 自动生成代码插件
本文介绍了在Spring Boot项目中使用MyBatis Generator插件自动生成代码的详细步骤。首先创建一个新的Spring Boot项目,接着引入MyBatis Generator插件并配置`pom.xml`文件。然后删除默认的`application.properties`文件,创建`application.yml`进行相关配置,如设置Mapper路径和实体类包名。重点在于配置`generatorConfig.xml`文件,包括数据库驱动、连接信息、生成模型、映射文件及DAO的包名和位置。最后通过IDE配置运行插件生成代码,并在主类添加`@MapperScan`注解完成整合
1647 1
Spring boot 使用mybatis generator 自动生成代码插件
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
1395 0
|
XML Java 数据库连接
微服务——SpringBoot使用归纳——Spring Boot集成MyBatis——基于注解的整合
本文介绍了Spring Boot集成MyBatis的两种方式:基于XML和注解的形式。重点讲解了注解方式,包括@Select、@Insert、@Update、@Delete等常用注解的使用方法,以及多参数时@Param注解的应用。同时,针对字段映射不一致的问题,提供了@Results和@ResultMap的解决方案。文章还提到实际项目中常结合XML与注解的优点,灵活使用两者以提高开发效率,并附带课程源码供下载学习。
1154 0
|
前端开发 Java 数据库连接
Java后端开发-使用springboot进行Mybatis连接数据库步骤
本文介绍了使用Java和IDEA进行数据库操作的详细步骤,涵盖从数据库准备到测试类编写及运行的全过程。主要内容包括: 1. **数据库准备**:创建数据库和表。 2. **查询数据库**:验证数据库是否可用。 3. **IDEA代码配置**:构建实体类并配置数据库连接。 4. **测试类编写**:编写并运行测试类以确保一切正常。
832 2
|
Java 数据库连接 Maven
mybatis使用一:springboot整合mybatis、mybatis generator,使用逆向工程生成java代码。
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和MyBatis Generator,使用逆向工程来自动生成Java代码,包括实体类、Mapper文件和Example文件,以提高开发效率。
825 2
mybatis使用一:springboot整合mybatis、mybatis generator,使用逆向工程生成java代码。
|
SQL JSON Java
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和PageHelper进行分页操作,并且集成Swagger2来生成API文档,同时定义了统一的数据返回格式和请求模块。
935 1
mybatis使用三:springboot整合mybatis,使用PageHelper 进行分页操作,并整合swagger2。使用正规的开发模式:定义统一的数据返回格式和请求模块
|
前端开发 Java Apache
Springboot整合shiro,带你学会shiro,入门级别教程,由浅入深,完整代码案例,各位项目想加这个模块的人也可以看这个,又或者不会mybatis-plus的也可以看这个
本文详细讲解了如何整合Apache Shiro与Spring Boot项目,包括数据库准备、项目配置、实体类、Mapper、Service、Controller的创建和配置,以及Shiro的配置和使用。
3510 2
Springboot整合shiro,带你学会shiro,入门级别教程,由浅入深,完整代码案例,各位项目想加这个模块的人也可以看这个,又或者不会mybatis-plus的也可以看这个
|
Java 数据库连接 mybatis
Springboot整合Mybatis,MybatisPlus源码分析,自动装配实现包扫描源码
该文档详细介绍了如何在Springboot Web项目中整合Mybatis,包括添加依赖、使用`@MapperScan`注解配置包扫描路径等步骤。若未使用`@MapperScan`,系统会自动扫描加了`@Mapper`注解的接口;若使用了`@MapperScan`,则按指定路径扫描。文档还深入分析了相关源码,解释了不同情况下的扫描逻辑与优先级,帮助理解Mybatis在Springboot项目中的自动配置机制。
1384 1
Springboot整合Mybatis,MybatisPlus源码分析,自动装配实现包扫描源码