服务器与客户端相关 - Node.js创建本地服务器

本文介绍了服务器的基本概念,包括服务器作为提供网络服务的机器,以及Web服务器的工作方式,用户通过浏览器发起HTTP请求,服务器响应并返回结果。讲解了HTTP协议、域名与IP、端口以及URL的构成。此外,还探讨了静态资源处理、HTTP状态码和Content-Type的设置,以及二次请求和接口的概念。最后提到了Postman在接口测试中的作用。
摘要由CSDN通过智能技术生成

服务器:提供网络服务的一台机器,通过在自己的电脑上安装特殊的软件(或者是运行某段特殊的代码)来提供服务 服务器  = 电脑 + 能给其它电脑提供服务的软件

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的作用

做前端一定要会用它  它用来去 测试接口

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值