前面记录了如何安装Nest.js以及如何创建项目
都是很简单，没有太多可以介绍的，但是作为web开发，最关系的是如何调用视图（View）
官方也有文档，点击这里
1、如何展示一个页面
方式也很简单，主要原理是整合了express框架，然后通过express设置模版引擎，这里使用的模板引擎是hbs
我们看下如何配置
先安装hbs
然后打开项目根目录下面的main.ts
将里面的bootstrap()方法修改如下
1
2
3
4
5
6
7
8
| async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
}
|
上面的代码就是配置模版引擎
main.ts最后代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { Controller, Get, Render } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
getHello(): string {
return this.appService.getHello();
}
@Get('/index')
@Render('index')
getIndex() {
return {};
}
}
|
如何调用视图
1、在根目录（不是src目录）下创建public和views文件夹
2、在views目录中创建index.hbs
添加代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App</title>
</head>
<body>
Message
</body>
</html>
|
3、controller中调用视图（View）
代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import { Controller, Get, Render, Res } from '@nestjs/common';
import { AppService } from './app.service';
import { Response } from 'express';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
getHello(): string {
return this.appService.getHello();
}
@Get('/index')
@Render('index')
getIndex() {
return {};
}
@Get('/dynamic')
getDynamic(@Res() res: Response) {
return res.render('index');
}
}
|
其中官网也介绍了两种调用视图的方式
第一种，静态视图
1
2
3
4
5
| @Get('/index')
@Render('index')
getIndex() {
return {};
}
|
将视图文件的名称index，添加到Render修饰器里面，然后函数返回对应的变量值就可以了
第二种，动态视图，访问的路由一样的情况，需要根据逻辑来展示不同的视图
1
2
3
4
| @Get('/dynamic')
getDynamic(@Res() res: Response) {
return res.render('index');
}
|
方法中传入res参数并在参数前面加上@Res修饰器，然后调用res.render就可以了，这样配置后就可以正常写View了，后面记录下静态文件相关的使用
2、如何添加静态文件
修改main.ts
1
2
3
4
5
6
7
8
9
10
11
| async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
}
|
修改index.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>App</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</header>
<div class='container'>
Message
</div>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
同时在项目根目录下面建立public目录，添加自己的静态文件，我这里添加的是bootstrap的静态文件
3、如何动态的展示一个页面（页面参数传递）
修改app.controller.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { Controller, Get, Render } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get()
getHello(): string {
return this.appService.getHello();
}
@Get('/index')
@Render('index')
getIndex() {
return { message: 'Index Page' };
}
}
|
修改index.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>App</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</header>
<div class="container">
{{ message }}
</div>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|