NUXT前端服务端渲染技术框架

news2024/12/23 7:04:04

服务端渲染又称SSR（Server Side Render）实在服务端完成页面的内容，而不是在客户端通过AJAX获取数据
优势：更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

Nuxt.js是一个基于Vue.js的轻量级应用框架，可用来创建服务端渲染（SSR）应用，也可以充当静态站点引擎生成静态站点应用。
https://zh.nuxtjs.org/

NUXT环境初始化

①、下载压缩包
https://github.com/nuxt-community/starter-template/archive/master.zip

②、解压
将template中的内容赋值到模块yygh-site中
在这里插入图片描述

③、修改package.json (依赖文件)和nuxt.config.js
在这里插入图片描述

在这里插入图片描述

④、打开yygh-site模块终端（右击）

命令下载依赖：npm install
命令下载element-ui：npm install element-ui

在plugins文件夹下创建myPlugin.js文件，并引入element-ui
在这里插入图片描述
nuxt.config.js中添入插件
在这里插入图片描述

⑤、测试运行

命令运行：npm run dev

访问项目：http://localhost:3000
在这里插入图片描述

NUXT目录结构

①、资源目录assets
用于组织未编译的静态资源，如LESS/SASS或JavaScript
在这里插入图片描述

②、组件目录components
用于组织应用的Vue.js组件，Nuxt.js不会扩展增强该目录下Vue.js组件，即这些组件不会像页面那样有asyncData方法的特性

③、布局目录layouts
用于组织应用的布局组件，例如将页头和页尾提取出来，形成布局页
修改默认布局文件default.vue，将主内容区域的内容替换成

<template>
	<div class="app-container">
		<div id="main">
			<!--公共头-->
			<myheader/>
			
			<div class="main-container">
				<el-scrollbar class='page-component__scroll'>
					<!--内容区域-->
					<nuxt/>
				</el-scrollbar>
			</div>
			
			<!--公共底-->
			<myfooter/>
		</div>
	</div>
</template>
<script>
	import '~/asserts/css/app.css'
	import '~/asserts/css/chunk.css'
	import '~/asserts/css/iconfont.css'
	import '~/asserts/css/main.css'

	//引入头文件和尾文件
	import myheader from './myheader'
	import myfooter from './myfooter'
	export default{
		components:{
			myheader,myfooter //通过标签的方式进行对头文件和尾文件的使用
		}
	}
</script>

创建头文件layouts/myheader.vue

<template>
	<div class="header-container">
		<div class="wrapper">
			<!--logo-->
			<div class="left-wrapper v-link selected">
				<img style="width:50px" width="50" height="50" src=""/>
				<span class="text">尚医通 预约挂号统一平台</span>
			</div>
			<!--搜索框-->
			<div class="search-wrapper">
				<div class="hospital-search animation-show">
					<el-autocomplete class="search-inout small"
						prefix-icon="el-icon-search"
						v-model="state"
						:fetch-suggestions="qerySearchAsync"
						placeholder="点击输入医院名称"
						@select="handleSelect">
						<span slot="suffix" class="search-btn v-link high">
					</el-autocomplete>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
	}
</script>

创建尾文件layouts/myfooter.vue

<template>
	<div class="footer-container">
		<div class="wrapper">
			<div>
				<span class="record">京 ICP 备13018369</span>
				<span class="phone">电话挂号010-56253825</span>
			</div>
			<div class=right>
				<span class="v-link clickable">联系我们</span>
				<span class="v-link clickable">合作伙伴</span>
				<span class="v-link clickable">用户协议</span>
				<span class="v-link clickable">隐私协议</span>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
	}
</script>

④、页面目录pages
用于组织应用的路由及视图。
Nuxt.js框架读取该目录下所有的.vue文件，并自动生成对应的路由配置

引入首页静态页面pages/index.vue

<template>
	<div class="homepage-component">
		<el-carousel indicator-position="outside">
			<el-carousel-item v-for="item in 2" :key="item">
				<img src="~asserts/images/web-banner.png" alt="">
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

⑤、插件目录plugins
用于组织那些需要在根vue.js应用实例化之前需要运行的Javascript插件

⑥、nuxt.config.js文件
nuxt.config.js文件用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置。

封装axios

①、安装axios

执行安装命令：npm install axios

②、封装axios，用于ajax请求

模块下创建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({
				messae:response.data.message,
				type:'error',
				durataion:5*1000
			})
			return Promise.reject(response.data)
		}else{
			return response.data
		}
		
	}
)

NUXT路由跳转

一、固定路由

<!--展示页面中绑定一个事件-->
<div @click="show(item.hoscode)">

<script>
	methods:{
		show(hoscode){
			window.location.href = '/hosp' //默认跳转到pages目录下的hosp下的index.vue
		}
	}
</script>

在这里插入图片描述

在这里插入图片描述

二、动态路由（每次跳转的路径不一样）

动态路由创建页面规则：在文件夹下从创建vue文件，vue文件命名规范：_参数名称.vue
在这里插入图片描述

<!--展示页面中绑定一个事件-->
<div @click="show(item.hoscode)">

<script>
	methods:{
		show(hoscode){
			window.location.href = '/hosp'+hoscode //每次的编号都不同
		}
	}
</script>

=============================================

前端页面对后端接口的调用

一、创建一个api/hosp.js和dict.js

hosp.js

import request from '@/utils/request'

const api_name='/api/hosp/hospital' //对应后端Controller类上的路径

export default{
	//查询医院列表
	getPageList(page,limit,searchObj){
		return request({
			url:'${api_name}/findHospList/${page}/${limit}' ,//对应的Controller内部方法路径
			method:get,
			params:searchObj
		})
	},

	//根据医院名称模糊查询
	getByHosname(hosname){
		return request({
			url:'${api_name}/findByHosName/${hosname}' ,//对应的Controller内部方法路径
			method:'get'
		})
	}
}

dict.js

import request from '@/utils/request'

const api_name='/admin/cmn/dict' //对应后端Controller类上的路径

export default{
	//根据dictCode获取下级节点
	findByDictCode(dictCode){
		return request({
			url:'${api_name}/findByDictCode/${dictCode}' ,//对应的Controller内部方法路径
			method:'get'
		})
	},

	//根据id获取区县
	findByParentId(parentId){
		return request({
			url:'${api_name}/findChildData/${parentId}' ,//对应的Controller内部方法路径
			method:'get'
		})
	}
}

二、pages/index.vue进行对api的调用，并显示

<script>
	import hospApi from '@/api/hosp'
	import dictApi from '@/api/dict'
	
	export default{
		//服务端渲染异步，显示医院列表
		asyncData({params,error}){
			return hospApi.getPageList(1,10,null)
				.then(response => {
					return {
						list:response.data.content,
						pages:response.data.totalPages
					}
				})
		},

		data(){
			return {
				searchObj:{},
				page:1,
				limit:10,
				
				hostname:'',//医院名称
				hostypeList:[],//医院等级集合
				districtList:[],//地区集合

				hostypeActiveIndex:0,
				provinceActiveIndex:0
			}
		},

		created(){
			this.init()
		},

		methods:{
			//查询医院等级列表和所有地区列表
			init(){
				dictApi.findByDictCode('Hostype')
					.then(response => {
						//清空hostypeList
						this.hostypeList = []
						this.hostypeList.push({"name":"全部","value":""})

						//将接口返回的数据，添加到hostypeList
						for(var i = 0;i < response.data.length;i++){
							this.hostypeList.push(response.data[i])
						}
					})
				dictApi.findByDictCode('BeiJing')
					.then(response => {
						this.districtList = []
						this.districtList.push({"name":"全部","value":""})
						for(let i in response.data){
							this.districtList.push(response.data[i])
						}
					})
			},

			//查询医院列表
			getList(){
				hospApi.getPageList(this.page,this.limit,this.searchObj)
					.then(response => {
						for(lei i in response.data.coutent){
							this.list.push(response.data.content[i])
						}
						this.page = response.data.totalPages
					})
			}

			//页面展示中的点击方法
			//根据医院等级查询
			hostypeSelect(hostype,index){
				//准备数据
				this.list = []
				this.page = 1
				this.hostypeActiveIndex = index
				this.searchObj.hostype = hostype
				//调用上面查询医院列表方法
				this.getList()
			}
		}
	}
</script>

三、index.vue进行对数据的展示

<!--遍历显示医院等级名称-->
<span v-for="(item,index) in hostypeList" :key="index" class="item v-link clickable"
	@click="hostypeSelect(item.value,index)">
	{{item.name}}
</span> 

<!--遍历显示地区-->
<span v-for="(item,index) in districtList" :key="index" class="item v-link clickable">
	{{item.name}}
</span>


<!--由于图片经过base64存入数据，所以显示的时候需要通过处理-->
<image :src="'data:image/jpeg;base64,'+item.logoData" :alt="item.hosname" class="hospital-img">

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1153508.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库的事务四大特性（ACID）、详解隔离性以及隔离级别、锁

数据库的事务四大特性（ACID）、详解隔离性以及隔离级别、锁

文章目录 &#x1f389;数据库的事务四大特性&#xff08;ACID&#xff09;以及隔离性一、事务的四大特性✨1、原子性&#xff08;Atomicity&#xff09;&#x1f38a;2、一致性&#xff08;Consistency&#xff09;&#x1f38a;3、隔离性&#xff08;Isolation&#xff09;&a…
阅读更多...
springboot打包时依赖jar和项目jar分开打包；jar包瘦身

springboot打包时依赖jar和项目jar分开打包；jar包瘦身

概述 最近感觉项目在部署时时jar包传输太慢了&#xff1b; 看了下jar包内容&#xff0c;除了项目代码&#xff0c;其余大部分都是依赖jar&#xff1b; 平时改动较多的只是项目代码&#xff0c;依赖jar改动比较少&#xff1b; 所以就在想能不能分开打包&#xff1b;这样只部署项…
阅读更多...
基于SSM的国外摇滚乐队交流和周边售卖系统的设计与实现

基于SSM的国外摇滚乐队交流和周边售卖系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
【设计模式】第12节：结构型模式之“外观模式”

【设计模式】第12节：结构型模式之“外观模式”

一、简介 门面模式&#xff0c;也叫外观模式&#xff0c;英文全称是Facade Design Pattern。门面模式为子系统提供一组统一的接口&#xff0c;定义一组高层接口让子系统更易用。 目的&#xff1a;简化复杂系统的交互方式 特点&#xff1a;提供一个统一的交互接口 二、UML类…
阅读更多...
vue-devtools 下载

vue-devtools 下载

创建空文件夹&#xff0c;然后 cmd 运行&#xff1a; npm install vue-devtools 然后打开在node_modules->vue-devtools->vender->manifest.json文件 persistent:false 改成 true 最后把vender文件夹拖到chrome浏览器扩展中 提示小消失
阅读更多...
【Vue】vant上传封装方法，van-uploader上传接口封装

【Vue】vant上传封装方法，van-uploader上传接口封装

项目场景&#xff1a; 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 在移动端项目中&#xff0c;使用vant组件上传&#xff0c;但是vant没有上传方法&#xff0c;需要自己写。 html代码 <van-uploader v-model"fileList" :max-size"50…
阅读更多...
腾讯云双十一活动，海量云产品优惠，上云正当时！

腾讯云双十一活动，海量云产品优惠，上云正当时！

腾讯云2023年双十一推出了一场盛大的促销活动&#xff0c;活动涵盖了各种产品优惠&#xff0c;包括云服务器、数据库、存储、网络、安全、企业应用等各个领域的产品&#xff0c;让用户享受全方位的优惠&#xff01; 一、腾讯云双11活动入口 活动地址&#xff1a;https://txy.i…
阅读更多...
基于MFC的串口通信（Mscomm）

基于MFC的串口通信（Mscomm）

1、串口通信的概述&#xff1a; 串口是一种重要的通信资源&#xff0c;例如鼠标口、USB接口都是串口。串行端口是CPU和串行设备间的编码转换器。当数据从CPU经过端口发送出去的时候&#xff0c;字节数据会被转为串行的位&#xff0c;在接收数据时&#xff0c;串行的位被转换为…
阅读更多...
Apache Dolphinscheduler如何不重启解决Master服务死循环

Apache Dolphinscheduler如何不重启解决Master服务死循环

个人建议 Apache Dolphinscheduler作为一个开源的调度平台&#xff0c;目前已经更新到了3.X版本&#xff0c;4.0版本也已经呼之欲出。3.0版本作为尝鲜版本&#xff0c;新添加了许多的功能&#xff0c;同时也存在非常多的隐患&#xff0c;本人使用3.0版本作为生产调度也踩了很多…
阅读更多...
开放式耳机和骨传导耳机哪个好，开放式耳机和骨传导耳机区别

开放式耳机和骨传导耳机哪个好，开放式耳机和骨传导耳机区别

虽然开放式耳机和骨传导耳机两者都能够听到周边的声音&#xff0c;但开放式耳机和骨传导耳机区别还是挺大的&#xff0c;下面让我来给大家详细的分析一下两者的区别。 1、音频传导方式 开放式耳机&#xff1a;开放式耳机设计允许声音从耳机的驱动单元透过外部空气传播到听觉器…
阅读更多...
浅谈搜索展现层场景化技术-tanGo实践

浅谈搜索展现层场景化技术-tanGo实践

作者 | 搜索技术平台 导读 本文为搜索展现层相关技术&#xff0c;主线会先通过介绍搜索阿拉丁的产品形态&#xff0c;让读者初步了解什么是阿拉丁&#xff0c;及相关展现概念。之后会聚焦场景化产品&#xff0c;场景化是搜索构建沉浸式完美体验&#xff08;重新组合整页阿拉丁和…
阅读更多...
Win10系统 如何使用cmd脚本命令，连接到指定WIFI并免手工输入WIFI密码连接？

Win10系统 如何使用cmd脚本命令，连接到指定WIFI并免手工输入WIFI密码连接？

环境&#xff1a; Win10 专业版 19041 WiFi 名称&#xff1a;LTG 问题描述&#xff1a; Win10系统 如何使用cmd脚本命令&#xff0c;连接到指定WIFI并免手工输入WIFI密码连接&#xff1f; 解决方案&#xff1a; 1.找一台已经连接过LTG这个wifi的电脑&#xff0c;导出.xlm配…
阅读更多...
EasyRecovery16专业版激活码序列号

EasyRecovery16专业版激活码序列号

当不小心将回收站的文件删除了怎么办&#xff1f;想找回但是不知道怎么找回需要的数据文件&#xff1f;别担心今天小编就为大家介绍一款非常专业的电脑数据文件恢复工具&#xff0c;easyrecovery14是由Ontrack专为电脑用户推出的一款专业的数据恢复软件&#xff0c;这款软件功能…
阅读更多...
opencv 连通域操作示例代码记录connectedComponentsWithStats()函数示例

opencv 连通域操作示例代码记录connectedComponentsWithStats()函数示例

void CrelaxMyFriendDlg::OnBnClickedOk() {hdc this->GetDC()->GetSafeHdc();// TODO: 在此添加控件通知处理程序代码string imAddr "c:/Users/actorsun/Pictures/";string imAddr1 imAddr"rice.png";Mat relax1, positive;relax1 imread(imAdd…
阅读更多...
一文获取鼎捷医疗器械行业数智化合规敏态方案

一文获取鼎捷医疗器械行业数智化合规敏态方案

医疗器械产业是关乎国计民生的重要产业&#xff0c;高端医疗器械更是“国之重器”。为加强医疗器械的监督管理&#xff0c;提升行业质量和安全整体水平&#xff0c;我国出台了《医疗器械监督管理条例》、《医疗器械召回管理办法》、《医疗器械临床试验质量管理规范》、《医疗器…
阅读更多...
【单点登陆导致cookie覆盖问题】

【单点登陆导致cookie覆盖问题】

背景&#xff1a; 使用oauth2.0单点登陆进去不同服务器的同一系统。 同一浏览器存储的COOKIE名称&#xff0c;COOKIE PATH COOKIE DOMAIN一致&#xff0c;会认为是同一个COOKIE 当单点登陆进去c1平台后&#xff0c;前端浏览器会存入一个cookie,而后当单点登陆进入c2平台后&…
阅读更多...
Android DSL

Android DSL

文章目录 Android DSL概述使用DSL构建HTML代码下载 Android DSL 概述 Kotlin DSL&#xff08;领域特定语言&#xff09;是一种使用 Kotlin 语言编写的&#xff0c;用于解决特定问题领域的语言。DSL 使得代码更易读、易写&#xff0c;因为它的语法和领域问题的语法更接近。Kot…
阅读更多...
2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models

2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models

2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models Paper: https://arxiv.org/abs/2106.09685 Code: https://github.com/microsoft/LoRA 大型语言模型的LoRA低秩自适应 自然语言处理的一个重要范式包括对通用领域数据的大规模预训练和对特定任务或领域的适应。…
阅读更多...
elementUI树节点全选,反选,半选状态

elementUI树节点全选,反选,半选状态

// <template>部分 <div class"check-block"><el-divider></el-divider><el-checkbox :indeterminate"indeterminate" v-model"checkAll" change"handleCheckAllChange">全选</el-checkbox><e…
阅读更多...
足底筋膜炎怎么治疗最有效

足底筋膜炎怎么治疗最有效

足底筋膜炎的几种症状表现&#xff1a; 1、足跟的内侧足底处的疼痛和压痛。 2、早晨起床后疼痛和僵硬明显&#xff0c;活动后痛感逐渐减轻。 3、光脚或用脚尖跑步、走路都会加剧疼痛。 4、疼痛随着跑步、长时间走路或站立等负重活动而加剧。轻度时可能会以足底僵硬为主&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023