103-尚硅谷-尚医通-前台用户系统-首页显示-整合静态页面

各位同学大家好，我们继续来开发上银通项目，刚才呢，咱们是把这个用户系统中的前端环境做了搭建，通过纳斯完成了搭建过程，并且最终在在里面封装的这个AX iOS，为了后面进行请求中使用，那咱们把这些都做到之后呢，咱们下面干什么呢？就先来完成一下首页数据显示，也就是说我们一进入页面，在里面会显示我这个系统平台中首页中的数据，咱们下面就来做这个首页数据的显示功能。那这功能怎么做呢？首先呢，咱先把里边那个页面效果先给它整合出来，也如说我们先整合一些静态页面效果，然后在里边呢，我们在编写接口，最终把数据通过数据库给它查出来，那下面呢，我就按照我课件中的流程，把里边这个静态页面效果先弄出来，这个过程呢，不需要各位去写里面这个代码，因为这个代码呢，都是最基本的HTML加S的部分，各位按照我的课件能把这效果快速整合就可以了，而重点在后面，就是咱们要编写切口，然后整合前端，那咱下面先把静态页面效果先给弄出来。

那怎么弄呢？按照我课件中的流程，第一步呢，咱们先向这里边呢，添加一些静态资源，包含我们的CSS文件，包含里边的图片。那我们来加一下啊，我这个静态资源文件呢，在我这个资料里边的前端相关中的第一部分叫静态资源，然后里边有两个文件夹，一个叫CSS。就是一些相关的样式文件，第二个叫image，是一些相关的图片，那咱下面把这两个文件夹就放到咱们项目中这个a set这个目录下面去，那我们给它快速放下我这个项目在E盘的这里边，然后咱们找到这个预约挂号set，找到a set文件夹，把两个目录直接复制过来，这是里边的第一步，添加静态资源，为了一块使用。

然后添加之后呢，第二部分呢，咱们把里边那个就是布局页面做修改，刚才给大家讲到了，咱们在访问中呢，首先先进入到咱们这个layout里边那个布局页面。然后在里边呢，再引入其他页面内容，所以现在咱们把这布局页面给它改一下，就是里边的这个内容，然后把这内容给各位就直接复制到咱这个布局页面中，把里面内容给它替换掉就可以了，咱们找到在layout里边的一个目录，叫default.vuee这个文件夹，就是这个文件里边是我们的不页面，那咱把里边内容都给它去掉，然后复制出我们新的这个内容，这是我们的里边的第二部分。然后这个内容大家看一下啊，比如说咱一会儿操作中，第一部分我们有它的头信息，包括有它的尾信息，中间是内容部分，内容部分呢，通过这个纳S文件会引入咱们配置里边的这个音带里边内容。

所以这是一个。布局页面，然后在里边的下面部分，咱就引入了，就是我们相关这个CSS文件，比如说这里边APP什么面等到文件，也就是刚才我在里边的这位置复制中的这些文件，咱把它留进来，为了一会儿做使用，所以这是我们的第二部分改它的布局页面，然后改完之后呢，大家看，因为在里边呢，咱有两部分。一个是头，一个是尾，另外还有中间部分这个内容，所以咱就分法这个头尾还有中间内容，咱们分别做个提取，然后最终在里边做整合，所以咱们的第三部分先去这个头文件，那头文件呢，比如说我现在这么做，我在lit里边呢建个文件，专门用于咱们的头信息，也就是我因为的上边，因为上边呢一般放一些logo等等内容，那我现在来做一下啊，我在料T里边建个文件。

就是这个my head的viewuee，然后在里边呢，把这段内容我就给它直接复制过去，就这个内容，这是我们的投信，包含你的这个logo等等些内容啊，这个我们就给它抽取出来了，然后抽取之后我们往下看，下面的咱在抽屉里边这个尾文件信息，就是我们起名叫买foot.ve。那我现在在里边，我也做过创建。把这个文件创建出来，然后把里面这个内容我从这个课件中直接都复制过来，这个部分不需要各去写，因为里面都是一些最基本的atl加CSS，各位把它是不是就可以了，在伪信息中咱们一般放的是不是一些。版权信息包含你这个什么联系我们，什么友情链接等等内容，所以这个就完成了啊。

然后完成之后呢，往下看啊，就是下面的，因为咱们要把这个头文件和尾文件是不是要引入到咱们的布局页面中，也就是说我们一访问知道defportt里边，在defportt中呢，既要有刚才这个头文件，还要有刚才这个伪文件，把两文件需要引入进去，那怎么引入呢？在里边我们看看这个写法很简单啊，咱就来一个import，我把它直接说过来。然后隐破的咱看一下，隐破的里边呢，就引入咱们刚才两文件让咱看到啊，就是点杠当前路径项目，一个叫买head，一个叫买foot，然后引入之后我们在里边要使用，怎么使用呢？把它通过组建的方式做个使用，也就是在里边呢加上这么一个。属性名字我们看到啊，叫这个commonness，然后里边有这个买hi的，还有这个买foot，就这两只，而这么写之后呢，咱们在页面中我们可以怎么用，大家看我这个写法啊，直接通过标签方式把它可以使用，这表示把我们两个页面作为组件引用进来，然后影之后你在页面中用标签可以进行使用，这个名字是我们随便起的，比如你叫hi特一，叫福特一，然后上面就用这个hi特一或者福特一这个标签进行操作。

这样的话，咱们把头文件和尾文件就引进来了，就这过程啊。然后有之后呢，还有下一部分就是咱们中间的内容部分，内容部分呢，要通过NAS文件引入咱们的首页面中内容，咱们首页面是这个index.vouee，所以我最后来用这个首页面中内容，那首页面我把这一部分内容给它复制过来。我强调啊，目前我们这写的是一些静态数据，就是一些固定值，咱们一会儿会把里边很多值通过调用接口查数据库返回，目前我们先让它有一个最基础的效果，所以现在这个部分我们就完成了，也就说现在呢，咱们把首页数据就完成了，大家注意这个特点啊，我们第一步呢，先改了def before的这个布局页面。

然后里边引入了。头文件尾文件又封装了头和尾，还有我们的具体这个首页面就是index indext中呢，通过里边的NAS标签会把它引入，所以现在咱们把这个静态页面部分我们就都完成了，完成之后最后咱们把这负给它重启一下，咱们就看一下最终的效果什么样的。然后给它重启压啊，目前就是整个页面这个过程呢，各位按照我课件中这个代码把它快速整合就可以了，然后咱们一会儿要把首中的数据通过调用接口实现出来，那现在我启动了，然后咱们到里边看一下。

比如大家看这就是我们整合出来这个首页面的这个基本内容，我们看到啊，首先头部分有我们的logo，包括这个图标，尾部分有你的版权信息等等，中间部分是不是那种。然后内容部分就是咱们inex.vouee中的部分，只是说目前的这些部分写的都是一些固定值，然后咱们一会儿又把里面这个，比如说医院等级，你的地区包你的医院的这些信息，然后通过调接口走到目前咱只做了一个基本的效果，所以这是关于静态英文的整合，各位把能做到啊，然后做到之后呢，咱把数据啊做个分析，为了一会儿写接口做准备，大家看里面的部分啊，首先它的头和尾不小变，这些不变，咱变的是中间部分。然后中间部分咱还有什么数据啊，第一个数据是不是你的医院等级啊，这个数据一会咱要通过数据库查出来，就是写接口，第二部分有咱的地区是不是要查出来，第三部分有你的医院信息，当然医院信息咱可以再加个分页，而这个信息中我们可以根据条件做操作，包括这个位置是不是能输入医院名称做一个模糊查询啊，所以目前需要的就是这几个数据，我在这里边给大家都写出来了啊，我们看一下啊。

第一部分。医院等级。咱们通过这个数据字典获取，第二部分地区通过数据字典是否可以获取，然后第三部分是我们这个医院的分页列表，就是咱们说那个天传带分页，咱有接口可以调用，然后最后一个我们是根据医院名称的关键字做一个摸产操作，所以这些呢，就是关于首页数据的一个基本分析，各位先知道，所以咱们现在页面整出来了，那下面呢，我们就根据这个数据，咱们就来编写接口，编写接口之后，最终在页面中去调用接口，然后把数据就能给它得到，最终完成显示，那咱们马上来实现。