Node框架Express

其他 2020-04-10 16:10:47 阅读次数: 0

Express

  • Express框架是什么
    Express是基于Node平台的web应用开发框架，他提供了一系列强大特性，帮助你创建各种web应用（可通过npm install express命令进行下载）
  • Express框架特性
    （1）提供方便简洁的路由定义方式
    （2）对获取的HTTP请求参数进行简化处理
    （3）对模板引擎支持程度高，方便渲染动态HTML页面
    （4）提供中间件有效机制控制HTTP请求
    （5）拥有大量第三方中间件对功能进行扩展
    （6）封装了方法（访问不到时有页面提示）
    好了 不装了，又来记笔记了
  • 初识Express框架
//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

app.get('/', (req, res) => {
    //cwen send()
    //1,send方法内部会检测相应内容类型
    //2,send方法会自动设置http状态码
    //3,send方法帮我们自动设置响应的内容类型及编码
    res.send('hello express');
});
app.get('/list', (req, res) => {
    res.send({ name: '张三', age: 20 });
})

//监听端口
app.listen(3000);
console.log('服务器启动成功，端口3000');
  • Express中间件
    （1）中间件概念
const express = require('express');
const app = express();

//中间件
app.get('/request', (req, res, next) => {
    req.name = '张三';
    next();
});
app.get('/request', (req, res) => {
    res.send(req.name);
});

app.listen(3000);
console.log('服务器启动成功，端口3000');

（2）中间件app.use用法

const express = require('express');
const app = express();


// cwen app.use中间件接收所有请求方式
app.use((req, res, next) => {
    console.log('经过中间件app.use');
    next();
});
//cwen第一个参数可以传入地址，代表不论是什么请求方式，只要是这个地址就接受这个请求
app.use('/index', (req, res, next) => {
    console.log('经过index中间件');
    next();
})
app.get('/index', (req, res) => {
    res.send('index')
});
app.get('/request', (req, res, next) => {
    req.name = '张三';
    next();
});
app.get('/request', (req, res) => {
    res.send(req.name)
});

app.listen(3000);
console.log('服务器启动成功，端口号3000');

（3）中间件app.use应用

const express = require('express');
const app = express();

//cwen网站维护公告
// app.use((req, res, next) => {
//     console.log('本网站正在维修，已经停运');
// });


//cwen应用路由保护
app.use('/cwen', (req, res, next) => {
    let itis = true;
    if (itis) {
        next();
    } else {
        console.log('无法访问cwen');
    }
});

app.get('/cwen', (req, res) => {
    res.send('cwen');
});

//cwen定义404
app.use((req, res, next) => {
    res.status(404).send('当前访问不存在');
});

app.listen(3000);
console.log('服务器搭建成功，端口3000');

（4）错误处理中间件

const express = require('express');
const fs = require('fs');
const app = express();


app.get('/index', (req, res, next) => {
    //cwen同步代码捕获错误
    // throw new Error('服务器出现未知错误');
    //cwen异步api错误处理(手动触发错误中间件)
    fs.readFile('./文件清单.js', 'utf8', (err, doc) => {
        if (err != null) {
            res.send(err);
            next();
        } else {
            res.send(doc);
        }
    });
});

//cwen错误处理中间件
app.use((err, req, res, next) => {
    //错误对象后面加message
    res.status(500).send(err.message);
});


app.listen(3000);
console.log('服务器启动成功端口3000');

（5）异步函数错误捕获中间件(系统自动提示无法找到要读取文件)

const express = require('express');
const fs = require('fs');
// cwen读取文件api默认不支持异步函数，调用方法包装支持
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);
const app = express();

app.get('/cwen', async(req, res, next) => {
    //try{}catch(){}可以捕获同步代码错误，异步函数的错误，无法捕获其他类型的错误（回调函数等）。
    try {
        await readFile('aaa.js');
    } catch (ex) {
        next(ex);
    }
});

//错误处理中间件
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
});

//cwen错误抛出且不影响其他部分执行


app.listen(3000);
console.log('服务器启动成功端口3000');
  • Express请求处理
    （1）构建模块化路由基础
//cwen构建模块化路由
//引入express框架
const express = require('express');
const app = express();
//创建路由对象
const home = express.Router();
//将路由与请求对象进行匹配
app.use('/home', home);
//在home路由下创建二级路由
//cwen客户访问时需要加上一级路由地址及二级路由地址
home.get('/index', (req, res) => {
    res.send('欢迎进入');
});

app.listen(3000);

（2）构建模块化路由
1）启动服务器代码

const express = require('express');
const app = express();

const home = require('./router/home.js');
const admin = require('./router/admin.js');

app.use('/home', home);
app.use('/admin', admin);

app.listen(3000);

2）新建同级目录下文件夹，命名为router（路由）
home.js

const express = require('express');
const home = express.Router();

home.get('/home', (req, res) => {
    res.send('欢迎进入home');
});
module.exports = home;

admin.js

const express = require('express');
const admin = express.Router();

admin.get('/admin', (req, res) => {
    res.send('欢迎进入admin');
});
module.exports = admin;

(3)express框架获取get请求方式

const express = require('express');
const app = express();

app.get('/index', (req, res) => {
    //获取get请求参数
    res.send(req.query);
});

app.listen(3000);

(4)express第三方模块body-parser获取post请求参数
1）服务器端

//获取post请求参数
const express = require('express');
const bodyParser = require('body-parser');
//搭建服务器
const app = express();

//中间件拦截请求信息
//extended:false 方法内部使用querystring模块处理请求参数格式（推荐）
//extended：true 方法内部使用第三方模块qs处理请求参数格式
//此处中间件解释见下一个js
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/index', (req, res) => {
    //返回post请求参数
    res.send(req.body);
});


app.listen(3000);

2）HTML端（form）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http://localhost:3000/index" method="POST">
        <input type="text" name="name"><br>
        <input type="text" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

(5)app.use方法(中间件)

const express = require('express');
const app = express();
//app.use传递方法的调用
app.use(fn({ a: 1 }));

function fn(obj) {
    return function(req, res, next) {
        if (obj.a == 1) {
            console.log(req.url);
        } else {
            console.log(req.method);
        }
        //交出控制权
        next();
    }
}


app.get('/index', (req, res) => {
    res.send('ok');
});

app.listen(3000);

（6）Express框架传递及获取get参数的另一种方式

const express = require('express');
const app = express();

app.get('/index/:id/:name/:password', (req, res) => {
    res.send(req.params);
});

app.listen(3000);

（7）Express框架提供静态资源访问（public文件夹）

const express = require('express');
const path = require('path');
const app = express();

//建议写绝对路径
//express静态资源访问
app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000);

（8）Express框架模板引擎
1）服务器端：

const express = require('express');
const path = require('path');
const app = express();

//1,告诉express框架使用什么模板引擎渲染什么后缀的模板文档
//(1)模板后缀
//(2)适应的模板引擎
app.engine('art', require('express-art-template'));
//2,告诉express框架模板存放的位置
//第一个views是固定的（告诉express框架模板存放的位置）,第二个views是文件夹名称
app.set('views', path.join(__dirname, 'views'));
//3,告诉express框架模板默认后缀是什么
app.set('view engine', 'art');


app.get('/index', (req, res) => {
    //express框架提供了render()方法，用于渲染
    //render所做的事（1），拼接末班路径（2）拼接模板后缀（3）哪一个模板和哪一个数据进行拼接（4）拼接结果响应给客户端
    res.render('index.art', {
        msg: 'message'
    });
});

app.get('/list', (req, res) => {
    res.render('list', {
        msg: 'hello word'
    });
});


app.listen(3000);

2）模板代码（location：同级目录views下）
index.art

{{ msg }}

<ul>
	{{each users}}
	<li>
		{{$value.name}}
		{{$value.age}}
	</li>
	{{/each}}
</ul>

list.art

{{msg}}

<ul>
	{{each users}}
	<li>
		{{$value.name}}
		{{$value.age}}
	</li>
	{{/each}}
</ul>

(9)Express框架中将变量设置到app.locals对象下面，这个数据在所有模板中都可以获取到（结合第8点）

const express = require('express');
const app = express();
const path = require('path');

app.engine('art', require('express-art-template'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'art');

//cwen这个数据在所有的模板中都可以获得
app.locals.users = [{
    name: '张三',
    age: 4
}, {
    name: '李四',
    age: 45
}]


app.get('/index', (req, res) => {
    res.render('index', {
        msg: '首页'
    });
});

app.get('/list', (req, res) => {
    res.render('list', {
        msg: '列表页'
    });
});


app.listen(3000);

OVER：奥利给

前端渣渣辉
发布了4 篇原创文章 · 获赞 4 · 访问量 95
私信 关注

猜你喜欢

转载自blog.csdn.net/cwq521o/article/details/105434017
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022