目录：

（1）前台用户系统-首页显示-整合静态页面

（2）前台用户系统-首页显示-数据接口开发

（3）前端用户系统-首页显示-前端整合

（1）前台用户系统-首页显示-整合静态页面

一进入页面，这里会显示，首页显示的数据

1.1添加静态资源

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

复制准备好的文件：

 修改默认布局

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

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

修改布局 

修改layouts/default.vue文件

myheader myfooter分别引入指定的vue  头和尾， 内容区域 nuxt引入pages下的index.vue 

1.2 .2 提取头文件

创建layouts/myheader.vue文件

1.2 .3 提取尾文件

创建layouts/myfooter.vue文件

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

修改layouts/default.vue文件

1. 首页引入

2.1 引入首页静态页面

修改pages/inde.vue文件  这里面的数据是固定的，以后要通过调用接口，显示出来

启动项目：npm run dev

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

这就是整合首页面的基本内容： 

中间的部分需要改变：通过数据库查询出来，写接口

2.2 首页数据分析

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

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

3，医院分页列表

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

（2）前台用户系统-首页显示-数据接口开发

查询医院等级和查询地区接口我们已经写了：在DicController

 医院列表，其实也有，写过条件查询带分页，但是创建一个controller调用

package com.atguigu.yygh.hosp.controller.api;import com.atguigu.yygh.common.result.Result;
import com.atguigu.yygh.hosp.service.HospitalService;
import com.atguigu.yygh.model.hosp.Hospital;
import com.atguigu.yygh.vo.hosp.HospitalQueryVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@Api(tags = "医院管理接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {@Autowiredprivate HospitalService hospitalService;@ApiOperation(value = "获取医院分页列表")@GetMapping("findHospList/{page}/{limit}")public Result findHospList(@PathVariable Integer page,@PathVariable Integer limit,HospitalQueryVo hospitalQueryVo) {Page pageModel = hospitalService.selectHospPage(page, limit, hospitalQueryVo);return Result.ok(pageModel);}
}

医院名称模糊查询也新建查询

 在这个Controller中添加：方法：

package com.atguigu.yygh.hosp.controller.api;import com.atguigu.yygh.common.result.Result;
import com.atguigu.yygh.hosp.service.HospitalService;
import com.atguigu.yygh.model.hosp.Hospital;
import com.atguigu.yygh.vo.hosp.HospitalQueryVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@Api(tags = "医院管理接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {@Autowiredprivate HospitalService hospitalService;//查询医院列表@ApiOperation(value = "获取医院分页列表")@GetMapping("findHospList{page}/{limit}")public Result findHospList(@PathVariable Integer page,@PathVariable Integer limit,HospitalQueryVo hospitalQueryVo) {Page pageModel = hospitalService.selectHospPage(page, limit, hospitalQueryVo);return Result.ok(pageModel);}//根据医院名称模糊查询@ApiOperation(value = "根据医院名称获取医院列表")@GetMapping("findByHosname/{hosname}")public Result findByHosname(@ApiParam(name = "hosname", value = "医院名称", required = true)@PathVariable String hosname) {List list= hospitalService.findByHosname(hosname);return Result.ok(list);}}

 HospitalService 接口：

package com.atguigu.yygh.hosp.service;import com.atguigu.yygh.model.hosp.Hospital;
import com.atguigu.yygh.vo.hosp.HospitalQueryVo;
import org.springframework.data.domain.Page;import java.util.List;
import java.util.Map;public interface HospitalService {//上传医院接口的方法void save(Map paramMap);//根据医院编号进行查询Hospital getByHoscode(String hoscode);//医院列表(条件查询分页)Page selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);//更新医院的上线状态void updateStatus(String id, Integer status);//医院的详情信息Map getHospById(String id);//获取医院名称String getHospName(String hoscode);//根据医院名称模糊查询List findByHosName(String hosname);
}

 HospitalService Impl实现类：

HospitalRepository ：在里见创建这个方法，让MongoRepositoty去帮助我们去实现 

package com.atguigu.yygh.hosp.repository;import com.atguigu.yygh.model.hosp.Hospital;import org.springframework.data.mongodb.repository.MongoRepository;import org.springframework.stereotype.Repository;import java.util.List;@Repository  //让它交给spring管理
public interface HospitalRepository extends MongoRepository {//根据hostcode查询对象是否存在 这个方法不用我们自己实现MongoRepository会帮助我们实现Hospital getHospitalByHoscode(String hostcode);//根据医院名称模糊查询List findHospitalByHosnameLike(String hosname);
}

 （3）前端用户系统-首页显示-前端整合

接口已经我完成了，现在在前端调用接口，去查询数据，在页面进行显示

我们创建了request.js把Axios进行了封装，所以按照想原来的操作创建一个js文件，里面编写调用接口的路径，在页面中引入这个问价，在里面调用里面的方法，最终实现功能

创建：

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',params: searchObj})},//根据医院名称模糊查询getByHosname(hosname) {return request({url: `${api_name}/findByHosname/${hosname}`,method: 'get'})},}

 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'})}
}

在index.vue添加代码

引入上面的两个js文件：

 nuxt做的是服务端渲染，那么怎么做到服务端渲染呢？nuxt有一个特别的写法，

更改页面代码的静态部分：

这里的数据是从数据库动态获取的： 

 定义方法：

 //查询医院列表getList() {hospApi.getPageList(this.page, this.limit, this.searchObj).then((response) => {for (let i in response.data.content) {this.list.push(response.data.content[i]);}this.pages = response.data.totalPages;});},//根据医院等级查询hostypeSelect(hostype, index) {//准备数据this.list = [];this.page = 1;this.hostypeActiveIndex = index;this.searchObj.hostype = hostype;//调用查询医院列表方法this.getList();},//根据地区查询医院districtSelect(districtCode, index) {this.list = [];this.page = 1;this.provinceActiveIndex = index;this.searchObj.districtCode = districtCode;this.getList();},

//在输入框输入值，弹出下拉框，显示相关内容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 = "/hosp/" + item.hoscode;},

 输入协和：

 //点击某个医院名称，跳转到详情页面中show(hoscode) {window.location.href = '/hosp/' + hoscode}