首页 > 其他分享> 文章详细

Day234&235&236.前台系统部署搭建、首页模块前后端实现 -尚医通

2021-03-30 23:29:37 阅读：374 来源： 互联网

标签：尚医通 api js 医院 Day234 import 235 data css

尚医通

一、尚医通平台前端搭建

1、服务端渲染技术NUXT

1.1 什么是服务端渲染

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些内容到达时间(time-to-content)与转化率直接相关的应用程序而言，服务器端渲染(SSR)至关重要。

1.2 什么是NUXT

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

通俗的说：

直接在数据之间在服务端进行渲染，客户端只服务展示数据，有利于提高SEO，让网页更排前

官网网站：

https://zh.nuxtjs.org/

2、NUXT环境初始化

2.1 下载压缩包

https://github.com/nuxt-community/starter-template/archive/master.zip

2.2解压

将template中的内容复制到 yygh-site

2.3修改package.json

name、description、author（必须修改这里，否则项目无法安装）

{
  "name": "yygh-site",
  "version": "1.0.0",
  "description": "阿昌之尚医通",
  "author": "achang",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
...
}

2.4修改nuxt.config.js

修改title: ‘{{ name }}’、content: ‘{{escape description }}’

这里的设置最后会显示在页面标题栏和meta数据中

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'yygh-site',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '阿昌之尚医通' }
    ],
      ................

2.5终端中进入项目目录安装依赖

npm install

阿昌这里出现了错误：

然后去安装了个vs2013

2.6 引入element-ui

1、下载element-ui

  npm  install  element-ui

2、在plugins文件夹下创建myPlugin.js文件

3、在myPlugin.js文件引入element-ui

2.7 测试运行

npm run dev

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

2.8 NUXT目录结构

1、资源目录 assets

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

2、组件目录 components

用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

3、布局目录 layouts

用于组织应用的布局组件【如公共页眉、页脚】。

4、页面目录 pages

用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

5、插件目录 plugins

用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。

6、nuxt.config.js 文件

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

3、封装axios

3.1 安装axios

npm install axios

3.2 封装axios

创建utils文件夹，utils下创建request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost',
  timeout: 15000 // 请求超时时间
})
// http request 拦截器
service.interceptors.request.use(
  config => {
    // token 先不处理，后续使用时在完善
    return config
  },
  err => {
    return Promise.reject(err)
  })
// http response 拦截器
service.interceptors.response.use(
  response => {
    if (response.data.code !== 200) {
      Message({
        message: response.data.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(response.data)
    } else {
      return response.data
    }
  },
  error => {
    return Promise.reject(error.response)
  })
export default service

二、首页实现

1、公共处理

1.1添加静态资源

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

1.2 定义布局

1.2 .1 修改默认布局

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

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

修改layouts/default.vue文件

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共头 -->
      <myheader/>
      <div class="main-container">
        <el-scrollbar class='page-component__scroll'>
        <!-- 内容区域 -->
        <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'
export default {
 }
</script>

1.2 .2 提取头文件

创建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">阿昌之尚医通 预约挂号统一平台</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="点击输入医院名称"
            @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&#45;&#45;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 {
}
</script>


<style scoped>

</style>

1.2 .3 提取尾文件

创建layouts/myfooter.vue文件

<template>
  <div class="footer-container">
    <div class="wrapper">
      <div><span class="record">温ICP备3306号</span><span
        class="phone">电话挂号QQ：995931576</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>

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

修改layouts/default.vue文件

<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>

启动项目：

npm run dev

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

效果

2、首页引入

2.1 引入首页静态页面

修改pages/inde.vue文件

<template>
  <div class="home page-component">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 2" :key="item">
        <img src="~assets/images/web-banner1.png" alt="">
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="hospital-search">
          <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>
          </el-autocomplete>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left">
        <div class="home-filter-wrapper">
          <div class="title"> 医院</div>
          <div>
            <div class="filter-wrapper">
        <span
          class="label">等级：</span>
              <div class="condition-wrapper"><span
                class="item v-link highlight clickable selected">
                                                    全部 </span><span
                class="item v-link clickable">
                                                    三级医院 </span><span
                class="item v-link clickable">
                                                    二级医院 </span><span
                class="item v-link clickable">
                                                    一级医院 </span></div>
            </div>
            <div class="filter-wrapper">
      <span
        class="label">地区：</span>
              <div class="condition-wrapper"><span
                class="item v-link highlight clickable selected">
                                                  全部 </span><span
                class="item v-link clickable">
                                                  东城区 </span><span
                class="item v-link clickable">
                                                  西城区 </span><span
                class="item v-link clickable">
                                                  朝阳区 </span><span
                class="item v-link clickable">
                                                  丰台区 </span><span
                class="item v-link clickable">
                                                  石景山区 </span><span
                class="item v-link clickable">
                                                  海淀区 </span><span
                class="item v-link clickable">
                                                  门头沟区 </span><span
                class="item v-link clickable">
                                                  房山区 </span><span
                class="item v-link clickable">
                                                  通州区 </span><span
                class="item v-link clickable">
                                                  顺义区 </span><span
                class="item v-link clickable">
                                                  昌平区 </span><span
                class="item v-link clickable">
                                                  大兴区 </span><span
                class="item v-link clickable">
                                                  怀柔区 </span><span
                class="item v-link clickable">
                                                  平谷区 </span><span
                class="item v-link clickable">
                                                  密云区 </span><span
                class="item v-link clickable">
                                                  延庆区 </span></div>
            </div>
          </div>
        </div>
        <div class="v-scroll-list hospital-list">
          <div class="v-card clickable list-item">
            <div class="">
              <div
                class="hospital-list-item hos-item" index="0">
                <div class="wrapper">
                  <div class="hospital-title"> 北京协和医院
                  </div>
                  <div class="bottom-container">
                    <div
                      class="icon-wrapper"><span
                      class="iconfont"></span>
                      三级甲等
                    </div>
                    <div
                      class="icon-wrapper"><span
                      class="iconfont"></span>
                      每天8:30放号
                    </div>
                  </div>
                </div>
                <img
                  src="images/23176337663806575.png"
                  alt="北京协和医院" class="hospital-img"></div>
            </div>
          </div>
          <div class="v-card clickable list-item space">
            <div class="">
              <div
                class="hospital-list-item hos-item" index="0">
                <div class="wrapper">
                  <div class="hospital-title"> 北京协和医院
                  </div>
                  <div class="bottom-container">
                    <div
                      class="icon-wrapper"><span
                      class="iconfont"></span>
                      三级甲等
                    </div>
                    <div
                      class="icon-wrapper"><span
                      class="iconfont"></span>
                      每天8:30放号
                    </div>
                  </div>
                </div>
                <img
                  src="images/23176337663806575.png"
                  alt="北京协和医院" class="hospital-img"></div>
            </div>
          </div>
          <div class="v-card clickable list-item">
            <div class="">
              <div class="hospital-list-item hos-item" index="0">
                <div class="wrapper">
                  <div class="hospital-title"> 北京协和医院
                  </div>
                  <div class="bottom-container">
                    <div
                      class="icon-wrapper"><span
                      class="iconfont"></span>
                      三级甲等
                    </div>
                    <div
                      class="icon-wrapper"><span
                      class="iconfont"></span>
                      每天8:30放号
                    </div>
                  </div>
                </div>
                <img
                  src="images/23176337663806575.png"
                  alt="北京协和医院" class="hospital-img"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="common-dept">
          <div class="header-wrapper">
            <div class="title"> 常见科室</div>
            <div class="all-wrapper"><span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <span class="item v-link clickable dark">神经内科 </span>
            <span class="item v-link clickable dark">消化内科 </span>
            <span class="item v-link clickable dark">呼吸内科 </span>
            <span class="item v-link clickable dark">内科 </span>
            <span class="item v-link clickable dark">神经外科 </span>
            <span class="item v-link clickable dark">妇科 </span>
            <span class="item v-link clickable dark"> 产科 </span>
            <span class="item v-link clickable dark">儿科 </span>
          </div>
        </div>
        <div class="space">
          <div class="header-wrapper">
            <div class="title-wrapper">
              <div class="icon-wrapper"><span
                class="iconfont title-icon"></span>
              </div>
              <span class="title">平台公告</span>
            </div>
            <div class="all-wrapper">
              <span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">关于延长北京大学国际医院放假的通知 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">北京中医药大学东方医院部分科室医生门诊医 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"> 武警总医院号源暂停更新通知 </span>
            </div>
          </div>
        </div>
        <div class="suspend-notice-list space">
          <div class="header-wrapper">
            <div class="title-wrapper">
              <div class="icon-wrapper">
                <span class="iconfont title-icon"></span>
              </div>
              <span class="title">停诊公告</span>
            </div>
            <div class="all-wrapper">
              <span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"> 中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"> 首都医科大学附属北京潞河医院老年医学科门诊停诊公告 </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">中日友好医院中西医结合心内科门诊停诊公告 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
}
</script>

效果

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<Hospital> hospitalPage = hospitalService.getPage(page, limit, hospitalQueryVo);
        return Result.ok(hospitalPage);
    }

}

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

3.1.1 service接口与实现

在HospitalService类添加接口

//根据医院名称获取数据 模糊查询
List<Hospital> findByHosName(String hospName);

在HospitalService类添加接口实现

//根据医院名称获取数据 模糊查询
@Override
public List<Hospital> findByHosName(String hospName) {
    return hospitalRepository.findHospitalByHosnameLike(hospName);
}

3.1.2 repository添加接口

在HospitalRepository类添加接口

//根据医院名称获取数据 模糊查询
List<Hospital> findHospitalByHosnameLike(String hospName);

3.1.3 添加controller接口

在.HospitalApiController 类添加方法

    //根据医院名称获取数据 模糊查询
    @GetMapping("/findByHospName/{hospName}")
    public Result findByHospName(@PathVariable String hospName){
        List<Hospital> 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组件

<template>
  <div class="home page-component">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 2" :key="item">
        <img src="~assets/images/web-banner1.png" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="hospital-search">
          <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>
          </el-autocomplete>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left">
        <div class="home-filter-wrapper">
          <div class="title">医院</div>
          <div>
            <div class="filter-wrapper">
              <span class="label">等级：</span>
              <div class="condition-wrapper">
                <span
                  v-for="item in hostypeList"
                  :key="item.id"
                  class="item v-link clickable"
                  @click="hostypeSelect(item.value)"
                >
                  {{ item.name }}
                </span>
              </div>
            </div>
            <div class="filter-wrapper">
              <span class="label">地区：</span>
              <div class="condition-wrapper">
                <span
                  class="item v-link highlight clickable selected"
                  v-for="item in districtList"
                  :key="item.id"
                  @click="districtSelect(item.value)"
                >
                  {{ item.name }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="v-scroll-list hospital-list">
          <div
            class="v-card clickable list-item"
            v-for="item in list"
            :key="item.id"
          >
            <div class="">
              <div
                class="hospital-list-item hos-item"
                index="0"
                @click="show(item.hoscode)"
              >
                <div class="wrapper">
                  <div class="hospital-title">{{ item.hosname }}</div>
                  <div class="bottom-container">
                    <div class="icon-wrapper">
                      <span class="iconfont"></span>
                      {{ item.param.hospitalRankName }}
                    </div>
                    <div class="icon-wrapper">
                      <span class="iconfont"></span>
                      每天{{ item.bookingRule.releaseTime }}放号
                    </div>
                  </div>
                </div>
                <img
                  :src="'data:image/jpeg;base64,' + item.logoData"
                  :alt="item.hosname"
                  class="hospital-img"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="common-dept">
          <div class="header-wrapper">
            <div class="title">常见科室</div>
            <div class="all-wrapper">
              <span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <span class="item v-link clickable dark">神经内科 </span>
            <span class="item v-link clickable dark">消化内科 </span>
            <span class="item v-link clickable dark">呼吸内科 </span>
            <span class="item v-link clickable dark">内科 </span>
            <span class="item v-link clickable dark">神经外科 </span>
            <span class="item v-link clickable dark">妇科 </span>
            <span class="item v-link clickable dark"> 产科 </span>
            <span class="item v-link clickable dark">儿科 </span>
          </div>
        </div>
        <div class="space">
          <div class="header-wrapper">
            <div class="title-wrapper">
              <div class="icon-wrapper">
                <span class="iconfont title-icon"></span>
              </div>
              <span class="title">平台公告</span>
            </div>
            <div class="all-wrapper">
              <span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"
                >关于延长北京大学国际医院放假的通知
              </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"
                >北京中医药大学东方医院部分科室医生门诊医
              </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">
                武警总医院号源暂停更新通知
              </span>
            </div>
          </div>
        </div>
        <div class="suspend-notice-list space">
          <div class="header-wrapper">
            <div class="title-wrapper">
              <div class="icon-wrapper">
                <span class="iconfont title-icon"></span>
              </div>
              <span class="title">停诊公告</span>
            </div>
            <div class="all-wrapper">
              <span>全部</span>
              <span class="iconfont icon"></span>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">
                中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告
              </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark">
                首都医科大学附属北京潞河医院老年医学科门诊停诊公告
              </span>
            </div>
            <div class="notice-wrapper">
              <div class="point"></div>
              <span class="notice v-link clickable dark"
                >中日友好医院中西医结合心内科门诊停诊公告
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

4.3 调用接口

<script>
import dictAPI from "@/api/dict/dict";
import hosAPI from "@/api/hosp/hospital";
export default {
  methods: {
    //查询分页多条件医院列表
    getList() {
      hosAPI.getPageList(this.page, this.limit, this.searchObj).then((resp) => {
        for (let i in resp.data.content) {
          this.list.push(resp.data.content[i]);
        }

        this.pages = resp.data.totalPages;
      });
    },
    //查询医院等级列表 和 地区列表
    init() {
      //查询医院等级列表
      dictAPI.getHospByDictcode("Hostype").then((resp) => {
        //清空hostypeList
        this.hostypeList = [];
        //向hostypeList添加【全部值】
        this.hostypeList.push({ name: "全部", value: "" });
        //把接口返回的数据添加到hostypeList中
        for (let i = 0; i < resp.data.length; i++) {
          this.hostypeList.push(resp.data[i]);
        }
      });
      //查询地区数据
      dictAPI.getHospByDictcode("Beijin").then((resp) => {
        //清空districtList
        this.districtList = [];
        this.districtList.push({ name: "全部", value: "" });
        for (let i = 0; i < resp.data.length; i++) {
          this.districtList.push(resp.data[i]);
        }
      });
    },
    //根据医院等级查询
    hostypeSelect(hostype) {
      this.list = [];
      this.page = 1;
      this.searchObj.hostype = hostype;
      //调用查询医院列表方法
      this.getList();
    },
    //根据地区查询
    districtSelect(district) {
      this.list = [];
      this.page = 1;
      this.searchObj.districtCode = district;
      this.getList();
    },
    //在输入框输入值，弹出下拉框，显示相关内容
    querySearchAsync(queryString, cb) {
      this.searchObj = [];
      if (queryString == "") return;
      hosAPI.findByHospNameLike(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);
      });
    },

    //点击某个医院名称，跳转到详情页面中
    show(hoscode) {
      window.location.href = "/hospital/" + hoscode;
    },
    //在下拉框选择某一个内容，执行下面方法，跳转到详情页面中
    handleSelect(item) {
      window.location.href = "/hospital/" + item.hoscode;
    },
  },
  created() {
    this.getList();
    this.init();
  },
  data() {
    return {
      page: 1,
      limit: 10,
      pages: "", //总页数
      searchObj: {},
      list: [], //医院列表信息
      hosname: "", //医院名称
      hostypeList: [], //医院等级集合
      districtList: [], //地区集合
      state:'',
      hostypeActiveIndex: 0,
      provinceActiveIndex: 0,
    };
  },
};
</script>

效果

标签：尚医通,api,js,医院,Day234,import,235,data,css
来源： https://blog.csdn.net/qq_43284469/article/details/115338921

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Day234&235&236.前台系统部署搭建、首页模块前后端实现 -尚医通

尚医通

一、尚医通平台前端搭建

1、服务端渲染技术NUXT

1.1 什么是服务端渲染

1.2 什么是NUXT

2、NUXT环境初始化

2.1 下载压缩包

2.2解压

2.3修改package.json

2.4修改nuxt.config.js

2.5终端中进入项目目录安装依赖

2.6 引入element-ui

2.7 测试运行

2.8 NUXT目录结构

3、封装axios

3.1 安装axios

3.2 封装axios

二、首页实现

1、公共处理

1.1添加静态资源

1.2 定义布局

1.2 .1 修改默认布局

1.2 .2 提取头文件

1.2 .3 提取尾文件

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

2、首页引入

2.1 引入首页静态页面

2.2 首页数据分析

3、首页数据api接口

3.1 医院分页列表

3.1.1 service接口与实现

3.1.2 添加controller接口

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

3.1.1 service接口与实现

3.1.2 repository添加接口

3.1.3 添加controller接口

4、首页前端实现

4.1 封装api请求

4.2 添加组件

4.3 调用接口