服务器端介绍

大家好，我是讯享网，很高兴认识大家。

基本概念

网站的组成

1.网站应用程序主要分为两大部分：客户端和服务器端。

2.客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。

3.服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。
在这里插入图片描述
讯享网

Node网站服务器

1.能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。
在这里插入图片描述

ip地址

1.互联网中设备的唯一标识。
IP是Internet Protocol Address的简写，代表互联网协议地址。
在这里插入图片描述

端口

1.端口是计算机与外界通讯交流的出口，用来区分服务器电脑中提供的不同的服务。
在这里插入图片描述

URL

1.统一资源定位符，URL（Uniform Resource Locator），是为internet网上资源位置而设的一种编址模式。网页地址。

2.组成：传输协议://服务器IP或域名:端口/资源所在位置标识。

开发过程中客户端和服务端说明

开发阶段，服务端和客户端使用同一台电脑。
本机域名：localhost
本机IP：127.0.0.1

创建web服务器

在这里插入图片描述
1.

//用于创建网站的模块 const http = require('http'); //app对象就是网站服务器对象 const app = http.createServer(); //当客户端有请求来的时候 app.on('request',(require,response) => { 
    res.end('<h2>hello user</h2>'); }); app.listen(3000); console.log('网站服务器启动成功');

讯享网

2.在终端输入nodemon app.js

3.网页地址栏localhost:3000

HTTP协议

1.超文本传输协议（Hype Text Transfer Protocol）规定了如何从网站服务器传输超文本到本地服务器，它是基于客户端服务器架构工作，是客户端和服务器端请求和应答的标准。
在这里插入图片描述

报文

在HTTP请求和响应过程中传递的数据块就是报文，包括要传送的数据和一些附加信息，并且遵守规定好的格式。
在这里插入图片描述

请求报文

1.请求方式（Request Method）
GET 请求数据
POST 发送数据

2.请求地址
req.headers 获取请求报文
req.url 获取请求地址
req.method 获取请求方法
在这里插入图片描述

响应报文

1.HTTP状态码
200 请求成功
400 请求资源没有被找到
500 服务器端错误
400 客户端请求有语法错误

2.内容类型
text/html
text/css
application/javascript
image/jpg
application/json
在这里插入图片描述

讯享网//用于创建网站的模块 const http = require('http'); //app对象就是网站服务器对象 const app = http.createServer(); //当客户端有请求来的时候 app.on('request',(req,res) => { 
    res.writeHead(200,{ 
    'content-type': 'text/html' }); res.end('<h2>hello user</h2>'); }); app.listen(3000); console.log('网站服务器启动成功');

HTTP的请求与处理

请求参数

客户端向服务端发送请求时，有时会携带一些客户信息，客户信息需要通过请求参数的形式传递到服务器，比如登录操作
在这里插入图片描述

GET请求参数

参数被放置在浏览器地址栏中
在这里插入图片描述
req.url获取
url.parse处理

const url = require('url'); console.log(url.parse(req.url));

在这里插入图片描述
加上true以后

讯享网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);

在这里插入图片描述

POST请求参数

1.参数被放置在请求体中进行传输
2.获取POST参数需要使用data事件和end事件
3.使用querystring系统模块将参数转换成对象格式
在这里插入图片描述
实例演示：
创建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 = ''; req.on('data', params => { 
    postParams += params; }); req.on('end', () => { 
    console.log(postParams); }); res.end('ok'); }); // 监听端口 app.listen(3000); console.log('网站服务器启动成功');

let postParams = ''; 设置变量名称接受传递的数据

此时在命令行输入 nodemon post.js打开服务端

然后运行form.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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>

输入数据后命令行中打印出
在这里插入图片描述
代表post请求参数成功

querystring处理post请求中返回的对象

讯享网const querystring = require('querystring');

req.on('end', () => { 
    console.log(querystring.parse(postParams)); });

返回结果如下：
在这里插入图片描述

路由

1.路由是指客户端请求地址与服务器端程序代码的对应关系。
简单的说，就是请求什么响应什么。
在这里插入图片描述
核心代码：

代码举例：

讯享网// 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; 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('服务器启动成功')

静态资源

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; pathname = pathname == '/' ? '/default.html' : pathname; // 将用户的请求路径转换为实际的服务器硬盘路径 let realPath = path.join(__dirname, 'public' + pathname); let type = mime.getType(realPath) // 读取文件 fs.readFile(realPath, (error, result) => { 
    // 如果文件读取失败 if (error != null) { 
    res.writeHead(404, { 
    'content-type': 'text/html;charset=utf8' }) res.end('文件读取失败'); return; } res.writeHead(200, { 
    'content-type': type }) res.end(result); }); }); app.listen(3000); console.log('服务器启动成功')

代码解释
1.let pathname = url.parse(req.url).pathname; 获取用户请求的路径

2.let realPath = path.join(__dirname, 'public' + pathname); 通过path模块中方法找到硬盘路径（找到资源文件）

3.let type = mime.getType(realPath) 使用mime模块来自动判断返回文档类型

4.pathname = pathname == '/' ? '/default.html' : pathname; 让本地localhost也能访问到资源

注：default.html是我本身电脑的文件，例子举例而已。

动态资源

2.相同的请求地址不同的响应资源，这种资源就是动态资源。