亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE搭建分布式醫(yī)療掛號(hào)系統(tǒng)的前臺(tái)預(yù)約掛號(hào)步驟詳情

 更新時(shí)間:2022年04月25日 12:07:32   作者:Hudie.  
這篇文章主要介紹了VUE搭建分布式醫(yī)療掛號(hào)系統(tǒng)的前臺(tái)預(yù)約掛號(hào)步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、預(yù)約掛號(hào)系統(tǒng)前臺(tái)搭建

(1)服務(wù)端渲染技術(shù)SSR

SSR (服務(wù)端渲染)是一種在關(guān)注何處渲染 HTML 頁面的模式,代表在服務(wù)器端完成把數(shù)據(jù)和模板轉(zhuǎn)換成最終的 HTML ,區(qū)別于 CSR(客戶端渲染)。后者是在客戶端完成轉(zhuǎn)換。

  • 傳統(tǒng)的 PHP,jsp,asp 的模板渲染也是服務(wù)端渲染
  • Node JS 領(lǐng)域,包含了 React 或者 Vue 這種前后端同構(gòu)的模式
  • 也包含了 Express / Koa / Egg 等基于模板渲染的模式

服務(wù)器端渲染SSR的優(yōu)點(diǎn):

  • 有利于SEO。因?yàn)樵诤蠖擞型暾膆tml頁面,所以爬蟲更容易爬取獲得信息,更有利于seo。
  • 前端耗時(shí)少。因?yàn)楹蠖似唇油炅薶tml,瀏覽器只需要直接渲染出來。
  • 客戶端資源占用少。即解析模板的工作完全交由后端來做,客戶端只要解析標(biāo)準(zhǔn)的html頁面即可,這樣對于客戶端的資源占用更少,尤其是移動(dòng)端,也可以更省電。
  • 后端生成靜態(tài)化文件。即生成緩存片段,這樣就可以減少數(shù)據(jù)庫查詢浪費(fèi)的時(shí)間了,且對于數(shù)據(jù)變化不大的頁面非常高效 。

(2)使用Nuxt.js搭建前端環(huán)境

Nuxt.js: 官方網(wǎng)站:https://nuxtjs.org/

Nuxt.js 是一個(gè)基于 Vue.js 的輕量級(jí)應(yīng)用框架,可用來創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用,也可充當(dāng)靜態(tài)站點(diǎn)引擎,生成靜態(tài)站點(diǎn)應(yīng)用,具有優(yōu)雅的代碼結(jié)構(gòu)分層和熱加載等特性。

1.下載并解壓Nuxt

http://xiazai.jb51.net/202204/yuanma/starter-template-master_jb51.rar下載Nuxt,下載解壓之后,將template文件夾中的文件復(fù)制到VSCode的工作區(qū)yygh-site中:

復(fù)制資源到y(tǒng)ygh-site工作區(qū)

2.修改package.json

name、description、author(必須修改,否則項(xiàng)目無法安裝)

{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> "name": "yygh-site", "version": "1.0.0", "description": "預(yù)約掛號(hào)系統(tǒng)(前臺(tái))", "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": "預(yù)約掛號(hào)系統(tǒng)(前臺(tái))",
  "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 }}’,這里的設(shè)置最后會(huì)顯示在頁面標(biāo)題欄和meta數(shù)據(jù)中:

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: '預(yù)約掛號(hào)系統(tǒng)(前臺(tái))' }
    ],

4.終端中進(jìn)入項(xiàng)目目錄安裝依賴

在終端中使用npm install命令安裝依賴:

npm install

5.引入element-ui

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

在plugins文件夾下創(chuàng)建myPlugin.js文件,并引入element-ui:

引入element-ui

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

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

6.啟動(dòng)測試

使用npm run dev啟動(dòng)項(xiàng)目,在瀏覽器3000端口看到如下頁面,就表示搭建成功了:

Nuxt.js啟動(dòng)

(3)NUXT目錄結(jié)構(gòu)

下圖對NUXT目錄結(jié)構(gòu)進(jìn)行簡要介紹:

NUXT目錄結(jié)構(gòu)

(4)封裝axios

使用npm install axios命令執(zhí)行安裝命令后。創(chuàng)建utils文件夾,在utils下創(chuàng)建request.js,寫入下面內(nèi)容:

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
    baseURL: 'http://localhost',
    timeout: 15000 // 請求超時(shí)時(shí)間
})
// http request 攔截器
service.interceptors.request.use(
    config => {
    // token 先不處理,后續(xù)使用時(shí)在完善
    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

至此,預(yù)約掛號(hào)系統(tǒng)前臺(tái)搭建成功:

預(yù)約掛號(hào)系統(tǒng)前臺(tái)搭建完成

更多關(guān)于VUE搭建分布式醫(yī)療掛號(hào)系統(tǒng)前臺(tái)預(yù)約掛號(hào)的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論