本地Koa2与React项目结合

周阳成

2023-12-01

1. 简介

Koa是由Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的Web框架，使用Koa编写web应用，通过组合不同的generator，可以免除重复繁琐的回调函数前腰，并极大地提升错误处理的效率。Koa不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写Web应用变得得心应手。

2. 安装koa-generator

安装：npm install koa-generator
创建koa2项目： koa2 项目名称 例如 koa my-server
安装koa2项目依赖： cd my-server npm install
启动：npm run dev
查看效果：访问localhost:3000

3. 前端项目与Koa项目结合

前端React项目默认启动也是3000端口，同一个端口无法两个项目同时占用，所以通过"start": "PORT=8888 react-scripts start",将React项目自定义8888端口，Koa使用的是3000端口，两者端口不一样，前端就无法直接获取后端的数据，也就是跨域访问。为了解决解决跨域的问题，需要安装 koa2-cors。

3.1 安装 koa2-cors

npm install koa2-cors

3.2 修改Koa配置文件

修改my-server/app.js文件内容

const cors = require('koa2-cors')

app.use(cors({
  origin: function(ctx) {
    return ctx.header.origin
  }, // 允许发来请求的域名
  allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 设置所允许的HTTP请求方法
  credentials: true, // 标示该相应是合法的
}))

3.3 React项目配置代理

package.json文件中增加

"proxy": "http://localhost:3000"

3.4 React项目安装axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

3.5 封装网络请求

react项目封装全局网络请求，使用时引入

src/request/index.js

import axios from 'axios'

//可以根据yarn run 不同的环境去执行正式/测试的接口链接
axios.defaults.baseURL='http://localhost:8888/';
//超过相应的请求时间，请求将不再生效
axios.defaults.timeout=10000;

const get = async (url, params) => {
    return await axios({
        method: 'get',
        url,
        params
    })
     
}

export {
    get
}

在页面中发起网络请求

import { get } from '../../request';

function getArticleContent(id) {
    if(!id) return
    get('/json', {name: '12'}).then((res) => {
        console.log(res, '111')
    })
}

在控制台中我们就会发现返回出来的数据啦

4. 新增接口

在前端分为多个模块，那么与此同时接口也应该分为几个模块，然后对应前端模块去请求对应模块的接口。如：我想增加一个article模块接口

4.1 Koa新增article.js

routes/article.js

const router = require('koa-router')()

router.prefix('/article') // 配置前缀 下面接口相当于访问/article和 /article/detail

router.get('/', function (ctx, next) {
  ctx.body = 'this is a article response!'
})

router.get('/detail', async (ctx, next) => {
  ctx.body = {
    title: 'article_detail json'
  }
})


module.exports = router

4.2 app.js配置接口模块

const article = require('./routes/article')

app.use(article.routes(), article.allowedMethods())

这样我们就可以在项目中进行访问啦~

4.3 koa动态路由

设置动态路由时与前端设置路由类似，采用:[参数]形式，例如

router.get('/detail/:id', async (ctx, next) => {}

获取该动态参数的方法

ctx.params.id

若请求路径为?id=123这种query形式的，获取query方式

ctx.query.id

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

前端项目与koa项目结合
 Koa2中文文档
 axios中文文档