【项目-Ruoyi】Day2--前后端代码开发

¶写在前面

• 因为项目的技术栈更改所以紧急转向启动Ruoyi……
• day02-前后端代码开发 - 飞书云文档 (feishu.cn)

Day2 RuoyiProject

¶功能快速开发

• 若依提供的代码生成功能，可以基于表结构快速生成前后端的代码

¶功能需求

• 产品原型：帝可得 - 产品原型 - 腾讯 CoDesign (qq.com)

• 实际功能需求：实现帝可得系统中的区域管理功能，涵盖增加、删除、修改和查询的完整前后端代码

¶准备工作

• 需要准备两部分内容

  一个是一级菜单

  第二个是表结构

¶菜单

• 要开发的模块：区域管理
• 区域管理是子菜单
• 需要先在若依项目中创建一个主菜单，方便对区域进行分类
• 准备主菜单–>服务管理

¶表结构

• 区域表结构定义：

CREATE TABLE `tb_region` (
  `id` INT AUTO_INCREMENT COMMENT '主键id' PRIMARY KEY,
  `region_name` VARCHAR(255) NOT NULL COMMENT '区域名称',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `create_by` VARCHAR(64) COMMENT '创建人',
  `update_by` VARCHAR(64) COMMENT '修改人',
  `remark` TEXT COMMENT '备注'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='区域表';

-- 插入测试数据
INSERT INTO `tb_region` (`region_name`,`remark`) VALUES ('北京市朝阳区','北京市朝阳区'), ('北京市海淀区','北京市海淀区'), ('北京市东城区','北京市东城区');

• 把以上sql导入到若依对应的数据库中

¶代码生成

¶系统导入

• 找到系统工具–>代码生成，然后点击导入按钮

• 然后可以在代码生成列表中看到需要生成的数据

该数据对应了5个按钮

• 预览生成后的代码
• 修改代码生成的配置（常用）
• 删除代码生成
• 同步表结构（导入之后改动表的情况）
• 下载离线代码包

¶配置代码

• 在生成之前，需要对代码生成做一些配置，我们可以点击修改按钮，可以看到有三部分的配置

  • 基本信息
  • 字段信息
  • 生成信息

• 根据自己的需求修改：表、实体、表描述、作者相关的数据

字段信息	描述
字段列名	表中的字段列名称
字段描述	字段的描述，读取的comment信息，可根据实际情况更改
物理类型	数据库所对应的字段类型
Java类型	Java实体类中属性的类型，可改，例如，状态字段：Long类型可以修改为Integer
Java属性	Java实体类中所对应的属性名称
插入	新增的时候，需要插入的字段
编辑	修改的时候，需要插入的字段
列表	列表查询需要展示的字段
查询	列表查询，需要的条件字段
查询方式	与上面查询条件配合，选择对应的查询方式
必填	在插入和新增的时候，这个字段是否是必填项，可生成校验
显示类型	前端代码使用的组件，可根据实际情况选择
字典类型	字典管理是用来维护数据类型的数据，如下拉框、单选按钮等，可自定义

• 指**生成信息，**可按照实际情况，修改包路径，模块名称，上级菜单

¶代码下载

• 点击下载按钮，下载代码包

• 解压ruoyi.zip得到前后端代码和动态菜单sql

• main后端的代码
• vue前端的代码
• regionMenu.sql 动态菜单的sql数据

¶代码导入

• 执行regionMenu.sql文件中的内容，内容为菜单的数据

• 在管理页面，刷新浏览器，即可看到区域管理二级菜单

• 把解压代码的main目录拷贝后，找到后端dkd-manage模块，选中src目录，进行拷贝

• 代码生成器返回的zip，解压后打开vue文件夹，包含两部分内容

• api是指后端的接口定义代码
• views中包含了vue组件的前端代码

• 选中这两个文件夹，打开前端项目，选中src目录进行拷贝

• 代码拷贝完成后，重新启动前后端项目，打开页面，可以在点位管理中看到子菜单区域管理

可以对区域管理进行一些操作，比如，新增、修改、删除、查询等

¶代码阅读

先看看自动生成的代码长啥样

前端+后端

¶后端代码

¶RegionController （程序的入口）

• dkd-manage模块下找到这个类：
• com.dkd.manage.controller.RegionController
• 里面有5个对应的方法接口

/**
 * 区域管理Controller
 * 
 * @author itheima
 * @date 2024-09-18
 */

@RestController
@RequestMapping("/manage/region")
public class RegionController extends BaseController
{
    @Autowired
    private IRegionService regionService;

    
    /**
     * 查询区域管理列表
     */
    @PreAuthorize("@ss.hasPermi('manage:region:list')")
    @GetMapping("/list")
    public TableDataInfo list(Region region)
    {
        startPage();
        List<Region> list = regionService.selectRegionList(region);
        return getDataTable(list);
    }

    
    /**
     * 导出区域管理列表
     */
    @PreAuthorize("@ss.hasPermi('manage:region:export')")
    @Log(title = "区域管理", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, Region region)
    {
        List<Region> list = regionService.selectRegionList(region);
        ExcelUtil<Region> util = new ExcelUtil<Region>(Region.class);
        util.exportExcel(response, list, "区域管理数据");
    }

    
    /**
     * 获取区域管理详细信息
     */
    @PreAuthorize("@ss.hasPermi('manage:region:query')")
    @GetMapping(value = "/{id}")
    public AjaxResult getInfo(@PathVariable("id") Long id)
    {
        return success(regionService.selectRegionById(id));
    }

    
    /**
     * 新增区域管理
     */
    @PreAuthorize("@ss.hasPermi('manage:region:add')")
    @Log(title = "区域管理", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody Region region)
    {
        return toAjax(regionService.insertRegion(region));
    }

    
    /**
     * 修改区域管理
     */
    @PreAuthorize("@ss.hasPermi('manage:region:edit')")
    @Log(title = "区域管理", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody Region region)
    {
        return toAjax(regionService.updateRegion(region));
    }

    
    /**
     * 删除区域管理
     */
    @PreAuthorize("@ss.hasPermi('manage:region:remove')")
    @Log(title = "区域管理", businessType = BusinessType.DELETE)
    @DeleteMapping("/{ids}")
    public AjaxResult remove(@PathVariable Long[] ids)
    {
        return toAjax(regionService.deleteRegionByIds(ids));
    }
    
}

建议：

以上代码可以使用AI协助阅读代码

让AI为每一行代码添加上注释，方便阅读

Prompt
把整个类的代码给AI，然后在最后添加一句话：
你是一个资深的Java开发工程师，帮我给上述代码的每一行都添加上注释进行说明

• AI解读的代码：

package com.dkd.manage.controller; // 包声明

// 导入所需的依赖包
import ...; // 这里省略了具体的导入语句，实际使用时需根据上下文补全


/**
 * 区域管理Controller
 * 
 * @author itheima
 * @date 2024-09-18
 */
@RestController // 标记为RESTful风格的控制器
@RequestMapping("/manage/region") // 设置请求映射路径
public class RegionController extends BaseController { // 继承BaseController类

    @Autowired // 自动注入IRegionService接口的实现类
    private IRegionService regionService; // 区域服务接口

    /**
     * 查询区域管理列表
     */
    @PreAuthorize("@ss.hasPermi('manage:region:list')") // 检查权限
    @GetMapping("/list") // GET请求映射
    public TableDataInfo list(Region region) { // 查询方法
        startPage(); // 分页开始
        List<Region> list = regionService.selectRegionList(region); // 查询区域列表
        return getDataTable(list); // 返回表格数据
    }

    /**
     * 导出区域管理列表
     */
    @PreAuthorize("@ss.hasPermi('manage:region:export')") // 检查权限
    @Log(title = "区域管理", businessType = BusinessType.EXPORT) // 日志记录
    @PostMapping("/export") // POST请求映射
    public void export(HttpServletResponse response, Region region) { // 导出方法
        List<Region> list = regionService.selectRegionList(region); // 查询区域列表
        ExcelUtil<Region> util = new ExcelUtil<>(Region.class); // 创建Excel工具类实例
        util.exportExcel(response, list, "区域管理数据"); // 导出Excel
    }

    /**
     * 获取区域管理详细信息
     */
    @PreAuthorize("@ss.hasPermi('manage:region:query')") // 检查权限
    @GetMapping(value = "/{id}") // GET请求映射
    public AjaxResult getInfo(@PathVariable("id") Long id) { // 获取详细信息方法
        return success(regionService.selectRegionById(id)); // 返回成功结果
    }

    /**
     * 新增区域管理
     */
    @PreAuthorize("@ss.hasPermi('manage:region:add')") // 检查权限
    @Log(title = "区域管理", businessType = BusinessType.INSERT) // 日志记录
    @PostMapping // POST请求映射
    public AjaxResult add(@RequestBody Region region) { // 新增方法
        return toAjax(regionService.insertRegion(region)); // 返回操作结果
    }

    /**
     * 修改区域管理
     */
    @PreAuthorize("@ss.hasPermi('manage:region:edit')") // 检查权限
    @Log(title = "区域管理", businessType = BusinessType.UPDATE) // 日志记录
    @PutMapping // PUT请求映射
    public AjaxResult edit(@RequestBody Region region) { // 修改方法
        return toAjax(regionService.updateRegion(region)); // 返回操作结果
    }

    /**
     * 删除区域管理
     */
    @PreAuthorize("@ss.hasPermi('manage:region:remove')") // 检查权限
    @Log(title = "区域管理", businessType = BusinessType.DELETE) // 日志记录
    @DeleteMapping("/{ids}") // DELETE请求映射
    public AjaxResult remove(@PathVariable Long[] ids) { // 删除方法

其余service、mapper，这些代码都是基础的CRUD

操作数据使用的mybatis

¶BaseController（基类）

• Controller继承了BaseController

¶分页逻辑startPage

• 当调用了startPage()方法后主要干了两件事：

  1. 从请求参数中获取到pageNum和pageSize两个参数，如果有其他参数也会获取，比如是orderBy参数
  2. 调用了PageHelper.startPage()方法，来进行分页处理

• 分页方法startPage基于基类BaseController

¶TableDataInfo

• 分页查询统一返回对象：表格分页数据对象

¶AjaxResult

• 增删改查统一返回对象：操作消息提醒

¶BaseEntity

• 所有实体类默认继承的BaseEntity基类

¶前段知识回顾

• ‍‬⁠‌⁠‬⁠‬⁠‌⁠‬⁠‍⁠⁠前端知识串讲 - 飞书云文档 (feishu.cn)

¶前端代码

¶菜单路由规则

• 路由

  实现不同页面间的导航和视图切换，是路径与组件的对应关系

• 这个菜单的类型为菜单，菜单需要有对应的组件路径
• 父菜单的路由地址+当前菜单的路由地址 就可以访问组件路径对应的组件
• 即： node/region 加载组件为 @/views/manage/region/index.vue
• index.html→main.js→App.vue，最后index.html显示的信息就相当于App.vue的信息

¶代码阅读

• 生成代码包含了两部分内容

  第一个是api

  第二个是组件

¶API部分：@/api/manage/region.js

import request from '@/utils/request'

// 查询区域管理列表
export function listRegion(query) {
  return request({
    url: '/manage/region/list',
    method: 'get',
    params: query
  })
}

// 查询区域管理详细
export function getRegion(id) {
  return request({
    url: '/manage/region/' + id,
    method: 'get'
  })
}

// 新增区域管理
export function addRegion(data) {
  return request({
    url: '/manage/region',
    method: 'post',
    data: data
  })
}

// 修改区域管理
export function updateRegion(data) {
  return request({
    url: '/manage/region',
    method: 'put',
    data: data
  })
}

// 删除区域管理
export function delRegion(id) {
  return request({
    url: '/manage/region/' + id,
    method: 'delete'
  })
}

• 这里面的5个接口定义，与后台提供的接口是一一对应的
• 其中@/utils/request这个js封装了拦截器和axios工具，实现了对HTTP请求和响应的统一处理和管理

¶组件代码

• 地址：src\views\manage\region\index.vue

• 使用通义灵码 / AI大模型添加注释或者解释代码

把这个组件的代码给大模型，然后跟上一句话

你是一个资深的前端开发工程师，帮我给解读一下上述代码，并且给每行代码上添加注释说明

• 解释后的代码

<template>
  <!-- 主容器 -->
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <!-- 区域名称输入框 -->
      <el-form-item label="区域名称" prop="regionName">
        <el-input
          v-model="queryParams.regionName"
          placeholder="请输入区域名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <!-- 搜索和重置按钮 -->
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区 -->
    <el-row :gutter="10" class="mb8">
      <!-- 新增按钮 -->
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['manage:region:add']"
        >新增</el-button>
      </el-col>
      <!-- 修改按钮 -->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['manage:region:edit']"
        >修改</el-button>
      </el-col>
      <!-- 删除按钮 -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['manage:region:remove']"
        >删除</el-button>
      </el-col>
      <!-- 导出按钮 -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['manage:region:export']"
        >导出</el-button>
      </el-col>
      <!-- 右侧工具栏 -->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="regionList" @selection-change="handleSelectionChange">
      <!-- 选择列 -->
      <el-table-column type="selection" width="55" align="center" />
      <!-- 主键ID列 -->
      <el-table-column label="主键id" align="center" prop="id" />
      <!-- 区域名称列 -->
      <el-table-column label="区域名称" align="center" prop="regionName" />
      <!-- 备注说明列 -->
      <el-table-column label="备注说明" align="center" prop="remark" />
      <!-- 操作列 -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <!-- 修改按钮 -->
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['manage:region:edit']">修改</el-button>
          <!-- 删除按钮 -->
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['manage:region:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改区域管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <!-- 表单 -->
      <el-form ref="regionRef" :model="form" :rules="rules" label-width="80px">
        <!-- 区域名称输入框 -->
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="form.regionName" placeholder="请输入区域名称" />
        </el-form-item>
        <!-- 备注说明输入框 -->
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Region">
// 导入相关API
import { listRegion, getRegion, delRegion, addRegion, updateRegion } from "@/api/manage/region";

// 获取当前实例的代理对象，用于访问组件的数据、方法等属性。
const { proxy } = getCurrentInstance();

// 定义区域列表
const regionList = ref([]);
// 控制对话框显示状态
const open = ref(false);
// 加载状态
const loading = ref(true);
// 是否显示查询表单
const showSearch = ref(true);
// 选中的ID数组
const ids = ref([]);
// 单个选择状态
const single = ref(true);
// 多个选择状态
const multiple = ref(true);
// 总记录数
const total = ref(0);
// 对话框标题
const title = ref("");

// 定义响应式数据
const data = reactive({
  // 表单数据
  form: {},
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    regionName: null,
  },
  // 表单验证规则
  rules: {
    regionName: [
      { required: true, message: "区域名称不能为空", trigger: "blur" }
    ],
    remark: [
      { required: true, message: "备注说明不能为空", trigger: "blur" }
    ]
  }
});

// 解构响应式数据
const { queryParams, form, rules } = toRefs(data);

/** 查询区域管理列表 */
function getList() {
  loading.value = true;
  listRegion(queryParams.value).then(response => {
    regionList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    regionName: null,
    createTime: null,
    updateTime: null,
    createBy: null,
    updateBy: null,
    remark: null
  };
  proxy.resetForm("regionRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加区域管理";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getRegion(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改区域管理";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["regionRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateRegion(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addRegion(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除区域管理编号为"' + _ids + '"的数据项？').then(function() {
    return delRegion(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('manage/region/export', {
    ...queryParams.value
  }, `region_${new Date().getTime()}.xlsx`)
}

// 初始化加载数据
getList();
</script>

• 组件主要使用Vue3+Element plus组件进行开发
• 完成了区域管理的增删改查