平台前端搭建

一、尚医通平台前端搭建

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) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

官网网站：

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": "atguigu",
  "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

2.6 引入element-ui

1、下载element-ui

npm  install  element-ui

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

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

import Vue from 'vue'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

4、在nuxt.config.js文件中使用myPlugin.js

在build下面添加内容：

plugins: [
    { src: '~/plugins/myPlugin.js', ssr: false }
  ]

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，将主内容区域的内容替换成

修改layouts/default.vue文件

1.2 .2 提取头文件

创建layouts/myheader.vue文件

1.2 .3 提取尾文件

创建layouts/myfooter.vue文件

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

修改layouts/default.vue文件

启动项目：npm run dev

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

2、首页引入

2.1 引入首页静态页面

修改pages/inde.vue文件

2.2 首页数据分析

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

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

3，医院分页列表

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

3、首页数据api接口

3.1 医院分页列表

3.1.1 service接口与实现

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

3.1.2 添加controller接口

@Api(tags = "医院管理接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {

    @Autowired
    private HospitalService hospitalService;

    @ApiOperation(value = "获取分页列表")
    @GetMapping("{page}/{limit}")
    public Result index(
            @PathVariable Integer page,
            @PathVariable Integer limit,
            HospitalQueryVo hospitalQueryVo) {
        //显示上线的医院
        //hospitalQueryVo.setStatus(1);
        Page<Hospital> pageModel = hospitalService.selectHospPage(page, limit, hospitalQueryVo);
        return Result.ok(pageModel);
    }
}

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

3.1.1 service接口与实现

在HospitalService类添加接口

/**
 * 根据医院名称获取医院列表
*/
List<Hospital> findByHosname(String hosname);

在HospitalService类添加接口实现

@Override
public List<Hospital> findByHosname(String hosname) {
    return hospitalRepository.findHospitalByHosnameLike(hosname);
}

3.1.2 repository添加接口

在HospitalRepository类添加接口

List<Hospital> findHospitalByHosnameLike(String hosname);

3.1.3 添加controller接口

在.HospitalApiController 类添加方法

@ApiOperation(value = "根据医院名称获取医院列表")
@GetMapping("findByHosname/{hosname}")
public Result findByHosname(
        @ApiParam(name = "hosname", value = "医院名称", required = true)
        @PathVariable String hosname) {
    return Result.ok(hospitalService.findByHosname(hosname));
}

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}/${page}/${limit}`,
        method: 'get',
        params: searchObj
    })
  },

 getByHosname(hosname) {
    return request({
        url: `${api_name}/findByHosname/${hosname}`,
        method: 'get'
    })
  }
}

创建/api/cmn/dict.js

import request from '@/utils/request'

const api_name = '/admin/cmn/dict'

export default {
findByDictCode(dictCode) {
    return request({
        url: `${api_name}/findByDictCode/${dictCode}`,
        method: 'get'
    })
  },

findByParentId(parentId) {
    return request({
        url: `${api_name}/findChildData/${parentId}`,
        method: 'get'
    })
  }
}

4.2 添加组件

修改pages/index.vue组件

4.3 调用接口

三、医院详情

1、预约挂号

说明：需要获取医院信息（医院基本信息、预约信息）和科室信息

1.1 api接口

1.1.1 添加service接口与实现

1，在HospitalService类添加接口

/**
 * 医院预约挂号详情
*/
Map<String, Object> item(String hoscode);

2，在HospitalServiceImpl类实现接口

@Autowired
private DepartmentService departmentService;

@Override
public Map<String, Object> item(String hoscode) {
    Map<String, Object> result = new HashMap<>();
    //医院详情
    Hospital hospital = this.setHospitalHosType(this.getByHoscode(hoscode));
    result.put("hospital", hospital);
    //预约规则
    result.put("bookingRule", hospital.getBookingRule());
    //不需要重复返回
    hospital.setBookingRule(null);
    return result;
}

1.1.2 添加controller接口

在HospitalApiController类添加方法

@ApiOperation(value = "获取科室列表")
@GetMapping("department/{hoscode}")
public Result index(
    @ApiParam(name = "hoscode", value = "医院code", required = true)
    @PathVariable String hoscode) {
    return Result.ok(departmentService.findTree(hoscode));
}

@ApiOperation(value = "医院预约挂号详情")
@GetMapping("{hoscode}")
public Result item(
    @ApiParam(name = "hoscode", value = "医院code", required = true)
    @PathVariable String hoscode) {
    return Result.ok(hospitalService.item(hoscode));
}

1.2 预约挂号前端

1.2.1封装api请求

在/api/hosp.js文件添加方法

    show(hoscode) {
        return request({
            url: `${api_name}/${hoscode}`,
            method: 'get'
        })
    },
    findDepartment(hoscode) {
        return request({
            url: `${api_name}/department/${hoscode}`,
            method: 'get'
        })
    }

1.2.2 页面布局

创建/pages/hospital/_hoscode.vue组件

2、医院详情

2.1 页面布局

创建/pages/hospital/detail/_hoscode.vue组件

3、预约须知

2.1 页面布局

创建/pages/hospital/notice/_hoscode.vue组件

在同一自然周，同一就诊人，可以预约最多8个号源；

• 在同一自然月，同一就诊人，可以预约最多12个号源；
• 
  
• 在同一自然季度，同一就诊人，可以预约最多24个号源。
• 
  
  

  三、取消预约：

  
  

  已完成预约的号源，如需办理退号，至少在就诊前一工作日14:00前通过网站、微信公众号、114电话等平台预约渠道进行取消预约。

  
  

  四、爽约处理：

  
  

  如预约成功后患者未能按时就诊且不办理取消预约号视为爽约，同一患者在自然年内爽约规则如下：

  
  
  • 
    
  • 累计爽约3次，自3次爽约日起，90天内不允许通过114平台进行预约挂号；
  • 
    
  • 累计爽约6次，自6次爽约日起，180天内不允许通过114平台进行预约挂号。
  •