0


通过express框架实现web服务器

什么是express?

express是基于node.js平台的web开发框架,对于node.js来说express是第三方模块,相当于中间件(中间件--是为了给用户提供更好的服务、可以方便的拆卸)。

托管静态资源-web服务器

接下来我们试着通过使用express来直接访问一个名叫publish的文件夹中的index.html文件。

首先我们建一个如下的目录结构

test
├── public
│   ├── css
│   │   └── index.css
│   ├── img
│   │   └── bg.png
│   └── index.html
└── serve.js     # 服务器

首先我在index.html和index.css中简单些一些内容

<!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>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <h1>你好,帅哥!!!</h1>
  <img src="./img/bg.png" alt="">
</body>

</html>
h1 {
  color: hotpink;
}

img {
  width: 900px;
}

然后我们需要通过npm把express这个框架下载到当前test这个根目录文件夹的下面

npm init --yes //初始化
npm install express //下载包

然后当包下载完成之后,就可以在serve.js中来写内容了

// 引入express
const express = require('express')

// 调用express()
const app = express()

// 设置请求对应的处理函数--静态托管public文件夹
app.use(express.static('public'))

// 监听端口号,启动web服务
app.listen(8080, function () {
  console.log('app listening on port 8080')
})

接下来,我们通过浏览器在地址栏输入localhost:8080就可以来访问publish中index.html中的内容

这时候我们vscode中的小黑窗口就相当于一个服务器,浏览器就相当于是客户端,我们通过一台电脑简单的模拟了,浏览器发送请求到web服务器,然后web服务器响应的一个全过程。


本文转载自: https://blog.csdn.net/qq_64454072/article/details/124481853
版权归原作者 stars满天繁星 所有, 如有侵权,请联系我们删除。

“通过express框架实现web服务器”的评论:

还没有评论