当前位置: 首页 > 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

http://www.lryc.cn/news/476181.html

相关文章:

  • STM32CUBEIDE FreeRTOS操作教程(八):queues多队列
  • SIGNAL TAP使用记录
  • 基于vue3和elementPlus的el-tree组件,实现树结构穿梭框,支持数据回显和懒加载
  • 彻底理解链表(LinkedList)结构
  • TON 区块链开发的深入概述#TON链开发#DAPP开发#交易平台#NFT#Gamefi链游
  • Hive专栏概述
  • 鼠标悬停后出现小提示框实现方法
  • 计算机视觉常用数据集Foggy Cityscapes的介绍、下载、转为YOLO格式进行训练
  • css中的样式穿透
  • MMCA:多模态动态权重更新,视觉定位新SOTA | ACM MM‘24 Oral
  • linux同步执行命令脚本 (xcall)
  • opencv - py_imgproc - py_grabcut GrabCut 算法提取前景
  • ChatGPT多模态命名实体识别
  • 04-Dubbo的通信协议
  • 开源数据库 - mysql - innodb源码阅读 - 线程启动
  • 在美团外卖上抢券 Python来实现
  • 【ONLYOFFICE 文档 8.2 版本深度测评】功能革新与用户体验的双重飞跃
  • npm入门教程18:npm发布npm包
  • VueSSR详解 VueServerRenderer Nutx
  • 构建您自己的 RAG 应用程序:使用 Ollama、Python 和 ChromaDB 在本地设置 LLM 的分步指南
  • 谷歌浏览器安装axure插件
  • Java唯一键实现方案
  • opencv - py_imgproc - py_canny Canny边缘检测
  • Spring Boot 创建项目详细介绍
  • 70B的模型需要多少张A10的卡可以部署成功,如果使用vLLM
  • clickhouse配置用户角色与权限
  • 面试题整理 4
  • React基础大全
  • 51c大模型~合集10
  • 【已解决】element-plus配置主题色后,sass兼容问题。set-color-mix-level() is...in Dart Sass 3