-# 1. 服务端基础概念
1.1 网站的组成
- 网站应用程序主要分为两大部分:客户端和服务器端。
- 客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、javascript构建。
- 服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。
1.2 Node网站服务器
能够提供网站访问服务的机器就是网站服务器,它能够接收客户端的请求,能够对请求做出响应。
1.3 IP地址
- 互联网设备的唯一标识。
- IP是Internet Protocol Address的简写,代表互联网协议地址。
1.4 域名
- 由于IP地址难于记忆,所以产生了域名的概念,所谓域名就是平时上网所使用的网址。
- http://www.itheima.com => http://124.165.219.100/
- 虽然在地址栏中输出的是网址,但是最终还是会将域名转换为ip才能访问到指定的网站服务器。
1.5 端口
- 端口是计算机与外界通讯交流的出口,用来区分服务器电脑中提供的不同的服务。
1.6 URL
统一资源定位符,又叫URL( Uniform Resource Locator ),是专为标识Internet网上资源位置而设的一种编址方式,
我们平时所说的网页地址指的即是URL。
URL的组成:
传输协议://服务器IP或域名;端口/资源所在位置标识
http://www.itcast.cn/news/20181018/09152238514.html
http:超文本传输协议,提供了一种发布和接收HTML页面的方法。
1.7 开发过程中客户端和服务器端说明
在开发过程中,客户端和服务器端使用同一台电脑,即开发人员电脑。
2. 创建web服务器
// 引用系统模块
const http = require('http');
// 创建web服务器
const app = http.createServer();
// 当客户端发送请求的时候
app.on('request', (req, res) => {
// 响应
res.writeHead(200,{
'content-type': 'text/html;charset=utf8'
});
res.end('<h1>hi,user</h1>');
});
// 监听3000端口
app.listen(3000);
console.log('服务器以启动,监听3000端口,请访问localhost:3000');
3. HTTP协议
3.1 HTTP协议的概念
超文本协议(英文:HyperText Transfer Protocol. 缩写:HTTP)规定了如何从网站服务器传输超文本到本地浏览器,
它基于客户端服务架构工作,是客户端(用户)和服务器端(网站)请求和应答的标准。
3.2 报文
在HTTP请求和响应的过程中传递的数据就叫报文,包括传送的数据和一些附加信息,并且要遵守规定好的格式。
3.3 请求报文
1. 请求方式(Request Method)
- GET 请求数据
- POST 发送数据
// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 当客户端有请求来的时候
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>')
});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
<!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>
</head>
<body>
<!--
method:指定当前表单提交的方式
action:指定当前表单提交的地址
-->
<form method="post" action="http://localhost:3000">
<input type="submit" name="">
</form>
</body>
</html>
2. 请求地址(Request URL)
app.on('request', (req, res) => {
req.headers // 获取请求报文
req.url // 获取请求地址
req.method // 获取请求方法
});
// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 当客户端有请求来的时候
app.on('request', (req, res) => {
// 获取请求方式
// req.method
// console.log(req.method);
// 获取请求报文信息
// req.headers
console.log(req.headers['accept']);
// 获取请求地址
// 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');
}
});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
3.4 响应报文
1. HTTP状态码
- 200 请求成功
- 404 请求的资源没有被找到
- 500 服务器发生错误
- 400 客户端请求有语法错误
2. 内容类型
- text/html
- text/css
- application/javascript
- image/jpeg
- application/json
没设置编码,会乱码:
设置编码格式:
4. HTTP请求与响应处理
4.1 请求参数
客户端向服务器发送请求时,有时需要带一些客户信息,客户信息需要通过请求参数的形式传递到服务器端,比如登陆操作。
4.2 GET请求参数
- 参数被放置在浏览器地址栏中,例如:
// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 用于处理url地址
const url = require('url');
// 当客户端有请求来的时候
app.on('request', (req, res) => {
// 获取请求方式
// req.method
// console.log(req.method);
// 获取请求报文信息
// req.headers
console.log(req.headers['accept']);
// 获取请求地址
// req.url
console.log(req.url);
// 1) 要解析的URL地址
// 2) 将要查询参数解析成对象形式
console.log(url.parse(req.url, true));
let params = url.parse(req.url, true).query;
console.log(params.name);
console.log(params.age);
// 设置状态码
res.writeHead(400);
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');
}
});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');
4.3 POST请求参数
- 参数被放置在请求体中进行运输
- 获取POST参数需要使用data事件和end事件
- 使用querystring系统模块将参数转换为对象格式
// 导入系统模块querystring用于将HTTP参数转换为对象格式
const querystring = require('querystring');
app.on('request', (req, res) => {
let postData = '';
// 监听参数传输事件
req.on('data', (chunk) => postData += chunk);
// 监听参数传输完毕事件
req.on('end', () => {
console.log(querystring.parse(postData));
});
});
// 监听端口
app.listen(3000);
console.log('网站启动成功');
HTML代码:
<!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>
</head>
<body>
<!--
method:指定当前表单提交的方式
action:指定当前表单提交的地址
-->
<form method="post" action="http://localhost:3000">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit">
</form>
</body>
</html>
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 = '';
req.on('data', params => {
postParams += params;
});
req.on('end', () => {
console.log(querystring.parse(postParams));
});
res.end('OK');
});
// 监听3000端口
app.listen(3000);
console.log('服务器启动成功');
运行结果:
4.4 路由
http://localhost:3000/index
http://localhost:3000/login
路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说,就是请求什么响应什么。
app.on('request', (req, res) => {
// 获取客户端的请求路径
let { pathname } = url.parse(req.url);
if (pathname == '/' || pathname == '/index') {
res.end('欢迎来到首页');
} else if (pathname == '/list') {
res.end('欢迎来到列表页');
} else {
res.end('抱歉,您访问的页面出游了');
}
});
// 1. 引入系统模块http
// 2. 创建网站服务器
// 3. 为网站服务器对象添加请求事件
// 4. 实现路由功能
// 1. 获取客户端的请求方式
// 2. 获取客户端的请求地址
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;
// 设置HTTP状态码、内容类型,编码
res.writeHead(200, {
'content-type': 'text/html;charset=utf8'
})
if (method == 'get') {
if (pathname == '/' || pathname == '/index') {
res.end('欢迎来到首页')
} else if ((pathname == '/list')) {
res.end('欢迎来到列表页')
} else {
res.end('您访问的页面不存在')
}
} else if (method == 'post') {
}
});
app.listen(3000);
console.log('服务器启动成功');
4.5 静态资源
服务端不需要处理,可以直接响应给客户端的资源就是静态资源,例如CSS、javascript、image文件。
http://www.itcast.cn/images/logo.png
4.6 动态资源
相同的请求地址不同的响应资源,这种资源就是动态资源。
http://www.itcast.cn/article?id=1
http://www.itcast.cn/article?id=2
// 1. 引入系统模块http
// 2. 创建网站服务器
const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');
const app = http.createServer();
app.on('request', (req, res) => {
// 获取用户的请求路径
let pathname = url.parse(req.url).pathname;
console.log(pathname);
// 将用户的请求路径转换为实际的服务器硬盘路径
let realPath = path.join(__dirname, 'public' + pathname);
console.log(realPath);
// 列出所有内容类型,记得要安装mime模块 npm install mime
let type = mime.getType(realPath);
console.log(type);
// 读取文件
fs.readFile(realPath, (error, result) => {
// 如果文件读取失败
if (error != null) {
res.writeHead(404, {
'content-type': 'text/html;charset=utf-8'
});
res.end('文件读取失败');
return;
} else {
console.log('文件读取成功');
res.writeHead(200, {
'content-type': 'text/html;charset=utf-8'
});
res.end(result);
}
});
});
app.listen(3000);
console.log('服务器启动成功');