Koa+React实现form表单上传文件

在nodejs里面通过html的表单上传图片,跟php比较起来还是麻烦一些,特别是在react中使用表单提交含有文件的数据。

最近也在做这个操作,找了很多资料,一直都是有个co-busboy这个,其实它也是基于busboy去封装的,不过这个更适合在koa里面使用。

以往的表单提交,我们用浏览器去debug的时候,会看到,提交了一个post提交的数据,这个一般只是值的提交,不包括有文件,但是在react






...

React中上传图片到qiniu

在React中使用qiniu上传图片,实现方式有很多种,一种是在web端实现上传,一种是在server端实现上传

这里我说下我是如何在web端实现上传图片到七牛的

七牛的官方已经有了javascript的使用说明我这里就不重复了。

使用React首先是要把qiniu提供的js引入,由于我这里是使用的webpack,所以我就直接放在了引入文件中,

这样我就可以全局引用了。

require('./qiniu.j





...

github-gist-hosts 设置

最近打开gist.github.com就会出现问题,打不开,记录一个推荐的办法,很有效果

192.30.252.141 gist.github.com    
185.31.17.184 github.global.ssl.fastly.net    
185.31.17.184 github-camo.global.ssl.fastly.net

很有效果,不信你也试试

centos 6.6 通过 yum 升级gcc到4.7/4.8

前文:

别傻了,还通过源码去安装,很费时间的,而且安装完你还要去考虑本地的gcc版本问题,这里给大家提供一个很简答的方法.

第一部分:升级到4.7

cd /etc/yum.repos.d
wget http://people.centos.org/tru/devtools-1.1/devtools-1.1.repo 
yum --enablerepo=testing-1.1-devtools-6 ins

...

react innerHtml 赋值操作

使用react的时候,总有一些变量是html的字符串,但是我们却想要实现innerHtml的类似方法,直接用html进行渲染。

这里react提供了一个dangerouslySetInnerHTML方法,可以实现此赋值操作。具体详情可以自己去google一个下,关键字:'react dangerouslySetInnerHTML'.

下面是我为记录的一个示例,可以作为一个简单的demo了。

const 

...

koa-2 实现验证码验证

首先安装验证码插件

这里推荐使用ccap,这个插件是我在寻找过程中,觉得能跟koa搭配比较好的一个插件,其他的要不就是需要express,要不就是需要安装其他一系列比较大的类库。

npm install ccap --save

如何使用?

const ccap = require('ccap')();
home.get('/home', (ctx, next) => {
  return next().t

...

React 实现代码高亮

使用插件google的prettify和jquery的format 完成了一套很完美的代码高亮显示,还能自动格式化。


先说jquery.format的接入【我这里开发是用的webpack】

在引入文件中使用reqiure方法,把jquery.format加入到js代码中。

require('./jquery.format.js');

jquery.format.js 这个文件我放在了与引入文件同级的目录下






...

在express中使用co

以下支持的Nodejs版本是 >=4.2.1

在express中我们都知道,我们可以在文件中定义一个方法,如下,然后可以在router中调用这个方法进行相应的处理。但是我们不想一直去写一些回调的方法,

希望对于异步的处理能像写顺序编程那样一直按照逻辑顺序去执行,co就帮了我们一个大忙,试试如下这种方式吧。【前提是要安装下co】

module.exports.addBackground = functio

...

Node开发部署环节整理

做web网站开发一般都会分为三个环节:开发阶段【开发模式】、调试阶段【调试模式】、部署阶段【部署模式】

在Node的环境中:


开发阶段我们希望能够即使响应我们的开发速度,node启动的方式大家都知道 node app.js ,如果中间有修改的话,就不能即使响应了,需要我们自己再去重新启动。

所以我们的开发阶段最好是安装一下supervisor

安装

npm install --save-dev superv



...

React Prop 验证

本文主要是引入官方的使用,如果此时间较晚,可到官方查看较新使用说明:

React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别:

React.createClass({
  propTypes: {
 

...