Express框架、路由

最新推荐文章于 2023-05-09 10:17:32 发布

爱敲代码的狼仔

最新推荐文章于 2023-05-09 10:17:32 发布

阅读量168

点赞数

文章标签： nodejs

本文链接：https://blog.csdn.net/qq_48469083/article/details/120441403

版权

怎样创建项目自己的package.json文件？【重点】

在项目根目录中执行下面的命令：

npm init [-y]

为什么要创建项目自己的package.json文件？

package.json文件中会记录项目的基本信息，比如：项目名称、关键词、作者、入口文件等，同时还会记录当前项目依赖了哪些第三方包，当我们把项目发给别人之前或上传到外网服务器之前可以把所有第三方都删除，这样传输速度会变快，当别人拿到我们的项目或把项目传到外网服务器之后再使用npm i/install 命令会项目依赖的所有第三方再安装上。

一、简介

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

官网地址：Express - Node.js web application framework

中文地址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

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

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

二、安装及基本使用

2.1 初始化项目并安装express

在项目根目录中安装express: npm i express

2.2 初体验：express创建web服务器

//引入express  
const express = require('express');
// console.log(express);
//创建应用
const app = express();
// console.log(app);

//监听端口：app.listen()
app.listen(3000, () => {
    console.log('服务运行在3000端口');
});

2.3 app对象

注意：所有路径必须以/斜杠开头

以get方式发送请求的有：在浏览器地址栏中、a标签中的超链接、js代码中的location.href跳转、form表单中的method='get'

get与post的区别？

get是显式提交，对参数大小有限制；

post是隐式提交，对参数大小没有限制；

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

用来匹配以get方式发送过来的请求。

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

用来匹配以post方式发送过来的请求

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

用来匹配所有请求方式发送过来的请求

2.4 response对象

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

res.send()方法相当于原生nodejs中的res.setHead()及res.end();

注意：res.send()同时执行一次，否则会报错： Cannot set headers after they are sent to the client

2.4.2 res.sendFile( absolute filepath )

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

//引入express  
const express = require('express');
const fs = require('fs');
const path = require('path');
// console.log(express);
//创建应用
const app = express();
// console.log(app);

//监听端口：app.listen()
app.listen(3000, () => {
    console.log('服务运行在3000端口');
});


//设计路由的第一种方式：
//app对象上的常用方法有：app.get()、app.post()、app.all()

// app.get('/路径',回调函数)

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

//     res.send('all()方法 ');
// });

//显示注册新用户的界面：
app.get('/zhuce', (req, res) => {
    console.log(path.join(__dirname, 'login.html'));

    //读取文件内容：fs.readFileSync()  
    // let content = fs.readFileSync(path.join(__dirname, 'login.html'));
    // // console.log(content.toString(), 999);
    // res.write(content);
    // res.end();


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

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


    // res.send('这是首页面');
    res.send({ "code": 200, "msg": "请求成功 ", data: [] });
});

//测试post方式：
app.post('/mydemo', (req, res) => {

    res.send('post请求方式');
});

//老师界面：
app.get('/teacher', (req, res) => {


    //注意：res.send()同时执行一次，否则会报错： Cannot set headers after they are sent to the client

    // console.log(req, res, 888);
    // res.send('ok');

    res.send('你好，客户端'); //res.send()方法相当于原生nodejs中的res.setHead()及res.end();
});

//学生界面
app.get('/student', (req, res) => {

    res.setHeader('content-type', 'text/html;charset=utf-8');
    res.end('这是学生界面。。。');
});


//404错误处理
app.all('*', (req, res) => {
    res.send('404错误。。。');
});

<!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>
    <h3>注册新用户</h3>
    <form action="">
        <div>帐号：<input type="text" name="user"></div>
        <div>密码：<input type="password" name="pwd"></div>
        <div>密码：<input type="password" name="repwd"></div>
        <div><input type="submit" value="注册"></div>
    </form>
</body>

</html>

2.5 request对象

2.5.1 req.query

用来接收get方式的查询字符串格式发送的参数，查询字符串格式的参数如下：

http://localhost:3003/zhuce_act?user=lisi&pwd=123&repwd=123

2.5.2 req.params

用来接收get方式的path路径格式发送的参数，path路径格式的参数如下：

http://localhost:3003/zhuce_act/lisi/123/123

专业名称：动态路径（路由）

第一步：设计路由中的路径，将路由中路径的动态部分改成如下格式：

//接收get方式的path路径格式发送的参数：
app.get('/demo/:uname/:age', (req, res) => {


    res.send(`OK:${uname} ${age}`);
});

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

//接收get方式的path路径格式发送的参数：
app.get('/demo/:uname/:age', (req, res) => {

    console.log(req.params);
    let { uname = '', age = '' } = req.params;
    res.send(`OK:${uname} ${age}`);
});

<!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>
    <div><a href="/demo/zhangsan/20">get方式的path路径格式传参</a></div>
</body>

</html>

三、工具的使用

3.1 nodemon热更新工具

nodemon用来解决当服务端的代码有变化时不需要以手动方式频繁停止、运行我们程序。

第一步：安装nodemon npm i nodemon -g

第二步：以热更新方式运行程序： nodemon 程序文件名

3.2 Rest Client插件

Rest Client插件用来模块http协议中的各种请求方式(get/post)来发送请求。

第一步：在vscode中安装rest client插件

第二步：新建以.http结尾的文件，文件内容格式如下：

POST http://localhost:3003/mydemo HTTP/1.1


###

GET http://localhost:3003/zhuce_act?user=demo&pwd=456&repwd=789 HTTP/1.1

###
GET http://localhost:3003/demo/xiaoming/22 HTTP/1.1

四、路由

4.1 路由概述

4.1.1 什么是路由？

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

广义上来讲，路由就是映射关系。对于我们网络请求中的路由是：每一次请求对应每一个请求处理的函数。

4.1.2 现实中的路由

4.1.3 路由的作用

4.2 Express中的路由（Node的路由）

语法：

app.method( path,callback )

参数说明：

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

path：代表请求路径

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

4.2.1 匹配流程

4.3 express.Router 模块化路由

爱敲代码的狼仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Express框架、路由

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

扫一扫