React+Koa简单实现静态接口数据回显

120 阅读1分钟

简单实现接口查询及前后端项目分离

后端 koa koa-router

index.js

const Koa = require('koa')
const logger = require('koa-logger')
const useRouter = require('./routes/user')
const cors = require('koa2-cors')
//创建koa实例
const app = new Koa()

app.use(cors())
app.use(logger())

app.use(useRouter.routes()).use(useRouter.allowedMethods())

app.listen(8002,
    () => {
        console.log('http://127.0.0.1:8002 服务器已启动')
    }
)

routes/user.js

const Router = require('koa-router')
const user = require('../services/user')
let router = new Router()

//获取列表数据
router.get('/getTable', async (ctx) => { 
    ctx.body = { data: 'Hello from the backend!' };
})

module.exports = router
前端 react react-router

package.json "proxy": "http://localhost:8002", apis/index.js

/**
* 申请
* @param params
*/
export const applictionGetAPI = (params?: applictionSubmitType): Promise<string> => {
   return GET('/getTable')
 }

index.ts

 /**
    * @description: 查询数据
    * @return {*}
    */
   const onSearchTable = async () => {
       try {
           const RES = await applictionGetAPI()
       } catch (e) {
           console.log('错误', e)
       } finally {

       }

   }

image.png