如何在Framework7+Node.js应用中从客户端触发服务端函数获取动态JSON

问题根源梳理 #

你当前使用的带Vite的Framework7初始化项目是纯前端静态项目，本身不集成Node.js后端服务，所以找不到服务端代码文件是正常情况，需要单独搭建配套后端服务，前后端通过HTTP接口通信即可实现需求。 #

实现步骤 #

1. 搭建Node.js后端服务 #

• 项目根目录新建server文件夹存放后端代码，和原有的Framework7前端目录分开
• 在server目录下执行npm init -y初始化，安装依赖：npm install express cors uuid
• 后端基础代码示例（server/index.js）：

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');
const { v4: uuidv4 } = require('uuid'); // 生成唯一文件名避免冲突

const app = express();
const port = 3000;

// 跨域配置，开发阶段也可以用前端Vite代理替代
app.use(cors());
app.use(express.json());

// 暴露生成的JSON文件目录，让前端可以直接访问
app.use('/generated', express.static(path.join(__dirname, 'public/generated')));

// 触发生成JSON的接口
app.post('/api/generate-json', (req, res) => {
  // 此处替换为你自己的业务逻辑，生成需要的JSON数据
  const generateData = {
    time: new Date().getTime(),
    content: '自定义生成的业务内容'
  };
  // 生成唯一文件名
  const fileName = `${uuidv4()}.json`;
  const filePath = path.join(__dirname, 'public/generated', fileName);
  // 写入JSON文件
  fs.writeFileSync(filePath, JSON.stringify(generateData));
  // 返回文件访问地址
  res.json({
    code: 200,
    jsonUrl: `/generated/${fileName}`
  });
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

• 在server目录下新建public/generated文件夹用于存储生成的JSON文件，执行node index.js启动后端服务。

2. 配置Vite代理（解决开发阶段跨域问题） #

打开前端目录的vite.config.js，添加代理配置：

export default {
  // 保留原有其他配置
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      },
      '/generated': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

配置完成后重启前端开发服务生效。

3. 前端Framework7调用逻辑 #

直接使用Framework7自带的app.request方法即可完成流程，示例代码可放在pageInit逻辑块中：

// 第一步：调用接口触发服务端生成JSON
app.request.post('/api/generate-json', function (res) {
  const result = JSON.parse(res);
  if (result.code === 200) {
    // 第二步：拿到返回的地址后请求生成的JSON文件
    app.request.get(result.jsonUrl, function (jsonData) {
      const mobj = JSON.parse(jsonData);
      // 此处处理拿到的动态JSON数据
      console.log(mobj);
    })
  }
})

常见误区说明 #

• 客户端代码本身就不能使用Node.js的require方法导入服务端模块，前后端代码完全分离，仅通过HTTP接口交互即可
• 不需要额外手写XMLHttpRequest，Framework7自带的request方法已经封装了AJAX能力，足够满足需求

内容的提问来源于stack exchange，提问作者kanr