VUE實現分布式醫(yī)療掛號系統(tǒng)預約掛號首頁步驟詳情
更新時間：2022年04月25日 17:29:43 作者：Hudie.
這篇文章主要為大家介紹了VUE實現分布式醫(yī)療掛號系統(tǒng)預約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
（1）定義布局
將準備好的靜態(tài)資源下面的css、images文件夾添加到assets目錄：
1.修改默認布局
參考靜態(tài)資源文件首頁，我們可以把頁頭和頁尾提取出來，形成布局頁。在layouts目錄下修改默認布局文件default.vue，將主內容區(qū)域的內容替換成<nuxt />。
并且在默認布局中引入下面的頭、尾文件：
<template>
<div class="app-container">
<div id="main">
<!-- 公共頭 -->
<myheader />
<div class="main-container">
<el-scrollbar class="page-component__scroll">
<!-- 內容區(qū)域 -->
<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.提取頭文件
創(chuàng)建layouts/myheader.vue文件：
<template>
<div class="header-container">
<div class="wrapper">
<!-- logo -->
<div class="left-wrapper v-link selected">
<img
style="width: 50px"
width="50"
height="50"
src="~assets/images/logo.png"
/>
<span class="text">牧醫(yī)通 預約掛號統(tǒng)一平臺</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="點擊輸入醫(yī)院名稱"
@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--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);
});
},
//在下拉框選擇某一個內容，執(zhí)行下面方法，跳轉到詳情頁面中
handleSelect(item) {
window.location.href = "/hospital/" + item.hoscode;
},
//點擊某個醫(yī)院名稱，跳轉到詳情頁面中
show(hoscode) {
window.location.href = "/hospital/" + hoscode;
},
},
};
</script>
3.提取尾文件
創(chuàng)建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訪問，得到如下靜態(tài)頁面：
（3）首頁數據API接口
在首頁主要完成下面幾個功能：
- 獲取醫(yī)院等級（根據數據字典編碼獲?。?/li>
- 獲取地區(qū)（根據數據字典編碼獲?。?/li>
- 醫(yī)院分頁列表。
- 根據醫(yī)院名稱關鍵字搜索醫(yī)院列表。
下面展示的是靜態(tài)頁面，接下來根據這些功能，完成首頁數據的API接口。
1.獲取醫(yī)院等級/地區(qū)接口
由于查詢醫(yī)院等級、地區(qū)兩個功能可以只提供同一個接口，所以將兩個功能都合并在findByDictCode方法中：
Controller：
@ApiOperation(value = "根據dictCode獲取下級節(jié)點")
@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方法判斷是否包含子節(jié)點
boolean flag = this.hasChildren(dictId);
// 為每條記錄設置hasChildren屬性
dict.setHasChildren(flag);
}
return dictList;
}
2.醫(yī)院列表接口
Controller：
@ApiOperation(value = "查詢醫(yī)院列表")
@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接口：
// 醫(yī)院列表(條件查詢帶分頁)
Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);
Service：
// 醫(yī)院列表(條件查詢帶分頁)
@Override
public Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo) {
// 1.創(chuàng)建pageable對象
Pageable pageable = PageRequest.of(page - 1, limit);
// 2.創(chuàng)建條件匹配器
ExampleMatcher matcher = ExampleMatcher.matching()
.withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING)
.withIgnoreCase(true);
// 3.hospitalQueryVo轉換為Hospital對象
Hospital hospital = new Hospital();
BeanUtils.copyProperties(hospitalQueryVo, hospital);
// 4.創(chuàng)建對象
Example<Hospital> example = Example.of(hospital, matcher);
// 5.調用方法實現查詢
Page<Hospital> pages = hospitalRepository.findAll(example, pageable);
// 6.得到所有醫(yī)院信息的集合
pages.getContent().stream().forEach(item -> {
this.setHospitalHosType(item);
});
return pages;
}
// 獲取查詢list集合,遍歷進行醫(yī)院等級封裝
private Hospital setHospitalHosType(Hospital hospital) {
// 封裝醫(yī)院等級
String hostypeString = dictFeignClient.getName("Hostype", hospital.getHostype());
hospital.getParam().put("hostypeString", hostypeString);
// 封裝醫(yī)院省市區(qū)
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.模糊查詢醫(yī)院列表
Controller：
@ApiOperation(value = "根據醫(yī)院名稱查詢")
@GetMapping("findByHosName/{hosname}")
public Result findByHosName(@PathVariable String hosname) {
List<Hospital> list = hospitalService.findByHosname(hosname);
return Result.ok(list);
}
Service接口：
// 根據醫(yī)院名稱查詢
List<Hospital> findByHosname(String hosname);
Service實現類：
// 根據醫(yī)院名稱做模糊查詢 @Override public List<Hospital> findByHosname(String hosname) {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> return hospitalRepository.findHospitalByHosnameLike(hosname); } // 根據醫(yī)院名稱做模糊查詢
@Override
public List<Hospital> findByHosname(String hosname) {
return hospitalRepository.findHospitalByHosnameLike(hosname);
}
Repository：
/**
* 根據醫(yī)院名稱做模糊查詢
* @param hosname
* @return
*/
List<Hospital> findHospitalByHosnameLike(String hosname);
（4）首頁前端實現
1.封裝Api請求
/api/hosp.js：
import request from '@/utils/request'
const api_name = `/api/hosp/hospital`
export default {
// 查詢醫(yī)院列表
getPageList(page, limit, searchObj) {
return request({
url: `${api_name}/findHospList/${page}/${limit}`,
method: 'get'
})
},
// 根據醫(yī)院名稱模糊查詢
getByHosName(hosname) {
return request({
url: `${api_name}/findByHosName/${hosname}`,
method: 'get'
})
},
// 根據醫(yī)院編號查詢醫(yī)院詳情
show(hoscode) {
return request({
url: `${api_name}/findHospDetail/${hoscode}`,
method: 'get'
})
},
// 根據醫(yī)院編號查詢科室信息
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進行動態(tài)路由，依次創(chuàng)建下面三個vue文件，分別導入下面的文件：
預約掛號前端頁面：github預約掛號前端vue頁面
醫(yī)院詳情頁面：github醫(yī)院詳情前端vue頁面
預約須知頁面：github預約須知前端vue頁面
以上就是VUE實現分布式醫(yī)療掛號系統(tǒng)預約掛號首頁步驟詳情的詳細內容，更多關于VUE實現分布式醫(yī)療掛號系統(tǒng)預約掛號首頁的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue.js層疊輪播效果，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
Jenkins?Sidebar?Link插件實現添加側邊欄功能詳解
這篇文章主要介紹了vue框架實現添加側邊欄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了rollup3.x+vue2打包組件的實現，詳細的介紹了打包會存在的問題，包版本的問題，babel 轉換jsx等問題，具有一定的參考價值，感興趣的可以了解一下2023-03-03
這篇文章主要為大家詳細介紹了vue3.0實現點擊切換驗證碼(組件)及校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了微信jssdk邏輯在vue中的運用詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue?Router解決多路由復用同一組件頁面不刷新問題(場景分析)
這篇文章主要介紹了Vue?Router解決多路由復用同一組件頁面不刷新問題,多路由復用同一組件的場景分析，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了為大家函數式組件劫持替代json封裝element表格的過程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了vue實現樓層跳轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05