Nuxt.js 3【详解】服务器 Server
Nuxt.js 是一个全栈框架,可以在一个项目中,同时完成前端和后端的开发。
服务器架构
Nuxt.js 的服务端由 Nitro 实现,Nitro 由基于 H3 实现。
- Nitro 官网 https://nitro.build/guide
- H3 官网 https://h3.unjs.io/guide
接口路由
- 基于文件目录自动生成
- 方法名取自文件后缀名
server/api
根据文件目录自动生成带 /api
前缀的接口
api/test.ts ---> /api/testuser/// 动态接口,可得到接口参数 Param ,如 id 为 1[id].ts ---> /api/user/1
// server/api/test.ts
export default defineEventHandler(() => {return { hello: "你好" };
});
启动项目后,浏览器访问 http://localhost:3030/api/test
server/routes
根据文件目录自动生成无 /api
前缀的接口
routes/hello.ts ---> GET /hellohello.get.ts ---> GET /hellohello.post.ts ---> POST /hello
参数解析
从网络请求的事件中,可以解析出必要的参数,内置的 API 如下:
export default defineEventHandler(event => {// 获取接口中的参数,如 /api/user/1 中的 1const id = getRouterParam(event, 'id')// 获取接口的 URL ,如 http://localhost:3030/api/user/1const url = getRequestURL(event)const age = getRouterParam(event, 'age')return `Hello ${name}! You are ${age} years old.`
})
getRouterParam
获取 get 请求中的接口参数
// 获取接口中的参数,如 /api/user/1 中的 1const id = getRouterParam(event, 'id')
- 参数1:网络请求事件 event
- 参数2:请求参数的key
- 返回值:参数的值
getQuery
获取 get 请求中的查询参数
const query = getQuery(event);
- 参数:网络请求事件 event
- 返回值:查询参数对象
如 http://localhost:3030/api/user/1?name=joy
会得到
{"name": "joy"}
readBody
获取 post 请求中的 body 信息
// routes/users.post.ts
export default defineEventHandler(async event => {const body = await readBody(event)
})
getRequestURL
const urlObj = getRequestURL(event)
- 参数为网络请求事件 event
- 返回一个URL对象,通过其属性,可以获取到其他 URL 信息
以 ‘http://localhost:3030/api/user/1?name=joy’ 为例{ href: 'http://localhost:3030/api/user/1?name=joy',origin: 'http://localhost:3030',protocol: 'http:',username: '',password: '',host: 'localhost:3030',hostname: 'localhost',port: '3030',pathname: '/api/user/1',search: '?name=joy',searchParams: URLSearchParams { 'name' => 'joy' },hash: '' }
接口的配置
nitro.config.ts 中
export default defineNitroConfig({routeRules: {"/blog/**": { swr: true },"/blog/api1": { swr: 600 },"/blog/api2": { static: true },"/blog/api3": {cache: {/* cache options*/},},"/assets/**": { headers: { "cache-control": "s-maxage=0" } },"/api/v1/**": {cors: true,headers: { "access-control-allow-methods": "GET" },},"/old-page": { redirect: "/new-page" },"/old-page/**": { redirect: "/new-page/**" },"/proxy/example": { proxy: "https://example.com" },"/proxy/**": { proxy: "/api/**" },},
});
内置存储 useStorage
通过 useStorage() 可获取到一个内置存储的实例,可在内存中存储和读取数据。(通过 unstorage 实现,官网为 https://unstorage.unjs.io/guide)
const currentUser = { name: body.name };// 存数据 useStorage().setItemawait useStorage().setItem("user", currentUser);
// 取数据 useStorage().getItemconst user = await useStorage().getItem("user");if (!user) {throw createError({statusCode: 401,statusMessage: "未登录",});}
改用 redis
-
本地安装 redis,见教程
-
添加配置 nuxt.config.ts
nitro: {storage: {redis: {driver: "redis",port: 6379,host: "127.0.0.1",password: "",db: 0, // Defaults to 0},},},
-
存数据
useStorage 的参数redis
与 nuxt.config.ts 中的配置 storage 属性 redis 对应await useStorage("redis").setItem("currentUser",currentUser,// ttl 配置 redis的过期时间,单位s,此处为 10s 后过期{ ttl: 10 });
-
取数据
const isLogin = await useStorage("redis").hasItem("currentUser");if (!isLogin) {throw createError({statusCode: 401,statusMessage: "未登录",});}
中间件 server/middleware
server/middleware 目录中的文件为服务器的中间件,在请求接口前,都会依次执行!
默认执行顺序为按文件名排序。
可通过添加数字前缀,自定义执行顺序。
若想只在目标路由执行中间件,则需添加判断
export default defineEventHandler((event) => {// 仅在请求 /auth 接口时执行if (getRequestURL(event).pathname.startsWith('/auth')) {event.context.user = { name: 'Nitro' }}
})
工具函数 server/utils
server/utils 目录中的工具函数,会自动导入
- 若用默认导出 export default ,则自动导入的函数名为文件名
- 若用具名导出 export function useSum ,则自动导入的函数名为函数定义的名称。
如
server/utils/sum.ts
export function useSum(a: number, b: number) {return a + b;
}
在接口文件中直接使用即可
// routes/index.ts
export default defineEventHandler(() => {const sum = useSum(1, 2) // auto-importedreturn { sum }
})
若 server/utils/sum.ts 为
export default function useSum(a: number, b: number) {return a + b;
}
在接口文件中直接使用即可
// routes/index.ts
export default defineEventHandler(() => {const sumResult = sum(1, 2) // auto-importedreturn { sumResult }
})
封装统一接口方法
server/utils/authHandler.ts
import type { EventHandler } from "h3";
export const defineAuthResponseEventHandler = (handler: EventHandler) => {return defineEventHandler(async (event) => {const user = await useStorage().getItem("user");if (!user) {throw createError({statusCode: 401,statusMessage: "未登录",});}const response = await handler(event);return response;});
};
插件 server/plugins
插件会在服务启动时执行,可以访问生命周期
范例:将 useStorage 改用 redis 存储
server/plugins/storage.ts
import redisDriver from "unstorage/drivers/redis";export default defineNitroPlugin((app) => {const storage = useStorage();const { redis } = useRuntimeConfig();const driver = redisDriver({host: redis.host,port: redis.port,});storage.mount("redis", driver);
});
.env
NUXT_REDIS_HOST=127.0.0.1
NUXT_REDIS_PORT=6379
nuxt.config.ts
runtimeConfig: {redis: {host: "",port: 0,},},
连接数据库
安装依赖
npx nuxi@latest module add nuxt-mongoose
成功后,可见 nuxt.config.ts 的 modules 中添加了 “nuxt-mongoose”
在 .env 中添加配置( 本地 mongoDB 数据库的名称为 test )
MONGODB_URI=mongodb://localhost:27017/test
操作数据
创建 models
会自动注册
server/models/user.ts
import { defineMongooseModel } from "#nuxt/mongoose";interface UserProps {name: string;age: number;
}export const UserSchema = defineMongooseModel<UserProps>("User",{name: { type: String, unique: true, required: true },age: { type: Number, min: 0, max: 160 },},{timestamps: true,toJSON: {// 过滤掉敏感字段transform(doc, ret) {delete ret.__v;delete ret.password;},},}
);
查询数据
server/api/user/index.ts
export default defineEventHandler(async (event) => {const userList = await UserSchema.find({}).select(["name", "age"]).limit(10).lean();return { data: userList };
});
访问接口 http://localhost:3030/api/user 得到
{"data": [{"_id": "653bc7cc0b10e8b08834b3ff","name": "dos"}]
}
相关文章:
Nuxt.js 3【详解】服务器 Server
Nuxt.js 是一个全栈框架,可以在一个项目中,同时完成前端和后端的开发。 服务器架构 Nuxt.js 的服务端由 Nitro 实现,Nitro 由基于 H3 实现。 Nitro 官网 https://nitro.build/guideH3 官网 https://h3.unjs.io/guide 接口路由 基于文件目录自…...
DeepSeek回答:AI时代Go语言学习路线
最近有小伙伴经常会问:**该如何学习入门Go语言?怎样提升Go语言Coding水平?**这篇文章我们就使用DeepSeek来梳理下Go语言在AI时代的学习路线。 向DeepSeek提问的问题原文: 你现在是一名资深的Go语言工程师,精通Go语言并…...
OpenGL 04--GLSL、数据类型、Uniform、着色器类
一、着色器 在 OpenGL 中,着色器(Shader)是运行在 GPU 上的程序,用于处理图形渲染管线中的不同阶段。 这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说,着色器只是一种把输入转化为输出的程序。着色器…...
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
一、前言 在日常的前端项目开发中,我们时常需要使用到“消息提示”(以下简称“消息”)这个组件来帮助我们更好的给予用户提示,例如常见的“登录成功”、“操作成功”、“服务器异常”等等提示。 尽管市面上已经有一些组件库提供了…...
天猫代运营公司推荐:品融电商
天猫代运营公司推荐:品融电商 在电商行业竞争日益激烈的今天,选择一家专业的天猫代运营公司成为众多品牌商家提升市场竞争力、实现销售增长的关键。在众多代运营公司中,品融电商凭借其专业的团队、丰富的经验和显著的成功案例,脱…...
2025.2.26#Java开发中的鉴权机制详解
1、Java开发中的鉴权机制详解 用户问的是在Java开发中什么是鉴权。首先,我需要明确鉴权的定义。鉴权,也就是认证授权,是确认用户身份和权限的过程。可能用户刚接触安全相关的内容,需要简单明了的解释。 接下来,我应该分…...
AF3 DataPipeline类解读
AlphaFold3 的DataPipeline类处理单链蛋白数据,主要负责从不同数据源(FASTA、PDB、mmCIF、ProteinNet .core 文件等)解析输入序列、MSA、模板匹配、序列嵌入(如 ESM-2)、并将其转换为 AlphaFold3 可用的特征格式。 源代码: class DataPipeline:"""Assem…...
Windows系统PyTorch环境配置
0、前言 深度学习为什么要配置GPU? GPU(图形处理单元)最初是为图形渲染而设计的,它们擅长处理大量并行计算任务。深度学习模型,特别是卷积神经网络(CNN)和循环神经网络(RNN…...
策略模式环境类的实现方式对比
文章目录 1、策略模式2、聚合策略类实现方式一3、聚合策略类实现方式二4、对比5、补充:ApplicationContextAware接口 1、策略模式 近期工作中,需要处理4.x和5.x两个版本的数据,所以自然想到的是策略模式,写一个抽象类,…...
深入理解JVM的运行时数据区
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…...
mapbox基础,加载background背景图层
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象…...
14.二叉搜索树
二叉搜索树 1.概念 ⼆叉搜索树⼜称⼆叉排序树,它或者是⼀棵空树,或者是具有以下性质的⼆叉树: *若它的左⼦树不为空,则左⼦树上所有结点的值都⼩于等于根结点的值 *若它的右⼦树不为空,则右⼦树上所有结点的值都⼤于等于根结点…...
javascript-es6 (五)
内置构造函数 在 JavaScript 中 最主要 的数据类型有 6 种: 基本数据类型: 字符串、数值、布尔、undefined、null 引用类型: 对象 但是,我们会发现有些特殊情况: //普通字符串 const str peiqi console.log(str.length) //…...
飞鱼科技游戏策划岗内推
协助策划完成相关工作,包括但不仅限于策划配置,资料搜集,游戏体验; 游戏策划相关作品;游戏大赛经历;游戏demo制作经历;游戏公司策划岗位实习经历优先 内推码 DSZP7YFU...
探索浮点数在内存中的存储(附带快速计算补码转十进制)
目录 一、浮点数在内存中的存储 1、常见的浮点数: 2、浮点数存储规则: 3、内存中无法精确存储: 4、移码与指数位E: 5、指数E的三种情况: 二、快速计算补码转十进制 1、第一种方法讨论: 2、第二种方…...
elfk+zookeeper+kafka数据流
申请7台部署elfkzookeeperkafka 数据流: filebeat(每台app) ------>【logstash(2) kafka(3)】 -------> logstash(1) -------> 【elasticsearch(3) kibana(1)】...
汽车悬架系统技术演进:从被动到全主动的革新之路(主动悬架类型对比)
在汽车工业的百年发展史中,悬架系统始终是平衡车辆性能与舒适性的关键战场。随着消费者对驾乘体验要求的不断提升,传统被动悬架已难以满足中高端车型的需求,而半主动与全主动悬架技术的崛起,正在重塑行业格局。本文将深入解析三大…...
什么限制了LLM:空间复杂度限制
什么限制了LLM: 空间复杂度限制 空间复杂度是对一个算法在运行过程中临时占用存储空间大小的量度,它描述了算法所需的额外存储空间与输入数据规模之间的增长关系。这里的存储空间主要包括算法执行过程中所使用的变量、数据结构、栈空间等。和时间复杂度类似,空间复杂度通常也…...
Docker02 - 深入理解Docker
深入理解Docker 文章目录 深入理解Docker一:Docker镜像原理1:镜像加载原理1.1:unionFS1.2:加载原理 2:分层理解 二:容器数据卷详解1:什么是容器数据卷2:使用数据卷3:具名…...
深度学习中卷积层(Conv)、BN层(Batch Normalization)和 ReLU层(Rectified Linear Unit)的详细介绍
一、卷积层(Conv) 定义 卷积层是深度学习中卷积神经网络(CNN)的核心组成部分。它通过对输入数据(如图像)进行卷积操作来提取特征。卷积操作是用一个卷积核(也称为滤波器)在输入数据上…...
二分查找算法的全面解析C++
一、核心原理与特性 二分查找是一种**对数时间复杂度(O(log n))**的高效搜索算法46,需满足两个前提条件: 数据存储在连续内存空间(如数组)数据按升序/降序有序排列35 算法通过折半比较缩小搜索范围: 初始化左右边界…...
【论文笔记】Splatter Image: Ultra-Fast Single-View 3D Reconstruction
原文链接:https://openaccess.thecvf.com/content/CVPR2024/papers/Szymanowicz_Splatter_Image_Ultra-Fast_Single-View_3D_Reconstruction_CVPR_2024_paper.pdf 简介:本文介绍了Splatter Image这一非常高效的单目3D物体重建方法。基于高斯溅射…...
【论文解读】《C-Pack: Packed Resources For General Chinese Embeddings》
论文链接:https://arxiv.org/pdf/2309.07597 本论文旨在构建一套通用中文文本嵌入的完整资源包——C-Pack,解决当前中文文本嵌入研究中数据、模型、训练策略与评测基准缺失的问题。论文主要贡献体现在以下几个方面: 大规模训练数据…...
Python 3 实用工具库
Python 作为一门强大且灵活的编程语言,提供了许多内建库和模块,可以大大简化开发工作,提升开发效率。在日常开发中,使用一些实用的工具库能够帮助你更轻松地完成任务。本文将介绍几款常用且实用的 Python 3 工具库,它们…...
vue+element-dialog:修改关闭icon / 遮罩层不能挡住弹窗 / 遮罩层不能遮挡元素
一、是否显示操作按钮 二、修改dialog默认关闭icon .el-dialog__headerbtn {top: 15px !important;width: 18px;height: 18px;background: url(~assets/img/formworkManagement/close-button.png) left no-repeat;background-size: cover; } .el-dialog__headerbtn i {content…...
深入解析React性能优化三剑客:React.memo、useMemo与useCallback
目录 渲染机制基础 React的渲染流程解析组件重渲染的根本原因性能优化的核心目标 React.memo深度解析 组件级缓存原理浅比较机制详解自定义比较函数实现 useMemo核心技术 值缓存机制剖析引用稳定性控制复杂计算场景实战 useCallback终极指南 函数缓存本质闭包陷阱解决方案事…...
Java高频面试之SE-23
hello啊,各位观众姥爷们!!!本baby今天又来了!哈哈哈哈哈嗝🐶 Java 中的 Stream 是 Java 8 引入的一种全新的数据处理方式,它基于函数式编程思想,提供了一种高效、简洁且灵活的方式来…...
SOC-ATF 安全启动BL31流程分析(3)
一、BL31启动流程 与bl1和bl2不同,bl31包含两部分功能,在启动时作为启动流程的一部分,执行软硬件初始化以及启动bl32和bl33镜像。在系统启动完成后,将继续驻留于系统中,并处理来自其它异常等级的smc异常,以…...
计算机三级网络技术备考
#subtotal 1Mbps1024kb128KB12.8M/s #1024B1KB 1024KB1MB 1024MB1GB #路由器的5G信号和平常的波长不同(5G的穿墙性能差) #局域网LAN(一公里内——构成集线机、交换机、同轴电缆) #城域网MAN(几公里到几十公里——光…...
Linux红帽:RHCSA认证知识讲解(四)修改远程配置文件,取消root禁用,便于使用root身份远程
Linux红帽:RHCSA认证知识讲解(四)修改远程配置文件,取消root禁用,便于使用root身份远程 前言一、远程连接的用途和原因二、通过 ssh 远程登陆系统三、默认限制及解决方案(一)非常规方法一&#…...
【笔记ing】每天50个英语词汇
ex- e-out exclude 排外,排除 expect 期待,期望 单词构成: 前缀(prefix):情感(emotion)方向(orientation) 词根(root)…...
Linux 基本开发工具的使用(yum、vim、gcc、g++、gdb、make/makefile)
文章目录 Linux 软件包管理器 - yum理解什么是软件包和yum如何查看/查找软件包如何安装软件如何实现本地机器和云服务器之间的文件互传如何卸载软件 Linux 编辑器 - vim 的使用vim 的基本概念vim 的基本操作vim 命令模式各命令汇总vim 底行模式各命令汇总vim 的简单配置 Linux …...
idea创建第一个springboot程序
说明: 我计划用idea,创建第一个springboot程序,但是作为新手完全不会弄,今天我就亲自尝试一边,并且出一期详细,完美的教程,亲测可以运行 step1. 点击file , 选new, 选…...
python 使用 venv 创建虚拟环境 (VSCode)
Python 自带了一个名为 venv 的模块,可以用来创建虚拟环境。这是 Python 官方推荐的方式,不需要额外安装 Anaconda 或其他工具。 假设项目名为myproject,进入到项目目录 cd myproject 创建虚拟环境 python3 -m venv 虚拟环境名(…...
组态软件在物联网中的应用
随着物联网的快速发展,组态软件在物联网中的应用也越来越广泛。组态软件是一种用于创建和管理物联网系统的可视化工具,它能够将传感器、设备和网络连接起来,实现数据的采集、分析和可视化。本文将探讨组态软件在物联网中的应用,并…...
字节火山引擎-大模型声音复刻,流式语音合成接口
字节火山引擎-大模型声音复刻,流式语音合成接口 参考文档:火山引擎-大模型声音复刻文档 官网给出的示例代码有bug,这里已经修改了 创建应用 声音复刻大模型页面查看应用,获取接口调用需要的参数 注意调用tts接口时候需要三个参数…...
QT:Graphics View的坐标系介绍
在 Qt 的 Graphics View 框架中,存在三种不同的坐标系,分别是 物品坐标系(Item Coordinates)、场景坐标系(Scene Coordinates) 和 视图坐标系(View Coordinates)。这三种坐标系在图形…...
轻松搭建:使用Anaconda创建虚拟环境并在PyCharm中配置
一、使用Anaconda创建虚拟环境 1. 安装Anaconda 2..conda常用的命令 3. 创建虚拟环境-以搭建MachineVision为例 4. 激活虚拟环境 5. 安装依赖包 二、PyCharm配置环境 在进行Python项目开发时,合理的环境管理是必不可少的,特别是当你在多个项目中…...
Unity TMPro显示中文字体
TMP默认的字体只能显示英语,那么怎么显示中文呢 1、找到支持中文的字体文件 在c盘搜索Fonts文件夹有很多支持中文的字体文件 我这里选择雅黑 PS.双击打开发现里面有粗体细体普通三个版本,也可以只导入一个版本进去 2、将其拖入到unity Assets里面 3…...
【嵌入式原理设计】实验五:远程控制翻盖设计
目录 一、实验目的 二、实验环境 三、实验内容 四、实验记录及处理 五、实验小结 六、成果文件提取链接 一、实验目的 熟悉和掌握舵机及串口控制方式 二、实验环境 Win10ESP32实验开发板 三、实验内容 1、熟悉舵机的控制方式; 2、用串口发…...
矩阵乘积态简介
定义 矩阵乘积态(Matrix Product State, MPS)是一种用于表示量子多体系统的强大工具,特别是在一维系统中。MPS 是一种张量网络状态,它通过将全局量子态分解为一系列局部张量的乘积来有效地表示量子态。 注释: 量子态表…...
国自然面上项目|基于肺癌精准靶向治疗的基因影像组学研究|基金申请·25-02-26
小罗碎碎念 今天和大家分享一个国自然面上项目,执行年限为2019.01~2022.12,直接费用为57万元。 项目旨在解决肺癌靶向治疗耐药问题,通过整合多组学和影像组学技术构建预测模型。 研究期间,对非小细胞肺癌 CT 影像组学…...
OA办公系统自动渗透测试过程
目录 一、下载环境源码 二、部署环境 三、测试 XSS漏洞 SQL注入 文件上传漏洞 一、下载环境源码 OA源码打包地址: https://download.csdn.net/download/weixin_43650289/90434502?spm=1001.2014.3001.5503 二、部署环境...
Fisher信息矩阵(Fisher Information Matrix,简称FIM)
Fisher信息矩阵简介 Fisher信息矩阵(Fisher Information Matrix,简称FIM)是统计学和信息理论中的一个重要概念,广泛应用于参数估计、统计推断和机器学习领域。它以统计学家罗纳德费希尔(Ronald Fisher)的名…...
nginx反向代理以及负载均衡(常见案例)
一、nginx反向代理 1、什么是代理服务器? 代理服务器,客户机在发送请求时,不会直接发送给目的主机,而是先发送给代理服务器,代理服务接受客户机请求之后,再向主机发出,并接收目的主机返回的数据…...
LabVIEW形状误差测量系统
在机械制造领域,形状与位置公差(GD&T)直接影响装配精度与产品寿命。国内中小型机加工企业因形状误差导致的返工率高达12%-18%。传统测量方式存在以下三大痛点: 设备局限:机械式千分表需人工读数,精度…...
将VsCode变得顺手好用(1
目录 设置中文 配置调试功能 提效和增强相关插件 主题和图标相关插件 创建js文件 设置中文 打开【拓展】 输入【Chinese】 下载完成后重启Vs即可变为中文 配置调试功能 在随便一个位置新建一个文件夹,用于放置调试文件以及你未来写的代码,随便命名但…...
排序模板——C++
0.排序模板题目 题目描述 将读入的 N 个数从小到大排序后输出。 输入格式 第一行为一个正整数 N。 第二行包含 N 个空格隔开的正整数 ai,为你需要进行排序的数。 输出格式 将给定的 N 个数从小到大输出,数之间空格隔开,行末换行且无空格。 …...
HTTP/HTTPS 服务端口监测的简易实现
一 HTTP/HTTPS 服务端口监测的简易实现方法 在当今快节奏的工作环境中,工作忙碌成为了许多职场人的常态。就拿我们团队最近经历的事情来说,工作任务一个接一个,大家都在各自的岗位上争分夺秒地忙碌着。然而,就在这样高强度的工作…...
快速入门——状态管理VueX
Vuex介绍 状态管理 每一个Vuex应用的核心都是一个store,与普通的全局对象不同的是,基于Vue数据与视图绑定的特点,当store中的状态发生变化时,与之绑定的视图也会被重新渲染。 store中的状态不允许被直接修改,改变sto…...