express框架的基本使用

Posted 2023-05-18 luckest

express框架的基本使用

1、express介绍

express是基于Node.js平台的极简、灵活的WEB应用开发框架。简单来说，express就是一个封装好的工具包，封装了很多功能，便于开发WEB应用（HTTP服务）

2、express使用

2.1、express下载

npm i express

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 创建路由
app.get(\'/home\', (req, res) => 
    res.end(\'hello express\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

2.2、express路由

一个路由有三个部分组成，请求方法、路径和回调函数。

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 创建路由
app.get(\'/home\', (req, res) => 
    res.end(\'hello express\');
);

app.get(\'/\', (req, res) => 
    res.end(\'home\');
);

app.post(\'/login\', (req, res) => 
    res.end(\'test\');
);

app.all(\'/test\', (req, res) => 
    res.end(\'all test\');
);

// 404响应，上面没有一个匹配就走这个路由
app.all(\'*\', (req, res) => 
    res.end(\'404\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

2.3、获取请求报文参数

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 创建路由
app.get(\'/request\', (req, res) => 
    // 原生操作
    console.log(req.method);
    console.log(req.url);
    console.log(req.httpVersion);
    console.log(req.headers);

    // express操作
    console.log(req.path);
    console.log(req.query);
    // 获取ip
    console.log(req.ip);
    // 获取请求头
    console.log(req.get(\'host\'));
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

2.4、获取路由参数

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 创建路由
app.get(\'/:id.html\', (req, res) => 
    // 获取URL路由参数
    console.log(req.params.id);
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

2.5、响应设置

express封装了一些API方便给客户端响应数据，并且兼容原生HTTP模块的获取方式。

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 创建路由
app.get(\'/response\', (req, res) => 
    // 1、express中设置响应的方式兼容HTTP模块的方式
    res.statusCode = 404;
    res.statusMessage = \'xxx\';
    res.setHeader(\'abc\',\'xyz\');
    res.write(\'响应体\');
    res.end(\'xxx\');

    // 2、express的响应方法
    res.status(500);
    res.set(\'xxx\', \'yyy\'); // 设置响应头
    res.send(\'xxx\'); // 设置响应体
    // 连贯操作
    res.status(404).set().send()

    // 3、其他响应
    res.redirect(\'http://www.baidu.com\'); // 重定向
    res.download(\'./package.json\'); // 下载响应
    res.json(); // 响应JSON
    res.sendFile(__dirname + \'/home.html\'); // 响应文件内容
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

2.6、express中获取请求体的数据

express可以使用body-parser包处理请求体。

安装：npm i body-parser

使用：

// 导入
const express = require(\'express\');
const bodyParser = require(\'body-parser\');

// 创建应用对象
const app = express();

// 解析JSON格式的请求体的中间件
const jsonParser = bodyParser.json();

// 解析querystring格式请求体的中间件
const urlencodedParser = bodyParser.urlencoded( extended: false);

// 创建路由规则
app.get(\'/login\', (req, res) => 
    // res.send(\'表单页面\');
    res.sendFile(__dirname + \'/index.html\');
);

app.post(\'/login\', urlencodedParser, (req, res) => 
    console.log(req.body);
    res.send(\'获取用户数据\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

3、中间件

3.1、什么是中间件

Middleware本质上是一个回调函数。可以像路由一样访问请求对象和响应对象。

作用：用于封装公共操作，简化代码。

3.2、类型

• 全局中间件
• 路由中间件

3.3、全局中间件

每一个请求到达服务端之后，都会执行全局中间件函数。

// 导入
const express = require(\'express\');
const fs = require(\'fs\');
const path = require(\'path\');

// 创建应用对象
const app = express();

// 声明中间件函数
function recordMiddleware(req, res, next) 
    // 获取 url 和 ip
    let  url, ip  = req;
    // 将信息保存在文件中 access.log
    fs.appendFileSync(path.resolve(__dirname, \'./access.log\'), `$url   $ip\\r\\n`);
    next();


// 使用中间件函数
app.use(recordMiddleware);

// 创建路由
app.get(\'/home\', (req, res) => 
    res.send(\'前台首页\'); 
);

app.get(\'/admin\', (req, res) => 
    res.send(\'后台首页\'); 
);

app.all(\'*\', (req, res) => 
    res.send(\'404 no found\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

3.4、路由中间件

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 创建路由
app.get(\'/home\', (req, res) => 
    res.send(\'前台首页\'); 
);

// 声明中间件
let checkCodeMiddlerware = (req, res, next) => 
    if (req.query.code === \'521\') 
       next();
     else 
        res.send(\'暗号错误\');
    


app.get(\'/admin\', checkCodeMiddlerware, (req, res) => 
    res.send(\'后台首页\'); 
);

app.get(\'/setting\', checkCodeMiddlerware, (req, res) => 
    res.send(\'设置页面\'); 
);

app.all(\'*\', (req, res) => 
    res.send(\'404 no found\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

3.5、静态资源中间件

express内置处理静态资源的中间件。

// 导入
const express = require(\'express\');

// 创建应用对象
const app = express();

// 静态资源中间件设置
app.use(express.static(__dirname + \'/public\'));

// 创建路由
app.get(\'/home\', (req, res) => 
    res.send(\'前台首页\'); 
);

app.all(\'*\', (req, res) => 
    res.send(\'404 no found\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

注意事项：

• 1、index.html为文件默认打开的资源。
• 2、如果静态资源与路由规则同时匹配，谁先匹配谁就响应。
• 3、路由响应动态资源，静态资源中间件响应静态资源。

4、防盗链

通过请求头中的referer来判断。

// 导入
const express = require(\'express\');
const bodyParser = require(\'body-parser\');

// 创建应用对象
const app = express();

// 声明中间件,防盗链
app.use((req, res, next) => 
    // 检测请求头中的referer是否是127.0.0.1
    let referer = req.get(\'referer\');
    console.log(referer);
    if (referer) 
        let url = new URL(referer);
        let hostname = url.hostname;
        if (hostname !== \'127.0.0.1\') 
            res.status(404).send(\'not found\');
        
    
    next();
)

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

5、路由模块化

创建routes文件夹，用来统一存放路由文件。

routes/homeRouter.js

// 导入
const express = require(\'express\');

// 创建路由对象
const router = express.Router();

router.get(\'/home\', (req, res) => 
    res.send(\'后台首页\');
);

module.exports = router;

6、模板引擎EJS

分离用户界面和业务数据的一种技术。

EJS是一种高效的JS的模板引擎。

安装：npm i ejs --save

6.1、初体验

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我爱你 <%= china %></h1>
    <%= weather %>
</body>
</html>

index.js

const ejs = require(\'ejs\');
const fs = require(\'fs\');

let china = \'中国\';
let weather = \'天气晴\';

let str = fs.readFileSync(\'./index.html\').toString();
let result = ejs.render(str, china, weather);
console.log(result);

6.2、ejs列表渲染

const ejs = require(\'ejs\');
const fs = require(\'fs\');

let arr = [1,2,3,4,5];

let result = ejs.render(`<ul>
    <% arr.forEach(item =>  %>
        <li><%= item %></li>
    <% ) %>
</ul>
`,  arr );

console.log(result);

6.3、ejs的条件渲染

const ejs = require(\'ejs\');
const fs = require(\'fs\');

let isTrue = false;

let result = ejs.render(`
    <% if (isTrue)  %>
        <span>主人</span>
    <%  else  %>
        其他人
    <%  %>
`,  isTrue );

console.log(result);

6.4、express中使用EJS

创建views文件夹，用于存放模板文件，后缀名是ejs。

views/home.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1><%= title %></h1>
</body>
</html>

index.js：

// 导入
const express = require(\'express\');
const path = require(\'path\');

// 创建应用对象
const app = express();
// 1、设置模板引擎
app.set(\'view engine\', \'ejs\'); 
// 2、设置模板引擎文件存放位置
app.set(\'views\', path.resolve(__dirname, \'./views\'));

// 创建路由
app.get(\'/home\', (req, res) => 
    let title = \'你好\';
    res.render(\'home\', title);
);

app.all(\'*\', (req, res) => 
    res.send(\'<h1>404 not found!</h1>\');
);

app.listen(9000, () => 
    console.log(\'端口监听中...\');
);

7、express-generator工具

通过应用生成工具express-generator可以快速创建一个应用的骨架，相当于脚手架。

可以通过npx（包含在Node.j
s8.2.0以及更高版本中）命令来运行Express应用程序生成器。

npx express-generator

对于较老版本的node，请通过npm将Express应用程序生成器安装到全局环境中使用：

npm install -g express-generator

express -e <项目名>，创建项目。

npm i 安装项目的依赖。

-h参数可以列出所有可用的命令行参数。

8、文件上传

使用formidable处理文件上传的请求。

npm i formidable

var express = require(\'express\');
var router = express.Router();
// 导入
const path = require(\'path\');
const formidable = require(\'formidable\');

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

// 显示网页的表单
router.get(\'/portrait\', (req, res) => 
  res.render(\'portrait\');
);

// 处理文件上传
router.post(\'/portrait\', (req, res) => 
  const form = formidable( 
    multiples: true,
    // 设置文件的保存目录
    uploadDir: path.resolve(__dirname, \'../public/images\'),
    // 保持文件后缀
    keepExtensions: true,
  );
  // 解析请求报文
  form.parse(req, (err, fields, files) => 
    if (err) 
      // next(err);
      console.log(err);
      return;
    
    console.log(fields); // text rdion checkbox select
    console.log(files); // file
    // 服务器保存该图片的访问URL
    let url  = \'/images/\' + files.portrait.newFilename; // 将来将此数据保存在数据库中
    res.send(url);
  );
);

module.exports = router;

使用express.js框架一步步实现基本应用以及构建可扩展的web应用

最近过年在家有点懈怠，但是自己也不断在学习新的前端技术，在家琢磨了express.js的web框架。

 

框架的作用就是提高开发效率，快速产出结果。即使不使用框架，我们也会在开发过程中逐渐形成构成框架。

 

大多数的node.js项目中都会用到express.js

 

目录：

一、什么是express.js框架

二、express.js是怎么工作的

三、expres.js的安装

四、express.js的脚手架

五、express.js的helloworld基本应用

 

一、什么是express.js框架？

Express.js框架是基于node.js的http模块和connect组件的web框架。Connect组件就是中间件，以约定大于配置原则作为开发理念。

 

如果使用核心的node.js模块来开发web应用，会发现很多的代码冗余，例如：

1、解析http请求消息

2、解析cookie

3、管理session

4、根据http请求的方法类型和url路径做路由解析

 

REST API服务包含两种路由方式，1、基于http请求类型；2、基于URL

开发人员不得不做很多繁琐的工作，需要做http请求方式，url路由解析，分析请求，响应数据等等。

 

Express.js很好的解决这些繁琐的工作，express.js框架提供了一个类似MVC的架构，，web应用提供了一个良好的结构(MVC)(模型，视图，路由)。

 

二、express.js是如何工作的？

Express.js是单入口的主文件启动。我们在node命令中启动这个文件。

这个文件中，以下事情：

1、引入第三方模块，比如控制器，公共模块，辅助模块和模型。

2、配置express.js，例如模板引擎

3、连接到数据库，mongoDB，redis，mysql

4、定义中间件

5、定义路由

6、启动应用

7、模块化输出应用

 

三、express.js的安装

Express包有两种形式：

1、express-generator：一个提供在命令行中快速搭建全局NPM包

2、express：一个在Node.js应用中的node_modules文件夹里的本地模块包

 

1、express.js生成器

以全局形式安装express.js生成器，命令行输入

npm install –g express-generator@4.0.0

 

2、本地expres.js

通过在命令行输入

mkdir 文件夹名

新建一个文件夹，这个文件夹名就是项目文件夹。

cd 文件夹名

打开该文件夹名。通过在命令行输入

npm init

创建package.json

 

最后通过npm安装模块，在命令行输入

npm install express@4.1.2 –save

 

四、express.js脚手架

具有基本的结构后，通过稳定的脚手架快速启动是非常有必要的，这就是为啥有那么多的不同类型的脚手架。

 

五、helloworld的web应用

不使用生成器，高级模块，中间件来搭建express.js的应用。

步骤：

1、创建文件夹

2、npm初始化和配置packag.json

3、依赖声明

4、app.js文件

5、结合jade

6、运行应用

 

1、创建文件夹

node_modules文件夹：express.js和第三方模块的依赖都在这个目录下

views文件夹：jade或者其他模板引擎文件

 

 

2、npm初始化和package.json

我们不用express.js生成器，手动创建一个express.js应用，npm是什么，npm是node.js 的包管理器，创建package.json文件是必须的。

（1）可以使用在命令行输入

npm init

输入完成之后就会生成一个package.json文件。

（2）也可以创建package.json文件的方式，写入或者复制粘贴package.json并运行。

package.json文件内容

{

"name": "express",

"version": "1.0.0",

"description": "" 

"main": "index.js",

"scripts": {

    "start": "node index.js"

  },

"dependencies":{

"express":"4.1.2"，

"jade":"1.3.1",

"mongoskin":"1.4.1",

"stylus":"0.44.0"

},

 "author": "",

"license": "ISC"

}

3、index.js文件

index.js文件内容

var express = require(\'express\');



var http = require(\'http\');

var path = require(\'path\');



var app = express();



app.set(\'port\', process.env.PORT || 3001);

app.set(\'views\', path.join(__dirname, \'views\'));

app.set(\'view engine\', \'jade\');





app.all(\'*\', function(req, res) {

  res.render(\'index\', {msg: \'Welcome to my coding life!\\n欢迎来到coding世界\'})

})

http.createServer(app).listen(app.get(\'port\'), function(){

  console.log(\'Express server listening on port \' + app.get(\'port\'));

});

 

 

4、jade模板

 

 

5、运行

在命令行输入

node index

效果图，如下图所示