express框架--开发实例

责编:menVScode 2017-08-30 11:26 阅读(1074)

【静态网页模板】

  在项目目录之中,建立一个子目录views,用于存放网页模板。

  假定这个项目有三个路径:根路径(/)、自我介绍(/about)和文章(/article)。那么,app.js可以这样写:

var express = require('express');
var app = express();
 
app.get('/', function(req, res) {
   res.sendfile('./views/index.html');
});
 
app.get('/about', function(req, res) {
   res.sendfile('./views/about.html');
});
 
app.get('/article', function(req, res) {
   res.sendfile('./views/article.html');
});
 
app.listen(3000);

  上面代码表示,三个路径分别对应views目录中的三个模板:index.html、about.html和article.html。另外,向服务器发送信息的方法,从send变成了sendfile,后者专门用于发送文件。

  假定index.html的内容如下:

<html>
<head>
   <title>首页</title>
</head>
<body>
    <h1>Express Demo</h1>
    <header>
        <p>
           <a href="/">首页</a> - <a href="/about">自我介绍</a> - <a href="/article">文章</a>
        </p>
    </header>
</body>
</html

        about.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    about
</body>
</html>

        article.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    article
</body>
</html>

  运行app.js后,访问http://localhost:3000/结果如下

740839-20170716165020003-1306332592


 【动态网页模板】

  下面来制作一个动态网页网站,以使用ejs引擎为例;

npm install ejs

        将view engine修改为ejs,并将模板的后缀修改为.html;

var express = require('express');
var app = express();
var ejs = require('ejs');

// 指定模板文件的后缀名为html
app.set('view engine', 'html');
//运行ejs引擎读取html文件
app.engine('.html', ejs.__express);

app.get('/', function (req, res){
    res.render('index');
});

app.get('/about', function(req, res) {
    res.render('about');
});

app.get('/article', function(req, res) {
    res.render('article');
});

        接下来,新建数据脚本。渲染是指将数据代入模板的过程。实际运用中,数据都是保存在数据库之中的,这里为了简化问题,假定数据保存在一个脚本文件中。

  在项目目录中,新建一个文件blog.js,用于存放数据。blog.js的写法符合CommonJS规范,使得它可以被require语句加载。

var entries = [
    {"id":1, "title":"第一篇", "body":"正文", "published":"7/2/2017"},
    {"id":2, "title":"第二篇", "body":"正文", "published":"7/3/2017"},
    {"id":3, "title":"第三篇", "body":"正文", "published":"7/4/2017"},
    {"id":4, "title":"第四篇", "body":"正文", "published":"7/5/2017"},
    {"id":5, "title":"第五篇", "body":"正文", "published":"7/10/2017"},
    {"id":6, "title":"第六篇", "body":"正文", "published":"7/12/2017"}
];
exports.getBlogEntries = function (){
   return entries;
}
exports.getBlogEntry = function (id){
   for(var i=0; i < entries.length; i++){
      if(entries[i].id == id) return entries[i];
   }
}

        新建header.html和footer.html

<!-- views/header.html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=title %></title>
</head>
<body>
    
<!-- views/footer.html文件 -->
   <footer>
      <p>
         <a href="/">首页</a>
         <a href="/about">自我介绍</a>
      </p>
   </footer>      
</body>
</html>

  接着,新建模板文件index.html

<!-- views/index.html文件 -->
<% include header.html %>
<h1>文章列表</h1>
<% for(var i=0; i < entries.length; i++){  %>
    <p>
        <a href="/article/<%=entries[i].id %>"><%=entries[i].title %></a>
        <br>
          <span>时间: <%=entries[i].published %></span>        
    </p>
<% } %>  
<% include footer.html %>

         新建模板文件about.html

<!-- views/about.html文件 -->
<% include header.html %>
<h1><%=title %> </h1>
<p>正文</p>
<% include footer.html %>

        新建模板文件article.html

<!-- views/article.html文件 -->
<% include header.html %>
<h1><%=blog.title %></h1>
<p>时间: <%=blog.published %></p>
<p><%=blog.body %></p>
<% include footer.html %>

        最后,改写app.js文件

var express = require('express');
var app = express();
var ejs = require('ejs');

// 加载数据模块
var blogEngine = require('./blog');
 
app.set('view engine', 'html');
app.engine('html', ejs.__express);

app.get('/', function(req, res) {
   res.render('index',{title:"最近文章", entries:blogEngine.getBlogEntries()});
});
 
app.get('/about', function(req, res) {
   res.render('about', {title:"自我介绍"});
});
 
app.get('/article/:id', function(req, res) {
   var entry = blogEngine.getBlogEntry(req.params.id);
   res.render('article',{title:entry.title, blog:entry});
});
 
app.listen(3000);

  上面代码中的render方法,现在加入了第二个参数,表示模板变量绑定的数据。

  现在重启node服务器,然后访问http://127.0.0.1:3000来查看结果

740839-20170716174021738-874166173

标签: express 框架
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码