服务器:提供网络服务的一台机器,通过在自己的电脑上安装特殊的软件(或者是运行某段特殊的代码)来提供服务 服务器 = 电脑 + 能给其它电脑提供服务的软件
web服务器
用户通过浏览器来享受web服务器提供的服务 用户通过浏览器来享受web服务器提供的服务 浏览器端发起请求,web服务器收到请求后,响应这个请求,并将处理结果返回给浏览器
http超文本传输协议: 协议双方: 浏览器与web服务器都要遵守的协议 请求通常是由像浏览器发起的 HTTP 协议中明确规定了请求数据 和 响应数据 的格式(报文)
服务器相关概念-域名和IP (全称:I nternet P rotocol Address)
标识一个网络设备(计算机、手机、电视)在某一个具体的网络当中的地址。要访问某个电脑上的资源,先要找到它的IP 域名: 域名:Ip地址的别名,由于Ip地址不好记忆,我就给它们取个好记的别名。localhost这个域名特指127.0.0.1这个地址。 有个域名解析系统(默认存在):把域名翻译成Ip地址的系统 pink命令 在后面直接写域名 完后就可以跟这个 网址 请求以 ipconfig快速的查看ip地址 局域网都是以 196.128开头 外网就不是了
在书写域名的时候 我们不需要 将那串 字符记住 可以通过 localhos 也就是通过 http://localhos:xxxx 来找到当前的 域名 替代可 http://xxx.xxx.xxx.xx:xxxx
服务器相关概念-端口
每一个服务器的端口都是不一样的 一个IP地址的端口可以有65536个 不同的端口被不同的软件占用,以提供不同的服务 一台电脑可以通过安装多个服务器端软件来提供服务,比如[Web服务](https://baike.baidu.com/item/Web服务)、FTP服务、SMTP服务等。显然,仅仅通过ip地址是无法区分不同的服务的,`这里就需要用到 IP地址+端口号"来区分不同的服务 服务器要必须通过 指定的端口 服务器与客户端都需要通过端口进行通信 端口是可以编程分配 有一些端口号是被预定了 通过tstat -a -n -o查看端口的使用情况
服务器相关概念-URL
格式: 协议://主机地址[:端口]/路径?查询字符串#锚点
主机地址: IP地址 或者 域名 http请求,默认端口80(可以省略) https请求,默认端口443(可以省略) MySQL默认端口3306
#锚点:页面内部的跳转 通过 window.location.hash 拿到 #后面的锚点
?查询字符串: window.location.search拿到?查询字符串
创建本地服务器
// 1.导入核心模块 http 创建服务 const http = require('http')
const http = require('http')
// 2.创建服务器
// createServer 创建服务器 有人请求一次执行一次
const server = http.createServer(function(req, res) { // req(请求), res(响应)
if (err) { // 如果filepath这个路径存在就执行下面的代码
res.statusCode = 400
res.end("not found")
} else { // 不存在就 400报错
const extName = path.extname(filepath)
if (mapExtToContentType[extName]) {
/* setHeader 里面是设置相应头 属性:content-type(相应类型)键名 xt/html;charset=utf8是值 告诉浏览器 内容类型是 html 编码格式是charset=utf8 */
res.setHeader('content-type','text/html;charset=utf8')
/*向客户端发送内容,并结束本次响应 设置响应体 如果没请响应那么页面拿不到响应体 就会一直请求这个 end参数必须是字符串 或者 Buffer的形式 */
res.end('hello Word')
}
})
// 3.启动服务 listen 是设置端口号 回调函数在服务器打开后执行
server.listen(8081, function() {
console.log('服务器启动成功,请在http://localhost:8081中访问....');
});
处理不同的请求--设置content-type
在http协议中,content-type用来告诉对方本次传输的数据的类型是什么
在请求头中设置content-type来告诉服务器,本次请求携带的数据是什么类型的
在响应头中设置content-type来告诉浏览器,本次返回的数据是什么类型的
处理不同的请求--设置statusCode
200请求成功 301重定向 被请求的资源已经被移动了新的位置
400 语义错误 401未授权 没有资格访问接口 400
404 找不到资源 500 服务器遇到了不知道如何处理的 500表示服务器
二次请求
从服务器获取html文件之后,如果这个html文件中还引用了其它的外部资源(图片,样式文件等),则浏览器会重新再发请求。假设在index.html中还引入了 style.css 1.png 或者 .js文件,则:浏览器请求localhost:8000/index.html之后,得到的从服务器响应的内容 解析的过程中还发现有外部的资源,所以浏览器会再次发出请求,再去请求相应的资源
处理静态资源
静态资源:不会改变的资源。它们一般表现为某个文件。例如:index.html, style.css, index.js, mp4, .png....。处理请求静态资源时,服务器一般就直接读出资源的内容,再返回给客户端浏览器
const http = require('http')
const path = require("path");
const fs = require("fs");
// 将常用的保存在 对象里 里面都是合法字符串 策略模式
const mapExtToContentType = {
'.html': 'text/html;charset=utf8',
'.jpg': 'image/jpg',
'.css': 'text/css;charset=utf8',
'.js': 'application/javascript',
'.ico': 'image/ico'
} // 创建一个对象 里面的属性和值 都是字符串
const serve = http.createServer((req, res) => {
// 自动获取 index.html 当 req.url 为 / 的时候 就在后面拼接 /index.html
const url = req.url === '/' ? "/index.html" : req.url
const filepath = path.join( __dirname, 'public', url) /* 拼接字符串 最核心的步骤
找到绝对位置 找到public文件夹 在后面拼接的 url 拼接的那个 就 可以得到那个数据*/
fs.readFile(filepath, (err, data) => {
if (err) { // 如果filepath这个路径存在就执行下面的代码
// 不存在就 400报错
res.statusCode = 400
res.end("not found")
} else {
const extName = path.extname(filepath)
if (mapExtToContentType[extName]) { /* 判断这里面是不是有这个值
有的话 就将他的值在下面使用 */
res.setHeader('content-type', mapExtToContentType[extName])
}
res.end(data)
}
})
})
serve.listen(8080)
接口: 它们不是以某个具体的文件存在的,而是服务器上的一段代,访问接口时,服务器会执行这段代码,然后把代码的执行结果返回给客户端浏览器
客户端发送请求路径
在地址栏中直接访问这个url 通过某个a标签进行进行跳转 通过表单进行提交 通过ajax技术访问这个url
<a href="要访问的url地址">文字</a>
<form action="要提交的url的地址" method="get" target="_blank"></form>
$.ajax({url: '要提交的url的地址', type:'get' // post, delete,put,})
写一个get类型接口
const http = require('http')
const fs = require('fs')
const path = require('path')
// 找到 data.json 这个文件
const filePath = path.join(__dirname, 'someword', "data.json")
const server = http.createServer((req, res) => {
/* 判断 是不是这个地址 并且看返回的是不是 GET的请求方式 可以通过req.method
的方法查看 */
if (req.url === "/getList" && req.method === "GET") {
// 读入数据并返回
fs.readFile(filePath, (err, data) => {
res.setHeader('Content-Type', 'text/json;charset=utf8');
res.end(data)
})
} else {
res.statusCode = 400
res.end('nod found')
}
console.log(num);
})
server.listen(8080, function() {
// console.log(8080);
})
postman的作用
做前端一定要会用它 它用来去 测试接口