继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

路北
关注TA
已关注
手记 36
粉丝 90
获赞 327
3.1 脚手架

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

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


创建一个脚手架
  1. 项目的根目录
    这个也是整个项目文件结构的根目录
  2. package.json--配置项目信息与依赖

    作用:
    用于管理项目的依赖项以及项目的元数据。
    创建方法:

    npm init
  3. 安装模块以及为项目添加依赖

    npm install --save express

    运行 npm install 会把指定名称的包安装到 node_modules 目录下。
    如果你用了 --save 选项,它还会更新 package.json 文件。
    添加依赖后就可以随时用 npm 重新生成。

  4. .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文件中就可以阻止添加到代码库。

  5. 创建入口文件
    创建 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.' );
    });
  6. 启动服务器

    node meadowlark.js

    通过浏览器访问 localhost:3000即可访问项目网站。

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

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


深入入口文件
  1. 配置路由

    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 等路径都适用。

  2. 请求和响应对象
    B/S系统的基础都构建于响应与请求基础之上。浏览器发生请求到服务器,服务器处理请求并响应的形式发生数据给浏览器,这样就构成服务器与浏览器的通信基础。express的基础也就是处理请求和响应对象。

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

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

  3. 中间件
    app.use是 Express 添加中间件的一种方法。

  4. 理由匹配规则
    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 视图中的动态内容

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

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

    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.",
    ];
  2. 配置模板
    把模板变量放置在需要展示的位置

    <h1>About Meadowlark Travel</h1>
    <p>Your fortune for the day:</p>
    <blockquote>{{fortune}}</blockquote>
  3. 合并数据和模板
    在路由里进行配置

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

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

从项目结构部分来看:

  • package.json => 管理项目依赖
  • .gitignore => 来控制代码库
  • 项目的根目录 => 来构建项目目录

从业务逻辑来看:

入口文件 => 加载模块 ,配置路由,中间件

请求和响应对象 => 处理具体的业务逻辑

模板引擎 => 合并数据和视图

静态资源 => 管理静态资源文件

通过这一章学习到了大体如何去构建一个express项目。之后的章节讲继续分析如何加入其它的功能。

打开App,阅读手记
11人推荐
发表评论
随时随地看视频慕课网APP

热门评论

前两章被吃啦 - _ -

对照着原著看的,楼主总结摘录的很好,辛苦啦!

都把我当样板了,给个认证呗~~! ^^

查看全部评论