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

news2024/11/25 20:26:59

博主介绍擅长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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  DEFAULT 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 = InnoDB
  AUTO_INCREMENT = 2
  DEFAULT 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 {

    @Autowired
    private ICommentService commentService;

    @Autowired
    private 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套)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

手写nacos

目录 背景过程Demo1端Demo2端SDK端Serve端1、某一个服务启动&#xff0c;将此服务信息放到注册表中2、当注册表中有新添加的信息&#xff0c;遍历整个注册列表&#xff0c;每个服务都拉下来一份新的注册列表3、哪个服务中的配置文件发生过改变&#xff0c;就让哪个服务重新拉取…

微软的三门课程帮你入门AI

现在AI技术如火如荼的&#xff0c;还没有入门AI技术的&#xff0c;可能在找一些入门的资料&#xff0c;现在好很多大公司都推出了自己的学习课程&#xff0c;这里整理了三门微软推出的课程&#xff0c;希望能一步一步的带你进入AI的技术大门。 Getting started with Python 这…

Flume学习---2、Flume进阶(事务)、负载均衡、故障转移、聚合

1、Flume进阶 1.1 Flume事务 1.2 Flume Agent内存原理 1、ChannelSelector ChannelSelector的作用就是选出Event将要被发往哪个Channel。其共有两种类型&#xff0c;分别是Replicating&#xff08;复制&#xff09;和Multiplexing&#xff08;多路复用&#xff09;。 Replicat…

Django-入门

文章目录 一、Django框架介绍二、后台管理第一步:项目的创建与运行第二步:应用的创建和使用第三步: 项目的数据库模型第四步: 启用后台Admin站点管理 三、前台管理第一步: URLconf 路由管理第二步: 视图函数处理业务逻辑第三步: 模板管理实现好看的HTML页面&#xff08;可参考菜…

一文带你读懂:TCP连接的三次握手和四次挥手(下篇)

天下没有不散的宴席&#xff0c;对于 TCP 连接也是这样&#xff0c; TCP 断开连接是通过四次挥手方式。下面我们通过实操&#xff0c;来彻底理解四次挥手。 对TCP连接建立三次握手感兴趣的同学&#xff0c;可以看我上一篇文章&#xff1a;一文带你读懂&#xff1a;TCP连接的三次…

[环境配置]让sd自动翻译提示词插件sd-webui-prompt-all-in-one安装

安装方式 方式一&#xff08;使用git克隆&#xff09;&#xff1a; 此方法需要你的电脑上安装了 git&#xff0c;如果没有安装&#xff0c;可参考 git 官方文档 进行安装。 打开终端&#xff0c;进入到你的 stable-diffusion-webui 目录下。 使用 git 克隆 sd-webui-prompt…

RobinKarp(字符串哈希)---分析与实现(C++)

1. 简述 给定字符串pattern和串text。求串pattern在串text中出现的位置。 暴力比较是逐个字符比较来确定两个串是否相等&#xff0c;若当前比较失败 则回到开始字符对应字符的后一个字符重复过程。 哈希就是一个大范围到小范围的映射 字符串哈希则是通过比较两个串的哈希值相…

Leetcode 剑指 Offer II 030. 插入、删除和随机访问都是 O(1) 的容器

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 设计一个支持在平均 时间复杂度 O(1) 下&#xff0c;执行以下操作…

使用NLPAUG 进行文本数据的扩充增强

在机器学习中&#xff0c;训练数据集的质量在很大程度上决定了模型的有效性。我们往往没有足够的多样化数据&#xff0c;这影响了模型的准确性。这时数据增强技术就派上了用场。 数据增强可以通过添加对现有数据进行略微修改的副本或从现有数据中新创建的合成数据来增加数据量…

代码随想录训练营Day53|1143.最长公共子序列;1035.不相交的栈;53.最大子序和

1143.最长公共子序列 class Solution {public int longestCommonSubsequence(String text1, String text2) {int[][] dp new int[text1.length()1][text2.length()1];for(int i1;i<text1.length();i){for(int j1;j<text2.length();j){if(text1.charAt(i-1)text2.charAt(…

12性能提升:如何提升gRPC系统性能

这篇文章我们来一起学习下如何提升gRPC系统服务的性能。 gRPC 是一个高性能、开源的 RPC 框架,设计目标是支持多种编程语言和多种平台。它基于 Google 发布的 Protobuf(Protocol Buffers)序列化协议,可以在不同的应用程序之间传输数据。gRPC 具有高效率和可扩展性的特点,…

python3 爬虫相关学习7:使用 BeautifulSoup下载网页图片到本地文件夹

目录 1 一个爬图片pic的代码的例子 1.1 学习的原文章 1.2 原始代码的问题总结 问题1 问题2 问题3 其他问题 1.3 原始代码 2 直接在cmd里 python运行报错 和 处理 2.1 运行报错 2.2 报错原因&#xff1a; 没有提前安装这个bs4 模块 2.3 如何提前知道我的python环境…

【微信小程序】wxml、wxss、js、json文件介绍

&#x1f609;博主&#xff1a;初映CY的前说(前端领域) ,&#x1f4d2;本文核心&#xff1a;微信小程序的入门介绍 【前言】书接上回&#xff0c;我们知道了一个小程序的构成结构&#xff0c;接下来我们来进一步学习小程序的目录结构中的.wxml、.wxss、.js、.json。 目录 ⭐ 一…

一学就会-----链表中倒数第K个节点

文章目录 题目描述思路一代码示例思路二代码示例 题目描述 输入一个链表&#xff0c;输出该链表中倒数第k个结点。 图片示例&#xff1a; 思路一 由于这道题目并没有要求时间复杂度&#xff0c;我们完全可以先遍历一遍链表&#xff0c;得到链表的结点总数&#xff08;count&am…

利用Zookeeper实现集群选举

什么是Zookeeper 分布式开源协调系统&#xff0c;数据模型简单&#xff0c;可以实现同步&#xff0c;配置管理&#xff0c;分组管理&#xff0c;分命名空间管理等。 技术本质 一个原子消息传递系统&#xff0c;它使所有服务器保持同步 FLP(3个科学家名字命名) 理论角度&…

【Spring Security】的RememberMe功能流程与源码详解,基础-进阶-升级-扩展,你学会了吗?

文章目录 前言原理 基础版搭建初始化sql依赖引入配置类验证 源码分析 进阶版集成源码分析疑问1疑问2 鉴权 升级版集成初始化sql配置类验证 源码分析鉴权流程 扩展版 前言 之前我已经写过好几篇权限认证相关的文章了&#xff0c;有想复习的同学可以查看【身份权限认证合集】。今…

OpenAI官方提示词课(三)如何总结文章

现在是信息爆炸时代&#xff0c;打开手机&#xff0c;各种文章扑面而来。我们的精力是有限的。如果有人帮忙把文章总结好给我们&#xff0c;这不就节省了很多时间嘛&#xff01;我们也就可以阅读更多的文章了。 恰好大语言模型在总结文章方面非常有天赋。 下面来看看示例。 …

数学基础第二天

介绍 对于Hissian矩阵是正定的&#xff0c;在这一点是整个范围内的最小值&#xff0c;y在各个方向的二阶导数都是>0的 对于Hissian矩阵是负定的&#xff0c;在这一点是整个范围内的最大值&#xff0c;y在各个方向的二阶导数都是<0的, 对于Hissian矩阵是不定的&#xff…

有了这个工具,支付宝商家多个账号下的账单管理更方便了

大家好&#xff0c;我是小悟 为方便拥有多个支付宝账号的商家获取自身业务、资金数据及下载对账单的能力&#xff0c;为商家提供了商家账单产品&#xff0c;商家可以通过该产品系统化接入账单数据&#xff0c;实现支付宝商家多个账号账单管理的功能。 为拥有多个支付宝账号的…

华为OD机试真题 JavaScript 实现【求符合要求的结对方式】【2023Q1 100分】,附详细解题思路

一、题目描述 用一个数组A代表程序员的工作能力&#xff0c;公司想通过结对编程的方式提高员工的能力&#xff0c;假设结对后的能力为两个员工的能力之和&#xff0c;求一共有多少种结对方式使结对后能力为N。 二、输入描述 6 2 3 3 4 5 1 6 第一行为员工的总人数&#xff…