Nest 配置静态资源
在根目录新建 public 目录,然后在 images 目录保存一个图片,比如 pic1.jpg:
这样就可以通过 http://localhost:3000/images/pic1.jpg 来访问图片了。
我们也可以配置虚拟目录,比如我们想通过 http://localhost:3000/static/images/pic1.jpg 来访问 public 目录里面的文件,这样写:
Nest 配置模版引擎
- 安装对应的模板引擎 比如 ejs
bash
npm i ejs -D
- 配置模版引擎:
- 项目根目录新建 views 目录然后新建 index.ejs
- 使用创建的 ejs 文件渲染页面
- 访问页面
Nest 模板引擎结合 Post 表单演示
创建 UserControll:
如果忘记如何创建的命令,输入 nest g --help 可查看帮助:
自动帮我们生成了文件并导入到 AppModule 根模块:
创建 user.ejs:
内容如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form action="/user/doAdd" method="post">
<input type="text" name="username" placeholder="请输入用户名" />
<br />
<input type="text" name="age" placeholder="年龄" />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
UserController 内容如下:
typescript
import { Controller, Get, Post, Body, Response, Render } from '@nestjs/common';
@Controller('user')
export class UserController {
@Get()
@Render('default/user')
index() {
return { name: '张三' };
}
@Post('doAdd')
doAdd(@Body() body, @Response() res) {
console.log(body);
res.redirect('/user'); //路由跳转
}
}
访问页面:
输入内容提交:
此时 form 表单会提交 POST 请求,路径是 /user/doAdd,命中我们的 UserController 路由
会打印 body 然后重定向页面到 user: