当前位置：首页 > news >正文

基于Java+Springboot+Vue的二次元商城网站设计与实现

news 2026/2/7 15:13:36

博主介绍：✌擅长Java、微信小程序、Python、Android等，专注于Java技术领域和毕业项目实战✌

🍅文末获取源码联系🍅

👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟

Java项目精品实战案例（300套）
Java+小程序项目实战（200套）

一、效果演示

二、前言介绍

三、主要技术

四、系统设计（部分）

4.1、主要功能模块设计

五、运行截图

5.1、后台功能

5.2.1、管理员登录界面

5.2.2、系统首页

5.2.3、会员管理

4.2.4、栏目管理

5.2.5、商品管理

5.2.6、评价管理

4.2.7、订单管理

5.3、前台功能

5.3.1、新用户注册登录

5.3.2、首页

5.3.3、商品分类

5.3.4、地址管理

5.3.5、订单管理

5.3.6、购物车管理

5.3.6、我喜欢的

六、库表设计

七、部分代码

八、源码获取

一、效果演示

二、前言介绍

如今的社会是一个互联网化的社会，线下的一切商业活动几乎都被线上运转着，人类活动的圈子也大部分都在互联网上进行。如今，二次元文化也在随着数字传媒的发展而不断发展着，其有着主要的话语权的无非是现在的90后以及00后，这些用户逐渐的成为了二次元文化商品的主要消费群体，并且二次元所具有的时代特征是二次元文化娱乐的主要形式，二次元打破了时代的墙壁，进入了市场经济，同电子商务相结合起来。而如今，线下交易模式和线上营销相结合着，比如以前是报修人员通过线下联系网络故障维修人员来上门进行维修，线下的联系方式有打电话、上门告知，但随着时代的发展，这种方式已经不复存在，报修人员也有相关的报修平台，只要将需要报修的大概问题向报修平台进行提交，维修中心的人员就会马上进行反馈，自动上门进行维修，维修结束之后，报修人员可以对维修人员的处理结果进行反馈打分。而且进行线上报修还可以有相应的优惠活动参与，这样也节省了一部分维修资金。还有其他的各种活动也是，同时，大多数的线下活动也在同时进行着线上模式。

三、主要技术

技术名	作用
SpringBoot	后端框架
Vue	前端框架
MySQL	数据库

四、系统设计（部分）

4.1、主要功能模块设计

五、运行截图

5.1、后台功能

5.2.1、管理员登录界面

输入网址进入网站，将跳出二次元商城网站后台管理员的登录的界面，然后管理员输入账户名和密码进行登录。如下图所示：

图5.2.2.1a 登录界面

5.2.2、系统首页

在系统管理中，展示了在此二次元商城中所注册的用户数量、在商城中所有上架的商品数量，以及成功下单的所有单数，是管理员对整个商城的受喜爱程度进行合理的估计以及制定后续的一个发展方向。

图5.2.2.1a 管理员列表

5.2.3、会员管理

图5.2.3.1a 会员管理列表

4.2.4、栏目管理

图4.2.4.1 栏目管理列表

图5.2.4.2 栏目编辑

5.2.5、商品管理

图5.2.5.1 商品管理列表

图5.2.5.2 商品添加

5.2.6、评价管理

图5.2.6.1a 评价管理列表

4.2.7、订单管理

4.2.7.1a 订单列表

5.3、前台功能

5.3.1、新用户注册登录

点击进入网站，在上方展示了二次元网站的所有功能模块，右侧为新用户注册以及用户登录的入口，点击从下方弹出输入框。

图5.3.1.1a 用户注册界面

5.3.2、首页

在登录成功进入之后，来到网站首页，在首页中，展示了本二次元网站的购物主题，背景模块以及文字的选择均是完全的贴合二次元商品的主题，给用户给予一种轻松愉快的感觉。在上方分两个模块展示，分别为商品分类与个人中心，点击个人中心，可基于首页下拉进入地址管理、订单列表、购物车管理、我喜欢的以及退出购物网站。

图5.3.2.1a 首页

5.3.3、商品分类

图5.3.3.1a 商品界面

图5.3.3.1b 商品详情

图5.3.3.1c 商品加入购物车

5.3.4、地址管理

图5.3.4a 地址列表

图5.3.4b 地址添加

5.3.5、订单管理

图5.3.5.1a 商品订单号

图5.3.5.1b 商品评价

5.3.6、购物车管理

图5.3.6.1a 购物管理

图5.3.6.1b 价格总计

图5.3.6.1c 商品支付

5.3.6、我喜欢的

图5.3.6.1a 我喜欢的商品界面

这里功能太多就不一一截图展示了

六、库表设计

/*
SQLyog Ultimate v13.1.1 (64 bit)
MySQL - 10.5.9-MariaDB : Database - shop
*********************************************************************
*//*!40101 SET NAMES utf8 */;/*!40101 SET SQL_MODE=''*/;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`shop` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;USE `shop`;/*Table structure for table `address` */DROP TABLE IF EXISTS `address`;CREATE TABLE `address`
(`id`      int(11) NOT NULL AUTO_INCREMENT,`user_id` int(11) NOT NULL,`name`    varchar(45) DEFAULT NULL COMMENT '姓名',`phone`   varchar(45) DEFAULT NULL COMMENT '手机',`address` text        DEFAULT NULL COMMENT '地址',`code`    varchar(45) DEFAULT NULL COMMENT '邮编',PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='地址';/*Data for the table `address` *//*Table structure for table `cart` */DROP TABLE IF EXISTS `cart`;CREATE TABLE `cart`
(`id`       int(11) NOT NULL AUTO_INCREMENT,`user_id`  int(11) NOT NULL,`goods_id` int(11) NOT NULL,`sum`      int(11) DEFAULT NULL COMMENT '数量',`attr`     text    DEFAULT NULL COMMENT '属性json',PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='购物车';/*Data for the table `cart` *//*Table structure for table `category` */DROP TABLE IF EXISTS `category`;CREATE TABLE `category`
(`id`   int(11) NOT NULL AUTO_INCREMENT,`name` varchar(45) DEFAULT NULL COMMENT '名称',PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='栏目';/*Data for the table `category` *//*Table structure for table `comment` */DROP TABLE IF EXISTS `comment`;CREATE TABLE `comment`
(`id`         int(11) NOT NULL AUTO_INCREMENT,`created_at` datetime    DEFAULT NULL,`user_id`    int(11) NOT NULL,`goods_id`   int(11) NOT NULL,`title`      varchar(45) DEFAULT NULL COMMENT '标题',`content`    text        DEFAULT NULL COMMENT '内容',`rating`     int(11)     DEFAULT NULL COMMENT '评分',PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='评论';/*Data for the table `comment` *//*Table structure for table `goods` */DROP TABLE IF EXISTS `goods`;CREATE TABLE `goods`
(`id`          int(11) NOT NULL AUTO_INCREMENT,`title`       varchar(45)    DEFAULT NULL COMMENT '标题',`content`     text           DEFAULT NULL COMMENT '内容',`price`       decimal(10, 2) DEFAULT NULL COMMENT '价格',`inventory`   int(11)        DEFAULT NULL COMMENT '库存数量',`attr`        text           DEFAULT NULL COMMENT '属性json',`created_at`  datetime       DEFAULT NULL,`category_id` int(11) NOT NULL,`pic`         varchar(245)   DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='商品';/*Data for the table `goods` *//*Table structure for table `like` */DROP TABLE IF EXISTS `like`;CREATE TABLE `like`
(`id`       int(11) NOT NULL AUTO_INCREMENT,`user_id`  int(11) DEFAULT NULL,`goods_id` int(11) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4;/*Data for the table `like` *//*Table structure for table `order` */DROP TABLE IF EXISTS `order`;CREATE TABLE `order`
(`id`         int(11) NOT NULL AUTO_INCREMENT,`created_at` datetime       DEFAULT NULL,`user_id`    int(11) NOT NULL,`total`      decimal(10, 2) DEFAULT NULL COMMENT '总价',`address`    text           DEFAULT NULL COMMENT '地址',PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='订单';/*Data for the table `order` *//*Table structure for table `order_item` */DROP TABLE IF EXISTS `order_item`;CREATE TABLE `order_item`
(`id`       int(11) NOT NULL AUTO_INCREMENT,`sum`      int(11) DEFAULT NULL COMMENT '数量',`goods_id` int(11) NOT NULL,`order_id` int(11) NOT NULL,`goods`    text    DEFAULT NULL COMMENT '商品快照',`attr`     text    DEFAULT NULL COMMENT '已选属性json',PRIMARY KEY (`id`)
) ENGINE = InnoDBDEFAULT CHARSET = utf8mb4 COMMENT ='订单项';/*Data for the table `order_item` *//*Table structure for table `user` */DROP TABLE IF EXISTS `user`;CREATE TABLE `user`
(`id`         int(11) NOT NULL AUTO_INCREMENT,`username`   varchar(45) DEFAULT NULL COMMENT '用户名',`password`   varchar(45) DEFAULT NULL COMMENT '密码',`created_at` datetime    DEFAULT NULL,`type`       int(11)     DEFAULT NULL COMMENT '类型',`email`      varchar(45) DEFAULT NULL COMMENT '邮箱',PRIMARY KEY (`id`)
) ENGINE = InnoDBAUTO_INCREMENT = 2DEFAULT CHARSET = utf8mb4 COMMENT ='用户';/*Data for the table `user` */insert into `user`(`id`, `username`, `password`, `created_at`, `type`, `email`)
values (1, 'admin', 'e10adc3949ba59abbe56e057f20f883e', '2021-03-11 14:54:36', 2, 'admin@qq.com');/*!40101 SET SQL_MODE = @OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS = @OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS = @OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

七、部分代码

package com.my.shop.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.my.shop.constant.MyPage;
import com.my.shop.dto.MyMsg;
import com.my.shop.entity.Comment;
import com.my.shop.exception.MyException;
import com.my.shop.service.ICommentService;
import com.my.shop.service.IGoodsService;
import io.swagger.annotations.Api;
import io.swagger.v3.oas.annotations.Operation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;/*** <p>* 评论 前端控制器* </p>** @author yl* @since 2021-03-10*/
@RestController
@RequestMapping("/user/comment")
@Api(tags = "用户评论")
public class CommentController {@Autowiredprivate ICommentService commentService;@Autowiredprivate IGoodsService goodsService;@RequestMapping(method = RequestMethod.GET, path = "/list")@Operation(summary = "列表")public MyMsg list(@RequestParam(required = false, defaultValue = "0") Long userId,@RequestParam(required = false, defaultValue = "0") Long goodsId,@RequestParam(required = false, defaultValue = "1") Integer page) {
//        HttpSession session = request.getSession();
//        User user = (User) session.getAttribute(User.USER_SESSION_NAME);Page<Comment> page1 = new Page<>(page, MyPage.PAGE_NUM);QueryWrapper<Comment> commentQueryWrapper = new QueryWrapper<>();if (userId > 0) {commentQueryWrapper.eq("user_id", userId);}if (goodsId > 0) {commentQueryWrapper.eq("goods_id", goodsId);}Page<Comment> page2 = commentService.page(page1, commentQueryWrapper);return new MyMsg(MyMsg.SUCCESS, "成功", page2);}@RequestMapping(method = RequestMethod.GET, path = "/{id}")@Operation(summary = "详细")public MyMsg get(@PathVariable Integer id) {Comment comment = commentService.getById(id);return new MyMsg(MyMsg.SUCCESS, "成功", comment);}@RequestMapping(method = RequestMethod.POST, path = "/")@Operation(summary = "新增")public MyMsg get(@RequestBody @Valid Comment comment, HttpServletRequest request) throws MyException {
//        HttpSession session = request.getSession();
//        User user = (User) session.getAttribute(User.USER_SESSION_NAME);
//
//        comment.setUserId(user.getId());if (goodsService.getById(comment.getGoodsId()) == null) {throw new MyException("商品不存在");}if (commentService.save(comment)) {return new MyMsg(MyMsg.SUCCESS, "成功");} else {return new MyMsg(MyMsg.FAIL, "失败");}}
}

八、源码获取

大家点赞、收藏、关注、评论啦、如果想要交流，关于技术讨论，可以找我~

精彩专栏推荐订阅：在下方专栏👇🏻👇🏻👇🏻👇🏻

Java项目精品实战案例（300套）

Java+小程序项目实战（200套）

一、效果演示

二、前言介绍

三、主要技术

四、系统设计（部分）

4.1、主要功能模块设计

五、运行截图

5.1、后台功能

5.2.1、管理员登录界面

5.2.2、系统首页

5.2.3、会员管理

4.2.4、栏目管理

5.2.5、商品管理

5.2.6、评价管理

4.2.7、订单管理

5.3、前台功能

5.3.1、新用户注册登录

5.3.2、首页

5.3.3、商品分类

5.3.4、地址管理

5.3.5、订单管理

5.3.6、购物车管理

5.3.6、我喜欢的

六、库表设计

七、部分代码

八、源码获取

相关文章：