Node.js学习笔记（一）

明天打n遍鸡血

已于 2023-08-01 22:58:17 修改

阅读量63

点赞数 1

分类专栏： Node 文章标签：学习笔记 javascript node.js

于 2023-07-17 20:38:56 首次发布

本文链接：https://blog.csdn.net/weixin_51767061/article/details/131774323

版权

Node 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前后端的认知

前端 h5 c3 js jq vue

把后端给的数据展示在页面上(显示列表页面)

把前端的数据传递给后端，让后端存储起来

后端 node.js

当前端需要数据时，后端从数据库里拿到数据给前端

把前端传递的数据存储到数据库中

数据库

专门让后端进行数据的增删改查

注意：

前端无法操作数据库

前端想对数据库进行操作，就要把信息告诉后端，由后端进行数据库操作，把信息反馈给前端

了解服务器

服务器：一台在网络'另一头'的电脑，'运行'了某些特殊的软件

服务器作用：运行服务端的代码(后端)

例子：https://www.baidu.com

https => 传输协议

www.baidu.com => 域名(ip地址)

每台电脑都会有自己的ip地址，由于不好记，会通过域名来代表ip地址

http 传输协议，浏览器会自动添加80端口

https 传输协议，浏览器会自动添加443端口

了解node

JavaScript是脚本语言，需要依赖于其他环境运行

前端依赖浏览器运行

为什么浏览器可以运行js?

html和css都可以在浏览器直接运行，因为浏览器中有js的解析器(解释器)

解析器：用来解析和识别代码并运行代码(v8引擎)

node.js：单独把浏览器里的引擎中的解析模块拆下来安装在电脑中，不需要浏览器也可以运行js代码

node作用

js运行在浏览器时，核心是ECMAscript语法，DOM，BOM

操作DOM和BOM，但是ES不能操作电脑中的文件

js运行在node环境时，核心是ECMAscript语法和I/O(操作文件)

不能操作DOM和BOM，但是可以操作电脑的文件也可以操作电脑的操作系统

总而言之

在node环境下

js就是操作数据库

js就是写后端接口

js就是操作系统文件

js就是操作操作系统

node把JavaScript语言扩展到后端的范畴，因此js既是前端又是后端

两种指令方式使用node运行js代码

1、直接打开命令行(node)

输入node 回车，进行代码编辑模式

输入js代码，运行

缺点：无法保存

2、将要执行的js文件使用node方式执行

node xxx.js 回车

常见请求方式

请求方式：前端和后端通信的方式，使用不同的方式所接收的信息不同

常见请求方式：

1、get => 向服务器获取信息

2、post => 向服务器传递信息，并让服务器存储起来

3、put => 向服务器传递信息，并让服务器全部更新数据并存储起来

4、delete => 让服务器删除信息

5、head => 不需要响应体，主要是为了获取响应头信息

6、patch => 向服务器传递信息，并让服务器部分更新数据并存储起来

7、connect => 预留方式，管道连接改成代理连接的方式

8、option => 允许前端查看服务器性能

get和post请求的区别

get

1、倾向于向服务器获取数据

2、直接在地址栏后拼接(请求体可以为空)

3、大小限制为2kb左右(因为浏览器的地址栏长度有限制)

4、会被浏览器主动缓存

5、相对于POST不是很安全(因为明文发送)

6、数据格式必须是url编码格式，若不是会自动转化成url编码

post

1、倾向于向服务器传递数据

2、在请求体内传递过去(地址后面没有任何参数)

3、没有大小限制(可能服务器端会有限制)

4、不会被浏览器主动缓存，需要手动设置

5、相对GET比较安全(暗文发送)

6、数据格式要和请求头中的content-type一致

请求头里的content-type表示请求体中的数据格式

    // 把内容编码成url编码格式
    let urlStr = encodeURI('BLUE蓝色')
    console.log(urlStr); //BLUE%E8%93%9D%E8%89%B2
    // 把url编码解码成普通字符串
    let str = decodeURI('%E5%89%8D%E7%AB%AFnode')
    console.log(str); //前端node

了解Ajax

Ajax：是js里的一个方法，是前端和后端进行交互的手段

没有Ajax时

浏览器地址栏输入一个地址，客户端显示一个页面或一张图片或一个json字符串

有Ajax后

js去请求后端的url地址，url地址对应的资源不会直接显示在浏览器上而是把资源给js进行处理

要想资源显示在页面上需要通过js渲染

document.write()

innerHTML()

innerText()

appendChild()

发送Ajax请求

a：async 异步； j：JavaScript；a：and；x：xml 传输内容

异步的xml和js交互手段

前端可以通过Ajax给后端发送数据 —— 请求：request

后端可以通过Ajax给前端发送数据 —— 响应：response

第一个Ajax通信一定是由前端发起

步骤

1、创建Ajax对象(new XMLHttpRequest())

2、配置请求信息

请求方式(get、post、put、delete、patch等等)

请求地址(后端服务器地址url)

请求类型(同步还是异步(默认异步))

Ajax对象.open(请求方式,请求地址,是否异步)

3、发送请求

Ajax对象.send()

4、接收后端的响应

js与后端交互，因此资源给了js，通过一个事件来接收资源

Ajax对象.onload = function(){}

    // 创建Ajax对象
    const xhr = new XMLHttpRequest()
    // 配置请求信息
    xhr.open('GET', 'http://localhost:8888/test/first')
    // 发送请求
    xhr.send()
    // 接收响应
    xhr.onload = function () {
      console.log(xhr.response); // 哇塞, 你已经成功使用 ajax 发送给我了一个请求, 这是我给你的回应, 我是一个字符串类型 ^_^ !
    }

简单用一下Ajax

<body>
  <button>获取数据</button>
  <h3></h3>
  <script>
    document.querySelector('button').onclick = function () {
      let xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:8888/test/second')
      xhr.send()
      xhr.onload = function () {
        const obj = JSON.parse(xhr.response)
        console.log(obj);
        document.querySelector('h3').innerHTML = obj.message //页面显示：我已经接受到了你的请求, 这是我给你的回应, 我是一个 json 格式
      }
    }
  </script>
</body>

发送一个带参数的Ajax请求

<body>
  <button class="get">获取数据</button>
  <button class="post">传送数据</button>
  <h3></h3>
  <script>
    let getBtn = document.querySelector('.get')
    let postBtn = document.querySelector('.post')
    // get请求
    getBtn.onclick = function () {
      let xhr = new XMLHttpRequest()
      xhr.open('get', 'http://localhost:8888/test/third?name=blue&age=28')
      xhr.send()
      xhr.onload = function () {
        document.querySelector('h3').innerHTML = xhr.response
      }
    }
    // post请求
    postBtn.onclick = function () {
      let xhr = new XMLHttpRequest()
      xhr.open('post', 'http://localhost:8888/test/fourth')
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      // post携带的参数写在send后面的括号里
      xhr.send('name=green&age=27')
      xhr.onload = function () {
        document.querySelector('h3').innerHTML = xhr.response
      }
    }
  </script>
</body>