当前位置: 首页 > news >正文

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

服务端渲染又称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 => {//清空hostypeListthis.hostypeList = []this.hostypeList.push({"name":"全部","value":""})//将接口返回的数据,添加到hostypeListfor(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 = 1this.hostypeActiveIndex = indexthis.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">

在这里插入图片描述

相关文章:

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

服务端渲染又称SSR&#xff08;Server Side Render&#xff09;实在服务端完成页面的内容&#xff0c;而不是在客户端通过AJAX获取数据 优势&#xff1a;更好的SEO&#xff0c;由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 Nuxt.js是一个基于Vue.js的轻量级应用框架&a…...

力扣每日一题90:子集

题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;其中可能包含重复元素&#xff0c;请你返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。返回的解集中&#xff0c;子集可以按 任意顺序 排列。 示例 1&#xff1a; 输入&#x…...

「linux基础」上传代码到github/gitee

一、在gitee创建一个仓库 1.创建仓库 2.获取仓库地址 二、克隆仓库文件到linux中 1.查看Linux中是否安装git&#xff1a;git --version 如果没有&#xff0c;在root下使用指令 yum install -y git 安装。 2.使用 git clone 仓库地址&#xff0c;克隆仓库文件到linux中 三、第…...

Hafnium总体考虑

安全之安全(security)博客目录导读 目录 一、安全世界构建平台 二、安全分区调度 三、平台拓扑...

C#__对Json文件的解析和序列化

Json: 存储和交换文本信息的语法。&#xff08;类似XML&#xff0c;语法独立&#xff09; 一种轻量级的数据交换格式。&#xff08;更小&#xff0c;更快&#xff0c;更易解析&#xff09; 语法规则: 数据在键值对里面&#xff0c;数据由逗号分隔开。 …...

如果一定要在C++和JAVA中选择,是C++还是java?

如果一定要在C和JAVA中选择&#xff0c;是C还是java&#xff1f; 计算机专业的同学对这个问题有疑惑的&#xff0c;- 定要看一下这个回答! 上来直接给出最中肯的建议: 如果你是刚刚步入大学的大一时间非常充裕的同学&#xff0c;猪学长强烈建议先学C/C.因为C 非常 最近很多…...

如何运行深度学习项目代码

运行项目代码是第一步哦&#xff01; 配环境 使用anaconda环境&#xff1b; conda 环境 按照项目提示的README.md&#xff0c;安装指定版本的python&#xff1b; 当然新版python会兼容旧版&#xff0c;也就是你的环境下python版本比它高也不要紧&#xff1b; 但是更新的pyt…...

C语言 每日一题 day9

求最大值及其下标 本题要求编写程序&#xff0c;找出给定的n个数中的最大值及其对应的最小下标&#xff08;下标从0开始&#xff09;。 输入格式 : 输入在第一行中给出一个正整数n&#xff08;1 < n≤10&#xff09;。第二行输入n个整数&#xff0c;用空格分开。 输出格式 …...

通讯网关软件032——利用CommGate X2OPC实现OPC客户端访问Modbus TCP设备

本文介绍利用CommGate X2OPC实现OPC客户端连接Modbus TCP设备。CommGate X2OPC是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;SCADA系统上位机、PLC、设备具备Modbus TCP通讯接口&#xff…...

[计算机提升] 查看系统软件

3.1 查看系统软件 此处系统软件为系统安装后自带的一些软件、工具等。包括&#xff1a;管理工具、系统工具、轻松使用工具、附件等。 方法一&#xff1a;通过菜单打开系统软件 1、点击左下角windows菜单键&#xff0c;在弹出的菜单中&#xff0c;任一点击一个字母(示例中为C)&…...

【mysql】单表数据量过大解决方案

文章目录 背景问题方案数据库冷热数据分离方案 背景 包装码表单表数据量很大&#xff0c;造成查询瓶颈&#xff1b;目前单表数据量达到3000w&#xff0c;单表字段数16 问题 索引膨胀&#xff0c;查询耗时长&#xff0c;影响正常CRUD … 方案 ● 分区 按日期…范围&#x…...

Kafka - 3.x 消费者 生产经验不完全指北

文章目录 生产经验之Consumer事务生产经验—数据积压&#xff08;消费者如何提高吞吐量&#xff09; 生产经验之Consumer事务 Kafka引入了消费者事务&#xff08;Consumer Transactions&#xff09;来确保在消息处理期间维护端到端的数据一致性。这使得消费者能够以事务的方式…...

UDP网络编程的接受与发送信息

/发送端B>可以接受数据 public class UDPSenderB {public static void main(String[] args) throws IOException {//创建一个DatagramSocket 对象&#xff0c;准备发送和接受数据DatagramSocket socket new DatagramSocket(9998);//将需要发送的数据&#xff0c;封装到Data…...

RK3588开发笔记-USB3.0接口调试

目录 前言 一、资源介绍 二、硬件连接 三、设备树配置...

AI绘画|midjourney入门保姆教程,30秒出专业大片,国内直接使用

同学们&#xff0c;之前大家想用midjourney还需要魔法上网和很复杂的注册配置&#xff0c;现在微信里就能使用midjourney了&#xff0c; 还支持中文&#xff0c;大家赶紧来试试吧。 AI写稿专家 www.promptspower.comhttp://www.promptspower.com 我们还给大家提供了各个行业的…...

阿里发布AI编码助手:通义灵码,兼容 VS Code、IDEA等主流编程工具

今天是阿里云栖大会的第一天&#xff0c;相信场外的瓜&#xff0c;大家都吃过了。这里就不说了&#xff0c;有兴趣可以看看这里&#xff1a;云栖大会变成相亲现场&#xff0c;最新招婿鄙视链来了... 。 这里主要说说阿里还发布了一款AI编码助手&#xff0c;对于我们开发者来说…...

【Linux】-进程控制(深度理解写时拷贝、exit函数、return的含义以及makefile编译多个程序)-进程创建、进程终止、进程等待、进程程序替换

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …...

【mfc/VS2022】计图实验:绘图工具设计知识笔记3

实现类对串行化的支持 如果要用CArchive类保存对象的话&#xff0c;那么这个对象的类必须支持串行化。一个可串行化的类通常有一个Serialize成员函数。要想使一个类可串行化&#xff0c;要经历以下5个步骤&#xff1a; 1、从CObject派生类 2、重写Serialize成员函数 3、使用DE…...

Leetcode—1488.避免洪水泛滥【中等】

2023每日刷题&#xff08;十四&#xff09; Leetcode—1488.避免洪水泛滥 算法思想 将晴天的日期全部记录在set<int> sun中使用unordered_map<int, int> lakeRainy来记录每个湖泊上一次下雨的日期遇到晴天时先不用管抽哪个湖当下雨时&#xff0c;湖泊已经装满水时…...

CSS与基本选择器

<div class"c1" id"d1"></div> CSS基本知识 什么是css&#xff1a;CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;他就会按照这个样式l来进行渲染。其实就是让HT…...

OpenClaw自动化测试:Qwen3.5-9B在API接口校验中的实战应用

OpenClaw自动化测试&#xff1a;Qwen3.5-9B在API接口校验中的实战应用 1. 为什么选择OpenClaw做接口自动化测试 去年接手一个个人项目时&#xff0c;我遇到了接口测试的痛点&#xff1a;每次后端更新都要手动验证几十个API&#xff0c;不仅耗时还容易遗漏边缘case。尝试过Pos…...

python-flask-djangol框架的校园餐厅菜品自选系统

目录 技术选型核心功能模块数据库设计开发流程部署方案关键代码示例测试重点 项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作 技术选型 使用Python的Flask或Django框架作为后端基础。Flask适合轻量级快速开发&#xff0c;Djan…...

做了5年GEO优化,我敢说90%的企业都没看懂GEO的真实成本

很多人来问我 GEO 是什么意思&#xff0c;大多是听别人说这是 AI 时代的获客新路子&#xff0c;能比传统推广省好几倍的钱&#xff0c;还能让 AI 优先推荐自己家。但我每次都先不说那些好听的好处&#xff0c;先给大家算清楚&#xff0c;做 GEO 这件事里&#xff0c;那些 90% 的…...

开源条码字体技术:如何通过字体文件彻底改变条码生成方式

开源条码字体技术&#xff1a;如何通过字体文件彻底改变条码生成方式 【免费下载链接】librebarcode Libre Barcode: barcode fonts for various barcode standards. 项目地址: https://gitcode.com/gh_mirrors/li/librebarcode 条码生成技术长期以来依赖专业软件和专用…...

云容笔谈开源镜像优势:免编译、免依赖、BF16原生支持,开箱即生成

云容笔谈开源镜像优势&#xff1a;免编译、免依赖、BF16原生支持&#xff0c;开箱即生成 最近在尝试各种AI图像生成工具时&#xff0c;我发现了一个很有意思的现象&#xff1a;很多工具要么安装配置复杂&#xff0c;要么生成效果不尽如人意&#xff0c;特别是想要生成具有东方…...

# 发散创新:边缘容器中的轻量级服务部署实战与优化策略在云计算向边缘计算演进的浪潮中,**边缘容器技术**正成

发散创新&#xff1a;边缘容器中的轻量级服务部署实战与优化策略 在云计算向边缘计算演进的浪潮中&#xff0c;边缘容器技术正成为构建低延迟、高可用应用的核心基础设施。相比传统云端Kubernetes集群&#xff0c;边缘容器更强调资源受限环境下的高效调度、快速启动和故障自愈能…...

nli-distilroberta-base模型服务监控:使用普罗米修斯与Grafana打造可视化看板

nli-distilroberta-base模型服务监控&#xff1a;使用普罗米修斯与Grafana打造可视化看板 1. 为什么需要模型服务监控 在生产环境中部署的AI模型服务&#xff0c;就像一台24小时运转的机器&#xff0c;需要随时掌握它的运行状态。想象一下&#xff0c;如果你不知道这台机器每…...

洛谷 P1507:NASA的食物计划 ← 二维费用0/1背包问题

【题目来源】 https://www.luogu.com.cn/problem/P1507 【题目背景】 NASA&#xff08;美国航空航天局&#xff09;因为航天飞机的隔热瓦等其他安全技术问题一直大伤脑筋&#xff0c;因此在各方压力下终止了航天飞机的历史&#xff0c;但是此类事情会不会在以后发生&#xff0…...

别再手动拆任务了!用CrewAI+DeepSeek打造你的第一个AI小团队(附PDF解析实战)

用CrewAI构建自动化AI团队&#xff1a;从PDF解析到智能协作实战 在传统AI开发中&#xff0c;开发者往往需要手动编写复杂的任务流程&#xff0c;像指挥一个士兵完成所有战斗。而CrewAI带来的革命性变化在于——它让你能够组建一支训练有素的AI特种部队&#xff0c;每个成员各司…...

Python从入门到精通(第08章):列表、元组、集合与字典

Python从入门到精通(第08章):列表、元组、集合与字典 开头导语 这是本系列第08章。本文采用"知识点讲解 + 错误示例 + 正确写法 + 自测清单"的结构,目标是让你不仅能看懂,还能独立写出可运行代码。建议你边看边敲,所有示例都亲自执行一次。 章节摘要 本章围…...