Nuxt.js 3【详解】服务器 Server

news/2025/3/1 4:47:10/

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

  1. 本地安装 redis，见教程

  2. 添加配置 nuxt.config.ts

      nitro: {storage: {redis: {driver: "redis",port: 6379,host: "127.0.0.1",password: "",db: 0, // Defaults to 0},},},

  3. 存数据
    useStorage 的参数 redis 与 nuxt.config.ts 中的配置 storage 属性 redis 对应

      await useStorage("redis").setItem("currentUser",currentUser,// ttl 配置 redis的过期时间，单位s，此处为 10s 后过期{ ttl: 10 });

  4. 取数据

        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"}]
}

http://www.ppmy.cn/news/1575686.html

相关文章

JAVA面试常见题_基础部分_Mysql调优

JAVA面试常见题_基础部分_Mysql调优

性能监控 使用show profile查询剖析工具&#xff0c;可以指定具体的type 此工具默认是禁用的&#xff0c;可以通过服务器变量在绘画级别动态的修改 set profiling1; 当设置完成之后&#xff0c;在服务器上执行的所有语句&#xff0c;都会测量其耗费的时间和其他一些查询执行状…
阅读更多...
C++-第十二章： AVL树

C++-第十二章： AVL树

目录 第一节&#xff1a;AVL树的特征 第二节&#xff1a;实现思路 2-1.插入 2-1-1.右单旋 2-1-2.左单旋 2-1-3.左右双旋 2-1-4.右左双旋 2-1-5.总结 2-2.删除 第三节&#xff1a;代码实现 3-1.Node类 3-2.AVLTree类 3-2-1.Insert函数 3-2-2.Height函数 3-2-3.Balance函数 3-…
阅读更多...
【超详细】神经网络的可视化解释

【超详细】神经网络的可视化解释

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…
阅读更多...
AF3 pair_sequences函数解读

AF3 pair_sequences函数解读

AlphaFold3 msa_pairing模块的pair_sequences函数的核心目标是基于 MSA（多序列比对）中的物种信息，在多条链之间建立 MSA 配对索引，从而帮助 AlphaFold3 捕捉共进化信息，提升蛋白复合物预测的准确性。函数pair_sequences 通过调用 _make_msa_df、 _create_species_dict 以…
阅读更多...
JAVA面试_进阶部分_Linux面试题

JAVA面试_进阶部分_Linux面试题

Linux概述 1. 什么是Linux Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个基于POSIX和Unix 的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工 具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网 络为核心的设…
阅读更多...
Excel工作圈小工具一个集合了大量Excel功能的绿色工具软件

Excel工作圈小工具一个集合了大量Excel功能的绿色工具软件

​Excel工作圈小工具 一个集合了大量Excel功能的绿色工具软件&#xff0c;可以大大加强生产效率~ 软件虽然看起来比较简陋&#xff0c;但功能却是十分丰富。无需联网即可运行&#xff0c;而且兼容WPS和MS office各版本。 以下是软件的功能详细截图。 总的来说功能挺丰富&#…
阅读更多...
QT MD5校验文件和数据的完整性

QT MD5校验文件和数据的完整性

MD5介绍&#xff1a; ‌MD5&#xff0c;全称为‌‌Message-Digest Algorithm 5&#xff08;消息摘要算法5&#xff09;‌&#xff0c;是一种广泛使用的密码散列函数。它可以将任意长度的“字节串”变换成一个128位&#xff08;16字节&#xff09;的散列值&#xff08;hash valu…
阅读更多...
Oracle Fusion Middleware更改weblogic密码

Oracle Fusion Middleware更改weblogic密码

前言 当用户忘记weblogic密码时&#xff0c;且无法登录到web界面中&#xff0c;需要使用服务器命令更改密码 更改方式 1、备份 首先进入 weblogic 安装目录&#xff0c;备份三个文件&#xff1a;boot.properties&#xff0c;DefaultAuthenticatorInit.ldift&#xff0c;Def…
阅读更多...
最新文章

Copyright @ 2022~2023