react学习系列3 使用koa-router模拟后台接口

简介: 当用create-react-app创建好项目,启动后会自动打开 localhost:3000。 我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求,拿到我们想要的 json 数据。
+关注继续查看

当用create-react-app创建好项目,启动后会自动打开 localhost:3000。
我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求,拿到我们想要的 json 数据。并渲染到前台。
这样的话需要先创建一个后台服务器。我们使用NodeJS的 express 或 koa 服务器框架。下面以 koa 为例。

实现方法如下:

  1. 安装koa和koa-router。注意我的当前版本是最新的 koa2.3.0 和 koa-router7.2.1
    yarn add koa koa-router

  2. 项目根目录创建一个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',
    }
]
  1. 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 就启动了这个后台服务

  2. 在 react 中比如入口的 index.js 中添加测试代码。
    我们使用 fetch ,发起客户端请求。

fetch('/api/todos')
  .then(res => res.json())
  .then(res => {
    console.log(res)
  })

参考:

相关文章
|
30天前
|
前端开发 JavaScript API
React高阶学习(二)
@[TOC](目录) # 1. 基本概念和语法 React 是基于 JavaScript 的库,用于构建用户界面。它采用虚拟 DOM 技术,能够高效地渲染页面。React 的基本语法包括 JSX、组件、状态管理和生命周期钩子等。 示例: ```jsx import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick = (
|
30天前
|
资源调度 前端开发 JavaScript
React学习(一)
@[TOC](目录) React 是一款由 Facebook 开发的 JavaScript 类库,用于创建 Web 用户交互界面。它引入了一种新的方式来处理浏览器 DOM,使它更具有扩展性,更加容易加入新的功能。在解析 React 编程之前,我们先来了解一下 React 的基本概念和特点。 # 一、React 的基本概念和特点 1.虚拟 DOM React 使用虚拟 DOM 来模拟真实的 DOM 树,从而避免了频繁的 DOM 操作。当数据发生变化时,React 会首先在虚拟 DOM 中更新,然后再与真实的 DOM 进行比较,仅更新有变化的部分。这种方式既提高了性能,又减少了代码量。 2.组件化
|
1月前
|
前端开发
前端学习笔记202307学习笔记第五十六天-react学习-2
前端学习笔记202307学习笔记第五十六天-react学习-2
19 0
|
1月前
|
前端开发
前端学习笔记202307学习笔记第五十六天-react学习-1
前端学习笔记202307学习笔记第五十六天-react学习-1
14 0
|
1月前
|
JavaScript 前端开发 中间件
【react入门手册】学习react-redux,看这篇文章就够啦!
【react入门手册】学习react-redux,看这篇文章就够啦!
|
2月前
|
缓存 开发框架 前端开发
前端三剑客React框架第一课入门的学习
前端三剑客React框架第一课入门的学习
37 0
|
2月前
|
资源调度 前端开发 JavaScript
React+TS学习和使用
React+TS学习和使用
|
2月前
|
存储 缓存 资源调度
React学习1
多次setState只会进行一次render,会把所有setState合并再进行render
|
2月前
|
前端开发 JavaScript
React学习1
最近做一个项目需要用到react,就开始学习一下react吧
|
2月前
|
前端开发 JavaScript
学习React Hooks和TypeScript打造的仿Antd的UI组件库
✨ RockUI 学习React Hooks和TypeScript实现仿Antd的react UI组件库,并通过此组件库在create-react-app的基础上实现了一套简单的应用,下方链接 样式解决方案——saas 测试——Jest框架 Icon库基于react-fontawesome github 文档 文档使用storybook进行展示 使用eslint和prettier对代码风格进行约束 使用见README.md,学习及开发中的问题与解决见STUDY_README.md
42 0
相关产品
云迁移中心
相关实验场景
更多
推荐文章
更多