手把手教你用Python Flask和JavaScript实现一个JsonRPC 2.0的完整前后端交互Demo

从零构建Python Flask与JavaScript的JsonRPC 2.0全栈实践指南在分布式系统开发中远程过程调用RPC技术如同隐形的桥梁让不同服务间的通信变得像本地函数调用一样自然。而JsonRPC 2.0作为其中最轻量级的协议之一凭借其JSON格式的简洁性和跨语言兼容性成为现代Web开发中不可或缺的工具。本文将带您从零开始用Python Flask构建后端服务配合原生JavaScript前端打造一个完整的远程计算器应用。1. 环境准备与项目初始化在开始编码之前我们需要搭建好开发环境。这个计算器demo虽然简单但完整呈现了JsonRPC的核心流程。建议使用Python 3.8和Node.js 16环境。首先创建项目目录结构/jsonrpc-demo │── server/ │ ├── app.py │ ├── requirements.txt │── client/ │ ├── index.html │ ├── app.js安装Flask后端依赖# server/requirements.txt flask2.3.2 flask-cors3.0.102. 构建Flask JsonRPC服务端2.1 基础服务搭建在app.py中我们先初始化Flask应用并启用CORS支持from flask import Flask, request, jsonify from flask_cors import CORS app Flask(__name__) CORS(app) # 允许跨域请求 app.route(/api, methods[POST]) def jsonrpc_endpoint(): 处理所有JsonRPC请求的入口 try: data request.get_json() # 基础验证 if not data or jsonrpc not in data or data[jsonrpc] ! 2.0: return jsonify({ jsonrpc: 2.0, error: {code: -32600, message: Invalid Request}, id: data.get(id, None) }), 400 # 方法路由 method data.get(method) if method calculate: return handle_calculate(data) else: return jsonify({ jsonrpc: 2.0, error: {code: -32601, message: Method not found}, id: data.get(id) }), 404 except Exception as e: return jsonify({ jsonrpc: 2.0, error: {code: -32603, message: str(e)}, id: data.get(id) }), 5002.2 实现计算器方法添加具体的计算方法处理def handle_calculate(data): params data.get(params, {}) operation params.get(operation) operands params.get(operands, []) if not operation or not operands: raise ValueError(Missing required parameters) try: if operation add: result sum(operands) elif operation subtract: result operands[0] - sum(operands[1:]) elif operation multiply: result 1 for num in operands: result * num elif operation divide: result operands[0] for num in operands[1:]: result / num else: raise ValueError(fUnsupported operation: {operation}) return jsonify({ jsonrpc: 2.0, result: result, id: data.get(id) }) except ZeroDivisionError: raise ValueError(Division by zero) except Exception as e: raise ValueError(fCalculation error: {str(e)})3. 前端JavaScript实现3.1 基础HTML界面创建client/index.html文件!DOCTYPE html html head titleJsonRPC Calculator/title style .calculator { max-width: 400px; margin: 0 auto; } .result { margin-top: 20px; font-weight: bold; } .error { color: red; } /style /head body div classcalculator h1远程计算器/h1 div select idoperation option valueadd加法/option option valuesubtract减法/option option valuemultiply乘法/option option valuedivide除法/option /select /div div input typetext idoperands placeholder输入数字用逗号分隔 /div button onclickcalculate()计算/button div classresult idresult/div /div script srcapp.js/script /body /html3.2 JsonRPC客户端实现在app.js中添加核心逻辑const API_URL http://localhost:5000/api; async function calculate() { const operation document.getElementById(operation).value; const operandsInput document.getElementById(operands).value; const resultDiv document.getElementById(result); try { // 解析输入 const operands operandsInput.split(,) .map(num parseFloat(num.trim())) .filter(num !isNaN(num)); if (operands.length 1) { throw new Error(至少需要一个有效数字); } // 构造JsonRPC请求 const request { jsonrpc: 2.0, method: calculate, params: { operation, operands }, id: Date.now() // 使用时间戳作为唯一ID }; // 发送请求 const response await fetch(API_URL, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify(request) }); const data await response.json(); // 处理响应 if (data.error) { resultDiv.innerHTML span classerror错误: ${data.error.message}/span; } else { resultDiv.textContent 结果: ${data.result}; } } catch (error) { resultDiv.innerHTML span classerror客户端错误: ${error.message}/span; } }4. 高级功能与调试技巧4.1 批量请求处理JsonRPC 2.0支持批量请求可以一次发送多个方法调用。在Flask端添加批量处理支持app.route(/api, methods[POST]) def jsonrpc_endpoint(): data request.get_json() # 处理批量请求 if isinstance(data, list): results [] for request_item in data: try: if not isinstance(request_item, dict) or jsonrpc not in request_item: results.append({ jsonrpc: 2.0, error: {code: -32600, message: Invalid Request}, id: request_item.get(id, None) }) continue method request_item.get(method) if method calculate: with app.test_request_context(): response handle_calculate(request_item) results.append(response.get_json()) else: results.append({ jsonrpc: 2.0, error: {code: -32601, message: Method not found}, id: request_item.get(id) }) except Exception as e: results.append({ jsonrpc: 2.0, error: {code: -32603, message: str(e)}, id: request_item.get(id) }) return jsonify(results) # 单请求处理原有代码 ...4.2 使用中间件增强安全性为生产环境添加基本的安全防护from functools import wraps def validate_jsonrpc(f): wraps(f) def decorated_function(*args, **kwargs): data request.get_json() # 检查Content-Type if request.content_type ! application/json: return jsonify({ jsonrpc: 2.0, error: {code: -32700, message: Parse error}, id: None }), 400 # 检查基本结构 if not data or not isinstance(data, (dict, list)): return jsonify({ jsonrpc: 2.0, error: {code: -32600, message: Invalid Request}, id: None }), 400 return f(*args, **kwargs) return decorated_function app.route(/api, methods[POST]) validate_jsonrpc def jsonrpc_endpoint(): ...4.3 前端调试技巧在开发过程中可以使用以下方法调试JsonRPC通信浏览器开发者工具在Network标签中查看请求/响应详情检查请求头是否包含Content-Type: application/json请求日志// 在发送请求前添加日志 console.log(Sending JsonRPC request:, JSON.stringify(request, null, 2)); // 在收到响应后添加日志 console.log(Received JsonRPC response:, JSON.stringify(data, null, 2));错误处理增强// 在catch块中添加更多调试信息 console.error(Request failed:, { url: API_URL, request, error: error.stack || error.message });5. 常见问题解决方案在实际开发中可能会遇到以下典型问题5.1 CORS问题即使使用了flask-cors有时仍需要更精确的配置CORS(app, resources{ r/api: { origins: [http://localhost:3000, https://your-production-domain.com], methods: [POST], allow_headers: [Content-Type] } })5.2 参数验证更健壮的参数验证实现from jsonschema import validate, ValidationError CALCULATE_SCHEMA { type: object, properties: { operation: {type: string, enum: [add, subtract, multiply, divide]}, operands: { type: array, items: {type: number}, minItems: 1 } }, required: [operation, operands] } def handle_calculate(data): try: validate(instancedata.get(params, {}), schemaCALCULATE_SCHEMA) except ValidationError as e: raise ValueError(f参数验证失败: {e.message}) ...5.3 性能优化对于高频调用的JsonRPC接口可以考虑添加请求缓存使用更高效的JSON解析器如orjson实现异步处理import orjson app.route(/api, methods[POST]) def jsonrpc_endpoint(): # 使用orjson加速JSON解析 try: data orjson.loads(request.data) except orjson.JSONDecodeError: return jsonify(...), 400 ...这个完整的JsonRPC 2.0实现demo虽然聚焦于计算器功能但展示了协议的核心要素。在实际项目中我曾遇到过一个有趣的案例由于没有正确处理批量请求中的错误导致前端状态混乱。后来通过为每个请求添加独立的错误处理才解决问题这提醒我们在实现RPC接口时细致的错误处理与清晰的协议遵循同样重要。