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,你无须超越谁,只要超越昨天的自己就好~