nodejs ejs 프런트엔드 템플릿의 예제 코드 공유
- 零下一度원래의
- 2017-06-29 14:52:162040검색
머리말:
모든 프런트 엔드 페이지를 HTML 문자열로 조합한 다음 프런트 데스크에 인쇄해야 한다면 이는 의심할 여지 없이 개발자에게 엄청난 작업량입니다. 따라서 프런트 엔드 템플릿을 사용하여 작업에 집중해야 합니다. 프론트엔드 데이터는 PHP, JSP 등 웹 동적 언어와 유사합니다.
템플릿 선택:
팀 협업이므로 학습 비용을 줄이기 위해 PHP 및 JSP 개발과 유사한 EJS를 선택했습니다. 이에 익숙하신 분들에게는 효율성이 크게 향상됩니다. .
启动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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.