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 });
});
⑦ 创建了一个非常基本的网站,但这是一个美好的开始。