news 2026/5/1 9:02:38

然然管理系统-学习搭环境-本地先跑起来

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
然然管理系统-学习搭环境-本地先跑起来

​ 然然管理系统仓库地址
https://gitee.com/OceanCore/ranran.git
https://github.com/qiaoting/ranran.git
本系统旨在通过简洁实用的方式整合最新技术栈,便于开发、调试与交付。希望它能为你的学习和开发工作带来帮助与借鉴。 对于希望自己从零快速搭建项目框架的开发者或者喜欢纯粹原生组件无过度封装的,特别适合本项目。

一、项目说明

感谢您关注此开源项目。本开源项目使用SpringBoot4+MybatisPlus+Vue3+Element-Plus,
旨在通过简洁实用的方式整合最新技术栈,便于开发、调试与交付。
希望它能为你的学习和开发工作带来帮助与借鉴。 对于希望自己从零快速搭建项目框架的开发者
或者喜欢纯粹原生组件无过度封装的,特别适合本项目。克隆项目后可以快速配置并启动。

二、开发环境

后端

后端的依赖非常精简,基本以spring相关为主
  • Java 21 # 使用了当前最新版本的springboot,建议java版本为21,不过使用17也不会报错
  • Spring Boot 4.0.0
  • MyBatis Plus 3.5.15
  • MySQL 8.0.41 # 服务器上安装的mysql版本为5.7
  • Redis 5.0.14.1
  • Maven 3.9.6

前端

  • Node 22
  • Vite 7.2.7
  • Vue 3.5.22
  • Element-Plus 2.11.5
  • Pinia 3.0.3
  • Router 4.6.3
  • Axios 1.13.1

三、功能简介

系统登录

默认内置 [admin/123456] 账号,拥有所有权限

系统首页

个人中心

用户管理

管理员账号默认禁止删除和禁用,其他用户新增修改均可操作,删除需要注意有无在角色中绑定,需要解绑后才可删除

添加新菜单,要求在前端代码中views目录下有对应的页面文件,比如添加图书管理菜单:

  • 组件路径:system/book/index
  • 权限字符串建议用组件路径斜杠转冒号:system📖index
  • 图标选择:点击输入框会弹窗供选择图标
  • 菜单类型:目录/菜单/按钮,当前只用到了目录和菜单,按钮类型预留

菜单管理

角色管理

角色页面,基本的增删改查功能,注意选择对应菜单时,父级菜单不会自动勾选,需要手动勾选。
角色在删除的时候会校验是否有用户绑定,有绑定则不允许删除

其中分配用户点击后会跳转到用户列表,可以添加或者删除角色对应的用户

公告管理

公告的新增目前简单用了输入框,后续可以改成富文本编辑器

公告发布后,登录系统时会在首页弹窗显示,点击关闭后不会再显示

定时任务

定时任务后台基于SpringTask实现
当前只实现了简单的cron表达式配置和启动停止功能

登录日志

略,后台在登录时简单记录了登录日志,可自行删去

四、本地开发环境搭建

1、数据库初始化

(1)直接在mysql中执行sql目录下的ranran.sql脚本即可创建所需的数据库表和几行初始数据;数据库的字符集最好明确指定好。
(2)保证redis可用

2、后端环境搭建

  • 安装JDK 21,并配置好环境变量
  • 安装Maven 3.9.6,也可以使用idea中自带的maven
  • 使用IDEA打开后端代码,等待依赖下载完成,或者手动点击maven的更新依赖按钮
  • 修改src/main/resources/application-dev.yml中的Mysql、Redis连接配置为你本地的配置
  • 运行com.ranran.system.RanranSystemApplication启动后端服务,默认端口8080

3、前端环境搭建

  • 安装Node 22,并配置好环境变量
  • 使用VsCode打开前端代码,或者使用命令行进入前端代码目录
  • 执行npm install安装依赖
  • 前端代码中vite.config.js文件中配置了代理,默认指向本地的8080端口,如有需要可自行修改
    target: ‘http://localhost:8080/’
  • 执行npm run dev启动前端服务,默认端口为3000
  • 浏览器访问http://localhost:3000即可看到系统登录页面

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 7:35:18

UI-TARS:开启GUI智能交互新纪元的原生AI引擎

UI-TARS:开启GUI智能交互新纪元的原生AI引擎 【免费下载链接】UI-TARS-7B-DPO 项目地址: https://ai.gitcode.com/hf_mirrors/ByteDance-Seed/UI-TARS-7B-DPO 在数字化办公场景中,图形用户界面已成为企业与用户交互的主阵地。然而传统自动化方案…

作者头像 李华
网站建设 2026/5/1 6:25:32

基于Qt5(C++)+SQLite 开发的一个小巧精美的本地音乐播放器

基于Qt5开发的一个小巧精美的本地音乐播放器 一、概述 1.1 主要内容: 利用 Qt5 GUI 框架及其中的音频播放模块,完成了一个小巧、界面精美的本地音乐播放器。支持添加本地音乐、添加歌单、歌词查看、自定义背景、系统托盘控制播放等。同时,…

作者头像 李华
网站建设 2026/5/1 7:29:38

工会管理|基于springboot 工会管理系统(源码+数据库+文档)

工会管理 目录 基于springboot vue工会管理系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取: 基于springboot vue工会管理系统 一、前言 博主介绍:✌️大…

作者头像 李华
网站建设 2026/4/26 18:43:42

助农电商|基于springboot 助农电商系统(源码+数据库+文档)

助农电商 目录 基于springboot vue助农电商管理系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取: 基于springboot vue助农电商管理系统 一、前言 博主介绍&#xff…

作者头像 李华
网站建设 2026/4/26 11:28:58

基于Uniapp + SpringBoot + Vue的大学新生智慧迎新平台

文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言 💛博主介绍&#…

作者头像 李华
网站建设 2026/4/29 17:22:34

基于SpringBoot + Vue的高校线下考试管理系统

文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言 💛博主介绍&#…

作者头像 李华