blog
blog copied to clipboard
mrdulin
Personal Blog - 博客 | 编程技术，软件，生活
`shadowsocks`设置为： * 打开`shadowsocks` * 自动代理模式 * 服务器（香港阿里云） 以`zsh`作为说明 ```bash ➜ ~ vim ~/.zshrc ``` 添加如下代理配置: ```bash # proxy list alias proxy='export all_proxy=socks5://127.0.0.1:1080' alias unproxy='unset all_proxy' ``` `:wq`保存退出 ```bash ➜ ~...
移动端chrome浏览器可以将当前访问的应用“添加到主屏幕”，这样桌面上就会出现一个应用快捷方式。 小米4手机chrome浏览器点击“添加到主屏幕”后，没有任何反应，桌面上也没有出现应用图标。 __解决方法:__ 设置 - 更多应用 - 在“全部”中找到Chrome - 权限管理 - 开启“桌面快捷方式”权限
 ## 架构基于React Hooks和React FC设计:  ## View层 React functional component构建视图，包含: - ReactElement，JSX视图元素 - 视图的事件处理函数，例如onClick等 - 使用controller层提供的hooks，获取View Model 使用组件内部state的视图逻辑通过custom hook封装，导出state和操作该state的函数，事件处理函数直接去调用custom hook导出的函数来变更视图state。 ## Controller层 主要使用React hooks来实现，包含 - 业务custom...
`react-router` v4，我称之为“第四代react-router”，`react-router`和`react-router-dom`的区别是什么呢？ 为什么有时候我们看到如下的写法： 写法1: ```js import {Switch, Route, Router, HashHistory, Link} from 'react-router-dom'; ``` 写法2: ```js import {Switch, Route, Router} from 'react-router'; import {HashHistory, Link} from 'react-router-dom'; ``` 先简单说下各自的功能： `react-router`:...
# 在GraphQL中实现用户认证和授权的5种方式 ### 前言 用户的认证和授权是大多数web服务具备的功能，对于提供RESTful API的web服务，以Node.js社区的web框架express.js为例，基本流程是将用户认证和授权的功能实现放在中间件（middleware）中，比如[express-jwt](https://github.com/auth0/express-jwt)中间件，使用基于JWT的用户认证，该中间件会验证和解析客户端发送的请求的请求头上设置的`Authorization: Bearer `字段，并将解析出来的用户信息设置在请求对象`req`上，在下一个中间件或者我们定义的路由controller中，可以拿到该用户信息，比如id和email，通过id或email查询数据库，从而获取用户角色role，进行权限验证。相关的文档已经很多，不再叙述。 这篇文章主要讲构建GraphQL Web服务时，由于其不同于传统RESTful API的路由和中间件定义方式，严格意义上没有路由的概念，所以技术实现上不同于使用RESTful架构风格构建的web服务。不过很多原理和思想依旧是想通的，希望这篇文章能给开发者们一个启发。 阅读本文需要熟练掌握以下编程技术，思想，模式： - Node.js,Express.js,TypeScript,JavaScript, apollographql,graphql - middleware, RESTful API架构风格, JWT - Decorator模式, mokeypatch, FP, OOP, high-order function(高阶函数) ### 解决方案 首先使用可视化工具给示例代码的GraphQL...
# GraphQL Subscription 多用户订阅与通知（二） ### 问题 在上一篇文章中，讲解了如何使用`GraphQL` `Subscription`实现多用户订阅与通知，但是有个问题，我们是在单个服务器应用实例(instance)的基础上实现的，什么意思？来讲下，我们启动一个Node.js服务器应用，比如常见的使用`Express.js`, `Koa.js`创建的Web Server应用，计算机系统都会分配资源（CPU，内存等）给一个进程，然后我们的Web Server应用就运行在这个进程中。在上一篇文章中，是通过如下命令启动了一个实例的`GraphQL` web server: ```typescript ☁ apollo-graphql-tutorial [master] ⚡ npx ts-node src/subscriptions/main.ts 🚀 Server ready at http://localhost:3000/ 🚀 Subscriptions ready at...
工具： https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter 翻墙工具 - 终端需要翻墙，为了`brew update`; chrome需要翻墙，为了`chrome://inspect/#devices`。 remotedebug-ios-webkit-adapter是一个调试协议适配器，可以使用VS Code, Chrome DevTools, Mozilla Debugger.html，或者其他兼容Chrome调试协议的工具，来调试Safari浏览器中，Webview中的页面。 测试环境: Google Chrome 版本 63.0.3239.132（正式版本） （64 位） Google Chrome 版本 66.0.3329.1（正式版本）canary （64 位） iPhone 6s - ios...
最近在移动端使用`nginx`反向代理配合`webpack-dev-server`和`charles`调试时，发现部分手机打不开页面，现象是白屏，或是页面不正常(包括样式等)。 已经排除各种配置的问题。 推断可能是某些代码在老旧机型上不兼容，直接报错，导致程序crash，在入口模板html中插入了一段全局错误捕捉脚本： ```js window.onerror = function(message) { alert(message) } ``` 这里需要注意一点，先监听事件，后续的错误才会触发该事件。 再次进入要调试的页面，弹出`SyntaxError: Use of const in strict mode.`错误。 __原因__: `webpack-dev-server`从`2.8.0`版本开始，注入到`bundle.js`中`js`包含了`es6`语法，低版本webview对`es6`语法支持有限，兼容性较差，语法报错导致程序crash（白屏和页面不正常的原因），项目使用的版本是`2.9.1`。 查看`bundle.js`可见如下代码： ```js /* 2 */ /*!*******************************************************************!*\ !*** multi (webpack)-dev-server/client?http://0.0.0.0:3000...
# GraphQL 中 resolver 的两种写法 基础知识略过，直接进入正题，下面要介绍的`resolver`的两种写法直接关系到性能问题。 先来看下示例的`GraphQL` SDL的ERD:  很常见的数据关系模型，User和Post是一对多的关系，数据库表ERD如下:  `GraphQL` SDL如下： ```typescript type User { userId: ID! userNme: String userEmail: String } type Post { postId: ID! postTitle:...
## 问题：现有A,B,C三个接口，独立，相互之间没有依赖关系，因此需要并发，要求使用async/await语法并行发送3个请求，并有对应的异常处理。 ### 首先模拟三个API接口请求（或者理解为异步操作） ```ts interface IApiSuccessResponse { errorCode: number; content: any; } interface IError { type: string; err: Error; } interface IErrorMap { [type: string]: IError; } // true和false的几率各占50%，用来模拟接口出错的概率...