Express快速开发

知识导航:

  1. express初体验
  2. use中间件的使用
  3. get 参数获取
  4. post参数获取
  5. 路由参数设置与获取
  6. 错误中间件
  7. 开放静态资源

基于 Node.js 平台,快速、开放、极简的 Web 开发框架

1. express初体验

利用express创建服务器。

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

// 路由写法初体验
app.get("/", (req, res) => {

    res.send("你好express");
});



app.listen(3000);
console.log("服务器已经打开");

浏览器端:
在这里插入图片描述
可以看到与原生的node相比,这里是简化了很多。
在原生的node中要对客户端做出相应,还是设置响应头的一些信息,响应类型字符编码等等。
而express的一个send()方法就全部ok了,

下面让我们看看send()的背后帮我们做了哪些事情吧

  • 自动检测响应内容的类型
  • 帮助我们自动写好响应头的文档类型,字符编码,状态码等

2. use中间件的使用

中间件的概念通俗来讲,就是A要找B通信,但是它不会真找到B。它只能通过一个中间人,由中间人对它的诉求做出处理帮助他与B通信
如下图
在这里插入图片描述
然后便实现了A与B的通信。不过这个转线员的权利是非常大的。作为中间人它可以选择为A转接,但是也是做别的处理

初体验:

const express = require("express");
const app = express();
// app.use的用法
// 只写处理方法表示匹配所有链接
app.use((req, res, next) => {
    console.log("第一个use执行了");
    next();

})
app.listen(3000);
console.log("服务器启动成功");

这里的app.use(),参数里面只有一个处理参数表示它可以对从客户端来的所有链接请求作出处理。当处理函数中你的next()方法被执行之后此次拦截处理便可结束。(ps:当然你不用next(),直接app.send()对客户端作出响应也可以根据你的需要。next()之后是跳到了下个中间件)

如:在上面app.use(),下面我再加一个中间件

给use添加一个路由地址参数,它会拦截客户端发过来的`网站/index`的请求,无论是get还是post方式过来的
app.use("/index", (req, res, next) => {
    
    res.send("欢迎来到主页");

});

3. get 参数获取

通过get方式过来的数据会放到中间件处理函数的请求req的query属性里面。并且该数据是对象格式喔

示例:

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


app.get("/index", (req, res, next) => {
	//我先接获取的参数返回到客户端
    res.send(req.query);
});


app.listen(3000);
console.log("服务启动");

返回到客户端的结果:
在这里插入图片描述

4. post参数获取

post参数的获取需要借助一个第三方模块body-parser
安装命令:npm install body-parser
使用它之前,先要拦截客户端的所有链接调用body-parser这个模块中的urlencoded方法进行一些配置。主要目的就是包装传过来的以POST方式提交的数据

const express = require("express");
const bodyParset = require("body-parser");
const app = express();
app.use(bodyParset.urlencoded({ extended: false }));
app.post("/index", (req, res) => {
    res.send(req.body);
});

app.listen(3000);
console.log("服务启动");

5. 路由参数设置与获取

我们中间件的路由还可以这样写:

app.get("/index/:uname/:age", (req, res) => {
    res.send(req.params);
})

它表示:你要匹配这个路由。你就必须得传递路由中规定的参数
在这里插入图片描述
客户端链接和输出

6. 错误中间件

初体验

我拦截一个请求,给他写的处理函数中故意扔出去一个错。它会被use处理,错误信息会存在use处理函数的err的message中

const express = require("express");
const app = express();
app.get("/index", (req, res) => {
    throw new Error("程序发生了未知错误");

});
app.use((err, req, res, next) => {
    res.status(500).send(err.message);
});

app.listen(3000);

console.log("服务器启动成功");

在这里插入图片描述

非程序错误处理

什么叫非程序错误呢?意思是说我的代码是没有问题的,但是我有一个读操作。读文件的时候并没有那个文件

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

app.get("/index", (req, res, next) => {
    fs.readFile("./demo.text", "utf8", (err, doc) => {
        if (err != null) {
            next(err);
        } else {
            res.send(doc);
        }
    });
});
app.use((err, req, res, next) => {
    res.send(err.message);
});

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

结果:
在这里插入图片描述

程序错误

就是代码写的有bug

const express = require("express");
const app = express();
app.get("/index", async(req, res, next) => {
    try {
        console.log(a);
    } catch (error) {
        next(error);
    }
    res.send();
});

app.use((err, req, res, next) => {
    res.send(err.message);
});
app.listen(3000);
console.log("服务器启动成功");

7. 开放静态资源

在服务器端我有要开放一些静态文件的,以保障我们前台页面的css,js,图片等资源可以获取到

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

app.use(express.static(path.join(__dirname, "public")));//这个静态文件地址要写成绝对路径喔。即这里我把public这个文件开放了出去。客户端是可以获取的


app.listen(3000);
console.log("服务启动");

前台获取示例:(ps:我public文件下只放了一个名叫30.png的图片)
在这里插入图片描述

发布了68 篇原创文章 · 获赞 82 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_41086511/article/details/104470023
今日推荐