Day234&235&236

1.1添加静态资源

将静态资源下面的css、images文件夹添加到assets目录，如图：

​

1.2 定义布局

1.2 .1 修改默认布局

参考静态资源文件首页，我们可以把页头和页尾提取出来，形成布局页。

在layouts目录下修改默认布局文件default.vue，将主内容区域的内容替换成<nuxt/>

修改layouts/default.vue文件

1.2 .2 提取头文件

创建layouts/myheader.vue文件

阿昌之尚医通 预约挂号统一平台

<el-autocomplete

class=“search-input small”

prefix-icon=“el-icon-search”

v-model=“state”

:fetch-suggestions=“querySearchAsync”

placeholder=“点击输入医院名称”

@select=“handleSelect”

搜索

帮助中心

<span class=“v-link clickable” @click=“dialogUserFormVisible = true”>登录/注册

1.2 .3 提取尾文件

创建layouts/myfooter.vue文件

温ICP备3306号

class=“phone”>电话挂号QQ：995931576

class=“v-link clickable”> 联系我们 <span

class=“v-link clickable”> 合作伙伴 <span

class=“v-link clickable”> 用户协议 <span

class=“v-link clickable”> 隐私协议

1.2 .4 默认布局引入头尾文件

修改layouts/default.vue文件

启动项目：

npm run dev

访问项目：http://localhost:3000/

• 效果

---

2、首页引入

---

2.1 引入首页静态页面

修改pages/inde.vue文件

<el-autocomplete

class=“search-input”

prefix-icon=“el-icon-search”

v-model=“state”

:fetch-suggestions=“querySearchAsync”

placeholder=“点击输入医院名称”

@select=“handleSelect”

搜索

医院

<span

class=“label”>等级：

class=“item v-link highlight clickable selected”>

全部 <span

class=“item v-link clickable”>

三级医院 <span

class=“item v-link clickable”>

二级医院 <span

class=“item v-link clickable”>

一级医院

<span

class=“label”>地区：

class=“item v-link highlight clickable selected”>

全部 <span

class=“item v-link clickable”>

东城区 <span

class=“item v-link clickable”>

西城区 <span

class=“item v-link clickable”>

朝阳区 <span

class=“item v-link clickable”>

丰台区 <span

class=“item v-link clickable”>

石景山区 <span

class=“item v-link clickable”>

海淀区 <span

class=“item v-link clickable”>

门头沟区 <span

class=“item v-link clickable”>

房山区 <span

class=“item v-link clickable”>

通州区 <span

class=“item v-link clickable”>

顺义区 <span

class=“item v-link clickable”>

昌平区 <span

class=“item v-link clickable”>

大兴区 <span

class=“item v-link clickable”>

怀柔区 <span

class=“item v-link clickable”>

平谷区 <span

class=“item v-link clickable”>

密云区 <span

class=“item v-link clickable”>

延庆区

class=“hospital-list-item hos-item” index=“0”>

北京协和医院

class=“icon-wrapper”><span

class=“iconfont”>

三级甲等

class=“icon-wrapper”><span

class=“iconfont”>

每天8:30放号

<img

src=“images/23176337663806575.png”

alt=“北京协和医院” class=“hospital-img”>

class=“hospital-list-item hos-item” index=“0”>

北京协和医院

class=“icon-wrapper”><span

class=“iconfont”>

三级甲等

class=“icon-wrapper”><span

class=“iconfont”>

每天8:30放号

<img

src=“images/23176337663806575.png”

alt=“北京协和医院” class=“hospital-img”>

北京协和医院

class=“icon-wrapper”><span

class=“iconfont”>

三级甲等

class=“icon-wrapper”><span

class=“iconfont”>

每天8:30放号

<img

src=“images/23176337663806575.png”

alt=“北京协和医院” class=“hospital-img”>

常见科室

全部



神经内科

消化内科

呼吸内科

内科

神经外科

妇科

产科

儿科

class=“iconfont title-icon”>

平台公告

全部



关于延长北京大学国际医院放假的通知

北京中医药大学东方医院部分科室医生门诊医

武警总医院号源暂停更新通知



停诊公告

全部



中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告

首都医科大学附属北京潞河医院老年医学科门诊停诊公告

中日友好医院中西医结合心内科门诊停诊公告

• 效果

---

2.2 首页数据分析

1，获取医院等级（根据数据字典编码获取）

2，获取地区（根据数据字典编码获取）

3，医院分页列表

4，根据医院名称关键字搜索医院列表

---

3、首页数据api接口

---

3.1 医院分页列表

3.1.1 service接口与实现

在管理平台 医院分页列表时已经提供，目前我们可以直接使用

3.1.2 添加controller接口

@RestController

@RequestMapping(“/api/hosp/hospital”)

public class HospApiController {

@Autowired

private HospitalService hospitalService;

//查询医院列表

@GetMapping(“/getHospListPage/{page}/{limit}”)

public Result getHospListPage(@PathVariable Integer page,

@PathVariable Integer limit,

HospitalQueryVo hospitalQueryVo){

Page hospitalPage = hospitalService.getPage(page, limit, hospitalQueryVo);

return Result.ok(hospitalPage);

}

}

3.2 根据医院名称关键字搜索医院列表

3.1.1 service接口与实现

在HospitalService类添加接口

//根据医院名称获取数据 模糊查询

List findByHosName(String hospName);

在HospitalService类添加接口实现

//根据医院名称获取数据 模糊查询

@Override

public List findByHosName(String hospName) {

return hospitalRepository.findHospitalByHosnameLike(hospName);

}

3.1.2 repository添加接口

在HospitalRepository类添加接口

//根据医院名称获取数据 模糊查询

List findHospitalByHosnameLike(String hospName);

3.1.3 添加controller接口

在.HospitalApiController 类添加方法

//根据医院名称获取数据 模糊查询

@GetMapping(“/findByHospName/{hospName}”)

public Result findByHospName(@PathVariable String hospName){

List hospitalList = hospitalService.findByHosName(hospName);

return Result.ok(hospitalList);

}

---

4、首页前端实现

---

4.1 封装api请求

创建api文件夹，创建/api/hosp/hospital.js

import request from ‘@/utils/request’

const api_name=‘/api/hosp/hospital’

export default {

//分页多条件查询医院列表

getPageList(page,limit,searchObj){

return request({

url:${api_name}/getHospListPage/${page}/${limit},

method:“get”,

params:searchObj

})

},

//根据医院名称获取数据 模糊查询

findByHospNameLike(hospName){

return request({

url:${api_name}/findByHospName/${hospName},

method:“get”,

})

}

}

创建/api/cmn/dict.js

import request from ‘@/utils/request’

const api_name=‘/admin/cmn/dict’

export default {

//根据dictCode获取医院等级数据

getHospByDictcode(dictCode){

return request({

url:${api_name}/findByDictCode/${dictCode},

method:“get”

})

},

//根据id查询子节点数据列表

getTreeById(id){

return request({

url:${api_name}/findByParentId/${id},

method:“get”

})

}

}

---

4.2 添加组件

修改pages/index.vue组件

<el-autocomplete

class=“search-input”

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

v-for=“item in hostypeList”

:key=“item.id”

class=“item v-link clickable”

@click=“hostypeSelect(item.value)”

{{ item.name }}

地区：

<span

class=“item v-link highlight clickable selected”

v-for=“item in districtList”

:key=“item.id”

@click=“districtSelect(item.value)”

{{ item.name }}

class=“v-card clickable list-item”

v-for=“item in list”

:key=“item.id”

class=“hospital-list-item hos-item”

index=“0”

@click=“show(item.hoscode)”

{{ item.hosname }}



{{ item.param.hospitalRankName }}



每天{{ item.bookingRule.releaseTime }}放号

<img

:src=“‘data:image/jpeg;base64,’ + item.logoData”

:alt=“item.hosname”

class=“hospital-img”

/>

常见科室

全部



神经内科

消化内科

呼吸内科

内科

神经外科

妇科

产科

儿科



平台公告

全部



<span class=“notice v-link clickable dark”

关于延长北京大学国际医院放假的通知

<span class=“notice v-link clickable dark”

北京中医药大学东方医院部分科室医生门诊医

武警总医院号源暂停更新通知



停诊公告

全部



中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告

首都医科大学附属北京潞河医院老年医学科门诊停诊公告

<span class=“notice v-link clickable dark”

中日友好医院中西医结合心内科门诊停诊公告

最后

经过日积月累， 以下是小编归纳整理的深入了解Java虚拟机文档，希望可以帮助大家过关斩将顺利通过面试。
由于整个文档比较全面，内容比较多，篇幅不允许，下面以截图方式展示 。

![](https://upload-images.jianshu.io/upload_images/24195226-8d001fd8c4faee74.png?image

必看视频！获取2024年最新Java开发全套学习资料 备注Java

Mogr2/auto-orient/strip%7CimageView2/2/w/1240)

由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
on-wrapper">



停诊公告

全部



中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告

首都医科大学附属北京潞河医院老年医学科门诊停诊公告

<span class=“notice v-link clickable dark”

中日友好医院中西医结合心内科门诊停诊公告

最后

经过日积月累， 以下是小编归纳整理的深入了解Java虚拟机文档，希望可以帮助大家过关斩将顺利通过面试。
由于整个文档比较全面，内容比较多，篇幅不允许，下面以截图方式展示 。

[外链图片转存中…(img-fqPScM2Y-1716468475257)]
[外链图片转存中…(img-cz10ZyrD-1716468475258)]
[外链图片转存中…(img-1q3fS7di-1716468475258)]
[外链图片转存中…(img-dupE7rUB-1716468475258)]
![](https://upload-images.jianshu.io/upload_images/24195226-8d001fd8c4faee74.png?image

必看视频！获取2024年最新Java开发全套学习资料 备注Java

Mogr2/auto-orient/strip%7CimageView2/2/w/1240)
[外链图片转存中…(img-1J4I6BEQ-1716468475259)]
[外链图片转存中…(img-uivB229A-1716468475259)]

由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！