发表于

背景

最近开发的时候，Mysql 中配置了一条非常复杂且重要的数据记录，但是由于之后的一次不规范的 Update 操作，本想只更新其中一个字段值，结果却更新了整个记录，导致保存了 JSON 文本的字段值被初始成了默认值，数据丢失。从新配置该值太麻烦，于是踏上了数据恢复之路。

Binary Log

binlog 是 Mysql sever 层维护的一种二进制日志，与 innodb 引擎中的 redo/undo log 是完全不同的日志；其主要是用来记录对 mysql 数据更新或潜在发生更新的 SQL 语句，并以”事务”的形式保存在磁盘中；

binlog 虽然没有记录每次 query 操作，但是记录表结构和数据记录的每次变动操作，足以用来恢复数据。更多 binlog 的介绍请访问参考文章。

流程

查看 binlog 配置

登录 mysql，执行show variables like '%log_bin%';

1
2
3
4
5
6
7
8
9
10
11
12
mysql> show variables like '%log_bin%';
+---------------------------------+----------------------------------+
| Variable_name                   | Value                            |
+---------------------------------+----------------------------------+
| log_bin                         | ON                               |
| log_bin_basename                | /www/server/data/mysql-bin       |
| log_bin_index                   | /www/server/data/mysql-bin.index |
| log_bin_trust_function_creators | OFF                              |
| log_bin_use_v1_row_events       | OFF                              |
| sql_log_bin                     | ON                               |
+---------------------------------+----------------------------------+
6 rows in set (0.00 sec)

检查 log_bin 是否为 ON 状态。如果是 OFF 就没戏了。
log_bin_basename 值是日志的文件基本路径，实际文件名会追加序号，例如 mysql-bin.000001，序号越大日志时间越新。

mysqlbinlog

mysqlbinlog 是 binlog 日志解析工具，需要用它进行日志操作。在安装了 mysql 数据库的情况下，如果直接执行 mysqlbinlog 提示没有该命令，就需要用绝对路径去执行了，在 mysql 安装目录的 bin 目录下，也可以通过 find / -name mysqlbinlog -print 查找。

mysqlbinlog 支持条件查询输出等，直接输出到控制台不方便查看，我这里直接输出到 sql 文件里，然后用 vim 查询相关字段，找到最新一次 update 操作，然后向前定位就能找到原数据了。

输入到 sql 的命令：

1
/www/server/mysql/bin/mysqlbinlog -v --base64-output=decode-rows mysql-bin.000007 --start-datetime="2019-06-9 9:00:00" --stop-datetime="2019-06-9 23:00:00" > output.sql

为了避免无关数据量太多，可以用开始时间、结束时间进行范围限定，也可以通过 query 类型限定。

结语

本文只是介绍了我的这种特殊场景下的 binlog 的使用，没有对 binlog 展开详细讲解，只是起到一个抛砖引玉的作用，请合理参考。

参考

MySQL Binlog 介绍

mysql 被删除的数据库恢复 binlog 恢复数据库

发表于

背景

我个人有在维护一些网站，有时候会出现 CPU 突然占用过高的情况，或者想分析一下有没有恶意爬虫等，现有的方式就是分析 Apache 访问日志，发现非常不直观，无意间了解到阿里云到日志服务这个产品，可以实现日志的复杂条件查询和数据可视化，于是尝试了一下，发现的确方便很多，在此记录一下我在该服务与 Apache 结合使用的配置过程。

阿里云日志服务官方介绍

日志服务（Log Service，简称 LOG/原 SLS）是针对实时数据一站式服务，在阿里集团经历大量大数据场景锤炼而成。
提供日志类数据采集、消费、投递及查询分析功能，全面提升海量日志处理/分析能力，服务智能研发/运维/运营/安全等场景。

本示例环境

  • Ubuntu：16
  • Apache：2.4.18

我只在当前环境下进行过配置，其他环境请酌情参考。

流程

一：开通日志服务

官方网站
官方文档

目前计费标准

计费项 公有云价格 金融云价格 免费额度
读写流量 0.18 元/GB 0.342 元/GB 500 MB / 月
索引流量 0.35 元/GB 0.665 元/GB 500 MB / 月
存储空间 0.0115 元/GB*天 0.01725 元/GB*天 500 MB / 月

二：创建 Project 和 日志库

此部分配置建议参考官方的 五分钟快速入门 的 步骤一，需要注意到是 Project 与服务器最好在同一个区域，这样会通过内网获取日志，速度更快，也能避免产生公网流量。

三：服务器配置

添加自定义 Apache 日志格式

本示例中 apache 安装目录是 /etc/apache2，日志存储目录是 /var/log/apache2，读者请根据自己安装情况进行更改

Apache 日志配置参数在 /etc/apache2/apache2.conf 文件中，默认提供 combined、common 甚至更多配置格式，不建议使用，因为包含的信息不是很全面，编辑此文件新增日志格式。

1
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %D %f %k %p %q %R %T %I %O" customized

customized 为该日志格式的名称

编辑网站配置文件 /etc/apache2/sites-available/{自己定义的网站名}.conf

本示例网站配置文件

1
2
3
4
5
6
7
<VirtualHost *:80>
  ServerName {你的域名}
  ServerAdmin {邮箱}
  DocumentRoot {网站源代码目录}
  ErrorLog "/var/log/apache2/edunuke_errors.log"
  CustomLog "/var/log/apache2/edunuke_accesses.log" customized
</VirtualHost>

其中 CustomLog 项配置的是网站访问日志保存的路径和文件名，可以自定义，路径后面的 customized 是/etc/apache2/apache2.conf中配置的日志格式名，这里使用刚刚新建的日志格式 customized。保存此处配置的日志存储路径用于后续操作

配置完后重启 Apache:

1
# /usr/sbin/apachectl restart

四：安装阿里云 Logtail 工具

官方详细安装文档 Linux 安装教程

建议通过自动选择安装参数方式安装，安装完毕后在app_info.json文件中查看当前服务器 ip 地址。保存该 ip 地址用于后续的机器组配置。

app_info.json文件路径：

1
2
3
Linux：/usr/local/ilogtail/app_info.json
Windows x64：C:\Program Files (x86)\Alibaba\Logtail\app_info.json
Windows x32：C:\Program Files\Alibaba\Logtail\app_info.json

五：阿里云控制台配置 Apache 日志服务

此部分配置建议参考官方文档的 分析 Apache 日志 部分

在该教程中的操作步骤部分的第 4 步中，日志格式选择自定义，Apache 配置字段填写前文新增的自定义日志格式参数。
在该教程中的操作步骤部分的第 5 步中创建机器组的时候，需要填写的 服务器 ip 为前文中 Logtail 工具获取的 ip 地址。

创建完毕后进入日志库的 Logtail 机器组 选项检查状态，操作如图：

查看状态

如果心跳 OK 说明连接成功。

六：查询日志

进入日志库，找到刚刚创建 Logstore，点击查询进入查询界面就可以看到已经获取到的日志信息，查询界面可以进行复杂条件的语句查询和可视化配置。

示例：查询用户 ip 所在省份并生成可视化图表

查询语句 * | select ip_to_province(remote_addr) as address, count(1) as count group by address order by count desc limit 10

然后选择统计图表，切换到中国地图部分，就能查看到所生成的图表。也可以将该图表添加到仪表盘，后续可以直接浏览。

具体操作请看官方文档用户指南目录下的 查询与分析 和 数据可视化 两部分。

发表于

create-mutiple-page-webapp

愉快的开发多 html 页面应用

About

有些时候，前端开发不一定都是单页应用，而是传统多 html 页面，然后将这些页面交给后端进行部署，也可以理解为多页应用的前后端分离开发。这种类型的项目是以多个 html 文件为入口的，所以类似于 React 等项目构建方式不太适用，因为 webpack 是以 js 文件为入口的。

所以为了能够用 typescript、less 等高级语法编写这种类型的项目，又能很好兼容浏览器，我搭建了一个基于 gulp 的多页面项目脚手架.

Install

get code

1
git clone --depth 1 https://github.com/Houserqu/create-mutiple-page-webapp

install dependence

yarnpkg or npm i

Deployment

开发模式

使用 npm run dev 命令会在本地启动开发服务器，当代码文件变动时会自动刷新页面。

构建

使用 npm run build 命令构建代码到 dist 目录

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
├── LICENSE
├── README.md
├── gulpfile.js                // gulp 配置文件，可以根据需要更改
├── package.json
├── src                       // 源代码目录
│   ├── 404.ejs
│   ├── LICENSE.txt
│   ├── browserconfig.xml
│   ├── doc                   // h5-Boilerplate 说明
│   │   ├── ...
│   ├── favicon.ico
│   ├── humans.txt
│   ├── icon.png
│   ├── index.ejs             // 默认首页
│   ├── js                    // js 文件
│   │   ├── main.ts           // ts 文件都会通过 browserify 打包
│   │   ├── utils.ts
│   │   └── vendor            // 类库文件，不会被打包
│   │       └── modernizr-3.7.1.min.js
│   ├── robots.txt
│   ├── site.webmanifest
│   ├── style                 // less 样式文件目录
│   │   ├── main.less
│   │   └── normalize.less
│   ├── template-public       // 公共 ejs 模板文件木
│   │   └── header.ejs
│   ├── tile-wide.png
│   └── tile.png
├── tsconfig.json              // typescript 配置文件
└── yarn.lock

Built With

Contributing

欢迎 PR

Authors

License

MIT licensed

发表于

函数记忆

函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。

实现原理

构造一个记忆封装函数 memoize()，接受功能函数作 func() 为参数，返回一个包装后的新函数 memoizedFunc(), memoizedFunc 函数会缓存每次结算结果，并检查前后两次调用时接受的参数是否一致，如果是直接返回结果，跳过 func() 方法的执行。还得考虑到多参数问题。

实际使用时可以用这个库

underscore 代码实现

1
2
3
4
5
6
7
8
9
10
11
12
var memoize = function(func, hasher) {
    var memoize = function(key) {
        var cache = memoize.cache;
        var address = '' + (hasher ? hasher.apply(this, arguments) : key);
        if (!cache[address]) {
            cache[address] = func.apply(this, arguments);
        }
        return cache[address];
    };
    memoize.cache = {};
    return memoize;
};

参考链接 https://github.com/mqyqingfeng/Blog/issues/46

深浅拷贝梳理

循环引用

null 值

create-react-app build 后的文件引用采用相对路径

在 package.json 文件中 增加 一级 "homepage": "./",配置。

1
2
3
4
5
6
7
{
  "name": "my-create-react-app",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  ...
}

重新构建后生成的 html 文件就会用相对路径的形式引入其他文件。

导出 mysql 表的结构和注释到 Excel

发现大部分数据库管理软件都不支持直接将表结构导出成 Excel 格式，但是这些软件基本上都支持 sql 查询并已表格形式展示结构，查询结果是支持导出 csv 的。

所以可以通过如下 sql 语句将所有表的结构信息输出，然后手动导出或者复制结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
SELECT  
    TABLE_NAME 表名,
    COLUMN_NAME 列名,  
    COLUMN_TYPE 数据类型,  
    DATA_TYPE 字段类型,  
    CHARACTER_MAXIMUM_LENGTH 长度,  
    IS_NULLABLE 是否为空,  
    COLUMN_DEFAULT 默认值,  
    COLUMN_COMMENT 备注   
FROM  
    INFORMATION_SCHEMA.COLUMNS  
WHERE  
-- test_database为数据库名称，到时候只需要修改成你要导出表结构的数据库即可  
table_schema ='test_database'  
-- AND  
-- test_table为表名，到时候换成你要导出的表的名称  
-- 如果不写的话，默认会查询出所有表中的数据  
-- table_name  = 'test_table'

具体操作参考这里

导出后可能出现乱码的请求，这是可以参考这篇文章

发表于

背景

之前一直都是用 php 做网站开发，自己弄了个学生版云服务器，把网站都放在上面，当时不擅长 linux，一键搭建了一个 amh，可以非常方便的搭建常用的网站运行环境，但是需要收费 6元/月，但是把所有网站数据交给他处理，还是有点不放心，而且我这个 cenos 系统运行有差不多 3年了，最新一直被提醒有漏洞，内存运行异常，所以打算彻底重装一次，不再用第三方服务，当然之前的网站也需要再搭建起来。

感觉有点没事找事，程序员就喜欢瞎折腾吧。

流程

备份数据库和网站代码源文件

amh 提供自动备份工具，利用该工具进行立即备份，会同时备份到服务器和第三方云存储，我配置的是七牛云。如果没有配置第三方云存储，则需要下载到自己电脑上，然后上传到重装后的系统上去。

下载备份文件操作

在自己电脑上运行 scp work@xxx.xxx.xxx.xxx:/home/wwwroot/xxxx /desktop/xxxxx

重装服务器

重装系统在阿里云上叫更换系统盘，然后我选择 Ubuntu 16 版本镜像，重装后设置密码

上传备份的文件

依然使用 scp 命令

解压

后台解压，避免终端关闭后中断：( tar -zxvf file.tar.gz.amh &)

安装 apache、php、mysql

apache

1
2
3
// 以 root 身份登录，可以省去 sudo
apt-get update
apt-get install apache2

apache 常用操作 sudo service apache2 restart | stop | start·

php

ubuntu 16 apt-get 工具默认支持 php 7版本以上的安装，如果需要安装 php 5，需要配置镜像源

1
2
3
4
5
sudo add-apt-repository ppa:ondrej/php
apt-get install php5

// 可以顺便安装常用模块
apt-get install php5-mysql php5-curl php5-gd php5-intl php-pear php5-imagick php5-imap php5-mcrypt php5-memcache php5-ming php5-ps php5-pspell php5-recode php5-snmp php5-sqlite php5-tidy php5-xmlrpc php5-xsl

mysql

1
sudo apt-get install mysql-server

创建 apache 虚拟主机

  1. copy /etc/apache2/sites-avaliable/default , 命名为 mysite

  2. 修改配置文件：mysite，改成需要的域名和 web 源文件位置

  3. 建立链接文件
    sudo ln -s /etc/apache2/sites-available/mysite /etc/apache2/sites-enabled/mysite

  4. 重启 apache 服务器

service apache2 restart

配置 php 拓展

大部分 php 系统都会依赖第三方拓展，基本上都可以用 apt-get 安装，如下拓展是 thinkcmf 系统必须要的

  • curl

  • GD 图像库 apt-get install php5-gd

  • MBString apt-get install php5-mbstring

在安装拓展的时候，基于 php 5 的拓展会遇到知不道包的问题，需要更换镜像源，包名的 php不携带版本号，则默认装最新版本，例如 php-gd。
拓展模块安装后需要重启 apache 页面才生效

数据库

恢复数据库

  • 登录数据库：mysql -u root -p
  • 执行sql：mysql> source sql-file

创建用户

  • 添加用户：CREATE USER 'user-name'@'localhost' IDENTIFIED BY 'user-password'
  • 配置用户数据库权限：GRANT all privileges ON database-name.* TO user-name@localhost identified by 'user-password';
  • 刷新权限配置：flush privileges;

参考链接

发表于 | 分类于

发现一本还不错的 react 相关的书，《React 设计模式与最佳实践》，第一版是 18 年 8 月份的，比较新，目测适合入门和巩固 React 开发的人，更加全面的了解 React 的开发，不涉及到源码解读等。这里记录一下阅读后我不熟悉的或值得记录的点。

JSX

jsx 中插入多空格

<div>a{" "}b{" "}c</div>

条件渲染

很多时候需要根据条件判断是否需要渲染某个组件，常常我们会这样写：

1
<div>{dataIsReady && (isAdmin || userHasPermissions) && <SecretData />}</div>

如果条件比较复杂，可以抽离出判断规则为一个方法： this.isRender && <SecretData />。
为了保证组件的纯净，可以使用 react-only-if 这个库，能够快速的创建出根据条件渲染的高阶组件。

展开属性

属性可以直接传入一个展开的对象，不用一个一个对应再写一遍 <button {...props} />

getter

age(){} => get age()，使用的时候可以省略括号，相当于一个值，可以类比为 vue 中的计算属性。

动画

推荐一个库react-transition-group，能够更方便的控制多个状态。

性能优化

环境

用 webpack 打包的时候区分好生产环境和开发环境。

函数式组件

该类型组件没有实例化过程，所以没有自己的生命周期和状态，适合用来构建大型的组件，因为耦合度更低。多使用函数式组件能够让思路更清晰。

手动控制组件更新

合理使用 shouldComponentUpdate() 方法和 PureComponent 组件，减少没必要的组件更新。

props 常量对象

将一个常量对象作为 props 时最好在外部创建，通过引用传入，而不是在属性上创建，同理绑定 props 方法时也是这样。这样能够避免每次 update 都重复创建，以及在循环中重复创建。

bad:

1
2
<Com status={[1: 'a', 2: 'b']} />
<Com status={() => {}} />

good:

1
2
<Com status={this.status} />
<Com status={this.fun} />

代码风格

强烈建议项目中加入 eslint 等代码风格检查工具，配合 ide 插件能够实时提醒，保证多人开发的时候看到的代码是一致的。另外推荐 prettier，一个代码自动格式化工具，eslint 虽然提示了，但是自己手动修改也是麻烦，该库能够根据 eslint 配置或者个人配置自动格式化代码，完美搭档。

函数式编程

我个人的理解是运用柯里化、组合、链式调用等技巧写出没有副作用、简单明了、易于维护的代码。而 es6 可以很方便的实现这几个技巧。

CSS

CSS 是前端开发无法避免的话题，文中提到几个 css 写法：Css in JavaScript、 style、 Radium，其实这三个都是都是行内样式的写法，实际开发时并不推荐，样式不好复用，相当于阉割版 css，无法使用 less/scss 等优秀的预处理器。个人觉得最合适的还是 CSS Module，灵活，纯正。

服务端渲染

一直没有去尝试做这个，服务端渲染技术能够改善 SEO 和首屏加载速度，因为首屏页面是在服务端进行的，而不是浏览器端，这样页面能够更快速的呈现。实现需要后端配合。

测试与调试

目前我都没有在项目中写个测试，对于 react 组件，测试写起来比较繁琐，而且变化也很频繁，的确让人容易怯步，后续可以考虑一下，或许需要重新审视一下测试。

react 调试比较有用的是 react-devtools 和 redux-devtools，前者调试组件，后者调试 redux

发表于 | 分类于

这周 Javascript Weekly 给我推送了一个很不错的文章，也可以说是个项目：33 Concepts Every JavaScript Developer Should Know ，即《每个 JavaScript开发者都应该知道的 33 个概念》。该项目的是根据 Stephen Curtis 发表的一篇文章《33 Fundamentals Every JavaScript Developer Should Know》提到的概念对应的收集了相关的文章和视频，便于开发者了解和学习。

本文列出提到的 33 个概念，详细内容去项目github查看

  1. Call Stack 调用栈
  2. Primitive Types 原始类型
  3. Value Types and Reference Types 值类型和引用类型
  4. Implicit, Explicit, Nominal, Structuring and Duck Typing 隐式，显式，名义，结构和鸭子类型
  5. == vs === vs typeof
  6. Function Scope, Block Scope and Lexical Scope 方法作用域，块作用域，词法作用域
  7. Expression vs Statement 表达式 vs 语句
  8. IIFE, Modules and Namespaces 立即执行函数，模块，命名空间
  9. Message Queue and Event Loop 消息队列和事件轮询
  10. setTimeout, setInterval and requestAnimationFrame 定时器，循环执行，动画帧方法
  11. JavaScript Engines JavaScript 引擎
  12. Bitwise Operators, Type Arrays and Array Buffers 位运算符，类型数组
  13. DOM and Layout Trees DOM树和结构树
  14. Factories and Classes 工厂方法和类
  15. this, call, apply and bind
  16. new, Constructor, instanceof and Instances
  17. Prototype Inheritance and Prototype Chain 原型继承和原型链
  18. Object.create and Object.assign
  19. map, reduce, filter
  20. Pure Functions, Side Effects and State Mutation 纯函数，副作用，状态突变
  21. Closures 闭包
  22. High Order Functions 高阶函数
  23. Recursion 递归
  24. Collections 集合
  25. Promises
  26. async/await
  27. Data Structures 数据结构
  28. Expensive Operation and Big O Notation 高开销操作和复杂度
  29. Algorithms 算法
  30. Inheritance, Polymorphism and Code Reuse 继承，多态和复用
  31. Design Patterns 设计模式
  32. Partial Applications, Currying, Compose and Pipe 部分函数应用，柯里化，组合和链式调用
  33. Clean Code 代码整洁

发表于 | 分类于

getBoundingClientRect()

需求：判断页面是否已经阅读完；
思路：判断某个元素是否在视口中，dom 对象有 getBoundingClientRect()，能够得到该元素相对视口的距离，从而判断元素是否被看到。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

微信浏览器内 唤起 App

`
基本上无法实现，微信限制了该功能。

微信 JSSDK未公开的一篇文档，提到过一个 Birdge getInstallState 获取某app是否已安装 不过这是一个未公开的方法，不建议使用。

https://segmentfault.com/a/1190000012940046

文字渐变

可以参考这个 demo，需要注意兼容性

http://demo.doyoe.com/css3/text-fill-color/gradient-text.htm

img 之间有缝隙

多个 img 自动换行显示的时候，上下相邻的图片会出现间隙，即使 margin:0，比较简单的方式是让 img 的 display: block；其他解决方法和导致原因参考链接

https://www.cnblogs.com/JoannaQ/archive/2013/03/16/2962443.html

iphone 网页安全区

iPhone X 的出现导致页面显示区没那没规则，为了保证在 这种机器上显示正常，可以借助 webkit 内核浏览器提供的特殊方法获取到 ‘不安全的区域的尺寸’，从而做兼容性处理。

https://aotu.io/notes/2017/11/27/iphonex/index.html

发表于 | 分类于

循环异步处理

1
2
3
4
5
6
7
8
9
10
const promises = data.map(async item => {
  const res = await fetchLogisticsI({
    expressNo: item.expressNo,
  });
  if (res.success) {
    expressList.push(res.results);
  }
});

await Promise.all(promises);

https://zhuanlan.zhihu.com/p/31000936

英语学习总结

react router 切换路由不刷新

最近遇到一问题，从一个列表页进入详情页，希望再从详情页返回列表页的时候列表页不要刷新，即不再走Mount阶段，组件不要被销毁，因为进入详情页面再返回的操作并不会导致列表数据的更新，而且该列表数据比较复杂，状态较多，渲染成本和数据回显成本较大。查询后发现，路由的切换一定会导致该路由下的组件 unmount。最后处理方式是将数据都放在 redux 里保存，返回后重新渲染。希望有更好的方式。

html 中的层叠关系

html 会遇到需要控制元素显示层级的时候，例如悬浮的按钮，下拉弹窗等。如果需要判断两个元素的层级高低，先判断这些元素是否在同一个 层叠上下文 ，如果在，则判断 层叠顺序 ，如果不在，则判断各自所处的层叠上下文的 层叠顺序。

产生层叠上下文（部分）：

  • position: absolute | relative; z-index: 非 auto;
  • position: fixed | sticky;
  • display: flex | inline-flex; z-index: 非 auto;

层叠顺序：正 z-index > z-index: 0 > inline-block > float > block > 负 z-index > background 和 border

详细讲解见参考链接 https://juejin.im/post/5ba4efe36fb9a05cf52ac192

react 设计模式与最佳实践

发现一本还不错的 react 相关的书，《React 设计模式与最佳实践》，第一版是18年8月份的，比较新，目测适合入门和巩固 React 开发的人，更加全面的了解 React 的开发，应该不涉及到源码解读等。后续打算整理成一篇博文，记录一下重点。

用 Vultr 搭建 shadowsocks

最近看到 vultr 服务器提供商有新注册送25美元的活动，打算在此mark一下。

对于程序员来说怎么能不翻墙呢。个人翻墙最方便的方式是用 shadowsocks，不过需要专门的海外服务器搭建shadowsocks服务端。目前流行两种方案：

  • 购买别人搭建好了的服务，与别人共享一台服务器和带宽，这种方式省事，便宜。
  • 自己购买 vps，搭建 shadowsocks服务。

对于开发者来说，建议后者，搭建服务并不难，有教程，在此提供一个不错的教程，自己搭建的服务器比较放心，安全，而且可以做些其他的用途，放些网站等。Vultr 我用了很久，比较稳定，最近有新用户充 $10 送 $25 的活动，值得下手，最便宜的 $2.5 / 月

发表于 | 分类于

Disqus 代理配置

准备将我的博客的评论功能从畅言换成 disqus，因为前者太难看了，但是 disqus 不翻墙的情况下无法访问，所以需要做点处理，可以使用如下方式。

https://github.com/ciqulover/disqus-proxy
https://github.com/ciqulover/disqus-proxy-server

本地 nginx 代理

我们公司的前后端分离方式是将前端部分的请求转发到开发者电脑的服务上，开发前访问携带本机 ip 访问指定请求，后端将 ip 写入 cookie，本机进行单页应用开发的时候会启动本地服务，后续本机访问 web 页面时，服务端会将页面 js 等相关的请求转发到本地上，而 ajax 请求不转发，从而实现前端本地开发和调试。

然而，存在部分 api 也被转发到了前端开发者本地电脑上，导致接口无法正常访问，因为前端本机只有前端相关资源，该 api 无法整处理。与同事讨论后有两种解决方案：

  • 用 Charles (Mac) 进行拦截，不过没有尝试。
  • 本地开启 nginx 进行代理，符合条件的路径转发到指定域名上去。

如上两种方式，本质上都是做一个请求拦截，符合条件的请求转发到正确的路径上去。

英语学习指导

逛 Github 的时候无意间发现了一个 repository, 叫 English-level-up-tips-for-Chinese，让我意外的是居然也有 1 万多 start，大概浏览了一遍，感觉蛮受用，刚好现在一直有打算学号英语的心愿。在此 mark 一下。