前言
- 继续学习nest。本篇是传参、模板、cookie、session的使用。
知识梳理
在Nestjs中接收浏览器上的参数
- 1、常见的方法列表
| No. | 名字 | 字段说明(参考express框架字段) |
|---|---|---|
| 1 | @Request() | req 获取到req请求的参数 |
| 2 | @Response() | res 使用了res就不使用使用return返回值需要使用res.send() |
| 3 | @Next() | next |
| 4 | @Session() | req.session |
| 5 | @Param(key?: string) | req.params / req.params[key] 获取动态路由的参数 |
| 6 | @Body(key?: string) | req.body / req.body[key] 获取post请求提交的参数 |
| 7 | @Query(key?: string) | req.query / req.query[key] 获取get请求query的参数 |
| 8 | @Headers(name?: string) | req.headers / req.headers[name] 获取请求头的参数 |
-
2、关于
@Query()获取全部的参数@Controller('user') export class UserController { // 批量获取全部的参数,接收到的是一个对象,你传递什么我就接收什么 @Get() userList( @Query() query: any ): string { console.log(query); return '用户列表'; } } // 浏览器访问的url地址:http://localhost:3000/user?name=hello&age=20 -
3、选择性接收
Query()中带参数并且判断参数类型@Controller('user') export class UserController { // 只接收全部参数里面的其中一个或者多个,ParseIntPipe是nestjs中内置管道 @Get() userList( @Query('age', new ParseIntPipe()) age: number, @Query('name') name: string ): string { // 我只要age和name字段,别的你传递多的给我，我也不接收也不处理 console.log(age, name); return '用户列表' } } // 浏览器访问的url地址:http://localhost:3000/user?name=hello&age=20 -
4、
@Param参数的获取@Get(":id") userInfo( @Param() params:any ) { console.log(params); // 输出{ id: '2' } return "用户详情" } // 浏览器访问的url地址:http://localhost:3000/user/2 -
5、
@Param单独接受参数@Get(":id") userInfo( @Param('id', new ParseIntPipe()) id: number ) { console.log(id); return "用户详情" } // 浏览器访问的url地址:http://localhost:3000/user/2 -
6、
@Body()接受post提交过来的数据(一次性接收全部的,也可以在@Body()中加参数类似上面的方式一样的校验传递过来的参数[仅仅是针对参数比较少的情况下])@Post() addUser( @Body() body: any ) { // 这种写法适合大规模的提交参数,自己又不想一个一个去校验 console.log(body); return body } // 使用postman提交post请求地址:http://localhost:3000/user/
使用模板
- 服务端渲染一般都有模板，使用ejs进行渲染示例：
- 安装：
npm install ejs --save
- main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { Logger } from '@nestjs/common';
import 'dotenv/config';
const PORT = process.env.PORT || 8080;
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'), {
prefix: '/static/',
});
// 配置视图文件的目录
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('ejs');
await app.listen(PORT, () => {
Logger.log(`服务已经启动,请访问:http://wwww.localhost:${PORT}`);
});
}
bootstrap();
- 根目录建立view与public，view下建index.ejs，写个页面，控制器中渲染它。
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index')
getHello(): any {
return { name: '哈哈' };
}
}
-
public放入图片，ejs中加入图片也应该能渲染。
-
下面试着使用模板引擎渲染title字段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%=title%></title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<h1><%=title%></h1>
<form action="/user/login" method="post">
<p>
<input type="text" name="username" />
</p>
<p>
<input type="password" name="password" />
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>
- 控制器加入：
import { Controller, Get, Render, Post, Body, Response } from '@nestjs/common';
@Controller('user')
export class UserController {
@Get()
index() {
return '主页';
}
@Get('login')
@Render('index') // 渲染views里面的ejs模板
loginPage() {
return { title: '登录页面' }; // 返回给ejs模板的数据
}
@Post('login')
login(@Body() body, @Response() res) {
console.log(body); // 获取表单中提交的数据
res.redirect('/user'); // 重定向到用户首页
// 注意如果在控制器函数中使用了@Response()就不能使用return返回值
}
}
使用cookie
- 先进行安装
npm install cookie-parser -S
npm install @types/cookie-parser -D
- main.ts中引入：
import cookieParser from 'cookie-parser';
app.use(cookieParser());
- 控制器中设置与读取。
import { Controller, Get, Response, Request } from '@nestjs/common';
@Controller('user')
export class UserController {
@Get()
index(@Request() req) {
console.log(req.cookies.name, '当前的cookie');
return '主页';
}
@Get('login')
login(@Response() res) {
res.cookie('name', 'hello', { maxAge: 1000 * 5, httpOnly: true });
res.send('登录页面');
}
}
cookie 参数：
1 domain String 指定域名下有效
2 expires Date 过期时间(秒),设置在某个时间点后会在该cookoe后失效
3 httpOnly Boolean 默认为false表示不允许客户端(通过js来获取cookie)
4 maxAge String 最大失效时间(毫秒),设置在多少时间后失效
5 path String 表示cookie影响到的路径,如:path=/如果路径不能匹配的时候,浏览器则不发送这个cookie
6 secure Boolean 当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效
7 signed Boolean 表示是否签名cookie,如果设置为true的时候表示对这个cookie签名了,这样就需要用res.signedCookies()获取值cookie不是使用res.cookies()了,
- 签名cookie
// main.ts中
app.use(cookieParser(process.env.SECRET)); // 配合dotenv包来使用
import { Controller, Get, Response, Request } from '@nestjs/common';
@Controller('user')
export class UserController {
@Get()
index(@Request() req) {
console.log(req.signedCookies, '当前的cookie');
return '主页';
}
@Get('login')
login(@Response() res) {
res.cookie('name', 'hello', {
maxAge: 1000 * 5,
httpOnly: true,
signed: true,
});
res.send('登录页面');
}
}
使用Session
- 安装：
npm install express-session
npm install @types/express-session -D
- main.ts 引入
app.use(session({ secret: 'yehuozhili', cookie: { maxAge: 60000 } }))
- controller
import { Controller, Get, Request, Response } from '@nestjs/common';
@Controller('user')
export class UserController {
@Get()
index(@Request() req: { [key: string]: any }): string {
console.log(req.session);
return '用户主页';
}
@Get('login')
login(
@Response() res: { [key: string]: any },
@Request() req: { [key: string]: any },
): void {
console.log(req.session);
req.session.name = 'hello';
res.send('登录页面');
}
}
- 常见参数
1 secret 一个 String 类型的字符串，作为服务器端生成 session 的签名
2 name 返回客户端的key 的名称，默认为connect.sid,也可以自己设置
3 resave 强制保存 session 即使它并没有变化,。默认为 true。建议设置成 false
4 saveUninitalized 强制将未初始化的 session 存储。当新建了一个 session 且未设定属性或值时，它就处于 未初始化状态。在设定一个 cookie 前，这对于登陆验证，减轻服务端存储压力，权限控制是有帮助的。( 默认:true)。建议手动添加
5 cookie 设置返回到前端key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false, maxAge: null }。
6 rolling 在每次请求时强行设置 cookie，这将重置 cookie 过期时间(默认:false)
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
