中州养老 第三章-护理项目前后端开发-1

YangeIT大约 37 分钟中州养老

中州养老 第三章-护理项目前后端开发-1

今日目标

在第一章节中，我们已经基本熟悉了项目背景，以及如何熟悉模块和基本的接口开发，在这个章节，我们会继续解锁项目开发中的一些新的技能，内容如下：

  • 掌握评估模块开发工期的基本思路和注意事项
  • 能够理解新模块服务管理-护理计划的需求
  • 掌握表结构设计的通用思路，以及工具的使用
  • 能够完成护理项目分页查询的接口开发
  • 能够掌握 TDesign 组件的快速学习和使用
  • 能够掌握前端工程师开发的流程
  • 能够独立完成列表页组件的开发

1. 更全面的熟悉项目

更全面的熟悉项目

功能清单能够准确地列出项目中需要实现的各项功能，帮助开发团队明确需求。一般是由产品经理创建

功能清单open in new window

总结

课堂作业

  1. 来评估一下第一天做的模块：房型设置和床位管理 🎤

2.全方位解读服务管理-护理计划

全方位解读服务管理-护理计划

需求分析

需求分析，该如何入手呢？

入手的基本思路就是原型文档和 PRD 文档，有了这两个文档，我们就有了很重要的开发依据

注意：在实际开发中，有了新需求以后，产品经理会先给项目组的成员开会，来评审新的需求，在会议中，如果有任何不理解的需求，要及时提出来，方便后期设计、开发

表结构设计操作

根据我们刚才看到的原型及 PRD，我们接下来就基于刚才分析的原型来创建表结构

如何设计表？

E-R 图

E-R 图也称实体-联系图(Entity Relationship Diagram)，提供了表示实体类型、属性和联系的方法，用来描述现实世界的概念模型。

一个栗子：

上述栗子的 E-R 图

画图工具推荐：draw.ioopen in new window (资料包中已提供)

详细设计

  • 命名（见名之意） 参考阿里开发手册

  • 数据类型

    • 基本准则
      • 可靠性：考虑字段存储的内容长度，尽可能的合适
      • 存储空间：在考虑可靠性的前提下，再次考虑存储空间
    • 常见数据类型 MySQL 常见数据类型open in new window

  • 主键（必须存在）

    • 自增
    • UUID
    • 雪花算法

  • 冗余字段

    • 创建时间
    • 修改时间
    • 创建人
    • 修改人
    • 备注

总结

课堂作业

大家继续补全 E-R 图，然后创建护理计划表、护理等级表、护理计划与护理项目中间表

要求：

  • 以小组为单位进行讨论，4 张表的关系该如何使用 E-R 进行表示
  • 根据原型和需求说明，确定护理计划、护理等级、护理计划与护理项目中间表中的字段，以 E-R 图展示

接口分析设计

根据我们之前说的开发流程，我们知道，当我们已经分析了需求，并且表结构已经创建了，那么接下来就需要设计功能接口了，目前该模块中的接口涉及到很多，我们可以专门维护一个接口文档，来方便重复查看

文档链接：护理模块-接口文档open in new window

3.后端接口开发-护理项目-分页查询

后端接口开发-护理项目-分页查询

通常情况，当我们分析完一个模块业务之后，会把这个业务中所有涉及到的接口一次性的都会开发出来，然后再去开发前端页面，最终它们联调对接，完成一个模块的整体开发。

但是在我们教学阶段，我们可以先写一个后端接口出来，然后去开发前端页面与这个接口进行对接，方便大家用更短的时间来完成前后端的开发工作。

后端开发步骤

如果我们能顺利的做完了需求分析、表结构设计、接口设计，再去完成功能代码的时候，就相对容易些。

现在我们需要确定的是后台代码的具体的开发步骤，一个良好的步骤，可以增加我们的开发效率

  • controller 的基本定义（接口四要素）
  • mapper 接口和映射文件
  • 业务层代码编写
  • 单元测试
  • 业务层对接控制层
  • 接口测试
  • 前后端联调（模块所有接口完成后）

代码操作

接口定义

在 zzyl-web 模块下创建一个新的类：NursingProjectController，根据接口文档添加如下代码：

package com.zzyl.controller;

import com.zzyl.base.PageResponse;
import com.zzyl.base.ResponseResult;
import com.zzyl.vo.NursingProjectVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

_/**_
_ * 护理项目Controller类_
_ */_
@RestController
@RequestMapping("/nursing_project")
@Api(tags = "护理项目管理")
public class NursingProjectController {

    @GetMapping
    @ApiOperation("分页查询护理项目列表")
    public ResponseResult<PageResponse<NursingProjectVo>> getByPage(
            @ApiParam(value = "护理项目名称")  String name,
            @ApiParam(value = "状态：0-禁用，1-启用") Integer status,
            @ApiParam(value = "当前页码")
            @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
            @ApiParam(value = "每页显示数量")
            @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize) {
        return null;
    }

}

NursingProjectVo

package com.zzyl.vo;

import com.zzyl.base.BaseVo;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.math.BigDecimal;

_/**_
_ * 护理项目视图对象_
_ */_
@Data
public class NursingProjectVo extends BaseVo {

    @ApiModelProperty(value = "名称")
    private String name;

    @ApiModelProperty(value = "排序号")
    private Integer orderNo;

    @ApiModelProperty(value = "单位")
    private String unit;

    @ApiModelProperty(value = "价格")
    private BigDecimal price;

    @ApiModelProperty(value = "图片")
    private String image;

    @ApiModelProperty(value = "护理要求")
    private String nursingRequirement;

    @ApiModelProperty(value = "状态（0：禁用，1：启用）")
    private Integer status;

    @ApiModelProperty(value = "护理项目绑到计划的个数")
    private Integer count;
}

4. 从 0 到 1 开发前端页面

前言

前端开发流程

下图详细描述了前端开发的流程：

  • 需求分析(基于原型和 PRD)
  • 开发计划(工期评估)
  • 接口设计(基于原型和 PRD)
  • 功能实现(基于接口设计 + 原型 +PRD)
  • 前后端联调
  • 测试提 bug
  • 前后端优化，再联调
  • 测试回归 bug
  • 功能验收

代码操作

                       |

入门案例

需求说明

  • 在创建的好项目中新增路由菜单

    • 主菜单：权限管理
    • 子菜单：用户管理和角色管理

  • 在用户管理菜单中新增组件，展示用户列表，如下效果

    • 使用 TDesign 中的 table 组件展示数据，并可以查看 API 列表来实现数据的展示（序号、性别）
    • 使用 TDesign 中的 ImageViewer 组件实现图片展示和预览

  • 最终效果：

路由创建

在 src/router/modules 目录下新建文件：permission.ts 文件，内容如下：

import Layout from '@/layouts/index.vue'

import HomeIcon from '@/assets/test-img/icon_menu_diaodu.svg'
import ModelIcon from '@/assets/test-img/icon_menu_zj.svg'

export default [
  {
    path: '/permission',
    name: 'permission',
    component: Layout,
    redirect: '/permission/index',
    meta: {
      title: '权限管理',
      icon: HomeIcon
    },
    children: [
      {
        path: 'index',
        name: '用户管理',
        component: () => import('@/pages/permission/user/index.vue'),
        meta: {
          title: '用户管理',
          icon: ModelIcon
        }
      },
      {
        path: 'role-index',
        name: '角色管理',
        component: () => import('@/pages/permission/role/index.vue'),
        meta: {
          title: '角色管理',
          icon: ModelIcon
        }
      }
    ]
  }
]

页面效果：

焱哥的博客
Copyright © 2025 YangeIT