QuickBuild
QuickBuild
  • 🚀快速开始(后端)
  • 🚀快速开始(前端)
  • 🚀快速开发(学生管理后端)
  • 🚀快速开发(学生管理前端)
  • 🚀快速开发(学生管理进阶完善篇)
  • Ant Design Vue组件
  • 前端框架文档
系统ai配置
QuickBuild
  • 🚀快速开始(后端)
  • 🚀快速开始(前端)
  • 🚀快速开发(学生管理后端)
  • 🚀快速开发(学生管理前端)
  • 🚀快速开发(学生管理进阶完善篇)
  • Ant Design Vue组件
  • 前端框架文档
系统ai配置
  • ☁️快速开发(学生管理进阶完善篇)

☁️快速开发(学生管理进阶完善篇)

🌟🥚介绍一下后端生成的核心代码

image-20251210104644607

最先了解一下我们的列表查询

@ApiOperation("列表")
@GetMapping("/list")
public Q<List<Student>> list(@RequestParam Map<String, Object> params) {
    return service.listPage(params, true);
}

看看业务类是怎么实现的📘

看到我们的业务类实现

主要是创建了一个MyQueryWrapper的类对象 调用了一个 ConstructQuery方法 这个方法就是帮我们构建查询条件

✨简单原理是: 通过请求拿到全部的请求参数 然后解析请求参数 与实体类字段去碰撞 如果碰撞上就进行条件查询🔍 原理后面会单独和大家解释

[外部请求] --> [解析模块]
                        |
                        v
            [请求参数列表] --> [字段匹配器] --> [匹配结果]
                                                  |
                                                  v
                               [条件查询构造器] --> [执行查询] --> [返回结果]
wrapper.ConstructQuery()

下面就是构建我们的响应

return wrapper.pageResponse(this, queryWrapper);

 * 分页对象 底层实现
 *
 * @param service
 * @return
 */
public Q<List<T>> pageResponse(IService<T> service, AbstractWrapper wrapper) {
    Page<T> page = new Page<>(pageNum, pageSize);
    Page<T> page1 = service.page(page, wrapper);
    return new Q<List<T>>().ok().q("page",new PageUtils(page1));
}

image-20251210105034274

package com.object.module.stu.controller;

import java.util.Arrays;
import java.util.List;
import java.util.Map;

import com.object.utils.Q;

import javax.annotation.Resource;

import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiParam;
import org.springframework.web.bind.annotation.*;
import java.net.URLEncoder;
import com.alibaba.excel.EasyExcel;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import com.object.module.stu.service.StudentService;
import com.object.module.stu.bean.Student;


/**
 * 学生信息表
 *
 * @author Li~Qing
 **/
@RestController
@RequestMapping("/stu/Student")
@Api(tags = "学生信息表接口")
public class StudentController{
    @Resource
    private StudentService service;


    @ApiOperation("列表")
    @GetMapping("/list")
    public Q<List<Student>> list(@RequestParam Map<String, Object> params) {
        return service.listPage(params, true);
    }


    @ApiOperation("详情")
    @GetMapping("/info/{id}")
    public Q<Student> info(@PathVariable("id") String id) {
    Student bean = service.getById(id);
        return new Q<Student >().ok(bean);
    }


    @ApiOperation("保存")
    @PostMapping("/save")
    public Q<Boolean> save(@RequestBody Student bean) {
        return new Q<Boolean>().ok(service.save(bean));
    }

    @ApiOperation("修改根据id")
    @PostMapping("/update")
    public Q<Boolean> update(@RequestBody Student bean) {
        return new Q<Boolean>().ok(service.updateById(bean));
    }

    @ApiOperation("批量操作")
    @PostMapping("/batchWord")
    public Q<Boolean> update(@RequestBody List<Student> beans) {
        return new Q<Boolean>().ok(service.updateBatchById(beans));
    }

    @ApiOperation("删除根据id")
    @PostMapping("/delete")
    public Q<Boolean> delete(@RequestBody String[] ids) {
        return new Q<Boolean>().ok(service.removeByIds(Arrays.asList(ids)));
    }

    @ApiOperation("导出")
    @GetMapping("export")
    public void importExcel(@ApiParam(value = "导出条件", required = true) @RequestParam(required = false) Map<String, Object> params, HttpServletResponse response) throws IOException {
        Q<List<Student>> list = service.listPage(params, false);
        // 设置响应头
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        String fileName = URLEncoder.encode("学生信息表.xlsx", "UTF-8");
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
        EasyExcel.write(response.getOutputStream(), Student.class).sheet("学生信息表").doWrite(list.getT());
    }

}

找到我们的实体类

image-20251210135328027

在全部的日期上面添加新的注解@JsonFormat(pattern = "yyyy-MM-dd") 时间 加上注解!!!!@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")

package com.object.module.stu.bean;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.EqualsAndHashCode;
import lombok.NoArgsConstructor;
import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
import com.alibaba.excel.annotation.ExcelProperty;
import com.baomidou.mybatisplus.annotation.TableName;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import com.alibaba.excel.annotation.ExcelProperty;
import com.baomidou.mybatisplus.annotation.IdType;

import java.time.LocalDate;

import com.baomidou.mybatisplus.annotation.TableId;

import java.time.LocalDateTime;
import java.io.Serializable;

import lombok.Data;
import com.baomidou.mybatisplus.annotation.TableName;

/**
 * <p>
 * 学生信息表
 * </p>
 *
 * @since 2025-12-05
 */
@TableName("student")
@ApiModel(value = "Student对象", description = "学生信息表")
@ExcelIgnoreUnannotated
@Data
public class Student implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "主键ID")
    @ExcelProperty("主键ID")
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    @ApiModelProperty(value = "学号,业务唯一标识,如 S20250001")
    @ExcelProperty("学号,业务唯一标识,如 S20250001")
    private String studentId;

    @ApiModelProperty(value = "学生姓名")
    @ExcelProperty("学生姓名")
    private String name;

    @ApiModelProperty(value = "性别:M-男, F-女, O-其他")
    @ExcelProperty("性别:M-男, F-女, O-其他")
    private String gender;

    @ApiModelProperty(value = "出生日期")
    @ExcelProperty("出生日期")
    @JsonFormat(pattern = "yyyy-MM-dd")
    private LocalDate dateOfBirth;

    @ApiModelProperty(value = "电子邮箱")
    @ExcelProperty("电子邮箱")
    private String email;

    @ApiModelProperty(value = "手机号码")
    @ExcelProperty("手机号码")
    private String phone;

    @ApiModelProperty(value = "家庭住址")
    @ExcelProperty("家庭住址")
    private String address;

    @ApiModelProperty(value = "入学日期")
    @ExcelProperty("入学日期")
    @JsonFormat(pattern = "yyyy-MM-dd")
    private LocalDate enrollmentDate;

    @ApiModelProperty(value = "年级,如 高一、大三、Grade 10")
    @ExcelProperty("年级,如 高一、大三、Grade 10")
    private String grade;

    @ApiModelProperty(value = "专业名称,如 计算机科学与技术")
    @ExcelProperty("专业名称,如 计算机科学与技术")
    private String major;

    @ApiModelProperty(value = "学籍状态:0-在读, 1-毕业, 2-休学, 3-退学")
    @ExcelProperty("学籍状态:0-在读, 1-毕业, 2-休学, 3-退学")
    private Integer status;

    @ApiModelProperty(value = "记录创建时间")
    @ExcelProperty("记录创建时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime createdAt;

    @ApiModelProperty(value = "记录最后更新时间")
    @ExcelProperty("记录最后更新时间")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime updatedAt;


}

改动一下我们的controller代码

image-20251210135859580

@ApiOperation("保存")
@PostMapping("/save")
public Q<Boolean> save(@RequestBody Student bean) {
    bean.setCreatedAt(LocalDateTime.now());
    bean.setUpdatedAt(LocalDateTime.now());
    bean.setStudentId(UUID.randomUUID().toString().replaceAll("-",""));
    return new Q<Boolean>().ok(service.save(bean));
}

@ApiOperation("修改根据id")
@PostMapping("/update")
public Q<Boolean> update(@RequestBody Student bean) {
    bean.setUpdatedAt(LocalDateTime.now());
    return new Q<Boolean>().ok(service.updateById(bean));
}

🌐 优化一下前端代码

组件文档

Ant Design Vue组件

优化一下表单

优化性别和学籍状态

找到组件 选择器

image-20251210112334444

修改代码

image-20251210112423568

        <a-form-item label="性别" name="gender">
          <!-- <a-input v-model:value="currentFormData.gender" /> -->
          <a-select v-model:value="currentFormData.gender">
            <a-select-option value="M">男</a-select-option>
            <a-select-option value="N">女</a-select-option>
          </a-select>
        </a-form-item>


      <a-form-item label="学籍状态" name="status">
          <!-- <a-input v-model:value="currentFormData.status" /> -->
              <a-select v-model:value="currentFormData.gestatusnder">
            <a-select-option value="0">毕业</a-select-option>
            <a-select-option value="1">在读</a-select-option>
          </a-select>
        </a-form-item>

优化日期

image-20251210134145412

        <a-form-item label="出生日期" name="dateOfBirth">
          <!-- <a-input v-model:value="currentFormData.dateOfBirth" /> -->
           <a-date-picker v-model:value="currentFormData.dateOfBirth" valueFormat="YYYY-MM-DD" />
        </a-form-item>

        <a-form-item label="入学日期" name="enrollmentDate">
          <a-input v-model:value="currentFormData.enrollmentDate" valueFormat="YYYY-MM-DD" />
        </a-form-item>

修改过后的表单完整代码

    <!-- 新增/编辑模态框 -->
    <a-modal :title="isEditMode ? '编辑' : '新增'" :open="modalVisible" @ok="handleSubmit" @cancel="handleCancel">
      <a-form ref="formRef" :model="currentFormData" :rules="formRules" layout="vertical">
        <!-- <a-form-item label="学号" name="studentId">
          <a-input v-model:value="currentFormData.studentId" />
        </a-form-item> -->
        <a-form-item label="学生姓名" name="name">
          <a-input v-model:value="currentFormData.name" />
        </a-form-item>
        <a-form-item label="性别" name="gender">
          <!-- <a-input v-model:value="currentFormData.gender" /> -->
          <a-select v-model:value="currentFormData.gender">
            <a-select-option value="M">男</a-select-option>
            <a-select-option value="N">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="出生日期" name="dateOfBirth">
          <!-- <a-input v-model:value="currentFormData.dateOfBirth" /> -->
           <a-date-picker v-model:value="currentFormData.dateOfBirth" />
        </a-form-item>
        <a-form-item label="电子邮箱" name="email">
          <a-input v-model:value="currentFormData.email" />
        </a-form-item>
        <a-form-item label="手机号码" name="phone">
          <a-input v-model:value="currentFormData.phone" />
        </a-form-item>
        <a-form-item label="家庭住址" name="address">
          <a-input v-model:value="currentFormData.address" />
        </a-form-item>
        <a-form-item label="入学日期" name="enrollmentDate">
          <!-- <a-input v-model:value="currentFormData.enrollmentDate" /> -->
          <a-date-picker v-model:value="currentFormData.enrollmentDate" />
        </a-form-item>
        <a-form-item label="年级,如" name="grade">
          <a-input v-model:value="currentFormData.grade" />
        </a-form-item>
        <a-form-item label="专业名称" name="major">
          <a-input v-model:value="currentFormData.major" />
        </a-form-item>
        <a-form-item label="学籍状态" name="status">
          <!-- <a-input v-model:value="currentFormData.status" /> -->
              <a-select v-model:value="currentFormData.gestatusnder">
            <a-select-option value="0">毕业</a-select-option>
            <a-select-option value="1">在读</a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="记录创建时间" name="createdAt">
          <a-input v-model:value="currentFormData.createdAt" />
        </a-form-item>
        <a-form-item label="记录最后更新时间" name="updatedAt">
          <a-input v-model:value="currentFormData.updatedAt" />
        </a-form-item> -->

      </a-form>
    </a-modal>

预览

image-20251210135140611

优化一下表格显示 转换一下状态值

image-20251210142203708

          <!-- 转换状态 -->
          <template v-if="column.dataIndex === 'status'">
            {{ record.status == 0 ? '在读' : '毕业' }}
          </template>
          <!-- 转换性别 -->
          <template v-if="column.dataIndex === 'gender'">
            {{ record.gender == 'M' ? '男' : '女' }}
          </template>

最后的预览效果

image-20251210142249530

结尾🈚️

👌如果你跟到这里那么你家学会了如果使用这套框架进行页面的开发

通过上面的开发案例 你就可以进行自己xxx系统开发了 非常的简单是不是

有问题可以随时联系我vx:

image-20251210142530951

Last Updated:: 12/10/25, 2:31 PM
Contributors: liqing