前言:
如果所有的前端页面都需要自己拼装成html字符串之后打印给前台,那么对开发人员来说无疑是很大的工作量,因此,就需要使用前端模板,把关注的重心集中到前端的数据上,类似于php,jsp等web动态语言。
模板选择:
由于是团队协作,为了降低学习成本,我选择了ejs,类似于php和jsp的开发,熟悉这个的人,就大大的提高了效率。
启动webapp 页面
[javascript] view plain copy
var express = require("express");
var http = require("http");
var app = express();
////////////////////// 设置模板 /////////////////////////////
var ejs = require("ejs");
//使用set方法,为系统变量“views”和“view engine”指定值。
app.set("views", __dirname + "/views");
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
// 运行hbs模块
app.engine('html', ejs.__express);
////////////////////// 利用文件来拆分路由的规模 /////////////////////////////
var router = express.router();
var router1 = require('./routes/router1');
var router2 = require('./routes/router2');
var router3 = require('./routes/router3');
var testrouter = require('./routes/test/test');
//设置web工程的根目录
app.use(express.static(__dirname + '/'));
app.use('/router1', router1);
app.use('/router2', router2);
app.use('/router3', router3);
app.use('/test', testrouter);
http.createserver(app).listen(3000);
控制器routes/router1.js
[javascript] view plain copy
var express = require('express');
var router = express.router();
/* get home page. */
router.get('/a', function(req, res, next) {
res.render('router1/index', { name: 'express 路由1' });
});
module.exports = router;
模板页面views/router1/index.html
[html] view plain copy
<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/hb_common.js"></script>
<link rel="stylesheet" href="../../public/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/hb_wap.css">
<title>黄彪测试nodejs模板</title>
</head>
<body >
<button class="btn btn-primary" id="btn"> <%= name %>_post</button>
</body>
</html>
以上就是分享一个 nodejs ejs前端模板的实例代码的详细内容。