VUE搭建分布式醫(yī)療掛號系統(tǒng)的前臺預約掛號步驟詳情
一、預約掛號系統(tǒng)前臺搭建
(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)點:
- 有利于SEO。因為在后端有完整的html頁面,所以爬蟲更容易爬取獲得信息,更有利于seo。
- 前端耗時少。因為后端拼接完了html,瀏覽器只需要直接渲染出來。
- 客戶端資源占用少。即解析模板的工作完全交由后端來做,客戶端只要解析標準的html頁面即可,這樣對于客戶端的資源占用更少,尤其是移動端,也可以更省電。
- 后端生成靜態(tài)化文件。即生成緩存片段,這樣就可以減少數(shù)據(jù)庫查詢浪費的時間了,且對于數(shù)據(jù)變化不大的頁面非常高效 。
(2)使用Nuxt.js搭建前端環(huán)境
Nuxt.js: 官方網(wǎng)站:https://nuxtjs.org/
Nuxt.js 是一個基于 Vue.js 的輕量級應(yīng)用框架,可用來創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用,也可充當靜態(tài)站點引擎,生成靜態(tài)站點應(yīng)用,具有優(yōu)雅的代碼結(jié)構(gòu)分層和熱加載等特性。
1.下載并解壓Nuxt
從http://xiazai.jb51.net/202204/yuanma/starter-template-master_jb51.rar下載Nuxt,下載解壓之后,將template文件夾中的文件復制到VSCode的工作區(qū)yygh-site中:

2.修改package.json
name、description、author(必須修改,否則項目無法安裝)
{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> "name": "yygh-site", "version": "1.0.0", "description": "預約掛號系統(tǒng)(前臺)", "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": "預約掛號系統(tǒng)(前臺)",
"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è)置最后會顯示在頁面標題欄和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: '預約掛號系統(tǒng)(前臺)' }
],
4.終端中進入項目目錄安裝依賴
在終端中使用npm install命令安裝依賴:

5.引入element-ui
首先需要使用npm install element-ui命令下載element-ui。
在plugins文件夾下創(chuàng)建myPlugin.js文件,并引入element-ui:

最后在nuxt.config.js文件中的build下,添加如下代碼,使用myPlugin.js:
plugins: [
{ src: '~/plugins/myPlugin.js', ssr: false }
]
6.啟動測試
使用npm run dev啟動項目,在瀏覽器3000端口看到如下頁面,就表示搭建成功了:

(3)NUXT目錄結(jié)構(gòu)
下圖對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實例
const service = axios.create({
baseURL: 'http://localhost',
timeout: 15000 // 請求超時時間
})
// http request 攔截器
service.interceptors.request.use(
config => {
// token 先不處理,后續(xù)使用時在完善
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
至此,預約掛號系統(tǒng)前臺搭建成功:

更多關(guān)于VUE搭建分布式醫(yī)療掛號系統(tǒng)前臺預約掛號的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于element-ui日期時間選擇器選不中12小時以后的時間詳解
在之前做個一個組件頁面中,引用了element-ui組件的日期選擇器,遇到的一個小問題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時間選擇器選不中12小時以后時間的相關(guān)資料,需要的朋友可以參考下2022-08-08
VUE.js實現(xiàn)動態(tài)設(shè)置輸入框disabled屬性
今天小編就為大家分享一篇VUE.js實現(xiàn)動態(tài)設(shè)置輸入框disabled屬性,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue3中element-plus全局使用Icon圖標的過程詳解
我們在用vue開發(fā)網(wǎng)站的時候,往往圖標是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值,監(jiān)聽源必須是一個getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue+Echarts實現(xiàn)分時圖和交易量圖的繪制
近來發(fā)現(xiàn)Echarts?API越發(fā)的強大,對于繪制各類圖形可以使用Echarts實現(xiàn)。本文將利用Echarts實現(xiàn)分時圖和交易量圖的繪制,希望對大家有所幫助2023-03-03
Vue2中compiler和runtime模式報錯template compiler is 
本文主要介紹了Vue2中compiler和runtime模式報錯template compiler is not available,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07

