分布式医疗挂号系统(十五) | 预约挂号系统前台搭建

妖狐艹你老母 2023-01-19 04:53 283阅读 0赞

### 预约挂号系统前台搭建 ###

*  一、预约挂号系统前台搭建
 *   *  （1）服务端渲染技术SSR
     *  （2）使用Nuxt.js搭建前端环境
     *   *  1.下载并解压Nuxt
         *  2.修改package.json
         *  3.修改nuxt.config.js
         *  4.终端中进入项目目录安装依赖
         *  5.引入element-ui
         *  6.启动测试
     *  （3）NUXT目录结构
     *  （4）封装axios

--------------------

# 一、预约挂号系统前台搭建 #

## （1）服务端渲染技术SSR ##

`SSR （服务端渲染）`是一种在关注何处渲染 HTML 页面的模式，代表在服务器端完成把数据和模板转换成最终的 HTML ，区别于 `CSR（客户端渲染）`。后者是在客户端完成转换。

*  `传统的 PHP，jsp，asp 的模板渲染`也是服务端渲染
 *  Node JS 领域，包含了 React 或者 Vue 这种`前后端同构`的模式
 *  也包含了 Express / Koa / Egg 等`基于模板渲染`的模式

**服务器端渲染SSR的优点：**

*  有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，更有利于seo。
 *  前端耗时少。因为后端拼接完了html，浏览器只需要直接渲染出来。
 *  客户端资源占用少。即解析模板的工作完全交由后端来做，客户端只要解析标准的html页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电。
 *  后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效 。

## （2）使用Nuxt.js搭建前端环境 ##

**Nuxt.js：** 官方网站：[https://zh.nuxtjs.org][https_zh.nuxtjs.org]

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

### 1.下载并解压Nuxt ###

从[https://github.com/nuxt-community/starter-template/archive/master.zip][https_github.com_nuxt-community_starter-template_archive_master.zip]下载Nuxt，下载解压之后，将template文件夹中的文件复制到VSCode的工作区yygh-site中：  
![复制资源到yygh-site工作区][yygh-site]

### 2.修改package.json ###

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

{ 
      "name": "yygh-site",
      "version": "1.0.0",
      "description": "预约挂号系统(前台)",
      "author": "Guoqianliang",
      "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"
      },

### 3.修改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: '预约挂号系统(前台)' }
        ],

### 4.终端中进入项目目录安装依赖 ###

在终端中使用`npm install`命令安装依赖：  
![npm install][]

### 5.引入element-ui ###

首先需要使用`npm install element-ui`命令下载element-ui。

在`plugins文件夹`下创建myPlugin.js文件，并引入element-ui：  
![引入element-ui][element-ui]  
最后在`nuxt.config.js文件`中的build下，添加如下代码，使用myPlugin.js:

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

### 6.启动测试 ###

使用`npm run dev`启动项目，在浏览器3000端口看到如下页面，就表示搭建成功了：

![Nuxt.js启动][Nuxt.js]

## （3）NUXT目录结构 ##

下图对NUXT目录结构进行简要介绍：  
![NUXT目录结构][NUXT]

## （4）封装axios ##

使用`npm install 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

至此，预约挂号系统前台搭建成功：  
![预约挂号系统前台搭建完成][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

[https_zh.nuxtjs.org]: https://zh.nuxtjs.org
[https_github.com_nuxt-community_starter-template_archive_master.zip]: https://github.com/nuxt-community/starter-template/archive/master.zip
[yygh-site]: /images/20221021/5d98ea43a82b495d8b8f7d343a676324.png
[npm install]: /images/20221021/75baac42d76140d39da2c9ab08908d88.png
[element-ui]: /images/20221021/812881baf25846b6a5a689e9929c5d5c.png
[Nuxt.js]: /images/20221021/219410afcf1142099d7ccd84b5e7d796.png
[NUXT]: /images/20221021/54de760b01e24e3495eaab5c91b7f608.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221021/23dea521b4964096adde6f95439c0f75.png