koa2+react 学习备注

用koa-static做静态文件服务器。

如果和react一起用，会有问题，因为react会做前端路由。

地址栏打入什么都访问不到后端内容。

用fetch可以。

react里组件要取数据，可以在constructor中，props可以通过标记属性传递

如

< Test id= "lg3" />

可以用如下代码访问。

id= {this. props. id }

如果希望通过Link 的path传参数，path支持通配符，可以用console.log打印出this.props。自己琢磨下，

，state用来设置组件的内部变量，可以通过button的onClick 事件来响应用户点击。其他事件在react-web中可能不支持

例子中经常用到...props,这是es6的新功能，可以参考

深入理解 ES6 的解构赋值https://segmentfault.com/a/1190000008038703

在node中导入导出用require和module.exports 

在es6中用import 和export

获取上传的文件，koa-body中间件可以看下面的文章

Koa2 之文件上传下载的示例代码

http://www.jb51.net/article/137369.htm

还有

koa-bodyparser

koa-body和koa-bodyparser用哪个好呢？

先看koa的ctx，可以读到query和querystring，所以以get+query方式提交的参数，不需要用中间件了。

如http://localhost:3000/query?a=2&b=3

query={ a: '2', b: '3' }，已经被解析成json

querystring 为 “a=2&b=3”

那么如果是post的数据，则在ctx.request.body中。

在react中，可以在onchange事件中，获取到当前input的值（

event . target . value

），赋值给state，或者通过setState更新当前input的值

具体可以打印出event看。

然后在submit事件中，添加处理代码，可以从state里读取到需要的值

找到一种更简单的方法，在submit事件中，可以用如下代码，直接获取表单的value值。

event . target . disc . value

其中target是当前表单，disc是表单中的某个input对象。这样就可以处理后提交到服务器了。

那么在后台呢，如何获得提交的数据和文件？

打印出ctx.request, 会发现request.body 没有定义。原始的req对象比较难读。

可以用koa-bodyparser中间件。不过koa-body貌似不支持文件上传，

所以我们这里用koa-body，代码如下，具体参考

node.js Koa 框架 的Cookies、表单、文件上传功能详解

https://www.xttblog.com/?p=1753

const os = require( 'os' );

const path = require( 'path' );

const koaBody = require( 'koa-body' );

const fs=require('fs');

const main = async function (ctx) {

   const tmpdir = os.tmpdir();

   const filePaths = [];

   const files = ctx.request.body.files || {};

   for (let key in files) {

     const file = files[key];

     const filePath = path.join(tmpdir, file.name);

     const reader = fs.createReadStream(file.path);

     const writer = fs.createWriteStream(filePath);

     reader.pipe(writer);

     filePaths.push(filePath);

   }

   ctx.body = filePaths;

};

app.use(koaBody({ multipart: true }));