express开发简单实例

最新推荐文章于 2024-07-22 20:58:11 发布

是空空呀

最新推荐文章于 2024-07-22 20:58:11 发布

阅读量488

点赞数

分类专栏： NodeJs 文章标签： express javascript node.js 前端

本文链接：https://blog.csdn.net/qq_43934844/article/details/127709001

版权

NodeJs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、静态网页模板

在项目目录之中，建立一个子目录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/结果如下
请添加图片描述

2、动态网页模板

下面来制作一个动态网页网站，以使用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语句加载

// blog.js文件
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);