VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情

 更新时间:2022年04月25日 12:07:32   作者:Hudie.  
这篇文章主要介绍了VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

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

(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://nuxtjs.org/

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

1.下载并解压Nuxt

http://xiazai.jb51.net/202204/yuanma/starter-template-master_jb51.rar下载Nuxt,下载解压之后,将template文件夹中的文件复制到VSCode的工作区yygh-site中:

复制资源到yygh-site工作区

2.修改package.json

name、description、author(必须修改,否则项目无法安装)

{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> "name": "yygh-site", "version": "1.0.0", "description": "预约挂号系统(前台)", "author": "Guoqianliang", "private": true, "scripts": {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" },{
  "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

最后在nuxt.config.js文件中的build下,添加如下代码,使用myPlugin.js:

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

6.启动测试

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

Nuxt.js启动

(3)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

至此,预约挂号系统前台搭建成功:

预约挂号系统前台搭建完成

更多关于VUE搭建分布式医疗挂号系统前台预约挂号的资料请关注脚本之家其它相关文章!

相关文章

  • Vue实现动态圆环百分比进度条

    Vue实现动态圆环百分比进度条

    这篇文章主要为大家详细介绍了Vue实现动态圆环百分比进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue封装一个简单的div框选时间的组件的方法

    vue封装一个简单的div框选时间的组件的方法

    这篇文章主要介绍了vue封装一个简单的div框选时间的组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue语法和标签的入门使用教程

    Vue语法和标签的入门使用教程

    Vue是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue语法和标签使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 前端JS也可以连点成线详解(Vue中运用AntVG6)

    前端JS也可以连点成线详解(Vue中运用AntVG6)

    这篇文章主要给大家介绍了关于前端JS连点成线(Vue中运用 AntVG6)的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • 浅谈vue 单文件探索

    浅谈vue 单文件探索

    这篇文章主要介绍了浅谈vue 单文件探索,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    浅谈vue单一组件下动态修改数据时的全部重渲染

    下面小编就为大家分享一篇浅谈vue单一组件下动态修改数据时的全部重渲染,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 手动挂载Vue3.0组件到DOM节点的方法

    手动挂载Vue3.0组件到DOM节点的方法

    在VUE应用中,经常会使用一些非vue实现的js库,这些js库可能要求外部传入一些界面DOM节点,本文主要介绍了手动挂载Vue3.0组件到DOM节点的方法,感兴趣的可以了解一下
    2024-08-08
  • Vue生态的新成员Pinia的详细介绍

    Vue生态的新成员Pinia的详细介绍

    本文主要介绍了Vue生态的新成员Pinia的详细介绍,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue3封装echarts图表数据无法渲染到页面问题

    vue3封装echarts图表数据无法渲染到页面问题

    这篇文章主要介绍了vue3封装echarts图表数据无法渲染到页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • element表单校验提示定位到元素位置

    element表单校验提示定位到元素位置

    本文主要介绍了element表单校验提示定位到元素位置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论