当前我们已经可以获取路由参数并回传字符串到客户端,下一步要怎么返回 html
内容?
很简单,使用 sendFile
方法,参数为 html 文件地址
var express = require('express');
var app = express();
app.get('/', function(req, resp){
resp.sendFile(__dirname + '/index.html');
});
如何添加动态参数,如数据库查出的数据到返回的内容?
下方 profile url
返回的是一个字符串,如果需要返回动态内容,则需要使用模板引擎
var express = require('express');
var app = express();
app.get('/profile/:name', function(req, resp){
resp.send('your profile name is:' + req.params.name);
});
模板引擎
模板引擎能让我们将数据与 Javascript 代码嵌入到 html 中,然后将这 html 返回给客户端,express 中有多种模板引擎 Jade
mustache
,今天讲的是 ejs
,轻量并容易入门,语法特点跟 ASP webform 比较像。
安装 ejs
npm install ejs --save
安装完成后,需要告诉 express 你选择的模板引擎是 ejs
,当启用了 view engine 后,express 会默认去找 views
文件夹里的模板文件
app.set('view engine', 'ejs');
我们创建一个 views
文件夹,新建 profile.ejs
文件,我们在 ejs
文件里能做的跟 html
能做的完全一致,还可以嵌入 Javascript 代码。
当用户输入 profile 这个 url 时,如何返回这个模板到客户端? 只需使用 render
取代 sendFile
resp.render('profile.ejs'); // 无需完整路径,默认去 views 里取
通过第二个参数可将数据嵌入到 ejs
里
'app.js'
var express = require('express');
var app = express();
app.get('/profile/:name', function(req, resp){
resp.render('profile.ejs', {
name: req.params.name
});
});
ejs 里使用 <%= xxx %>
进行内容输出
‘profile.ejs’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
</head>
<body>
Your profile name is <%= name %>
</body>
</html>