用koa-static做静态文件服务器。
如果和react一起用,会有问题,因为react会做前端路由。
地址栏打入什么都访问不到后端内容。
用fetch可以。
react里组件要取数据,可以在constructor中,props可以通过标记属性传递
如
可以用如下代码访问。
如果希望通过Link 的path传参数,path支持通配符,可以用console.log打印出this.props。自己琢磨下,
,state用来设置组件的内部变量,可以通过button的onClick 事件来响应用户点击。其他事件在react-web中可能不支持
例子中经常用到...props,这是es6的新功能,可以参考
获取上传的文件,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的值(
),赋值给state,或者通过setState更新当前input的值
具体可以打印出event看。
然后在submit事件中,添加处理代码,可以从state里读取到需要的值
找到一种更简单的方法,在submit事件中,可以用如下代码,直接获取表单的value值。
那么在后台呢,如何获得提交的数据和文件?
打印出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
}));