学服务端（express框架）的第7天

最新推荐文章于 2023-09-04 23:16:39 发布

回忆见、

最新推荐文章于 2023-09-04 23:16:39 发布

阅读量193

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_48764743/article/details/120441439

版权

get 与 post 的区别？

get 是显式提交，相对不安全， get 提交的参数有大小限制；

post 是隐式提交，相对安全，没大小限制；

API:Application Programming Interface ，应用程序接口

一、简介

Express 是基于基于 Nodejs 平台，快速、开放、极简的 Web 开发框架【后端开发框架】。

官网地址： https://www.expressjs.com.cn/

http://expressjs.com/

作用：使用 Express ，我们可以方便、快速的创建 Web 网站的服务器或 API 接口 ( 纯 json 数据 ) 的服务

器。

本质上： express 是一个第三方包存在于 npm 社区中。

注意：

1) 、以 get 方式发送请求的有：在浏览器地址栏中、 form 表单默认提交方式或 method='get' 、、

location.href='/'

2) 、以 post 方式发送请求的有： form 表单中的 method='post'

二、安装及基本使用

1. 初始化项目并安装 express 【重点】

注意：在项目根目录中安装 express

2. 初体验： express 创建 web 服务器

内容： Express 框架开发

日期： xx-xx-xx

npm i express 3. app 对象【重点】

注意：所有的路径都是以 / 斜杠开头

app.get( 路径 , 兼听函数 )

匹配 get 方式发送的请求

app.post( 路径 , 兼听函数 )

匹配 post 方式发送的请求

app.all( 路径 , 兼听函数 )

匹配所有请求方式发送的请求

// 引入 express

const express = require ( 'express' );

// console.log(express);

// 创建应用：

const app = express ();

// 监听端口

app . listen ( 3000 , () => {

console . log ( '3000 端口 ' );

});

// 引入 express

const express = require ( 'express' );

// console.log(express);

// 创建应用：

const app = express ();

// 监听端口

app . listen ( 3000 , () => {

console . log ( '3000 端口 ' );

});

//app 对象中的方法： app.get() 、 app.post() 、 app.all()

//app.get( 路径 , 回调方法 ): 匹配 get 方式发送的请求

//app.post( 路径 , 回调方法 ) ：匹配 post 方式发送的请求

// 注意：所有路径都是以 / 开头

// 以 get 方式发送请求的有：在浏览器地址栏中、 form 表单默认提交方式或 method='get' 、 <a

href="/list"></a> 、 location.href='/'

// 以 post 方式发送请求的有： form 表单中的 method='post'

// app.all('/demo', (req, res) => {

// res.send('all() 方法 '); 4. response 对象

res.send( 字符串 | 对象 ) 。

// });

// 测试 app.post() 方法

app . post ( '/demo' , ( req , res ) => {

res . send ( 'app.post() 方法 ' );

});

// 首页面

app . get ( '/' , ( req , res ) => {

res . end ( 'index page...' );

});

// 处理注册新用户

app . get ( '/zhuce' , function ( req , res ) {

res . end ( 'hello' );

});

// 处理用户登录：

app . get ( '/login' , ( req , res ) => {

// // 设置响应的头信息：

// res.setHeader('content-type', 'text/html;charset=utf-8');

// res.end(' 处理登录 ');

res . send ( ' 用户登录 ...' );

});

//404 错误：

app . all ( '*' , ( req , res ) => {

res . send ( `404 错误 ` );

});

// 引入 express

const express = require ( 'express' );

// console.log(express);

// 创建应用：

const app = express ();

// 监听端口

app . listen ( 3000 , () => {

console . log ( '3000 端口 ' );

}); res.sendFile( absolute filepath )

将某个文件内容读取出来并作为响应返回给客户端

5.get 方式发送参数的写法有两种：【重点】

// 测试 app.post() 方法

app . post ( '/demo' , ( req , res ) => {

// res.send('app.post() 方法 ');

// let obj = { "usr": "lisi", "tel": 110 };

let obj = [{ "usr" : "lisi" , "tel" : 110 }, { "usr" : "zhangsan" , "tel" : 119

}];

res . send ( obj );

});

// 处理用户登录：

app . get ( '/login' , ( req , res ) => {

// // 设置响应的头信息：

// res.setHeader('content-type', 'text/html;charset=utf-8');

// res.end(' 处理登录 ');

res . send ( ' 用户登录 ...' );

});

const express = require ( 'express' ); //can't find module 'express' ，没有安装 express

const app = express ();

const fs = require ( 'fs' );

const path = require ( 'path' );

app . listen ( 80 , () => {

console . log ( '80 端口 ' );

});

// 显示注册新用户的界面

// app.get('/register.html', (req, res) => {

app . get ( '/register' , ( req , res ) => {

// // 读取 register.html 文件内容

// let contents = fs.readFileSync(path.join(__dirname, 'zhuce.html'), {

encoding: 'utf-8' });

// // console.log(contents);

// res.send(contents);

res . sendFile ( path . join ( __dirname , 'zhuce.html' ));

}); 1) 、查询字符串格式：

比如： http://localhost:3000/register?uname=lisi&pwd=123&pwd2=123

2) 、 path 路径格式：

比如： http://localhost:3000/register/ 参数 1/ 参数 2/ 参数 3

6. request 对象【重点】

req.query

接收 get 方式的查询字符串格式发送的参数

const express = require ( 'express' ); //can't find module 'express' ，没有安装 express

const app = express ();

const fs = require ( 'fs' );

const path = require ( 'path' );

app . listen ( 80 , () => {

console . log ( '80 端口 ' );

});

// 显示注册新用户的界面

// app.get('/register.html', (req, res) => {

app . get ( '/register' , ( req , res ) => {

// // 读取 register.html 文件内容

// let contents = fs.readFileSync(path.join(__dirname, 'zhuce.html'), {

encoding: 'utf-8' });

// // console.log(contents);

// res.send(contents);

res . sendFile ( path . join ( __dirname , 'zhuce.html' ));

});

// 处理用户注册

app . get ( '/zhuce' , ( req , res ) => {

// console.log(req.query);

// let obj = req.query;

// res.send(`${obj.usr} ${obj.pwd} ${obj.pwd2}`)

// 对象的解构赋值

//req.query 接收 get 方式的查询字符串格式发送的参数

let { usr = '' , pwd = '' , pwd2 = '' } = req . query ;

// 判断两次密码是否一致

if ( pwd != pwd2 ) {

res . send ( `<script>alert(' 两次密码不一致 ');location.href='/register';

</script>` );

return ; // 后面的代码不执行了

}

res . send ( `${ usr } ${ pwd } ${ pwd2 }` ); zhuce.html 页面的代码如下：

req.params

接收 get 方式的 path 路径格式发送的参数：

第一步 ： app.get() 方法中的路径，将路径中的动态参数部分使用冒号来命令，如：

第二步 ：使用 req.params 来接收 get 方式 path 路径格式发送的参数

});

<!DOCTYPE html>

<head>

<title> Document </title>

</head>

<body>

<div><a href = "/zheceact/zhangsan/456/789" > get 的 path 路径格式发送参数 </a></div>

</form>

</body>

</html>

app . get ( '/zheceact/:uname/:pass/:pass2' , ( req , res ) => {

});

const express = require ( 'express' ); //can't find module 'express' ，没有安装 express

const app = express ();

const fs = require ( 'fs' );

const path = require ( 'path' );

app . listen ( 80 , () => {

console . log ( '80 端口 ' );

});

// 显示注册新用户的界面

// app.get('/register.html', (req, res) => {

app . get ( '/register' , ( req , res ) => {

// // 读取 register.html 文件内容 三、工具的使用

vscode 的插件 Rest Client

模拟 http 协议的请求方式发送请求给服务器。

当安装完这个插件 Rest Client 后，新建一个以 .http 结尾的文件，文件内容如下：

四、路由

1. 路由概述

什么是路由？

根据请求中的不同 path 路径返回不同的响应。

现实中的路由

// let contents = fs.readFileSync(path.join(__dirname, 'zhuce.html'), {

encoding: 'utf-8' });

// // console.log(contents);

// res.send(contents);

res . sendFile ( path . join ( __dirname , 'zhuce.html' ));

});

app . get ( '/zheceact/:uname/:pass/:pass2' , ( req , res ) => {

console . log ( req . params );

let { uname , pass , pass2 } = req . params ;

res . send ( `${ uname } ${ pass } ${ pass2 }` );

});

POST http : //localhost:3000/demo HTTP/1.1

###

GET http : //localhost:3000/zhuce HTTP/1.1 路由的作用

根据请求中的不同路径来区分不同的功能，最终返回给用户的响应也不一样。、

express 中的路由写法有两种： 【重点】

第一种 ： app 级别路由： app.method(path,callback) ，也就是：

app.get() 、 app.post() 、 app.all()

第二种 ：模块化路由：

2. Express 中的路由（ Node 的路由）【重点】

语法：

app . method ( path , callback ) 参数说明：

method ：代表请求方式，比如 get ， post 、 all

path ：代表请求路径

callback ：代表回调函数，用户请求匹配到路由以后要做的事情。

匹配流程：

const express = require ( 'express' ); //can't find module 'express' ，没有安装 express

const app = express ();

// const fs = require('fs');

const path = require ( 'path' );

app . listen ( 80 , () => {

console . log ( '80 端口 ' );

});

// 显示注册新用户的界面

app . get ( '/register/' , ( req , res ) => {

// res.send(' 注册界面 ');

res . sendFile ( path . join ( __dirname , 'zhuce.html' ));

})

// 处理注册用户表单

app . get ( '/zhuce' , ( req , res ) => {

let { usr , pwd , pwd2 } = req . query ;

res . send ( ` 处理注册表单 : ${ usr } ${ pwd } ${ pwd2 }` );

});

// 接收 get 方式的 path 路径格式发送的参数

app . get ( '/zheceact/:x/:y/:m' , ( req , res ) => {

console . log ( req . params );

let { x , y , m } = req . params

res . send ( `path 路径 :${ x } ${ y } ${ m }` );

}); 3. express.Router 模块化路由【重点】

为什么要使用模块路由？

如果采用 app 级别的路由来设计路由则会把所有路由都写在一个文件中，这样的话后期维护起来不方

便，因些采用模块化路由来设计我们的路由。

第一步 ：设计模块化路由：

express 模块化路由语法 ： router.get(' 路径 ', 回调方法 )

router.post(' 路径 ', 回调方法 )

router.all(' 路径 ', 回调方法 )

模块化路由文件 users.js 代码如下：

// 采用模块化路由设计路由：

const express = require ( 'express' );

let router = express . Router ();

// 设计路由： router.get(' 路径 ', 回调方法 ) 、 router.post(' 路径 ', 回调方法 ) 、 router.all(' 路

径 ', 回调方法 )

// 显示登录界面：

router . get ( '/' , ( req , res ) => {

res . send ( ' 登录界面 ' );

});

// 显示注册界面：

router . get ( '/login' , ( req , res ) => { res . send ( ' 注册界面 ' );

});

// 用户个人中心：

router . get ( '/person' , ( req , res ) => {

res . send ( ' 用户个人中心 ' );

});

// 暴露：

module . exports = router ;

第二步 ：使用模块化路由：

使用模块化路由的语法 ： app.use([' 路径 ',] 方法 )

使用上面定义好的模块化路由文件 users.js ，代码如下：

const express = require ( 'express' ); //can't find module 'express' ，没有安装 express

const app = express ();

const fs = require ( 'fs' );

const path = require ( 'path' );

app . listen ( 4000 , () => {

console . log ( '4000 端口 ' );

});

// 引入自定义的模块化路由文件：

let uRouter = require ( './users.js' );

// 使用模块化路由： app.use([' 路径 ',] 方法 )

app . use ( uRouter );

回忆见、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学服务端（express框架）的第7天

get与post的区别？ get是显式提交，相对不安全，get提交的参数有大小限制； post是隐式提交，相对安全，没大小限制； API:Application Programming Interface，应用程序接口一、简介 Express是基于基于 Nodejs平台，快速、开放、极简的 Web 开发框架【后端开发框架】。官网地址：https://www.expressjs.com.cn/ http://expressjs.com/ 作用：使用 Express，我们可以
复制链接

扫一扫