VUE怎么实现分布式医疗挂号系统预约挂号首页

这篇文章主要介绍了Vue怎么实现分布式医疗挂号系统预约挂号首页的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇VUE怎么实现分布式医疗挂号系统预约挂号首页文章都会有所收获，下面我们一起来看看吧。

（1）定义布局

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

1.修改默认布局

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

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

<template>  <div class="app-container">    <div id="main">      <!-- 公共头 -->      <myheader />      <div class="main-container">        <el-scrollbar class="page-component__scroll">          <!-- 内容区域 -->          <nuxt />        </el-scrollbar>      </div>      <!-- 公共底 -->      <myfooter />    </div>  </div></template><script>import "~/assets/css/app.css";import "~/assets/css/chunk.css";import "~/assets/css/iconfont.css";import "~/assets/css/main.css";import myheader from "./myheader";import myfooter from "./myfooter";export default {  components: {    myheader,    myfooter,  },};</script>

2.提取头文件

创建layouts/myheader.vue文件：

<template>  <div class="header-container">    <div class="wrapper">      <!-- loGo -->      <div class="left-wrapper v-link selected">        <img                    width="50"          height="50"          src="~assets/images/logo.png"        />        <span class="text">牧医通 预约挂号统一平台</span>      </div>      <!-- 搜索框 -->      <div class="search-wrapper">        <div class="hospital-search animation-show">          <el-autocomplete            class="search-input small"            prefix-icon="el-icon-search"            v-model="state"            :fetch-suggestions="querySearchAsync"            placeholder="点击输入医院名称"            @select="handleSelect"          >            <span              slot="suffix"              class="search-btn v-link highlight clickable selected"              >搜索            </span>          </el-autocomplete>        </div>      </div>      <!-- 右侧 -->      <div class="right-wrapper">        <span class="v-link clickable">帮助中心</span>        <!--        <el-dropdown >-->        <!--              <span class="el-dropdown-link">-->        <!--                晴天<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->        <!--              </span>-->        <!--            <el-dropdown-menu class="user-name-wrapper" slot="dropdown">-->        <!--                <el-dropdown-item>挂号订单</el-dropdown-item>-->        <!--                <el-dropdown-item>就诊人管理</el-dropdown-item>-->        <!--                <el-dropdown-item divided>退出登录</el-dropdown-item>-->        <!--            </el-dropdown-menu>-->        <!--        </el-dropdown>-->        <span class="v-link clickable" @click="dialogUserFORMVisible = true"          >登录/注册</span        >      </div>    </div>  </div></template><script>export default {  data() {    return {      state: "",    };  },  created() {      },  methods: {    //在输入框输入值，弹出下拉框，显示相关内容    querySearchAsync(queryString, cb) {      this.searchObj = [];      if (queryString == "") return;      hospapi.getByHosName(queryString).then((response) => {        for (let i = 0, len = response.data.length; i < len; i++) {          response.data[i].value = response.data[i].hosname;        }        cb(response.data);      });    },    //在下拉框选择某一个内容，执行下面方法，跳转到详情页面中    handleSelect(item) {      window.location.href = "/hospital/" + item.hoscode;    },    //点击某个医院名称，跳转到详情页面中      show(hoscode) {      window.location.href = "/hospital/" + hoscode;    },  },};</script>

3.提取尾文件

创建layouts/myfooter.vue文件：

<template>    <div class="footer-container">        <div class="wrapper">            <div><span class="record">京ICP备13018369号</span><span            class="phone">电话挂号010-56253825</span></div>            <div class="right"><span            class="v-link clickable"> 联系我们 </span><span            class="v-link clickable"> 合作伙伴 </span><span            class="v-link clickable"> 用户协议 </span><span            class="v-link clickable"> 隐私协议 </span></div>        </div>    </div></template><script>export default {}</script>

（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<Dict> list = dictService.findByDictCode(dictCode);        return Result.ok(list);    }

Service接口：

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

Service实现类：

// 根据dictCode获取下级结点    @Override    public List<Dict> findByDictCode(String dictCode) {        //根据dictCode获取对应id        Long id = this.getDictByDictCode(dictCode).getId();        // 根据id获取子结点        List<Dict> childData = this.findChildData(id);        return childData;    }    // 根据dict_code查询数据字典    private Dict getDictByDictCode(String dictCode) {        QueryWrapper<Dict> wrapper = new QueryWrapper<>();        wrapper.eq("dict_code", dictCode);        Dict codeDict = baseMapper.selectOne(wrapper);        return codeDict;    }    // 根据id查询子数据列表@Override    @Cacheable(value = "dict", keyGenerator = "keyGenerator")    public List<Dict> findChildData(Long id) {        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();        queryWrapper.eq("parent_id", id);        List<Dict> 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<Hospital> hospitals = hospitalService.selectHospPage(page, limit, HospitalQueryVo);        List<Hospital> content = hospitals.getContent();        int totalPages = hospitals.getTotalPages();        return Result.ok(hospitals);    }

Service接口：

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

Service：

// 医院列表(条件查询带分页)    @Override    public Page<Hospital> 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<Hospital> example = Example.of(hospital, matcher);        // 5.调用方法实现查询        Page<Hospital> 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<Hospital> list = hospitalService.findByHosname(hosname);        return Result.ok(list);    }

Service接口：

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

Service实现类：

// 根据医院名称做模糊查询 @Override public List<Hospital> findByHosname(String hosname) {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> return hospitalRepository.findHospitalByHosnameLike(hosname); }    // 根据医院名称做模糊查询    @Override    public List<Hospital> findByHosname(String hosname) {        return hospitalRepository.findHospitalByHosnameLike(hosname);    }

Repository：

        List<Hospital> 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怎么实现分布式医疗挂号系统预约挂号首页”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。