Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of VUE how to achieve distributed medical registration system reservation registration home page, the content is detailed and easy to understand, the operation is simple and quick, and has a certain reference value. I believe you will gain something after reading this VUE article on how to achieve distributed medical registration system reservation registration home page. Let's take a look.

(1) define layout

Add the css and images folders under the prepared static resources to the assets directory:

1. Modify the default layout

Referring to the first page of the static resource file, we can extract the header and footer to form a layout page. Modify the default layout file default.vue under the layouts directory to replace the contents of the main content area with.

And introduce the following header and trailer files into the default layout:

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,},}; 2. Extract header file

Create a layouts/myheader.vue file:

Muyintong booking registration unified platform search help center login / registration Export default {data () {return {state: "" } }, created () {}, methods: {/ / enter the value in the input box, pop up a drop-down box to display the relevant content 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; }, },};3.提取尾文件 创建layouts/myfooter.vue文件： 京ICP备13018369号电话挂号010-56253825 联系我们 合作伙伴 用户协议 隐私协议 export default {}（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;} / / gets the query list collection, traverses the hospital level encapsulation private Hospital setHospitalHosType (Hospital hospital) {/ / encapsulates the hospital level String hostypeString = dictFeignClient.getName ("Hostype", hospital.getHostype ()); hospital.getParam () .put ("hostypeString", hostypeString) / / encapsulate hospital provinces and municipalities 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. Fuzzy query list of hospitals

Controller:

@ ApiOperation (value = "query by hospital name") @ GetMapping ("findByHosName/ {hosname}") public Result findByHosName (@ PathVariable String hosname) {List list = hospitalService.findByHosname (hosname); return Result.ok (list);}

Service interface:

/ / query List findByHosname (String hosname) based on hospital name

Service implementation class:

/ / Fuzzy query @ Override public List findByHosname (String hosname) {return hospitalRepository.findHospitalByHosnameLike (hosname);} / / Fuzzy query according to hospital name @ Override public List findByHosname (String hosname) {return hospitalRepository.findHospitalByHosnameLike (hosname);}

Repository:

/ * * Fuzzy query according to the hospital name * @ param hosname * @ return * / List findHospitalByHosnameLike (String hosname); (4) implement the front end of the home page 1. Encapsulate an Api request

/ api/hosp.js:

Import request from'@ / utils/request'const api_name = `/ api/hosp/ hospital `export default {/ / query hospital list getPageList (page, limit, searchObj) {return request ({url:` ${api_name} / findHospList/$ {page} / ${limit} `, method: 'get'})} / / Fuzzy query getByHosName (hosname) {return request ({url: `${api_name} / findByHosName/$ {hosname}`, method: 'get'})} according to hospital name, / / query hospital details show (hoscode) {return request ({url: `${api_name} / findHospDetail/$ {hoscode}` based on hospital number) Method: 'get'})}, / / query department information according to hospital number 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 {/ / obtain subordinate node findByDictCode (dictCode) {return request ({url: `${api_name} / findByDictCode/$ {dictCode}`, method: 'get'})} according to dictCode / / obtain subordinate node findByParentId (parentId) {return request ({url: `${api_name} / findChildData/$ {parentId}`, method: 'get'})} 2 according to id. Reservation registration front-end page

Use nuxt for dynamic routing, create the following three vue files in turn, and import the following files:

Reservation registration front page: github reservation registration front end vue page

Hospital details page: github hospital details front-end vue page

Reservation instructions page: github reservation instructions front-end vue page

This is the end of the article on "how to realize the reservation registration home page of distributed medical registration system in VUE". Thank you for your reading! I believe that everyone has a certain understanding of the knowledge of "how to realize the VUE distributed medical registration system reservation registration home page". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.