前言 koa被认为是第二代web后端开发框架，相比于前代express而言，其最大的特色无疑就是解决了回调金字塔的问题，让异步的写法更加的简洁。在使用koa的过程中，其实一直比较好奇koa内部的实现机理。最近终于有空，比较深入的研究了一下koa一些原理，在这里会写一系列文章来记录一下我的学习心得和理解。 在我看来，koa最核心的函数是大名鼎鼎的co，koa正是基于这个函数实现了异步回调同步化，以及中间件流程控制。当然在这篇文章中...
如果你有 express ,koa, redux 的使用经验，就会发现他们都有 中间件（middlewares）的概念，中间件 是一种拦截器的思想，用于在某个特定的输入输出之间添加一些额外处理，同时不影响原有操作。 最开始接触 中间件是在服务端使用 express 和 koa 的时候，后来从服务端延伸到前端，看到其在redux的设计中也得到的极大的发挥。中间件的设计思想也为许多框架带来了灵活而强大的扩展性。 本文主要对比redux, koa, express 的中间件实现...
前言刚来公司的时候，对react项目中的thunk中间件的作用一直不太了解，最近有时间决定好好研究一下。鉴于本人初次写博客，并已假设读者已掌握redux的一些基本用法；如有错误，还望指出。不胜感激！ 首先简单回顾一下redux工作流程图画的不太好，见谅；对于reactUI组件来说，数据的来源无外乎两种，一种是用户主动触发的动作，例如点击事件、提交表单，输入操作；另一种是组件主动的数据更新，如获取页面初始数据，子组件接受父组件...
_express.js_作为_Node.js_的老牌框架,是现有框架中最全面的。然而在学习express除了那些api之外，对于框架最重要的就是__中间件__这个概念了。如果理解了，就可以把这个框架玩活了，项目开发肯定会更加顺利，而且还可以开发很多额外的功能，甚至中间件扩展开发。 但是就这么一个东西，是很多学习node.js的小萌新们就算写出一个博客项目，都不知道它到底有啥作用。我当时在理解的时候也花了不少功夫，趁着没有啥工作，给各位学习ex...
express的新开发人员往往对路由处理程序和中间件之间的区别感到困惑。因此他们也对app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()方法的区别感到困惑。 在本文中,我将解释中间件和路由处理程序之间的区别。以及如何正确使用app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()方法。 路由处理app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()全部是用来定义路由的。这些方法...
最近在把vue的项目改成基于nuxt.js是 ssr渲染，需要进行权限拦截判断，网上查了不少资料。最终看官方手册解决了，贴一下过程 项目环境 "element-ui":"^2.3.4", "flyio":"^0.5.2", "js-cookie":"^2.2.0", "nuxt":"^1.4.0", 一：首先登录页面在登录页面script中引入 import Cookie from js-cookie //npm install js-cookie --save在script里加上 data(){return{redirectURL:/} }, mounted() {let rediretUrl = this.$route.query.ref...
最近需要单独使用到koa-compose这个模块，虽然使用koa的时候大致知道中间件的执行流程，但是没仔细研究过源码用起来还是不放心(主要是这个模块代码少，多的话也没兴趣去研究了)。 koa-compose看起来代码少，但是确实绕。闭包，递归，Promise。。。看了一遍脑子里绕不清楚。看了网上几篇解读文章，都是针对单行代码做解释，还是绕不清楚。最后只好采取一种傻瓜的方式： koa-compose去掉一些注释，类型校验后，源码如下： function c...
Node 主要用在开发 Web 应用，koa 是目前 node 里最流行的 web 框架。 在 Node 开启一个 http 服务简直易如反掌,官网 demo。 const http = require("http");const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader("Content-Type", "text/plain");res.end("Hello World\n"); });const hostname = "127.0.0.1"; const port = 3000; server.listen(port, hostname, () => {console.log(`Server runnin...
前言Koa 2.x 版本是当下最流行的 NodeJS 框架， Koa 2.0 的源码特别精简，不像 Express 封装的功能那么多，所以大部分的功能都是由 Koa 开发团队（同 Express 是一家出品）和社区贡献者针对 Koa 对 NodeJS 的封装特性实现的中间件来提供的，用法非常简单，就是引入中间件，并调用 Koa 的 use 方法使用在对应的位置，这样就可以通过在内部操作 ctx 实现一些功能，我们接下来就讨论常用中间件的实现原理以及我们应该如何开发一个 Koa...
前言 Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。 这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的; 若是不是共享同一个页面的情况,就需要拦截跳转了; 当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备) 思路 本质上还是校验 UA , 只是这次是从 req 拿到,而不是从客户端获取再做处理 客户端的处理的姿势 window.navigator.userAgent服务端的处理姿势 ...
最近项目前端开发框架采用React+Redux进行实现，但是，如何异步访问服务器端，以及想要在开发过程中进行状态树日志的输出，所以怎么才能解决这两个问题? 采用Redux中间件 为什么要使用中间件 在利用Redux进行状态管理时，用户在UI层面触发行为，一个action对象通过store.dispatch派发到Reducer进行触发，接下来Reducer会根据type来更新对应的Store上的状态树，更改后的state会触发对应组件的重新渲染。如下图所示。在这个流程中，a...
环境：vue 2.9.3; webpack 目的：接口的调用 跨域方式： 1、express中间的使用 2、nginx代理 3、谷歌浏览器跨域设置 --------------------------------------------分割线--------------------------------------------- express中间件---不推荐 原理：本地代码请求->express中间件（处理，添加headers后转发）->服务器 express中间件 medical本地代码文件目录 pacs#########配置接口在服务器中间件配置 medical/routes/home.js 没...
中间件在 Node.js 中被广泛使用，它泛指一种特定的设计模式、一系列的处理单元、过滤器和处理程序，以函数的形式存在，连接在一起，形成一个异步队列，来完成对任何数据的预处理和后处理。 它的优点在于 灵活性 ：使用中间件我们用极少的操作就能得到一个插件，用最简单的方法就能将新的过滤器和处理程序扩展到现有的系统上。 常规中间件模式 中间件模式中，最基础的组成部分就是 中间件管理器 ，我们可以用它来组织和执行中间件的...
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。1.概念dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。 换言之，中间件...
用过react的同学都知道在redux的存在，redux就是一种前端用来存储数据的仓库，并对改仓库进行增删改查操作的一种框架，它不仅仅适用于react，也使用于其他前端框架。研究过redux源码的人都觉得该源码很精妙，而本博文就针对redux中对中间件的处理进行介绍。 在讲redux中间件之前，先用两张图来大致介绍一下redux的基本原理：图中就是redux的基本流程，这里就不细说。 一般在react中不仅仅利用redux，还利用到react-redux：react-re...