NodeJs之http模块(二)

114 阅读2分钟

本文所有内容均来自尚硅谷免费课程中李强老师的教学,如侵联删,李强老师的教学地址如下:尚硅谷2023版Node.js零基础视频教程,nodejs新手到高手_哔哩哔哩_bilibili

http基础知识

image.png

image.png

image.png

image.png

创建Http服务

注:这里就是后端的核心知识啦,我们可以通过http建立一个自己的服务器端口,设置路由路径并设置返回的内容哦~

案例

// 导入http模块
const http = require('http');
// 创建服务对象
const server = http.createServer((request, response) => {
  // 首先得到获取请求的方法
  let { method } = request;
  // 获取请求的URL路径
  let { pathname } = new URL(request.url, "http://127.0.0.1:1000");
  response.setHeader("content-type", "text/html;charset=utf-8");
  // 进行判断
  if ((method = "GET" && pathname === "/login")) {
    response.end("登录");
  }
});

// 监听端口,启动服务

server.listen(1000, () => {
  console.log("服务已经启动,端口号为:1000");
});

image.png

网站资源的加载过程

案例

我们写一个网页,右键打开html,看下到底浏览器发送了几次请求 我们发现,浏览器发了六次请求

  • 其中ico请求是浏览器寻找图标的请求

  • wc是vscode可以自动刷新的请求

  • index.html是获取html的请求并将其解析到页面上

  • 在解析的过程中,发现html又引入了css,img,index.js,因此就会继续发送请求进行获取

这表明了网页加载资源是循序渐进进行加载的

image.png

image.png

image.png

静态资源和动态资源

搭建静态资源

node 热更新

由于每次修改内容之后,都需要重启一下node,这十分麻烦,因此我们可以使用node的热更新

image.png

image.png

express框架

Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网 (expressjs.com.cn)

image.png

image.png

路由

image.png

image.png

image.png

image.png

express响应设置

image.png

express中间件

image.png

image.png

image.png

image.png

image.png

image.png

Router

其实Router很好理解,就是一个功能函数,然后把刘静和对应的返回内容进行封装,之后就可以抽离成一个文件,保证代码整洁

image.png