什么是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服务器响应的一个全过程。
版权归原作者 stars满天繁星 所有, 如有侵权,请联系我们删除。