二、初识 Express

1、脚手架

因为创建项目时经常会写很多重复性的代码,所以创建一个通用的项目框架,每次开始新项目时,只需复制这个框架(模板)。

Express 借鉴了这一做法,提供了一个生成脚手架的工具,从而可以让你开始一个新的 Express 项目。


2、草地鹨旅行社网站

假想的草地鹨旅行社网站,该旅行社是一家为到俄勒冈州旅游的人提供服务的公司。如果你对创建 REST 应用程序更感兴趣,不用担心,因为草地鹨旅行社网站除了作为功能性网站外,也提供 REST 服务。


3、初始步骤

① 新建项目目录,在命令行中输出 npm init,根据提示完成项目初始化。

安装Express: npm install --save express

运行 npm install 会把指定名称的包安装到 node_modules 目录下。如果你用了 --save 选项,它还会更新 package.json 文件。因为 node_modules 随时都可以用 npm 重新生成,所以我们不会把这个目录保存在我们的代码库中。为了确保不把它添加到代码库中,我们可以创建一个 .gitignore 文件:

# ignore packages installed by npm 
node_modules 

# put any other files you don't want to check in here, 

# such as .DS_Store (OSX), *.bak, etc.


② 入口文件 meadowlark.js

var express = require('express'); 
 
var app = express(); 
 
app.set('port', process.env.PORT || 3000); 
 
// 定制 404 页面 
app.use(function(req, res){  
        res.type('text/plain'); 
        res.status(404); 
        res.send('404 - Not Found'); 
}); 
 
// 定制 500 页面 
app.use(function(err, req, res, next){  
        console.error(err.stack); 
        res.type('text/plain'); 
        res.status(500); 
        res.send('500 - Server Error'); 
}); 
 
app.listen(app.get('port'), function(){ 
  console.log( 'Express started on http://localhost:' + 
    app.get('port') + '; press Ctrl-C to terminate.' ); 
});

现在你有了一个非常精简的 Express 服务器。你可以启动这个服务器(node meadowlark.js),然后访问http://localhost:3000。结果可能会让你失望,因为你还没给 Express 任何路由信息,所以它会返回一个 404 页面,表示你访问的页面不存在。


③ 给首页和关于页面加上路由。在 404 处理器之前加上两个新路由:

app.get('/', function(req, res){  
         res.type('text/plain'); 
         res.send('Meadowlark Travel'); 
}); 
app.get('/about', function(req, res){ 
         res.type('text/plain'); 
         res.send('About Meadowlark Travel'); 
}); 
 
// 定制 404 页面 
app.use(function(req, res, next){  
        res.type('text/plain'); 
        res.status(404); 
        res.send('404 - Not Found'); 
});
app.get 是我们添加路由的方法。在 Express 文档中写的是 app.VERB。这并不意味着存在一个叫 VERB 的方法,它是用来指代 HTTP 动词的(最常见的是“get”和“post”)。这个方法有两个参数:一个路径和一个函数。

路由就是由这个路径定义的。app.VERB 帮我们做了很多工作:它默认忽略了大小写或反斜杠,并且在进行匹配时也不考虑查询字符串。所以针对关于页面的路由对于 /about、/About、/about/、/about?foo=bar、/about/?foo=bar 等路径都适用。

注意,我们对定制的 404 和 500 页面的处理与对普通页面的处理应有所区别:用的不是app.get,而是 app.use。app.use 是 Express 添加中间件的一种方法。我们会在第 10 章更深入地探讨中间件,现在你可以把它看作处理所有没有路由匹配路径的处理器。这里涉及一个非常重要的知识点:在 Express 中,路由和中间件的添加顺序至关重要。如果我们把404 处理器放在所有路由上面,那首页和关于页面就不能用了,访问这些 URL 得到的都是 404。


视图与布局

Express偏好Jada视图引擎,但也能支持多种其他的视图引擎。Jada抽象化高,免去了尖括号和结束标签,方式简洁却不易被接受和理解。我们该项目使用的是抽象程度较低的模板引擎 Handlebars。

在项目目录安装: npm install --save express3-handlebars

然后在入口文件中添加:

var app = express(); 
 
// 设置 handlebars 视图引擎 
var handlebars = require('express3-handlebars') 
        .create({ defaultLayout:'main' }); //指定默认布局
app.engine('handlebars', handlebars.engine); 
app.set('view engine', 'handlebars');

这段代码创建了一个视图引擎,并对 Express 进行了配置,将其作为默认的视图引擎。接下来创建 views 目录,在其中创建一个子目录 layouts。如果你是一位经验丰富的 Web 开发人员,可能已经熟悉布局的概念了(有时也被称为“母版页”)。在开发网站时,每个页面上肯定有一定数量的 HTML 是相同的,或者非常相近。在每个页面上重复写这些代码不仅非常繁琐,还会导致潜在的维护困境:如果你想在每个页面上做一些修改,那就要修改所有文件。布局可以解决这个问题,它为网站上的所有页面提供了一个通用的框架。

接下来我们创建一个 views/layouts/main.handlebars 文件:

<!doctype html> 
<html> 
<head> 
    <title>Meadowlark Travel</title>  
</head> 
<body> 
    {{{body}}} 
</body> 
</html>
接下来我们给首页创建视图页面,views/home.handlebars:

<h1>Welcome to Meadowlark Travel</h1>

关于页面,views/about.handlebars:

<h1>About Meadowlark Travel</h1>

未找到页面,views/404.handlebars:

<h1>404 - Not Found</h1>

最后是服务器错误页面,views/500.handlebars:

<h1>500 - Server Error</h1>

现在视图已经设置好了,接下来我们必须将使用这些视图的新路由替换旧路由:

app.get('/', function(req, res) {  
         res.render('home'); 
}); 
app.get('/about', function(req, res) { 
         res.render('about'); 
}); 
 
// 404 catch-all 处理器(中间件)
app.use(function(req, res, next){  
        res.status(404); 
        res.render('404'); 
}); 
 
// 500 错误处理器(中间件)
app.use(function(err, req, res, next){  
        console.error(err.stack); 
        res.status(500); 
        res.render('500'); 
});

⑤ 视图和静态文件

Express 靠中间件处理静态文件和视图,中间件可理解为是模块化手段,使得请求的处理更方便。

static 中间件可以将一个或多个目录指派为包含静态资源的目录,其中的资源不经过任何特殊处理直接发送到客户端。你可以在其中放图片、CSS 文件、客户端 JavaScript 文件之类的资源。

在项目目录下创建名为 public 的子目录(因为这个目录中的所有文件都会直接对外开放,所以我们称这个目录为 public)。接下来,你应该把 static 中间件加在所有路由之前:

app.use(express.static(__dirname + '/public'));

现在在public目录下新建一个子目录 img,将图片 LOGO.png 放在该目录下,然后修改main.handlebars 文件,使每个页面能展示该图片:

    <body>
        <header><img src='/img/LOGO.png' alt='Travel Logo'></header>
        {{{body}}}
    </body>

⑥ 视图中的动态内容

视图除了传递静态HTML,真正的强大之处在于它包含动态信息。

我们试着在入口文件中添加“虚拟幸运饼干”。

先在meadowlark.js 中,添加一个幸运饼干数组:

var fortunes = [ 
        "Conquer your fears or they will conquer you.",  
        "Rivers need springs.", 
        "Do not fear what you don't know.", 
        "You will have a pleasant surprise.",  
        "Whenever possible, keep it simple.", 
]

修改 about.handlebars:

<h1>About Meadowlark Travel</h1> 
 
<p>Your fortune for the day:</p>  
<blockquote>{{fortune}}</blockquote>

修改路由 /about :

app.get('/about', function(req, res){ 
         var randomFortune = 
                 fortunes[Math.floor(Math.random() * fortunes.length)]; 
         res.render('about', { fortune: randomFortune }); 
});
⑦ 创建了一个非常基本的网站,但这是一个美好的开始。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值