本文详细介绍了医疗预约系统中查看科室排班数据的接口实现，包括数据统计和详细信息展示，以及前端页面的整合。同时，讨论了服务端渲染的重要性，介绍了Nuxt.js在搭建前端环境中的应用，以及如何进行静态数据整合和首页数据显示。此外，还涵盖了医院数据接口的设计和实现，以及页面动态加载和SEO优化的相关内容。
内容介绍
|
1、查看科室排班日期统计数据
2、查看科室排班详细数据
3、搭建平台用户系统前端环境
4、首页静态数据整合
5、首页数据显示接口
6、首页数据显示前端
|
查看科室排班日期统计数据
| 1确认需求 2、实现接口 1）分析接口 *参数：page、limit、hoscode、depcode *返回值：R（Map（total、List<BookingScheduleRuleVo>。。。）） （2）创建controller @Api(tags = "排班管理")
@RestController
@RequestMapping("/admin/hosp/schedule")
public class ScheduleController {
@Autowired
private ScheduleService scheduleService;
//根据医院编号 和 科室编号 ，查询排班规则数据
@ApiOperation(value ="查询排班规则统计数据")
@GetMapping("getScheduleRule/{page}/{limit}/{hoscode}/{depcode}")
public R getScheduleRule(@PathVariable long page,
@PathVariable long limit,
@PathVariable String hoscode,
@PathVariable String depcode) {
Map<String,Object> map = scheduleService.getScheduleRule(page,limit,hoscode,depcode);
return R.ok().data(map);
}
} （3）如果是mysql如何实现 #根据医院编号 和 科室编号 ，查询排班规则统计数据,带分页带排序 SELECT s.workDate,COUNT(id) AS docCount, SUM(s.reservedNumber) AS reservedNumber, SUM(s.availableNumber) AS availableNumber FROM SCHEDULE s WHERE s.hoscode = '医院编号' AND s.depcode = '科室编号' GROUP BY s.workDate ORDER BY s.workDate LIMIT XXXX;
（4）梳理service实现步骤 （7）测试
3、对接前端 （1）创建api接口文件 在api/yygh创建schedule.js
（4）测试
|
查看科室排班详细数据
| 1、需求分析
2、实现接口 （1）分析接口 *参数：hoscode、depcode、workDate *返回值：R（List<Schedule>） （2）实现controller //根据医院编号 、科室编号和工作日期，查询排班详细信息
@ApiOperation(value = "查询排班详细信息")
@GetMapping("getScheduleDetail/{hoscode}/{depcode}/{workDate}")
public R getScheduleDetail( @PathVariable String hoscode,
@PathVariable String depcode,
@PathVariable String workDate) {
List<Schedule> list = scheduleService
.getScheduleDetail(hoscode,depcode,workDate);
return R.ok().data("list",list);
} （3）实现service //查询排班详细信息集合
@Override
public List<Schedule> getScheduleDetail(String hoscode, String depcode, String workDate) {
//1调用方法查询数据
List<Schedule> scheduleList =
scheduleRepository.getByHoscodeAndDepcodeAndWorkDate(
hoscode,depcode,new DateTime(workDate).toDate()
);
//2遍历集合翻译字段
scheduleList.forEach(item->{
this.packSchedule(item);
});
return scheduleList;
} （4）查询接口
@Repository
public interface ScheduleRepository extends MongoRepository<Schedule,String> {
//根据hoscode、hosScheduleId查询排班信息
Schedule getByHoscodeAndHosScheduleId(String hoscode, String hosScheduleId);
//根据医院编号 、科室编号和工作日期，查询排班详细信息
List<Schedule> getByHoscodeAndDepcodeAndWorkDate(String hoscode, String depcode, Date workDate);
}
（5）测试
3、对接前端
（4）测试
|
搭建平台用户系统前端环境
| 1、相关概念 （1）服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。 （2）SEO 服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
2、什么是NUXT Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
2、创建前端工程（标准步骤） （1）获取工程包
（2）解压后，找到目录，修改工程名，复制到开发目录 yygh_site
（3）修改配置文件，插值表达式改成字符串
（4）下载依赖 （5）启动工程 npm run dev
3、创建前端工程（快捷步骤） （1）获取工程包
（2）解压后，复制到开发目录 （3）启动工程 npm run dev
4、工程目录介绍 （1）资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。 （2）布局目录 layouts 用于组织应用的布局组件。 （3）页面目录 pages 存放前台系统所有页面内容，和layouts下组件整合完整页面
5、封装axios （1）安装 npm install axios （2）创建utils文件夹，创建request.js
|
首页静态数据整合
| 1、页面组成
2、添加静态资源
3、整合布局页面 5、页面
|
首页数据显示接口
| 1、准备工作
2、分析接口 （1）带条件、带分页查询医院信息，翻译字段 *参数：page,limit, HospitalQueryVo *返回值:R(Page) （2）根据医院名称模糊查询医院列表 *参数:hosname *返回值:R（List<Hospital>）
3、创建controller @Api(tags = "医院显示接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {
@Autowired
private HospitalService hospitalService;
@ApiOperation(value = "带条件带分页医院列表查询")
@GetMapping("{page}/{limit}")
public R index(
@PathVariable Integer page,
@PathVariable Integer limit,
HospitalQueryVo hospitalQueryVo) {
Page<Hospital> pageModel = hospitalService
.selectPage(page, limit, hospitalQueryVo);
return R.ok().data("pageModel",pageModel);
}
@ApiOperation(value = "根据医院名称获取医院列表")
@GetMapping("findByHosname/{hosname}")
public R findByHosname(
@PathVariable String hosname) {
List<Hospital> list = hospitalService.findByHosnameLike(hosname);
return R.ok().data("list",list);
}
} 4、实现service //根据医院名称获取医院列表
@Override
public List<Hospital> findByHosnameLike(String hosname) {
List<Hospital> list = hospitalRepository.getByHosnameLike(hosname);
return list;
} *创建接口 @Repository
public interface HospitalRepository extends MongoRepository<Hospital,String> {
//根据hoscode查询mongo，获取医院信息
Hospital getByHoscode(String hoscode);
//根据医院名称获取医院列表
List<Hospital> getByHosnameLike(String hosname);
} 5、测试
|
首页数据显示前端
4、实现js功能 （1）需求
（2）实现js
|
扫一扫
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
