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

若依Vue3.8.2项目开发+Gitee提交完整流程（学生信息模块）

news 2026/4/27 1:34:12

本文记录若依Vue3.8.2框架下，学生信息模块从代码生成、前后端配置、功能测试到Gitee仓库提交的完整实操流程，步骤清晰可复现，适合新手参考。

一、前期准备
  1. 环境准备：已搭建若依Vue3.8.2前后端环境（JDK、MySQL、IDEA、Node.js），确保后端项目能正常启动，前端能成功访问登录页面。
  2. 工具准备：DBeaver（数据库操作）、IDEA（后端开发）、VS Code（可选，前端查看）、Git（版本控制）。
  3. 仓库准备：已创建Gitee仓库（本文仓库地址：https://gitee.com/breezy-style/elegant-code.git），目标分支为main。
二、核心开发流程（学生信息模块）
2.1 数据库表创建

在MySQL数据库（若依默认数据库ry_vue_v382）中，创建学生信息表my_student，字段如下（可通过DBeaver执行SQL）：

-- 创建学生表 CREATE TABLE `my_student` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '主键', `name` varchar(30) DEFAULT NULL COMMENT '姓名', `sex` char(1) DEFAULT NULL COMMENT '性别', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='学生信息表';
2.2 若依代码生成器生成基础代码

若依框架自带代码生成器，可快速生成前后端基础代码（无需手动编写CRUD接口和页面），操作步骤如下，重点补充关键细节和注意事项：

  1. 登录若依后端管理系统：打开浏览器，输入后端访问地址（默认地址：http://localhost:8080/ruoyi-admin/），使用管理员账号密码登录（默认账号：admin，密码：admin123）；登录成功后，在左侧菜单栏找到「系统工具」，点击展开后，选择「代码生成」选项，进入代码生成主页面。
  2. 导入数据库表并生成代码：进入代码生成页面后，点击页面顶部的「导入表」按钮，弹出数据库表选择弹窗；在弹窗中，找到之前在MySQL中创建的「my_student」表（可通过搜索框输入表名快速定位），勾选该表后，点击「确定」按钮完成导入；导入成功后，页面会显示该表的基本信息（字段名、字段类型、备注等），确认无误后，点击页面右上角的「生成代码」按钮，系统会自动打包生成所有基础代码，生成完成后会自动触发下载，得到一个压缩包（文件名通常为「ruoyi-codegen.zip」）。
  3. 解压压缩包并查看内容：找到下载的代码压缩包，右键选择「解压到当前文件夹」，解压完成后会得到一个同名文件夹，打开文件夹可看到3类核心文件，分别是：
    • 后端代码：包含domain（实体类）、mapper（数据访问层）、service（业务逻辑层）、controller（控制层）4个文件夹及对应文件；
    • 前端代码：包含vue页面（index.vue）和api接口文件（student.js）；
    • SQL文件：studentMenu.sql（用于导入学生信息模块的菜单和按钮权限，后续需放入项目sql目录）。

⚠️ 注意事项：

  • 导入表前，需确保后端项目已正常启动，且数据库连接配置正确（避免出现表无法找到的情况）；
  • 生成代码后，建议先检查压缩包是否完整，若下载失败，可重新点击「生成代码」按钮重新下载；
  • 解压时建议保留原始文件夹结构，方便后续按模块复制到项目中。
  1. 登录若依后端管理系统，进入「系统工具 → 代码生成」页面。
  2. 点击「导入表」，选择创建好的my_student表，导入成功后点击「生成代码」，下载代码压缩包。
  3. 解压压缩包，得到后端代码（domain、mapper、service、controller）、前端代码（vue页面、api接口）和SQL文件（studentMenu.sql，菜单权限脚本）。
2.3 前后端代码配置
2.3.1 后端代码配置（IDEA中操作）
  1. 后端代码按模块拆分放置，核心注意点：Controller类必须放入ruoyi-admin模块的controller包下（避免接口访问404），其余domain、mapper、service、mapper.xml文件放入ruoyi-system模块对应目录。
  2. 检查Controller类注解，确保有@RestController和@RequestMapping("/system/student")，接口路径与前端一致。
  3. 重启后端项目（RuoYiApplication），确保控制台无报错，提示“Started RuoYiApplication in xxx seconds”即为启动成功。
2.3.2 前端代码配置
  1. 将解压后的前端api文件（student.js）放入ruoyi-ui/src/api/system目录下，确保文件包含list、add、update、remove、export等接口方法。
  2. 将前端vue页面（index.vue）放入ruoyi-ui/src/views/system/student目录下，确保页面路由、表单、表格渲染正常。
  3. 无需重启前端服务，直接刷新浏览器页面即可加载新页面（若有缓存，按Ctrl+Shift+R强制刷新）。

2.4 菜单权限配置（执行SQL）

将代码生成器导出的studentMenu.sql文件，放入项目sql目录下，修改文件内容，在顶部添加学生表建表语句（合并为“建表+菜单”二合一脚本），最终脚本如下：

-- 创建学生表 CREATE TABLE `my_student` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '主键', `name` varchar(30) DEFAULT NULL COMMENT '姓名', `sex` char(1) DEFAULT NULL COMMENT '性别', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='学生信息表'; -- 菜单 SQL insert into sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark) values('学生信息', '3', '1', 'student', 'system/student/index', 1, 0, 'C', '0', '0', 'system:student:list', '#', 'admin', sysdate(), '', null, '学生信息菜单'); -- 按钮父菜单ID SELECT @parentId := LAST_INSERT_ID(); -- 按钮 SQL insert into sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark) values('学生信息查询', @parentId, '1', '#', '', 1, 0, 'F', '0', '0', 'system:student:query', '#', 'admin', sysdate(), '', null, ''); insert into sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark) values('学生信息新增', @parentId, '2', '#', '', 1, 0, 'F', '0', '0', 'system:student:add', '#', 'admin', sysdate(), '', null, ''); insert into sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark) values('学生信息修改', @parentId, '3', '#', '', 1, 0, 'F', '0', '0', 'system:student:edit', '#', 'admin', sysdate(), '', null, ''); insert into sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark) values('学生信息删除', @parentId, '4', '#', '', 1, 0, 'F', '0', '0', 'system:student:remove', '#', 'admin', sysdate(), '', null, ''); insert into sys_menu (menu_name, parent_id, order_num, path, component, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark) values('学生信息导出', @parentId, '5', '#', '', 1, 0, 'F', '0', '0', 'system:student:export', '#', 'admin', sysdate(), '', null, '');

在DBeaver中执行该SQL，导入菜单和按钮权限，刷新若依后台即可看到左侧「学生信息」菜单。

三、功能测试（增删改查+导出）

所有配置完成后，对学生信息模块进行完整功能测试，确保每一个功能正常可用：

3.1 新增功能测试
  1. 点击「学生信息」菜单，进入页面后点击右上角「新增」按钮，弹出表单。
  2. 填写测试数据（姓名：测试学生，性别：男），点击「确定」，提示“操作成功”即为正常。
  3. 刷新页面，列表中可看到新增的数据，说明数据成功写入数据库。

3.2 查询功能测试
  1. 在页面顶部搜索框输入新增的“测试学生”，点击「搜索」。
  2. 列表仅显示该条数据，说明查询功能正常；清空搜索条件，再次搜索，列表恢复所有数据，查询重置功能正常。

3.3 修改功能测试
  1. 找到测试数据，点击操作列「修改」按钮，弹出表单。
  2. 将姓名修改为“修改后的学生”，点击「确定」，提示“操作成功”。
  3. 刷新页面，数据显示为修改后内容，说明更新功能正常。

3.4 删除功能测试
  1. 找到修改后的数据，点击操作列「删除」按钮，弹出确认框。
  2. 点击「确定」，提示“操作成功”，数据从列表中消失，说明删除功能正常。

3.5 导出功能测试
  1. 新增1-2条测试数据，确保列表不为空。
  2. 点击页面右上角「导出」按钮，浏览器自动下载Excel文件。
  3. 打开Excel文件，能看到所有测试数据，说明导出功能正常。

四、Gitee仓库提交（main分支）

功能测试无误后，将所有更新内容提交到Gitee仓库main分支，步骤如下：

4.1 提交前准备
  1. 确认需要提交的文件：前端ruoyi-ui目录（更新的页面和api）、后端ruoyi-admin和ruoyi-system目录（更新的代码）、sql目录（修改后的studentMenu.sql）。
  2. 确保无多余文件（如之前临时创建的update.sql，已删除，避免冲突）。
4.2 执行Git命令提交（IDEA终端）

打开IDEA底部Terminal终端，输入以下3条命令，依次执行：

git add . git commit -m "前端：源码[有更新] 后端：源码[有更新] sql 文件[数据库有更新]" git push origin main
4.3 提交成功验证

命令执行完成后，终端出现以下提示，说明提交成功：

Enumerating objects: 108, done. Counting objects: 100% (108/108), done. Delta compression using up to 20 threads Compressing objects: 100% (49/49), done. Writing objects: 100% (64/64), 16.38 KiB | 3.28 MiB/s, done. Total 64 (delta 28), reused 0 (delta 0), pack-reused 0 (from 0) remote: Powered by GITEE.COM [1.1.23] remote: Set trace flag 314206b6 To https://gitee.com/breezy-style/elegant-code.git 1dd5984..027569c main -> main

此时，Gitee仓库main分支已同步所有更新内容，别人拉取代码后，执行sql目录下的studentMenu.sql，即可一键完成建表和菜单导入，直接使用学生信息模块。

五、总结

本次流程从零完成了若依Vue3.8.2项目中学生信息模块的开发、测试与仓库提交，核心要点如下：

  1. 后端Controller必须放入ruoyi-admin模块，否则接口无法访问；
  2. 前端文件路径必须正确（api放入system目录，vue放入system/student目录）；
  3. studentMenu.sql合并建表语句，实现“一键执行，直接可用”，规范且便捷；
  4. 提交Gitee时，确保提交信息清晰，分支正确（main分支），避免文件冲突。

整个流程符合若依框架规范和项目开发标准，新手可按步骤复现，避免踩坑。

http://www.jsqmd.com/news/706118/

相关文章：

  • 躲进弹坑更安全吗？
  • 2026年呼和浩特正规床垫厂家销售TOP5，你知道几个？
  • 2026云南纯水设备标杆名录：云南净水设备、云南污水处理、云南纯水设备、四川净水设备、四川污水处理、四川纯水设备选择指南 - 优质品牌商家
  • Materialize：用SQL实现毫秒级实时数据处理的增量物化视图引擎
  • 《深耕QClaw协作逻辑，构建无误解的智能体沟通体系》
  • 边缘计算中视觉语言动作模型的优化与加速
  • STM32CubeMX生成的工程，为什么开发板能跑QEMU却不行？深入排查SystemInit函数
  • ASP Folder：深入解析ASP文件夹在Web开发中的应用
  • 基于LLM与向量数据库的智能体框架Lore：构建私有知识库AI助手
  • 2026玉溪蓝莓批发厂家排行：澄江蓝莓/玉溪蓝莓/云南蓝莓/澄江花香蓝莓/玉溪花香蓝莓/云南花香蓝莓/选择指南 - 优质品牌商家
  • Postgresql数据库快速入门
  • 利用Awesome LLM Apps仓库：从开源项目学习大模型应用开发实战
  • SVM中拉格朗日乘数法与松弛变量的应用原理
  • 3D人脸识别技术研究
  • 监控靠报警？还是靠AI？90%的系统其实“早就该宕了”
  • AI助手配置管理工具cursor-kit：统一管理Cursor、Copilot、AntiGravity配置
  • 沙箱隔离失效的11个隐性信号，第8个已在金融客户生产环境触发RCE——MCP 2026隔离健康度自检清单
  • 国产中间件兼容性黑洞：MCP 2026在东方通TongWeb 7.0.4.12下JNDI绑定失败的4层根因分析（从JNI调用栈到国密BCC证书链完整性验证）
  • TiMEM-AI：用大语言模型实现可解释时间序列预测的实践指南
  • 票据结构化信息解析
  • 新闻文本自动摘要预处理技术与实践
  • 深度学习图像增强实战：Keras工具链与领域优化
  • Revornix：基于LLM的AI代码助手架构解析与实战指南
  • 2026年Q2镍铜板质量升级指南：N6镍卷带、N6镍管、纯镍棒、纯镍管、钛镍合金材料、钛镍材料、镍合金板、镍合金法兰选择指南 - 优质品牌商家
  • 农业数据主权危机：MCP 2026要求实时上传作业轨迹、油耗、工况等137个字段——你的ISOBUS网关真的合规吗？
  • 如何免费一键抠图？2026年在线AI抠图工具推荐，帮你解决证件照和商品图背景问题
  • 【2026年最新600套毕设项目分享】高校教师成果管理小程序（30177）
  • GPU加速多标签分类：RAPIDS cuML实战与优化
  • 09华夏之光永存：盘古大模型开源登顶世界顶级——开源生态共建指南（第九篇）
  • 序_博客概述