react学习系列3 使用koa-router模拟后台接口
react学习系列3 使用koa-router模拟后台接口
mafeifan
发布于 2018-09-10 11:55:32
发布于 2018-09-10 11:55:32
当用create-react-app创建好项目，启动后会自动打开 localhost:3000。 我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求，拿到我们想要的 json 数据。并渲染到前台。 这样的话需要先创建一个后台服务器。我们使用NodeJS的 express 或 koa 服务器框架。下面以 koa 为例。
实现方法如下：
- 安装koa和koa-router。注意我的当前版本是最新的 koa2.3.0 和 koa-router7.2.1
yarn add koa koa-router - 项目根目录创建一个mock目录，并新建一个server.js 内容如下：
var Koa = require('koa');
var Router = require('koa-router');
var app = new Koa();
var router = new Router();
router.get('/', function (ctx, next) {
console.log('say');
ctx.body = 'hello koa !'
});
// 加前缀
router.prefix('/api');
// 模拟json数据
var todo = require('./todo.js')
router.get('/todos', function (ctx, next) {
console.log('--todo--')
ctx.body = todo
});
// 开始服务并生成路由
app.use(router.routes())
.use(router.allowedMethods());
app.listen(4000);todo.js
module.exports = [
{
title: 'title1',
},
{
title: 'title2',
}
]- package.json 添加代理信息
"proxy": "http://localhost:4000",这样当我们在create-react-app的代码里调用fetch('api/todos')会被代理执行http://localhost:4000/api/todos并且在 script 节点下添加"mock": "node ./mock/server.js"这样执行yarn mock就启动了这个后台服务 - 在 react 中比如入口的 index.js 中添加测试代码。 我们使用 fetch ，发起客户端请求。
fetch('/api/todos')
.then(res => res.json())
.then(res => {
console.log(res)
})参考：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.11.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读