Nest 应用默认没有视图层,应用的视图可以交给前端应用,Nest 只负责给这个前端应用提供数据就行了。不过我们也可以直接给 Nest 应用添加一个视图层,就是配置使用一个模板引擎。
在终端,可以先给项目安装一个要使用的模板引擎,npm install 安装一个 hbs,把它保存在项目的依赖里面。这个 hbs 就是用在 Express 服务上的 Handlebars,这个 Handlebars 是一种模板引擎。hbs 这个包的作用就是可以让我们在 Express 服务器上使用 Handlebars 这种模板引擎。Express 是 Nest 框架里面默认使用的一个库。
安装了 hbs 以后,再去配置一下我们的应用,打开应用的入口文件,main.ts 。
先在文件顶部导入一个东西,这个东西来自 @nestjs/platform-express,导入的是 NestExpressApplication。
然后在 bootstrap 这个方法里,创建 Nest 应用的时候,设置一下创建的这个应用的类型,设置成 NestExpressApplication。
下面再去配置一下创建的应用,用一下 app 上的 useStaticAssets 这个方法,配置一下静态资源目录,就是如果视图里面需要用到一些静态资源,比如样式、脚本,图片、视频这些东西,需要把它们放在哪个目录里面。用一下 join 这个方法,它来自 Node.js 的 path 模块。用它组织一下这个目录的路径。
先用 __dirname 表示当前文件所在目录,两个点,表示上一级目录,再加上 public 。意思就是存储静态资源的目录是 main.ts 这个目录的上一级目录下面的 public 这个目录。
然后再配置一下视图文件的位置,要用的是 app.setBaseViewsDir 这个方法,用 join 组织这个路径,__dirname,.. views 。
最后还得再设置一下 Express 应用要使用的视图引擎,或者叫模板引擎。用的是 app.setViewEngine ,设置成 hbs ,就是刚才我们安装的 Handlebars 模板引擎。
视图文件
下面可以去创建一个模板文件,在项目根目录下面,新建一个文件,放在 views 目录里面,文件的名字是 index.hbs。
在这个文件里面,先添加一个基本的 Html 文件的结构,设置一下 title 标签的值,可以绑定输出一个 page ,这个 page 的值可以在 Nest 应用的控制器里面提供给这个模板文件。
在文档的主体部分,先简单的用一个 h1 标签,再绑定输出一个 title 值。
使用视图
打开应用里的 AppController 控制器,定义了一条路由,地址就是应用的根,这个方法的名字可以改一下,换成 root 。 方法返回的值的类型可以暂时先去掉。
然后在这个方法的上面,再用 @Render 这个装饰器,设置一下要使用的模板文件,设置成 index,这个就是刚才我们创建的模板文件。
方法 return 的东西,换成一个对象,里面添加一个 page 属性,值可以设置成 ninghao,再添加一个 title,值设置成 hello ~, 在 index 视图里面,绑定输出了这两个属性的值。
在终端,执行 npm run start:dev,运行一下项目的开发服务。
预览
打开浏览器,可以访问一下 localhost:3000,这次 Nest 响应回来的东西是一个 Html 文档,文档的结构就是 index 视图,文档的标题是 ninghao,页面上还会显示一个大标题,内容是 hello 。