分享一个 nodejs ejs前端模板的实例代码
程序员文章站
2022-03-08 13:05:15
...
前言:
如果所有的前端页面都需要自己拼装成HTML字符串之后打印给前台,那么对开发人员来说无疑是很大的工作量,因此,就需要使用前端模板,把关注的重心集中到前端的数据上,类似于PHP,JSP等web动态语言。
模板选择:
如果所有的前端页面都需要自己拼装成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前端模板的实例代码的详细内容,更多请关注其它相关文章!
上一篇: 深入php数据采集的详解_PHP教程
下一篇: css变量说明及教程