VUE实现分布式医疗挂号系统预约挂号首页步骤详情

目录

• （1）定义布局
• 1.修改默认布局
• 2.提取头文件
• 3.提取尾文件
• （2）首页引入
• （3）首页数据API接口
• 1.获取医院等级/地区接口
• 2.医院列表接口
• 3.模糊查询医院列表
• （4）首页前端实现
• 1.封装Api请求
• 2.预约挂号前端页面

（1）定义布局

将准备好的静态资源下面的css、images文件夹添加到assets目录：

1.修改默认布局

参考静态资源文件首页，我们可以把页头和页尾提取出来，形成布局页。在layouts目录下修改默认布局文件default.vue，将主内容区域的内容替换成。

并且在默认布局中引入下面的头、尾文件：

2.提取头文件

创建layouts/myheader.vue文件：

3.提取尾文件

创建layouts/myfooter.vue文件：

（2）首页引入

修改pages/inde.vue文件，引入写好的前端页面，内容过多，这里不再给出具体代码。使用npm run dev启动项目，通过http://localhost:3000访问，得到如下静态页面：

（3）首页数据API接口

在首页主要完成下面几个功能：

• 获取医院等级（根据数据字典编码获取）
• 获取地区（根据数据字典编码获取）
• 医院分页列表。
• 根据医院名称关键字搜索医院列表。

下面展示的是静态页面，接下来根据这些功能，完成首页数据的API接口。

1.获取医院等级/地区接口

由于查询医院等级、地区两个功能可以只提供同一个接口，所以将两个功能都合并在findByDictCode方法中：

Controller：

    @ApiOperation(value = "根据dictCode获取下级节点")
    @GetMapping("findByDictCode/{dictCode}")
    public Result findByDictCode(@PathVariable String dictCode) {
        List list = dictService.findByDictCode(dictCode);
        return Result.ok(list);
    }

Service接口：

// 根据dictCode获取下级结点
List findByDictCode(String dictCode);
// 根据id查询子数据列表
List findChildData(Long id);

Service实现类：

	// 根据dictCode获取下级结点
    @Override
    public List findByDictCode(String dictCode) {
        //根据dictCode获取对应id
        Long id = this.getDictByDictCode(dictCode).getId();
        // 根据id获取子结点
        List childData = this.findChildData(id);
        return childData;
    }
    // 根据dict_code查询数据字典
    private Dict getDictByDictCode(String dictCode) {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.eq("dict_code", dictCode);
        Dict codeDict = baseMapper.selectOne(wrapper);
        return codeDict;
    }
    // 根据id查询子数据列表
	@Override
    @Cacheable(value = "dict", keyGenerator = "keyGenerator")
    public List findChildData(Long id) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", id);
        List dictList = baseMapper.selectList(queryWrapper);
        for (Dict dict : dictList) {
            // 得到每一条记录的id值
            Long dictId = dict.getId();
            // 调用hasChildren方法判断是否包含子节点
            boolean flag = this.hasChildren(dictId);
            // 为每条记录设置hasChildren属性
            dict.setHasChildren(flag);
        }
        return dictList;
    }

2.医院列表接口

Controller：

    @ApiOperation(value = "查询医院列表")
    @GetMapping("findHospList/{page}/{limit}")
    public Result findHospList(@PathVariable Integer page,
                               @PathVariable Integer limit,
                               HospitalQueryVo HospitalQueryVo) {
        Page hospitals = hospitalService.selectHospPage(page, limit, HospitalQueryVo);
        List content = hospitals.getContent();
        int totalPages = hospitals.getTotalPages();
        return Result.ok(hospitals);
    }

Service接口：

	// 医院列表(条件查询带分页)
    Page selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);

Service：

// 医院列表(条件查询带分页)
    @Override
    public Page selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo) {
        // 1.创建pageable对象
        Pageable pageable = PageRequest.of(page - 1, limit);
        // 2.创建条件匹配器
        ExampleMatcher matcher = ExampleMatcher.matching()
                .withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING)
                .withIgnoreCase(true);
        // 3.hospitalQueryVo转换为Hospital对象
        Hospital hospital = new Hospital();
        BeanUtils.copyProperties(hospitalQueryVo, hospital);
        // 4.创建对象
        Example example = Example.of(hospital, matcher);
        // 5.调用方法实现查询
        Page pages = hospitalRepository.findAll(example, pageable);
        // 6.得到所有医院信息的集合
        pages.getContent().stream().forEach(item -> {
            this.setHospitalHosType(item);
        });
        return pages;
    }
    // 获取查询list集合,遍历进行医院等级封装
    private Hospital setHospitalHosType(Hospital hospital) {
        // 封装医院等级
        String hostypeString = dictFeignClient.getName("Hostype", hospital.getHostype());
        hospital.getParam().put("hostypeString", hostypeString);
        // 封装医院省市区
        String provinceString = dictFeignClient.getName(hospital.getProvinceCode());
        String cityString = dictFeignClient.getName(hospital.getCityCode());
        String districtString = dictFeignClient.getName(hospital.getDistrictCode());
        hospital.getParam().put("fullAddress", provinceString + cityString + districtString);
        return hospital;
    }

3.模糊查询医院列表

Controller：

    @ApiOperation(value = "根据医院名称查询")
    @GetMapping("findByHosName/{hosname}")
    public Result findByHosName(@PathVariable String hosname) {
        List list = hospitalService.findByHosname(hosname);
        return Result.ok(list);
    }

Service接口：

    // 根据医院名称查询
    List findByHosname(String hosname);

Service实现类：

// 根据医院名称做模糊查询 @Override public List findByHosname(String hosname) { return hospitalRepository.findHospitalByHosnameLike(hosname); }    // 根据医院名称做模糊查询
    @Override
    public List findByHosname(String hosname) {
        return hospitalRepository.findHospitalByHosnameLike(hosname);
    }

Repository：

    /**
     * 根据医院名称做模糊查询
     * @param hosname
     * @return
     */
    List findHospitalByHosnameLike(String hosname);

（4）首页前端实现

1.封装Api请求

/api/hosp.js：

import request from '@/utils/request'
const api_name = `/api/hosp/hospital`
export default {
    // 查询医院列表
    getPageList(page, limit, searchObj) {
        return request({
            url: `${api_name}/findHospList/${page}/${limit}`,
            method: 'get'
        })
    },
    // 根据医院名称模糊查询
    getByHosName(hosname) {
        return request({
            url: `${api_name}/findByHosName/${hosname}`,
            method: 'get'
        })
    },
    // 根据医院编号查询医院详情
    show(hoscode) {
        return request({
            url: `${api_name}/findHospDetail/${hoscode}`,
            method: 'get'
        })
    },
    // 根据医院编号查询科室信息
    findDepartment(hoscode) {
        return request({
            url: `${api_name}/department/${hoscode}`,
            method: 'get'
        })
    }
}

/api/dict.js：

import request from '@/utils/request'
const api_name = '/admin/cmn/dict'
export default {
    // 根据dictCode获取下级结点
    findByDictCode(dictCode) {
        return request({
            url: `${api_name}/findByDictCode/${dictCode}`,
            method: 'get'
        })
    },
    // 根据id获取下级结点
    findByParentId(parentId) {
        return request({
            url: `${api_name}/findChildData/${parentId}`,
            method: 'get'
        })
    }
}

2.预约挂号前端页面

使用nuxt进行动态路由，依次创建下面三个vue文件，分别导入下面的文件：

预约挂号前端页面：github预约挂号前端vue页面

医院详情页面：github医院详情前端vue页面

预约须知页面：github预约须知前端vue页面

以上就是VUE实现分布式医疗挂号系统预约挂号首页步骤详情的详细内容，更多关于VUE实现分布式医疗挂号系统预约挂号首页的资料请关注脚本之家其它相关文章！