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

【098】基于SpringBoot+Vue实现的垃圾分类系统

系统介绍

视频演示

基于SpringBoot+Vue实现的垃圾分类系统

基于SpringBoot+Vue实现的垃圾分类系统设计了三种角色、分别是管理员、垃圾分类管理员、用户,实现了个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理等功能

技术选型

开发工具:idea2020.3+Webstorm2020.3

运行环境:jdk1.8+maven3.6.0+MySQL5.7+nodejs14.21.3

服务端技术:Springboot+Mybatis-plus

前端技术:html+css+Layui+jQuery+bootstrap+Vue+axios+Element-UI

成果展示

文档展示

image-20241103210319779

管理员登陆

image-20241103205614785

用户管理

image-20241103205646663

垃圾分类管理员管理

image-20241103205739678

垃圾分类管理

image-20241103205756914

垃圾类型管理

image-20241103205811329

垃圾图谱管理

image-20241103205827026

系统管理

image-20241103205841982

前台首页

image-20241103210118018

源码展示

@RequestMapping("users")
@RestController
public class UserController{@Autowiredprivate UserService userService;@Autowiredprivate TokenService tokenService;/*** 登录*/@IgnoreAuth@PostMapping(value = "/login")public R login(String username, String password, String captcha, HttpServletRequest request) {UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));if(user==null || !user.getPassword().equals(password)) {return R.error("账号或密码不正确");}String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());return R.ok().put("token", token);}/*** 注册*/@IgnoreAuth@PostMapping(value = "/register")public R register(@RequestBody UserEntity user){if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {return R.error("用户已存在");}userService.insert(user);return R.ok();}/*** 退出*/@GetMapping(value = "logout")public R logout(HttpServletRequest request) {request.getSession().invalidate();return R.ok("退出成功");}/*** 密码重置*/@IgnoreAuth@RequestMapping(value = "/resetPass")public R resetPass(String username, HttpServletRequest request){UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));if(user==null) {return R.error("账号不存在");}user.setPassword("123456");userService.update(user,null);return R.ok("密码已重置为:123456");}/*** 列表*/@RequestMapping("/page")public R page(@RequestParam Map<String, Object> params,UserEntity user){EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));return R.ok().put("data", page);}/*** 列表*/@RequestMapping("/list")public R list( UserEntity user){EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();ew.allEq(MPUtil.allEQMapPre( user, "user")); return R.ok().put("data", userService.selectListView(ew));}/*** 信息*/@RequestMapping("/info/{id}")public R info(@PathVariable("id") String id){UserEntity user = userService.selectById(id);return R.ok().put("data", user);}/*** 获取用户的session用户信息*/@RequestMapping("/session")public R getCurrUser(HttpServletRequest request){Long id = (Long)request.getSession().getAttribute("userId");UserEntity user = userService.selectById(id);return R.ok().put("data", user);}
}

账号地址及其他说明

1、地址说明

管理员登录页:http://localhost:8081/

前台首页:http://localhost:8080/springboot574f8/front/index.html

2、账号说明

管理员:admin/admin

垃圾分类管理员: admin1/123456

用户:user1/123456

3、目录结构展示

image-20241103211210997

4、项目结构展示

image-20241103210902043
5、运行步骤

1、创建数据库、导入sql脚本
2、修改application.yml中的数据库配置文件,启动服务端
3、在源代码\admin目录下打开cmd,执行npm install或者yarn install下载依赖
4、下载完毕后启动前端npm run serve,访问端口

源码获取

源码编号:098

添加下方名片回复:098

相关文章:

【098】基于SpringBoot+Vue实现的垃圾分类系统

系统介绍 视频演示 基于SpringBootVue实现的垃圾分类系统 基于SpringBootVue实现的垃圾分类系统设计了三种角色、分别是管理员、垃圾分类管理员、用户&#xff0c;实现了个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理等功能 …...

STM32CUBEIDE FreeRTOS操作教程(八):queues多队列

STM32CUBEIDE FreeRTOS操作教程&#xff08;八&#xff09;&#xff1a;queues多队列 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件&#xff0c;不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发板为例&#…...

SIGNAL TAP使用记录

一、首先编译工程 二、打开signal tap&#xff0c;并设置抓取时钟以及采样深度 二、点击set up&#xff0c;然后双击空白处&#xff0c;会弹出右侧窗口&#xff0c;点击filter选择pre_synthesis&#xff0c;这里选择综合前的信号观测&#xff0c;要确保左侧窗口内的信号是黑色…...

基于vue3和elementPlus的el-tree组件,实现树结构穿梭框,支持数据回显和懒加载

一、功能 功能描述 数据双向穿梭&#xff1a;支持从左侧向右侧转移数据&#xff0c;以及从右侧向左侧转移数据。懒加载支持&#xff1a;支持懒加载数据&#xff0c;适用于大数据量的情况。多种展示形式&#xff1a;右侧列表支持以树形结构或列表形式展示。全选与反选&#xf…...

彻底理解链表(LinkedList)结构

目录 比较操作结构封装单向链表实现面试题 循环链表实现 双向链表实现 链表&#xff08;Linked List&#xff09;是一种线性数据结构&#xff0c;由一组节点&#xff08;Node&#xff09;组成&#xff0c;每个节点包含两个部分&#xff1a;数据域&#xff08;存储数据&#xff…...

TON 区块链开发的深入概述#TON链开发#DAPP开发#交易平台#NFT#Gamefi链游

区块链开发领域发展迅速&#xff0c;各种平台为开发人员提供不同的生态系统。其中一个更有趣且越来越相关的区块链是TON&#xff08;开放网络&#xff09;区块链。TON 区块链最初由 Telegram 构思&#xff0c;旨在提供快速、安全且可扩展的去中心化应用程序 (dApp)。凭借其独特…...

Hive专栏概述

Hive专栏概述 Hive“出身名门”&#xff0c;是最初由Facebook公司开发的数据仓库工具。它简单且容易上手&#xff0c;是深入学习Hadoop技术的一个很好的切入点。专栏内容包括&#xff1a;Hive的安装和配置&#xff0c;其核心组件和架构&#xff0c;Hive数据操作语言&#xff0c…...

鼠标悬停后出现小提示框实现方法

大家在网页上会经常看到某些图标或文字&#xff0c;当鼠标悬停后会在四周某个位置出现一个简短的文字提示&#xff0c;这种提示分为两种&#xff0c;一种是提示固定的文字&#xff0c;例如放在qq图标上&#xff0c;会显示固定的文字“QQ”&#xff1b;第二种是显示鼠标所在标签…...

计算机视觉常用数据集Foggy Cityscapes的介绍、下载、转为YOLO格式进行训练

我在寻找Foggy Cityscapes数据集的时候花了一番功夫&#xff0c;因为官网下载需要用公司或学校邮箱邮箱注册账号&#xff0c;等待审核通过后才能进行下载数据集。并且一开始我也并不了解Foggy Cityscapes的格式和内容是什么样的&#xff0c;现在我弄明白后写下这篇文章&#xf…...

css中的样式穿透

1. >>> 操作符 <style scoped> /* 影响子组件的样式 */ .parent >>> .child {color: red; } </style>注意&#xff1a;>>> 操作符在某些预处理器&#xff08;如Sass&#xff09;中可能无法识别&#xff0c;因为它不是标准的CSS语法。 …...

MMCA:多模态动态权重更新,视觉定位新SOTA | ACM MM‘24 Oral

来源&#xff1a;晓飞的算法工程笔记 公众号&#xff0c;转载请注明出处 论文: Visual Grounding with Multi-modal Conditional Adaptation 论文地址&#xff1a;https://arxiv.org/abs/2409.04999论文代码&#xff1a;https://github.com/Mr-Bigworth/MMCA 创新点 提出了多模…...

linux同步执行命令脚本 (xcall)

linux同步执行命令脚本 (xcall) 1、在/usr/local/bin目录下 创建xcall文件 vim /usr/local/bin/xcall2、输入内容 #!/bin/bash # 获取控制台指令 判断指令是否为空 pcount$# if((pcount0)); thenecho "command can not be null !"exit fifor host in bigdata01 …...

opencv - py_imgproc - py_grabcut GrabCut 算法提取前景

文章目录 使用 GrabCut 算法进行交互式前景提取目标理论演示 使用 GrabCut 算法进行交互式前景提取 目标 在本章中 我们将了解 GrabCut 算法如何提取图像中的前景我们将为此创建一个交互式应用程序。 理论 GrabCut 算法由英国剑桥微软研究院的 Carsten Rother、Vladimir K…...

ChatGPT多模态命名实体识别

ChatGPT多模态命名实体识别 ChatGPT辅助细化知识增强&#xff01;![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/025e651de3ef440a90cbe05fa9971409.png)一、研究背景二、模型结构和代码任务流程第一阶段&#xff1a;辅助精炼知识启发式生成第二阶段&#xff1a;基于…...

04-Dubbo的通信协议

04-Dubbo的通信协议 Dubbo 支持的通信协议 Dubbo 框架提供了自定义的高性能 RPC 通信协议&#xff1a; 基于 TCP 的 Dubbo2 协议 基于 HTTP/2 的 Triple 协议 Dubbo 框架是不和任何通信协议绑定的&#xff0c;对通信协议的支持非常灵活&#xff0c;支持任意的第三方协议&#x…...

开源数据库 - mysql - innodb源码阅读 - 线程启动

线程启动源码 /** Start up the InnoDB service threads which are independent of DDL recovery.*/void srv_start_threads() {if (!srv_read_only_mode) {/* Before 8.0, it was master thread that was doing periodicalcheckpoints (every 7s). Since 8.0, it is the log …...

在美团外卖上抢券 Python来实现

在美团外卖上抢券的 Python 实现 在如今的互联网时代&#xff0c;自动化脚本已经成为了许多用户生活中不可或缺的工具。尤其是在购物、抢券等场景中&#xff0c;自动化脚本能够帮助我们节省大量的时间和精力。今天&#xff0c;我们将一起探索如何使用 Python 编写一个简单的脚…...

【ONLYOFFICE 文档 8.2 版本深度测评】功能革新与用户体验的双重飞跃

引言 在数字化办公的浪潮中&#xff0c;ONLYOFFICE 文档以其强大的在线协作功能和全面的办公套件解决方案&#xff0c;赢得了全球用户的青睐。随着 8.2 版本的发布&#xff0c;ONLYOFFICE 再次证明了其在办公软件领域的创新能力和技术实力。 一.协作编辑 PDF&#xff1a;团队合…...

npm入门教程18:npm发布npm包

一、准备工作 注册npm账号&#xff1a; 前往npm官网注册一个账号。注册过程中需要填写个人信息&#xff0c;并完成邮箱验证。 安装Node.js和npm&#xff1a; 确保你的计算机上已安装Node.js和npm。Node.js的安装包中通常包含了npm。你可以通过运行node -v和npm -v命令来检查它…...

VueSSR详解 VueServerRenderer Nutx

SSR Vue中的SSR&#xff08;Server-Side Rendering&#xff0c;服务器端渲染&#xff09;是一种将页面的渲染工作从客户端转移到服务器端的技术。以下是对Vue中SSR的详细解释&#xff1a; 一、SSR的工作原理 在传统的客户端渲染&#xff08;CSR&#xff09;中&#xff0c;页面的…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...