express的使用(一)

因为有时候没有登录CSDN,所以弄了一个订阅号,会不定时的更新文章(其实就是在csdn这边发布了之后搬过去,不过有问题的可以留言,csdn不常上来看),欢迎订阅,补充一点,不需要收费的
文章链接:[订阅号-express的使用(一)]
------------------------------------------------------------------------------------

看前提示

本篇主要对于很小白的,废话很多

关于express

当使用Node.js进行开发,主要提供api服务的,轻便的,社区大,bug容易解决的,稳定的框架

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

环境准备

node.js   16.15
nodemon   2.0.22
express   4.18.2

最主要的服务是express提供的,而nodemon是我们不需要每次更改代码后都重新启动一次,所以使用nodemon提供热更新~为了教学简便,不使用ts,防止增加他人学习成本

快速使用

在package中编写我们的启动指令,个人习惯用dev,所以便用dev来作为启动的指令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"nodemon server.js"
  },

项目的入口文件,自然就是server.js了,在server.js中编写代码

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

app.get("/a", (req, res) => {
  console.log("开始调用a接口-1");
});
app.get("/a", (req, res) => {
    console.log("开始调用a接口-2");
  });
app.get("/b", (req, res) => {
  console.log("开始调用b接口");
});

app.listen(3000, () => {
  console.log("服务已启动");
});

运行结果如下,因为都是get请求,所以在浏览器中直接在地址栏中上依次输入以下的路径,即可在访问到我们的程序,也能在控制台中看到我们打印出来的日志

http://localhost:3000/a
http://localhost:3000/b

当然我这儿做了一个小测试,我们设置两个get都是请求a接口的时候,可以看到只打印了先注册的接口a-1,所以可以理解为在这种情况下,先注册的不会被后注册的代替

虽然app.listen以及app.get没有什么可讲的,但是依照惯例,对于初学者还是需要讲解下这两个。

  • app.get

express中对于指定的路径的get请求的监听

app.get(path, callback [, callback ...])

Routes HTTP GET requests to the specified path with the specified callback functions.

https://www.expressjs.com.cn/4x/api.html#express

既然监听了get请求,自然也有很常用的post/delete/put。不过就不一一测试了,相信我,后面的打工日子中,你多的是机会用到。

  • app.listen

对主机中的某个端口号进行监听

app.listen([port[, host[, backlog]]][, callback]) 

Binds and listens for connections on the specified host and port. This method is identical to Node’s http.Server.listen().

https://www.expressjs.com.cn/4x/api.html#express

路由模块

最简单的服务就这么启动了,但作为一个api服务,势必会有多个模块,不可能将全部的代码都堆在了我们的server.js中,也要提供一个路由模块,此时就需要用到express.Router了

  • 关于路由的描述

路由器对象是中间件和路由的一个独立实例。您可以将其视为一个“迷你应用程序”,只能执行中间件和路由功能。每个Express应用程序都有一个内置的应用程序路由器。路由器的行为就像中间件本身,所以你可以将其用作app.use()的参数,也可以用作另一个路由器的use()方法的参数。

顶级express对象有一个Router()方法,用于创建一个新的路由器对象。

一旦创建了路由器对象,就可以像应用程序一样向其添加中间件和HTTP方法路由(如get、put、post等)。

https://www.expressjs.com.cn/4x/api.html#router

假定现在情况是一个个人博客系统,那么我需要有一个博客模块,比如我根据id获取到博客的详情,外加一个用户模块,那么为了我们的模块能更加的清晰,就需要分别配置一个名为User以及blog的路由,分别提供这两个模块的访问,同时,用一个文件夹将两者包起来。那么,我们的项目结构会变成下面这种形式

而在其中的src/router/blog.js以及src/router/user.js则是编写我们的路由代码,举其中的user.js作为例子

const express = require("express");
const router = express.Router();

router.get("/getUserDetail", function (req, res, next) {
  console.log("获取用户的详情");
});

module.exports = {
  userRouter: router,
};

第二行中使用到了express.Router(),创建一个新的路由对象,监听了getUserDetail这个api,并将其导出去,在server.js中使用use方法进行合并(use方法在讲中间件的时候再说)

const express = require("express");const app = express();
const {blogRouter} = require("./src/router/blog");const {userRouter} = require("./src/router/user");
app.listen(3000, () => {  console.log("服务已启动");});app.use("/blog", blogRouter);
app.use("/user", userRouter);

在路由器中访问:

http://localhost:3000/user/getUserDetail

即可看到如下的效果

request与response

至此,一个最最简单,而且看起来勉强规范的express项目就理解了,但是还有一点,我们会在浏览器看到一直在转圈圈,这是因为我们没有返回到前端任何的数据,所以整个http的流程还没结束,在一个http请求中,我们需要关注的是Request以及Response。以下面的这个最简单的代码为例

router.get("/getUserDetail", function (req, res, next) {
  console.log("获取用户的详情");
});

既然提到了request 对象以及response对象,我们需要看下官网中对于这两个对象的描述

  • request对象

Request The req object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on.

根据文档,实际上就是http请求的request,那么。我们现在假定请求的链接为

http://localhost:3000/user/getUserDetail?id=1

当前的代码如下:

const express = require("express");
const router = express.Router();

router.get("/getUserDetail", function (req, res, next) {
  const { query = {}, method = "" } = req;
  console.log("req对象中的query是=========>");
  console.log(query);
  console.log("req对象中的methods是=========>");
  console.log(method);
});

module.exports = {
  userRouter: router,
};

打印出来的自然是:

这一块就没啥好说的了,对于http不怎么熟悉的。我之前的博客有相关的介绍,我觉得可以去看下。

  • response对象

Response The res object represents the HTTP response that an Express app sends when it gets an HTTP request.

根据文档,自然就是http请求中的response了,也就是我们用来返回给前端的信息。而在express的github的代码中,也有

 res.send('Hello World')

因此我们就大胆的加上去试试

router.get("/getUserDetail", function (req, res, next) {
  const { query = {}, method = "" } = req;
  console.log("req对象中的query是=========>");
  console.log(query);
  console.log("req对象中的methods是=========>");
  console.log(method);
  res.send('找不到这个用户');
});

效果图如下:

至此,最最基本的服务是完成了,也成功的返回给前端,由于这篇废话太多了,我就不继续了,五分钟的文章,是最好的。

备注

  • 请注意,这是一个后台项目,所以全程希望使用require做导入导出,你也不想项目一人用require,一人用import吧?(后续可以通过eslint来规范)

  • 文中的引用,尽可能的不改变文字,方便大家在文档中搜索

参考链接

https://github.com/expressjs/express [github-express]

https://www.expressjs.com.cn/4x/api.html#express [express4.x]

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值