首页手记《Node与Express开发》学习笔记-第三章

《Node与Express开发》学习笔记-第三章

标签：

Node.js

3.1 脚手架

概念：
创建一个通用的项目骨架，每次开始新项目时，只需复制这个骨架，或者说是模板。

Express 有可用的脚手架工具，不过只有一定的局限性。
所以接下来手动创建一个自己的脚手架。

创建一个脚手架

项目的根目录
这个也是整个项目文件结构的根目录
package.json--配置项目信息与依赖

作用：
用于管理项目的依赖项以及项目的元数据。
创建方法：
```
npm init
```
安装模块以及为项目添加依赖
```
npm install --save express
```
运行 npm install 会把指定名称的包安装到 node_modules 目录下。
如果你用了 --save 选项，它还会更新 package.json 文件。
添加依赖后就可以随时用 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.
```
把不许要添加的文件或者目录写入.gitignore文件中就可以阻止添加到代码库。

创建入口文件
创建 meadowlark.js 文件作为入口文件

var express = require('express'); // 加载express模块
var app = express(); // 创建服务器实例
app.set('port', process.env.PORT || 3000);// 配置全局变量 post
// 定制 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(){ // 获取全局变量post并作为服务器端口
    console.log( 'Express started on http://localhost:' +
    app.get('port') + '; press Ctrl-C to terminate.' );
});

启动服务器
```
node meadowlark.js
```
通过浏览器访问 localhost:3000即可访问项目网站。

以上就配置出了基本的服务器脚手架。

项目文件放在在项目的根目录，通过package.json配置node模块的依赖，.gitignore管理代码库，入口文件用于启动服务器。网站需要的其他功能在通过这个脚手架基础上进行配置和添加

深入入口文件

配置路由
```
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');
});
```
在 Express 文档中写的是 app.VERB这并不意味着存在一个叫 VERB 的方法，它是用来指代 HTTP 动词的（最常见的是“get”和“post”）。这个方法有两个参数：一个路径和一个函数。

默认忽略了大小写或反斜杠，并且在进行匹配时也不考虑查询字符串。所以针对关于页面的路由对于 /about、/About、/about/、/about?foo=bar、/about/?foo=bar 等路径都适用。
请求和响应对象
B/S系统的基础都构建于响应与请求基础之上。浏览器发生请求到服务器，服务器处理请求并响应的形式发生数据给浏览器，这样就构成服务器与浏览器的通信基础。express的基础也就是处理请求和响应对象。

路由匹配上之后就会调用你提供的函数，并把请求和响应对象作为参数传给这个函数。这样我们就可以操作请求和响应对象。

Express深度包装了req, res对象。在Express中使用的是Express的请求和响应对象。
res.set 和 res.status 替换了 Node 的 res.writeHead。
Express 还提供了一个 res.type 方法，可以方便地设置响应头ontent-Type。
中间件
app.use是 Express 添加中间件的一种方法。

理由匹配规则
Express的路由规则是从上执行的去匹配app.VERB/app.use如果匹配到后会终止接下来的匹配。所以路由和书写顺序应该注意。

还有点需要注意路由路径支持通配符

app.get('/about*',function(req,res){
    // 发送内容……
})
app.get('/about/contact',function(req,res){
    // 发送内容……
})
app.get('/about/directions',function(req,res){
    // 发送内容……
})

本例中的 /about/contact 和 /about/directions 处理器永远无法匹配到这些路径，因为第一个处理器的路径中用了通配符：/about*。

可以这样写

app.get('/about/directions',function(req,res){
    // 发送内容……
})
app.get('/about/contact',function(req,res){
    // 发送内容……
})
app.get('/about*',function(req,res){
    // 发送内容……
})

把子路径写在前面。

3.3.1 视图和布局

概念：

视图本质上是要发送给用户的东西。

视图与静态资源（比如图片或 CSS 文件）的区别是它不一定是静态的：HTML 可以动态构建，为每个请求提供定制的页面。

模板引擎
express默认模板引擎是jade不过我还是比较喜欢Handlebars。

handlebarsjs.com

安装Handlebars

npm install --save express3-handlebars

加载并配置模板引擎

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

创建视图目录
--project--views--layouts
views用于存放视图文件
layouts用于存放布局文件

创建布局文件：
views/layouts/main.handlebars 布局文件

<!doctype html>
<html>
<head>
    <title>Meadowlark Travel</title>
</head>
<body>
    {{{body}}} <!- 这里的{{{body}}}就用于套其他的视图文件->
</body>
</html>

我们指明了默认布局（defaultLayout:'main'）。这就意味着除非你特别指明，否则所有视图用的都是这个布局。

创建视图文件：

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'); // 用模板渲染home.handlebars并套入main.handlebars 
});
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');
});

handlebars会默认去访问views下的视图文件以及views/layouts布局文件。
handlebars的默认类容类型为text/html 状态码为200所以一般情况下就不需要进行配置。

3.3.2 视图和静态文件

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

创建静态资源目录：
/public/
一般会把图片,css,js这样的静态文件放置在public
目录结构如下：
/public/img/
/public/js/
/public/css/
配置静态支援：

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

这段代码相当于把所有public下的文件创建一个路由。
url通过绝对路径的形式访问

localhost/img/logo.png 就相当于访问public/img/logo.png

3.3.3 视图中的动态内容

模板中的类容可以通过模板的形式动态生成，一般需要组成部分：

数据类容
可以通过变量的形式存储，或者通过数据库的形式存储。

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.",
];

配置模板
把模板变量放置在需要展示的位置

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

合并数据和模板
在路由里进行配置

app.get('/about', function(req, res){
var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
res.render('about', { fortune: randomFortune });
});

总结

以上就构建出了一套大体的脚手架。

从项目结构部分来看：