持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第28天,点击查看活动详情
系列介绍
该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。
这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。
环境安装
实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。
以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。
前言
在前面几篇文章里nodejs系列:.koa之图形验证码-79-81,主要是介绍了怎么在koa里面使用svg-captcha中间件来实现图形验证码的功能。
图形验证码的功能实现了,接下来,我们将要介绍一下koa另外一个常用的中间件--koa-onerror
koa-onerror
koa-onerror中间件,可以在服务器产生错误(比如 throw抛出错误等)时,自动重定义到你指定的路径。
示例
我们先完成示例里要用到的客户端页面
创建文件
创建一个index.html文件,我们的客户端页面代码,将在这个文件里完成。
创建dom结构
<input type="text" />
<button>发送请求</button>
在body里面,创建一个input输入框,用来输入我们请求的路由。创建一个button按钮,用来发送ajax请求。
js逻辑
function ajax(url, method = "get") {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
};
xhr.send();
}
定义一个ajax函数,在ajax函数里,创建一个XMLHttpRequest实例对象。利用XMLHttpRequest实例对象,和服务器创建链接,然后发送ajax请求。ajax请求成功后,把响应内容给打印出来。
封装ajax函数,方便后面的函数调用。
let ipt = document.querySelector("input");
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
let value = ipt.value;
ajax("http://localhost:3000" + value);
});
获取input输入框的dom元素,获取button按钮的dom元素。
给button按钮,绑定点击事件。点击button按钮,获取input输入框的内容,发送ajax请求。
小结
本小节,主要是完成了koa之koa-onerror中间件示例里要用到的客户端页面,为后面的前后端联调做好准备。
最后,放上自己比较喜欢的一句诗句:
千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》