首页 > 其他分享 >express框架的基本使用

express框架的基本使用

时间：2023-05-18 19:11:36浏览次数：33  
标签：基本 req const log 框架 res app express

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;

标签：基本,req,const,log,框架,res,app,express
From： https://www.cnblogs.com/luckest/p/17413056.html

相关文章

  • 数据结构-基本算法复习
    数据结构-基本算法复习第八章排序插入排序直接插入排序：\(O(n^2)\)稳定排序将一条记录插入到已经排序好的有序表中：voidinsertSort(intr[],intlen){for(inti=2;i<=len;i++){if(r[i]<r[i-1]){ intx=r[i];for(in......
  • Podman基本命令
      Podman是一个功能齐全的容器引擎，它是一个简单的无需守护的用来管理镜像、容器的工具。Podman提供了一个与DockerCLI兼容的操作方式，简单地说：aliasdocker=podman。大多数Podman命令都可以普通用户运行，而无需其他额外的权限。仓库=》镜像=》容器的关系：仓库：用来提供/存放镜像......
  • Vue框架中，何为渐进式框架？
    我的理解是:vue框架提供了不同层次的特性与功能，在使用过程中丰俭由人，既可以只使用核心特性，又可以使用高级特性及第三方功能。核心：数据驱动(视图的内容随着数据的改变而改变)组件化(可以增加代码的复用性,可维护）无论再怎么灵活，Vue的核心知识在所有这些用例中都是通用的。......
  • 三分钟挖掘快速软件开发框架提高办公效率的秘诀
    在科技日新月异的当今社会，学会利用快速软件开发框架，可以给企业带来更大的便利和市场价值。因为它拥有可视化设计、灵活简便、易操作、易上手等优势特点，在助推企业实现数字化转型的过程中有着举足轻重的作用。那么，快速软件开发框架是如何帮助企业提质增效的？又拥有哪些特点？今天，一文......
  • python之基本数据类型
    搭建python环境python中的基本数据类型:1.表达式1.1表达式的概念：1.1.1表达式，是由数字、算符、数字分组符号(括号)、自由变量和约束变量等以求得数值的有意义排列方法所得的组合1.2表达式的特点：1.2.1表达式一般仅仅用于计算一些结果，不会对程序产生实质性的影响1.2.2如果在交互模式......
  • 开源即时通讯IM框架MobileIMSDK的Uniapp端开发快速入门
    ► 相关链接：① MobileIMSDK-Uniapp端的详细介绍② MobileIMSDK-Uniapp端的开发手册new（* 精编PDF版）一、理论知识准备您需要对Uniapp和Vue开发有所了解：1）Uniapp官方入门教程2）可能是最好的uniapp入门教程3）Uniapp官方Vue快速入门教程您需要对WebSocket技术有所了......
  • spring框架_常见工厂后处理器
    ConfigurationClassPostProcessor:用于解析@ComponentScan@Bean@Import@ImportResourceMapperSacnnerConfigurer:相当于Mybatis的@MapperScanner用于解析被标注的@Mapper接口@mapper注解的解析：@mapper注解是mybatis提供的，用于标明一个接口，spring自然无法管理接口，要将这......
  • Python程序与用户交互&基本运算符
    一、用户交互1.输入input:关键字:input()-输入在python3中input关键字会等待用户的输入,用户输入任何内容，都存成字符串类型，然后赋值给等号左边的变量名在python2中存在一个raw_input功能与python3中的input功能一模一样在python2中还存在一个input功能，需要用户输入一个明......
  • 初识Bootstrap框架
    title:初识Bootstrap框架abbrlink:22186date:2022-03-0511:37:22tags:Bootstrap框架Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。框架下载Bootstrap中文网引用<metaname="view......
  • hexo-快速、简洁且高效的博客框架
    title:hexo快速、简洁且高效的博客框架abbrlink:38713date:2022-03-0220:30:40tags:Hexo博客框架官方地址：安装代码：npminstallhexo-cli-ghexoinitblogcdblognpminstallhexoserverhexothemeyun食用方法Inyourhexofolder：npminstallhexo-......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99