【备战春招】第17天 Vue3.0+ElementPlus查询医护人员分页

课程名称：SpringBoot2.X + Vue + UniAPP，全栈开发医疗小程序

课程章节：第三章 使用Vue3.0+SpringBoot实现医护人员管理

课程讲师： 神思者

课程内容：

一、熟悉Vue页面

阅读doctor.vue页面的视图层标签。

1. 查询条件表单

2. 表格标签和分页组件

3. 模型层变量

二、编写JavaScript脚本

1. 创建封装查询分页记录的函数

除了查询分页记录之外，添加、修改、删除医生记录之后，都要重新加载分页记录，所以应该把查询分页记录的代码封装起来，便于以后调用。

2. 查询科室列表记录

作为动态查询条件之一的科室列表需要加载数据，这部分代码也可以定义函数封装起来。

3. 初始化回调函数

在created()初始化回调函数中，要调用上面的封装函数，加载分页记录和科室列表数据。

created: function() {

    this.loadMedicalDeptList();

    this.loadDataList();

}

4. 分页组件回调函数

5. 实现条件查询

6. 实现列排序

三、附录：用RESTful封装查询科室列表

1. 编写持久层代码

在MedicalDeptDao.xml文件中，声明查询所有科室的SQL语句

<select id="searchAll" resultType="HashMap">

    SELECT "id",

           "name"

    FROM HOSPITAL.MEDICAL_DEPT

</select>

在com.example.hospital.api.db.dao包MedicalDeptDao接口中，声明DAO方法。

public interface MedicalDeptDao {

    public ArrayList<HashMap> searchAll();

}

2. 编写业务层代码

在com.example.hospital.api.service包MedicalDeptService接口中，声明抽象方法。

public interface MedicalDeptService {

    public ArrayList<HashMap> searchAll();

}

在com.example.hospital.api.service.impl包MedicalDeptServiceImpl类中，实现抽象方法。

@Service

public class MedicalDeptServiceImpl implements MedicalDeptService {

    @Resource

    private MedicalDeptDao medicalDeptDao;

    @Override

    public ArrayList<HashMap> searchAll() {

        ArrayList<HashMap> list = medicalDeptDao.searchAll();

        return list;

    }

}

3. 编写Web层代码

在com.example.hospital.api.controller包MedicalDeptController类中，声明Web方法。

@RestController

@RequestMapping("/medical/dept")

public class MedicalDeptController {

    @Resource

    private MedicalDeptService medicalDeptService;

    @GetMapping("/searchAll")

    @SaCheckLogin

    public R searchAll() {

        ArrayList<HashMap> list = medicalDeptService.searchAll();

        return R.ok().put("result", list);

    }

}

课程收获：通过视频加文档结合的方式，学习了Vue3.0+ElementPlus查询医护人员分页，期待后续学习！