当前位置: 首页>前端>正文

nestjs项目怎么运行微信小程序 nestjs module


Nestjs中使用模板引擎和配置静态资源

  • Nestjs中配置静态资源
  • 配置虚拟目录
  • 配置模板引擎
  • NestJs中模板引擎结合Post演示


Nestjs中配置静态资源

静态资源是什么呢?例如CSS、JS以及图片等等。下面以在浏览器中访问图片为例来配置静态资源

首先新建一个项目,在其根目录中创建一个public文件夹用于存放静态资源

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎,第1张

为了创建一个简单的 MVC 应用程序,我们必须安装一个模板引擎,命令如下:

npm install --save hbs

将main.js中的代码改为:

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

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);
}
bootstrap();

我们先试试一个简单的配置静态资源目录,代码如下

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets('public');  //配置静态资源目录
  await app.listen(3000);
}
bootstrap();

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_node.js_02,第2张

这时我们在public文件夹中放入一张图片,并取名为1.png

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_静态资源_03,第3张

这时候我们启动项目,并输入对应的URL就可以看见图片出现在网站中

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_bootstrap_04,第4张

配置虚拟目录

比如想通过http://localhost:3000/static/1.png来访问public目录里面的文件

代码如下:

app.useStaticAssets(join(__dirname, '…", ‘public’),{
 prefix: " /static/. //设置虚拟路径
 })

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_05,第5张

这时候我们通过URL访问:

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_06,第6张

通过官方的方法也可以

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_静态资源_07,第7张

配置模板引擎

安装对应的模板引擎,比如ejs
安装代码

cnpm i ejs --save

配置模板引擎

app.setBaseViewsDir(join(_dirname,‘…’,‘views’)) //放试图的文件

app.setViewEngine(‘ejs’);

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_08,第8张

然后在跟目录中新建一个名为views的文件夹

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_nestjs项目怎么运行微信小程序_09,第9张

因为我们的项目设计到前端和后端,所以新建两个文件夹来区分前后端分别是admin和default

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_node.js_10,第10张

然后我们在default里面新建index.ejs来渲染页面,并添加一些基础的东西

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_11,第11张

然后需要引入Render装饰器,需要在app.controller.ts中添加并修改代码,如下

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_12,第12张

这时候我们访问URL就可看见我们在index中写的语句

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_nestjs项目怎么运行微信小程序_13,第13张

接下来我们可以输出刚刚接受的数据

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_静态资源_14,第14张

刷新刚刚的URL

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_nestjs项目怎么运行微信小程序_15,第15张

NestJs中模板引擎结合Post演示

首先新建一个user控制器

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_16,第16张

然后进入user控制器中配置路由

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_bootstrap_17,第17张

启动项目看看浏览器能不能访问user控制器

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_node.js_18,第18张

在default文件夹中新建user.ejs,代码如下:

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_nestjs项目怎么运行微信小程序_19,第19张

user控制器的代码改为:

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_20,第20张

这是我们输入相应的URL就可以看见以下画面:

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_模板引擎_21,第21张

这时候我们在输入框内输入一些数据并点击提交

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_nestjs项目怎么运行微信小程序_22,第22张

就可以在终端看见传值

nestjs项目怎么运行微信小程序 nestjs module,nestjs项目怎么运行微信小程序 nestjs module_node.js_23,第23张



https://www.xamrdz.com/web/29w1938811.html

相关文章: