Rumah > Artikel > hujung hadapan web > 分享一个 nodejs ejs前端模板的实例代码

分享一个 nodejs ejs前端模板的实例代码

零下一度asal: 2017-06-29 14:52:162039semak imbas

前言：
如果所有的前端页面都需要自己拼装成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(&#39;view engine&#39;, &#39;html&#39;);  
// 运行hbs模块  
app.engine(&#39;html&#39;, ejs.__express);  
  
////////////////////// 利用文件来拆分路由的规模 /////////////////////////////  
var router = express.Router();  
var router1 =  require(&#39;./routes/router1&#39;);  
var router2 =  require(&#39;./routes/router2&#39;);  
var router3 =  require(&#39;./routes/router3&#39;);  
var testRouter =  require(&#39;./routes/test/test&#39;);  
  
  
//设置web工程的根目录  
app.use(express.static(__dirname + &#39;/&#39;));  
app.use(&#39;/router1&#39;, router1);  
app.use(&#39;/router2&#39;, router2);  
app.use(&#39;/router3&#39;, router3);  
app.use(&#39;/test&#39;, testRouter);  
  
  
http.createServer(app).listen(3000);  
控制器routes/router1.js
[javascript] view plain copy
var express = require(&#39;express&#39;);  
var router = express.Router();  
  
/* GET home page. */  
router.get(&#39;/a&#39;, function(req, res, next) {  
  res.render(&#39;router1/index&#39;, { name: &#39;Express 路由1&#39; });  
});  
  
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>

Atas ialah kandungan terperinci 分享一个 nodejs ejs前端模板的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：分享input文字垂直居中和按钮对齐问题的实例教程Artikel seterusnya：sublime 快捷键大全

Artikel berkaitan

Lihat lagi