给小白的Expressjs4教程

最新推荐文章于 2023-12-27 15:31:58 发布

future_challenger

最新推荐文章于 2023-12-27 15:31:58 发布

阅读量4.2k

点赞数 1

分类专栏： nodejs

本文链接：https://blog.csdn.net/future_challenger/article/details/51549960

版权

nodejs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本教程是给nodejs和Expressjs的小白们写的。Expressjs是一个基于nodejs的开发框架，现在大热的MEAN站点开发技术栈，的E就是Expressjs。说到Expressjs就不能不说这个在nodejs界影响巨大的框架的作者TJ Holowaychuk。几乎三成以上的nodejs社区代码都是这位仁兄贡献的，甚至有人怀疑他不是一个人在战斗。。。但是，无论如何，要用nodejs写web站点都离不开他的拥有或参与的nodejs库。实在是一位值得膜拜的代码英雄。这位英雄酷爱摄影，这里是他的影展站点。

本来nodejs做站点很多都是用jade作为生成html页面的模板。这里为了简单，并且突出主要内容expressjs，就直接使用html页面了。

现在开始

最开始莫过于是安装nodejs了。毕竟，expressjs是运行在nodejs之上的，没有nodejs什么都无从谈起。nodejs在这里下载。只需要下载并安装对应于你的系统的版本就可以。之后安装。

开发工具具体用什么，有很大的空间。本人比较喜爱使用Sublime。也有人使用Intellij的WebStorm，这个比较重型一些，但是也在某些地方方便很多。还有其他比较轻量级的Visual Code。都可以使用，看个人的爱好。

一、合适的目录结构

在正式开始编写代码以前，需要有一个结构良好的项目目录结构。这非常重要，如果你不知道运行什么功能的代码存放在什么地方，什么时候这个文件的什么方法会被调用到，那么你对项目的理解就非常的欠缺了。那么首先创建一个存放你的应用的文件夹，并跳转到这个目录下。

这里有一个项目的目录结构：

|__node_modules
|__routers
        |__main.js
|__views
       |__index.html
       |__about.html
|__package.json
|__app.js

你可能会问，这些我都要创建吗？也是，也不是。接续往下读你就会清楚了。

二、创建package.json文件

在这个文件中会包含你expressjs应用的全部信息。比如，这个应用的名称、版本、描述等内容，项目不同这些也会有些不同。

这些内容中最重要的就是依赖项（dependencies）。这些依赖项是应用运行起来所不可或缺的。但是package.json文件并不用我们去手动创建。打开终端，并跳转到你刚刚为这个应用创建的目录下。运行命令：

$ npm init

命令中会跳出很多的需要你输入的东西。依次输入，或者对于我们的教程来说直接回车也可以。但是，有一点例外，在出现

entry point: (index.js)

的时候把文件名改为app.js，或者随便你喜欢的名字都可以。或者你觉得index.js也可以的话，就直接回车。但是我们在后面用到的这个文件都叫做app.js。

对于我们今天的主角expressjs来说，可以使用nodejs提供的包管理工具来完成安装。只需要一个命令就可以完成，非常的简单。

$ npm install express --save

命令之后打开package.json文件看看：

{
  "name": "express-web-app",
  "version": "1.0.0",
  "description": "Just a blogging platform.",
  "author": "uncle charlie",
  "dependencies": {
    "express": "^4.13.4"
  }
}

注意：在填写名称的时候不能包含空白，比如“express web app”。即使是“express-web-app”或者“express_web_app”这样也是可以的。还有一点，在依赖项的版本号前面的那些特殊的符号除了^还有其他。我们来看看这些特殊符号的含义：
* “^” 是指匹配全部4.x.x的版本，一直到5.0.0（不包括）。
* “~” 是指匹配全部2.4.x的版本，一直到2.5.0（不包括）。
更多内容对于版本的指定，可以参考官网。

我们继续使用npm安装其他的依赖项，ejs和mysql。

$npm install mysql --save

和

$npm install ejs --save

最后等待全部的依赖项都安装完成。还有一种完全没有什么必要的安装依赖项的方法，就是在npm init命令生成package.json文件之后，自己编辑这个文件，添加依赖项。最后执行npm install命令。不过这样没有什么必要。npm才是管理依赖包的，我们去手动编辑package.json文件就违背了nodejs使用npm包管理工具的初衷。只有在项目下已经存在package.json文件，而对应的依赖项还没有下载到本地的情况下才直接使用npm install安装。

三、创建Express的服务器（server）

我们需要的依赖项都已经安装好了，也创建了package.json文件。现在就该正式的进入正题，创建一个Express的server来响应各种用户请求了。前文中在执行npm init命令的时候已经生成了app.js文件。现在打开这个文件。输入如下的代码：

var express = require("express");
var app = express();
var server = app.listen(5566, function(){
    console.log("Server is running on http://localhost:5566");
});

在终端中执行命令node app.js。这里node后面跟你使用的文件的名称。在浏览器中输入地址http://localhost:5566并回车，你会发现已经可以访问这个server了，虽然还是一点小小的瑕疵。这个瑕疵主要是因为我们还没有在server里没有提供路由（router）的功能。

四、添加路由

我们的server已经准备好了。现在我们就来处理路由(router)的问题。

var express = require("express");
var app = express();
// *
app.get('/', function(req, res){
    res.send("Hello World!");
});

var server = app.listen(5566, function(){
    console.log("Server is running on http://localhost:5566");
});

加星注释的那句就是我们添加的路由功能的代码。方法get表明处理的是用户的GET请求。后面的function(req, res){res.send("Hello World!"}输出响应的内容，这里是一个全世界最著名的计算机字符串“Hello World”。

用户的响应只是一个字符串是远远不够的，按照上文中介绍目录结构的时候提到的，给views目录添加文件index.html和about.html。并分别给这两个文件添加内容：

<!-- index.html -->
<html>
    <head>
    </head>
    <body>
        <header>
            <h3>HOME</h3>
        </header>

    </body>
</html>

<!-- about.html -->
<html>
    <head>
    </head>
    <body>
        <header>
            <h3>ABOUT</h3>
        </header>

    </body>
</html>

添加的内容非常简单，只是为了区分是哪个页面被打开了。

如何显示这两个页面呢？这就回到刚刚我们讨论的问题上了，修改路由。

app.get('/', function(req, res){
    res.render('index.html');
});

app.get('/about', function(req, res){
    res.render('about.html');
});

用上面的代码替换掉最开始使用的示例路由代码，然后重新运行node app.js命令。额……你会发现会报错。是的，以后这样的事情还会经常发生的。查看报错的内容：

Error: Cannot find module 'html'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at new View (/Users/uncle_charlie/Documents/Dev/Test/js_test/js_server/node_modules/express/lib/view.js:78:30)

主要是因为没有对应的处理模块，所以无法正确的render渲染html文件。这时候就需要用到处理视图的模块ejs了。增加ejs的设置代码：

var express = require("express");
// 1
var ejs = require('ejs');  

var app = express();

// 2
app.set('view engine', 'ejs');
// 3
app.engine('html', ejs.renderFile);

// 以下代码不动，这里省略……

上面的修改主要有：
1. 引入了ejs模块。
2. 设定应用的视图引擎（view engine）为ejs。
3. 设定在处理HTML文件的时候使用ejs来渲染文件。

run起来我们的应用。效果如下：
这里写图片描述

在浏览器中输入地址http://localhost:5566/about你看到的就是ABOUT页面了。

五、重构代码

看起来是so far so good了。但是这是不够的。对于产品级的Express应用来说会有很多的代码。其中只路由的部分的代码就会非常之多。对于后期添加或者删除功能，修改bug都会造成很大的问题。所以，从现在开始我们就应该养成一个保持代码整洁的好习惯。这样是编程水平的反应。

下面我们就把路由的代码从app.js文件中移出去。在上文提到的目录结构中添加一个mainRouter.js的问题件来存放我们从app.js中移出来的路由部分代码：

var router = function(app){
    app.get('/', function(req, res){
        res.render('../views/index.html');
    });

    app.get('/about', function(req, res){
        res.render('../views/about.html');
    });
};

exports.router = router;

最后的一句是说，这部分的代码是要作为模块给其他部分的代码使用的，所以需要使用系统提供的exports对象来“发布”这里的代码。在app.js中使用require关键字来引入路由模块的代码。

var routers = require('./routers/mainRouter');

引入一个本地模块只需要知道路径就可以了。使用npm安装到本地的，或者nodejs系统内置的模块只需要require方法中使用模块本身的名字就可以，不需要路径。完整代码：


var express = require("express");
var ejs = require('ejs');
var routers = require('./routers/mainRouter');

var app = express();

app.set('view engine', 'ejs');
app.engine('html', ejs.renderFile);

// routers
routers.router(app);
// app.get('/', function(req, res){
//     res.render('index.html');
// });

// app.get('/about', function(req, res){
//     res.render('about.html');
// });

// server
var server = app.listen(5566, function(){
    console.log("Server is running on http://localhost:5566");
});