电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

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

2020-11-30 16:14:09 出处:[ 菜菜电脑网 ] 人气:次阅读
前言:
如果所有的前端页面都须要自己吊挂成HTML字符串之后墨水给前台,那么对开发人员来说无疑是很小的工作量,因此,就所需适用前端模板,把非议的关注点分散到前端的数据上,类似于PHP,JSP等web动态语言。

模板可选择:

由于是团队协作,为了增加研习成本,我为了让了EJS,类似于PHP和JSP的开发设计,看重这个的人,就大大的增加了效率。

启动webapp 页面[javascript] view plain copyvar 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 copyvar 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中文网其它系统性文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152