nodejs系列:9.node的querystring模块-上篇

123 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

nodejs介绍

nodejs摘抄过来的node介绍:

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具!

Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使得 Node.js 的性能非常好。

Node.js 应用程序在单个进程中运行,无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原语,以防止 JavaScript 代码阻塞,通常,Node.js 中的库是使用非阻塞范式编写的,使得阻塞行为成为异常而不是常态。

当 Node.js 执行 I/O 操作时(比如从网络读取、访问数据库或文件系统),Node.js 将在响应返回时恢复操作(而不是阻塞线程和浪费 CPU 周期等待)。

这允许 Node.js 使用单个服务器处理数千个并发连接,而不会引入管理线程并发(这可能是错误的重要来源)的负担。

Node.js 具有独特的优势,因为数百万为浏览器编写 JavaScript 的前端开发者现在无需学习完全不同的语言,就可以编写除客户端代码之外的服务器端代码。

在 Node.js 中,可以毫无问题地使用新的 ECMAScript 标准,因为你不必等待所有用户更新他们的浏览器,你负责通过更改 Node.js 版本来决定使用哪个 ECMAScript 版本,你还可以通过运行带有标志的 Node.js 来启用特定的实验性功能。

我们可以从介绍里面看到,nodejs还是挺棒的。

nodejs遵循的是commomjs规范,所以使用nodejs的时候,需要按照commomjs规范来编写代码。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

前端发送请求给到node服务器,有时需要传递一些参数给到node服务器。node服务器拿到请求参数,进行相应的逻辑处理,然后把结果返回给到客户端。

在前几篇文章里:2.url模块的介绍和使用-上篇3.url模块的介绍和使用-下篇,我们介绍了node的url模块。如果浏览器发送的是get请求,node服务器可以通过url模块,解析请求url,拿到传递过来的参数。

那么,如果浏览器发送的是post请求,node服务器又怎么获取传递过来的请求参数呢?

这时,就要用到node的另外一个模块--querystring模块了。

querystring

querystring模块,提供了用于解析和格式化网址查询字符串的实用工具。

实现

为了避免篇幅过长,node的querystring模块分成上下两篇来写。

上篇主要是构建html页面,发送post请求。

接下来开始实现了。

创建一个index.html页面,在body标签里,创建两个input输入框和一个button按钮

<label>账号:<input type="text" id="account"></label>
<label>密码:<input type="text" id="pas"></label>
<button id="login">登录</button>

创建一个script标签,在标签定义一个函数ajxa,里面封装了一个原生js写的ajax请求。


function ajax(method,url,params='') {
            let xhr = new XMLHttpRequest()
            xhr.open(method, url)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        console.log(xhr.responseText);
                    } else {
                        console.log('请求失败');
                    }
                }
            }
            xhr.send(params)
        }

怎么实现系列:7.怎么用原生js实现一个ajax请求里,有提到过,如果发送的是post请求,请求参数需要放在xhr的send方法里,传送给node服务器。

所以这里ajax函数的第三个参数params,是指post请求要传递的参数。

接着,获取button按钮的dom实例,绑定点击事件。


 let loginBtn = document.querySelector('#login')
     loginBtn.addEventListener('click',(e)=>{
            let account = document.querySelector('#account').value
            let pas = document.querySelector('#pas').value
            ajax('post','http://localhost:3000/login',`account=${account}&pas=${pas}`)
        })

在点击事件的回调函数里,先获取input的dom实例。 然后通过dom的value属性,拿到input输入框的输入值。

调ajax函数,发送ajax请求,同时把请求参数传递给node服务器。

这是页面效果截图

0001.png

小结

node的querystring模块-上篇里,主要是先创建好html页面,同时把html页面的逻辑写好。

页面内主要有2个input输入框,分别用来输入账号和密码。还有一个button按钮,用来发送登录请求。

在上篇里,先把html页面创建好。在下篇,我们再讲下和node服务器相关的。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》