首页 > 其他 > 详细

express框架初步

时间:2019-11-25 01:46:58      阅读:98      评论:0      收藏:0      [点我收藏+]
  • express框架初步使用
var exp = require(express);
var ejs = require(ejs);
var app = new exp();
app.set("view engine","ejs");
app.get(/index,function (req,res) {
    res.render(tianwadi,{});
});//默认情况下,express使用views目录下的.ejs文件

app.listen(8888,127.0.0.1);
  • express设置模板目录和模板引擎
var exp = require(express);
var ejs = require(ejs);
var app = new exp();
app.engine(html,ejs.__express);//注册引擎类型默认为ejs
app.set(view engine,html);//设定引擎类型
app.set(views,__dirname+"/tpl");//自定义模板存放目录
app.get(/index,function (req,res) {
    res.render(index,{});
});

app.listen(8888,127.0.0.1);
  • 对静态文件的解析和引入
var exp = require(express);
var ejs = require(ejs);
var app = new exp();
app.use(exp.static(static));//指定静态文件根目录---app.use也是中间件的用法
app.engine(html,ejs.__express);//注册引擎类型默认为ejs
app.set(view engine,html);//设定引擎类型
app.set(views,__dirname+"/tpl");//自定义模板存放目录
app.get(/index,function (req,res) {
    res.render(index,{"headtitle":ejs首页});
});

app.listen(8888,127.0.0.1);

html部分

......省略部分
<footer class="footer mt-auto py-3">
    <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
    </div>
</footer>
<script src="/js/jquery-3.4.1.min.js"></script></body>
</html>
  • 项目目录

技术分享图片

 

  •  静态服务托管(感觉像是给真实的静态文件夹起了个‘别名’,url中用别名加上下级文件夹可以访问到资源)
var exp = require(express);
var ejs = require(ejs);
var app = new exp();
app.use(exp.static(static));//指定静态文件根目录
app.use(/multimedia,exp.static(static));//给真实的项目文件夹static起了个别名multimedia
app.engine(html,ejs.__express);//注册引擎类型默认为ejs
app.set(view engine,html);//设定引擎类型
app.set(views,__dirname+"/tpl");//自定义模板存放目录
app.get(/index,function (req,res) {
    res.render(index,{"headtitle":ejs首页});
});

app.listen(8888,127.0.0.1);

html部分

......
<div class="container">
        <h1 class="mt-5"><%=headtitle%></h1>
        <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main &gt; .container</code>.</p>
        <p><img src="/multimedia/pic/EEhTIVVVUAAiht3.jpg" width="400"></p>
        <p>Back to <a href="/docs/4.3/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
    </div>
......

技术分享图片

 

express框架初步

原文:https://www.cnblogs.com/saintdingspage/p/11925385.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!