目录一、预约挂号系统前台搭建(1)服务端渲染技术SSR服务器端渲染SSR的优点:(2)使用Nuxt.js搭建前端环境1.下载并解压Nuxt2.修改package.JSON3.修改nu
SSR (服务端渲染)是一种在关注何处渲染 html 页面的模式,代表在服务器端完成把数据和模板转换成最终的 HTML ,区别于 CSR(客户端渲染)。后者是在客户端完成转换。
Nuxt.js: 官方网站:https://nuxtjs.org/
Nuxt.js 是一个基于 vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎,生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
从Http://xiazai.jb51.net/202204/yuanma/starter-template-master_jb51.rar下载Nuxt,下载解压之后,将template文件夹中的文件复制到vscode的工作区yygh-site中:
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"
},
修改title: ‘{{ name }}’、content: ‘{{escape description }}’,这里的设置最后会显示在页面标题栏和meta数据中:
module.exports = {
head: {
title: 'yygh-site',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '预约挂号系统(前台)' }
],
在终端中使用npm install命令安装依赖:
首先需要使用npm install element-ui命令下载element-ui。
在plugins文件夹下创建myPlugin.js文件,并引入element-ui:
最后在nuxt.config.js文件中的build下,添加如下代码,使用myPlugin.js:
plugins: [
{ src: '~/plugins/myPlugin.js', ssr: false }
]
使用npm run dev启动项目,在浏览器3000端口看到如下页面,就表示搭建成功了:
下图对NUXT目录结构进行简要介绍:
使用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
至此,预约挂号系统前台搭建成功:
--结束END--
本文标题: VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情
本文链接: https://www.lsjlt.com/news/147263.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0