这里写目录标题
一、创建web服务器
- 新建server文件夹
- 在server文件夹下创建app.js文件
- 编写代码
//用于创建网站服务器的模块
const http = require("http");
// app对象就是网站服务器对象
const app = http.createServer();
//当客户端有请求来的时候
app.on("request", (req, res) => {
res.end("<h2>hello user</h2>");
});
app.listen(3000);
console.log("网站服务器启动成功！");
-
在server文件夹下打开powershell窗口，输入nodemon ./app.js
-
服务器启动成功
-
打开浏览器，在地址栏中输入：localhost:3000
-
会输出：
二、HTTP协议
2.1 获取请求方式
2.1.1GET请求方式
- 在app.js中加入代码
- 在server文件夹中打开powershell，输入：nodemon ./app.js
- 网站服务器启动成功
- 打开浏览器，在地址栏中输入：localhost:3000，回车
- 返回powershell窗口，输出了请求方式为：GET
- 打开浏览器的控制台（F12），点击Network选项卡，刷新页面
- 说明当前确实有两个请求，第一个是输出localhost的请求，第二个是浏览器的图标请求（是浏览器自动发送的）
PS：说明，浏览器通过地址栏输入网址的行为是get请求
2.1.2POST请求方式
- 在server文件夹下新建一个form.html文件
- form.html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>form表单请求方式</title>
</head>
<body>
<!--
method: 指定当前表单提交方式
action: 指定当前表单提交地址
-->
<form method="POST" action="http://localhost:3000/">
<input type="submit" />
</form>
</body>
</html>
- 在浏览器中打开form.html
- 点击提交按钮，页面转到localhost:3000页面
- 回到powershell窗口，输出里面有POST请求出现，证明表单确实是post请求
- 后面的GET请求是表单的跳转行为，默认为GET
PS：说明，可以通过form表单发出post请求
2.1.3在app.js中加入判断
app.on("request", (req, res) => {
//获取请求方式 req.method
console.log(req.method);
if (req.method == "POST") {
res.end("post");
} else if (req.method == "GET") {
res.end("get");
}
// res.end("<h2>hello user</h2>");
});
接下来，验证
- 在浏览器地址栏中输入Localhost:3000，回车，页面输出get
- 用浏览器打开form.html页面，点击提交，页面输出为post
2.2 请求报文
由于现在，在浏览器地址栏中输入localhost:3000/后面加什么都会输出get，但是现在要实现在地址栏中输入localhost:3000/index，就输出 ”欢迎来到主页“，输入localhost:3000/list ，就输出 “欢迎来到列表页” ，如果输入其他的，就输出 “没找到”
- 在app.js文件中添加代码
app.on("request", (req, res) => {
//获取请求地址 req.url
console.log(req.url);
if (req.url == "/index" || req.url == "/") {
res.end("Welcome to homepage");
} else if (req.url == "/list") {
res.end("Welcome to listpage");
} else {
res.end("Not found");
}
});
- 在浏览器地址栏中输入：localhost:3000/list，返回Welcome to listpage
- 输入localhost:3000/index或localhost:3000/，返回Welcome to indexpage
- 输入localhost:3000/page，返回 Not found
请求地址:
- req.headers //获取请求报文
- req.url //获取请求地址
- req.method //获取请求方法
2.3 响应报文
HTTP状态码(一种标识)
- 200请求成功
- 404请求的资源没有被找到
- 500服务器端错误
- 400客户端请求有语法错误
内容类型
- text/html
- text/css
- application/javascript
- image/jpeg
- application/json
res.writeHead()方法
response.writeHead(statusCode, [reasonPhrase], [headers])
接收参数：
- 第一个是HTTP状态码，如200(请求成功），404（未找到）等。
- 第二个是告诉浏览器发送的数据类型
- 第三个就是具体发送的是什么数据
PS：参考https://blog.csdn.net/qq_45515863/article/details/103213937
设置内容类型为html,且为中文
res.writeHead(200, {
"content-type": "text/html;charset=utf8",
});
修改
if (req.url == "/index" || req.url == "/") {
res.end("<h2>欢迎来到主页面</h2>");
}
刷新页面后，显示为h2标题加粗的中文
三、HTTP请求与响应处理
3.1 GET请求参数
参数被放置在浏览器地址栏中，例如：http://localhost:3000/?name=zhangsan&age=20
- 在server文件夹中运行powershell,输入nodemon ./app.js启动服务器
- 在浏览器地址栏中输入：http://localhost:3000/index?name=zoro&age=20，回车
- 浏览器返回：Not found
- 在app.js中添加代码
console.log(req.url);
console.log(url.parse(req.url));
- powershell窗口中返回：
- 在app.js文件中添加
//用于处理url地址（引用）
const url = require("url");
// parse的两个参数：第一个是要解析的url地址，第二个是将要查询参数解析成对象形式
let params = url.parse(req.url, true).query;
console.log(params.name);
console.log(params.age);
7. powershell窗口中返回：
8. 为了解决路径判断问题，修改代码
//利用对象结构赋值
let { query, pathname } = url.parse(req.url, true);
console.log(query.name);
console.log(query.age);
//获取pathname灵活判断
if (pathname == "/index" || pathname == "/") {
res.end("<h2>欢迎来到主页面</h2>");
} else if (pathname == "/list") {
res.end("Welcome to listpage");
} else {
res.end("Not found");
}
- 重新刷新浏览器，能够正确判断地址并返回相应的页面
3.2 POST请求参数
- 在form.html文件中添加代码
<input type="text" name="username" />
<input type="password" name="password" />
- 在server文件夹下新建post.js文件，代码如下:
//用于创建网站服务器的模块
const http = require("http");
// app对象就是网站服务器对象
const app = http.createServer();
//处理请求参数模块
const querystring = require("querystring");
//当客户端有请求来的时候
app.on("request", (req, res) => {
//post参数是通过事件的方式接收的
//data 当请求参数传递的时候触发data事件
//end 当参数传递完成的时候触发end事件
let postParams = "";//接收post参数
//监听参数传输事件
req.on("data", (params) => {
postParams += params; //将当前接收到的请求参数跟postParams变量进行拼接
});
//监听参数传输完毕事件
req.on("end", () => {
console.log(querystring.parse(postParams)); //调用querystring的parse方法，将postParams字符串转为对象
});
res.end("ok");
});
app.listen(3000);
console.log("网站服务器启动成功！");
- 打开powershell,输入nodemon ./post.js启动服务器
- 运行form.html文件，在浏览器中运行，输入用户名和密码，点击提交，返回ok
- 在powershell中返回对象格式的用户名和密码
3.3路由
http://localhost:3000/list
http://localhost:3000/index
路由是指客户端请求地址与服务器端程序代码的对应关系。简单来说，就是请求什么响应什么。
- 新建route文件夹，在该文件夹下新建app.js文件
- app.js文件代码如下：
// 1.引入系统模块http
// 2.创建网站服务器
// 3.为网站服务器对象添加请求事件
// 4.实现路由功能
const http = require("http");
const url = require("url");
const app = http.createServer();
app.on("request", (req, res) => {
//获取请求方式
const method = req.method.toLowerCase();
//获取请求地址
const pathname = url.parse(req.url).pathname;
res.writeHead(200, {
"content-type": "text/html;charset=utf8",
});
if (method == "get") {
if (pathname == "/" || pathname == "/index") {
res.end("欢迎来到route首页");
} else if (pathname == "/list") {
res.end("欢迎来到route列表页");
} else {
res.end("您访问的route页面不存在");
}
} else if (method == "post") {
}
});
app.listen(3000);
console.log("服务器启动成功");
- 服务器启动后，在浏览器中输入localhost:3000/index地址等，就可自行显示相应页面
3.4 静态资源
服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、JavaScript、image文件。
http://www.itcast.cn/images/logo.png
3. 5动态资源
相同的请求地址不同的响应资源，这种资源就是动态资源
http://www.itcast.cn/article?id=1
http://www.itcast.cn/article?id=2
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
