003利用框架koa完成Node.js的html文件访问与API请求共存方案

最新推荐文章于 2024-04-04 10:20:28 发布

阿赛工作室

最新推荐文章于 2024-04-04 10:20:28 发布

阅读量226

点赞数

分类专栏：物联网项目开发笔记文章标签： html node.js 前端

本文链接：https://blog.csdn.net/qq_25753445/article/details/127431301

版权

003利用框架koa完成Node.js的html文件访问与API请求共存方案

前置依赖安装

npm i koa koa-router koa-static 安装koa框架，koa-router路由管理插件，koa-static静态资源展示插件。

引入koa服务

const Koa = require('koa');
const app = new Koa();

通过koa内部封装好的上下文进行客户请求判断处理，如：get、post、html页面等

app.use(async (ctx: any, next: any) => {
   
  // 解构上下文中的请求地址url与请求方式method
  const {
    url, method } = ctx;
  // 设置API请求白名单，只有设置了白名单才能进入API
  const apiWhiteLists = [
    '/home/index',
    '/home/test',
    '/page/api',
    '/page/404',
    '/page/helloworld',
  ];
  if (url.startsWith('/socket')) {
   
    // 跳过一些特殊请求体，如：socket.io的插件轮询
    console.log(666.201, '进入WS通信', url, method);
  } else if (apiWhiteLists.includes(url)) {
   
    // 前端调用示例：const value = await axios.post('http://127.0.0.1:9098/page/api');
    console.log(666.202, '进入API请求', url, method);
    // 这里的菜单项，仅在未启用静态资源访问时可在浏览器上看到
    let apiMenu = `<div><ul>`;
    apiWhiteLists.forEach((item) => {
   
      apiMenu += `<li><a href="${
     item}">${
     item}</a></li>`;
    });
    apiMenu += `</ul></div>`;

    // 接下来是路由处理的部分
    const Router = require('koa-router'); // 引入路由插件
    // 子路由home
    let home = new Router();
    // 采用链式调用分发子路由
    home
      .get('/index', async