express框架学习

最新推荐文章于 2025-02-13 10:44:55 发布

跟着大佬学习

最新推荐文章于 2025-02-13 10:44:55 发布

阅读量425

点赞数

本文链接：https://blog.csdn.net/oneofprogrammer/article/details/90383639

版权

express的安装

首先假定你已经安装了 Node.js，接下来为你的应用创建一个目录，然后进入此目录并将其作为当前工作目录。

 $ mkdir myapp
 $ cd myapp

通过 npm init 命令为你的应用创建一个 package.json 文件。

 $ npm init

此命令将要求你输入几个参数，例如此应用的名称和版本。你可以直接按“回车”键接受大部分默认设置即可，下面这个除外：

 entry point: (index.js)

键入 app.js 或者你所希望的名称，这是当前应用的入口文件。如果你希望采用默认的 index.js 文件名，只需按“回车”键即可。

接下来在 myapp 目录下安装 Express 并将其保存到依赖列表中。如下：

$ npm install express --save

如果只是临时安装Express，不想将它添加到依赖列表中，可执行如下命令：

$ npm install express --no-save

express框架的使用

新建一个工程，在命令行中输入：

$ express -e blog  
$ cd blog && npm install

框架中文件的作用

app.js: 启动文件，或者说入口文件。

package.json: 存储着工程的信息及模块依赖，当在 dependencies 中添加依赖的模块时，运行 npm install ，npm 会检查当前目录下的 package.json，并自动安装所有指定的模块。

node_modules: 存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下。

public: 存放 image、css、js 等文件。

routes: 存放路由文件。

views: 存放视图文件或者说模板文件。

bin: 存放可执行文件。

app.js文件解析

(1) var app = express()

生成一个 express 实例 app。

(2) app.set(‘view’, path.join(dirname, ‘views’))

设置 views 文件夹为存放视图文件的目录，即存放模板文件的地方，dirname 为全局变量，存储当前正在执行的脚本所在的目录。

(3) app.set(‘view engine’, ‘ejs’)

设置视图模板引擎为 ejs 。

(4) app.use(favicon(dirname + ‘/public/favicon.ico’))

设置 /public/favicon.ico 为 favicon 图标。

(5) app.use(logger(‘dev’))

加载日志中间件

(6) app.use(bodyParser.json())

加载解析 json 的中间件。

(7) app.use(bodyParser.urlencoded({ extended: false }))

加载解析 urlencoded 请求体的中间件。

(8) app.use(cookieParser())

加载解析 cookie 的中间件。

(9) app.use(express.static(path.join(dirname, ‘public’)))

设置 public 文件夹为存放静态文件的目录。

(10) app.use(‘/’, routes)和app.use(‘/users’, users)

路由控制。

(11)

// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});

捕获404错误，并转发到错误处理器。

(12)

```
// error handlers
// development error handler
 // will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
  message: err.message,
  error: err
    });
 });
}
```

开发环境下的错误处理器，将错误信息渲染 error 模板并显示到浏览器中。

(13)

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

生产环境下的错误处理器，将错误信息渲染 error 模板并显示到浏览器中。

(14) module.exports = app

导出 app 实例供其他模板调用。

bin文件的解析

(1) #!/usr/bin/env node

表明这是一个 node 可执行文件。

(2) var debug = require(‘debug’)(‘blog:server’)

引入 debug 模块，打印调试日志。

(3) var app = require(‘…/app’)

引入导出的 app 实例。

(4)


var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

设置端口号。

(5) var server = http.createServer(app)

创建 HTTP 服务。

(6)

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

启动工程并监听 3000 端口。

routes/index.js 文件：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

先导入 express模块，然后生成一个路由实例用来捕获访问主页的 GET 请求，导出这个路由并在 app.js 中通过 app.use(‘/’,routes)加载。这样，当访问主页时，就会调用 res.render(‘index’, {title:‘Express’}) 渲染 views/index.ejs 模板并显示到浏览器中。

views/index.ejs 文件：

<!DOCTYPE html>
<html>
 <head>
   <title><%= title %></title>
   <link rel='stylesheet' href='/stylesheets/style.css' />
 </head>
 <body>
   <h1><%= title %></h1>
   <p>Welcome to <%= title %></p>
 </body>
</html>

在渲染模板时，我们传入了一个变量 title 值为 express 字符串，模板引擎将所有 <%= title %> 替换为 express，然后将渲染后生成的html显示到浏览器中