Teilen Sie einen Beispielcode der NodeJS-EJS-Frontend-Vorlage

零下一度
Freigeben: 2017-06-29 14:52:16
Original
2076 Leute haben es durchsucht

Vorwort:
Wenn alle Front-End-Seiten in HTML-Strings zusammengestellt und dann an die Rezeption gedruckt werden müssen, ist dies zweifellos eine enorme Arbeitsbelastung für Entwickler. Daher ist die Verwendung von Front-End-Vorlagen erforderlich Der Fokus liegt auf Front-End-Daten, ähnlich wie bei webdynamischen Sprachen wie PHP und JSP.

Vorlagenauswahl:

Da es sich um eine Teamzusammenarbeit handelt, habe ich mich für EJS entschieden, das der Entwicklung von PHP und JSP ähnelt Wer damit vertraut ist, wird die Effizienz erheblich verbessern.

启动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>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode der NodeJS-EJS-Frontend-Vorlage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!