企业官网建设流程全解析

​ 然然管理系统仓库地址
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即可看到系统登录页面

​