koa开发的一些问题记录

Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。


koa-static 中间件静态资源路径问题

在入口文件中,使用

1
2
//app.js
app.use(serve("./server/static"));

这段代码会把当前目录下server下的static文件作为静态文件目录,用户直接输入static目录下的文件名即可访问,如:

但是,切不可在 url 上再加上 static 目录,如:

因为在 koa-static 源码中,有着这么一句合并路径的代码

1
2
3
//koa-static/index.js
//root为访问的路径地址,path为静态资源目录地址
path = resolvePath(root, path);

如果访问域名地址和静态资源目录地址有重复的地方,也会合并到最终访问文件的路径中去,这样一来,文件路径就不对了,如下所示:

同样的,如果需要在页面访问 static 时再访问路由,那么就需要在设定指定路由的情况下加载静态资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//当路由检测到访问static地址时,则查找静态资源
//router.js
const static = require("./static");
router.use("/static", static.routes(), static.allowedMethods());

//static.js 设定static下的子路由
const Router = require("koa-router");
const staticController = require("../controllers/static");
const router = new Router();
//在/static/地址下的任何资源都可以被访问
router.get("*", staticController);
module.exports = router;

//staticController.js 控制器,操作页面静态资源
const serve = require("koa-static");
const path = require("path");
module.exports = serve(path.join(__dirname, "./.."));

promise 参数顺序问题

1
2
3
4
//参数位置不能改变,
//@第一个参数 resolve表示成功
//@第二个参数 reject表示错误,拒绝
new promise(resolve, reject);

在使用 ajax 异步传递参数时的问题

在使用 ajax 异步传递表单数据时,koa 不能正常接收 post 方法传递的数据,首先可以为 koa 添加一个 koa-bodyparser 的中间件,它会把数据接收并放在 ctx.requst.body 上。

注意:在使用 ajax 注意规范 dataTypecontentType 的书写规范!!!

如果书写不规范,很有可能不被后台识别,比如 koa-bodyParser 中间键中有判断 contentType 字段来判断类型

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
url: "/users",
dataType: "json",
type: "post",
contentType: "application/json",
data: JSON.stringify({ a: 1 }),
success: function(data, textStatus, jQxhr) {
$("#response pre").html(JSON.stringify(data));
},
error: function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});

如果书写不规范,很有可能不被后台识别,比如koa-bodyParser中间键中有判断contentType字段来判断类型,如果书写不规范,那么就会识别不了前端传过来的值!

1
2
3
4
5
6
7
// default json types
var jsonTypes = [
"application/json",
"application/json-patch+json",
"application/vnd.api+json",
"application/csp-report"
];