URL地址

  • 在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位器），它是WWW的统一资源定位标志，就是指网络地址。
  • URL的一般语法格式为：(带方括号[]的为可选项)：
    • protocol :// hostname[:port] / path / ?query #fragment
    • 协议 :// 主机地址[:端口号] / [路径] [?参数] [#锚点]

就像生活中的地址一样，URL用于定位网络当中的资源，每个资源都对应着一个独一无二的URL地址

协议

HTTP

  • 超文本传输协议，互联网上应用最为广泛的一种网络协议，所有的WWW文件都必须遵守这个标准

  • HTTP协议默认端口号是 80

    HTTPS

  • HTTPS 是身披 SSL外壳的 HTTP，就是加密版的HTTP，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包

  • HTTPS协议默认端口号是 443

主机地址

用于寻找服务器

IP地址

IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异
本机IP：127.0.0.1

域名

形如 www.xxx.com 这样的就叫做域名，域名需要单独购买。购买后，需要绑定IP地址进行使用。绑定IP地址后，就可以通过域名找到主机电脑了
本机域名：localhost

DNS服务器

  • 记录域名和IP的对应关系
  • 通过DNS服务器可以解析出 一个域名对应的IP地址4

    找域名对应的IP

  1. 先检查浏览器缓存，是否记录了这个IP
  2. 再查看本机的hosts文件，是否记录了这个IP
  3. 最后去DNS服务器解析，获取域名对应的IP

端口号

客户端可以通过ip地址找到对应的服务器端
但是服务器端是有很多应用程序的，每个应用程序对应一个端口号，通过端口号，客户端才能真正的访问到该服务器上的应用程序。
为了对端口进行区分，将每个端口进行了编号，这就是端口号。
端口号的范围是 0 ~ 65535
如果一个应用程序使用了1234端口号，其他的应用程序就不能再使用1234端口号

客户端请求服务器的步骤

当我们在浏览器地址栏输入 “http://www.xxx.com/api/getbooks”时，客户端是如何找到服务器并发送请求的？

  1. 先找到服务器
    1. 检测浏览器缓存有没有缓存该域名对应的IP地址。有则通过IP地址去找服务器
    2. 检测本地的hosts文件，是否有记录该域名对应的IP地址，有则通过IP地址去找服务器
    3. 通过DNS服务器解析，找到该域名对应的IP地址，然后通过IP地址去找服务器
  2. 进行三次握手（建立连接）
    1. 第一次握手是在建立连接，客户端发送连接请求报文段，把标有SYN的数据包发给服务器端即为接收端。
    2. 第二次握手是服务器端即接收端收到客户端的SYN的报文段，同时发送标有SYN/ACK的数据包。
    3. 第三次握手是客户端收到服务器端的SYN/ACK的数据包后，向服务器端发送标有ACK的数据包。
  3. 发送请求，传输数据
  4. 服务器处理，并做出响应
  5. 浏览器接收响应结果。
  6. 四次挥手（作用是断开连接）

Express

express 介绍

  • Express 是一个第三方模块，用于快速搭建服务器（替代http模块）
  • Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架。同类型产品 Koa
  • Express保留了http模块的基本API，使用express的时候，也能使用http的API
    • 使用express的时候，仍然可以使用http模块的方法，比如 res.end()、req.url
  • express还额外封装了一些新方法，能让我们更方便的搭建服务器
  • express提供了中间件功能，其他很多强大的第三方模块都是基于express开发的
  • Express 官网

  • Express 中文文档（非官方）

    安装

    项目文件夹中，执行 npm i express

    使用

    步骤

  • 加载 express 模块

  • 创建 express 服务器
  • 开启服务器
  • 监听浏览器请求并进行处理 ```javascript // 使用express 搭建web服务器 // 1 加载 express 模块 const express = require(‘express’); // 2 创建 express 服务器 const app = express(); // 3 开启服务器 app.listen(3000, () => console.log(‘express服务器开始工作了’)); // 4 监听浏览器请求并进行处理 app.get(‘GET请求的地址’, 处理函数); app.post(‘POST请求的地址’, 处理函数);

const express = require(‘express’) const app = express() const port = 3000

app.get(‘/‘, (req, res) => { res.send(‘hello world!’) })

app.get(‘/api/getbooks’, (req, res) => { res.send( { status: 0, message: ‘获取成功’, data: [‘aaaa’, ‘ssss’] } ) })

app.listen(port, () => { console.log(Example app listening on port ${port}) }) ```

全局模块—nodemon

nodemon 是一个全局模块，安装后，可以使用 nodemon 代替 node 运行js文件。
好处是，当代码保存后，nodemon 会检测文件代码是否改变了，如果改变了，就会自动重启服务器

安装

  • npm i nodemon -g

  • mac系统，安装全局模块，比如加 sudo ，例如 sudo npm i nodemon -g

    使用

  • 使用nodemon 命令代替node命令，我们就可以专心开发代码了，而不用但是服务有没有重启的问题了。

  • 建议不要滥用nodemon，建议只在启动服务时使用nodemon。其他情况继续使用node

跨域请求解决方案

找到以前做过的图书管理案例，修改请求的根路径为 “http://localhost:3000”，表示使用我们自己的接口了。
前端发送Ajax请求，请求接口。会有跨域问题。
这里可以使用CORS方案解决跨域。

后端

  • 安装 cors 模块。npm i cors
  • 代码中，在所有接口之前，加载cors，并注册为中间件。
    let cors = require('cors')
    app.use(cors())

    前端

    正常发送请求即可。