在前端开发中接口未完成时，可通过 sublime text 搭建 mock 数据服务继续开发。1. 安装 package control 插件管理器并重启 sublime；2. 使用 package control 安装 sublimerepl 插件以运行 python；3. 创建 mock_data.json 文件并填写测试数据；4. 编写 mock_server.py 脚本实现 get 接口数据返回；5. 通过 sublimerepl 运行 mock_server.py 启动服务；6. 浏览器访问 http://localhost:8000/users 或 /products 查看对应数据；7. 修改 port 变量可运行多个服务；8. 添加 do_post 等方法支持其他 http 请求；9. 在响应头中添加 access-control-allow-origin 支持跨域请求。该方案使前端开发无需等待后端接口即可进行联调测试。
在前端开发阶段，接口还没完成？不用愁，Sublime Text 配合一些小技巧，就能快速搭建一个 Mock 数据服务，让你的开发不再卡壳！
解决方案：
-
安装 Sublime Text 插件:
立即学习“前端免费学习笔记（深入）”；
-
Package Control: 这是 Sublime 的插件管理器，先装它才能装其他插件。
Ctrl+``(反引号)打开控制台，粘贴这段代码：import urllib.request,os,hashlib; h = '6f4c264a24d3302d9e2e89aa0f7026d1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)重启 Sublime Text。
SublimeREPL: 允许在 Sublime 内部运行各种解释器，我们用它来运行 Python。
Ctrl+Shift+P(或Cmd+Shift+Pon Mac)，输入 "Install Package"，选择 "Package Control: Install Package"，然后搜索 "SublimeREPL" 并安装。Python: 确保你的电脑上安装了 Python。
-
-
创建 Mock 数据文件:
-
新建一个文件，比如
mock_data.json，放入你的 Mock 数据。例如：{ "users": [ {"id": 1, "name": "Alice", "email": "alice@example.com"}, {"id": 2, "name": "Bob", "email": "bob@example.com"} ], "products": [ {"id": 101, "name": "Laptop", "price": 1200}, {"id": 102, "name": "Mouse", "price": 25} ] }
-
-
编写 Python 脚本 (mock_server.py):
-
创建一个 Python 文件，比如
mock_server.py，写入以下代码：import http.server import socketserver import json PORT = 8000 # 你可以修改端口号 class MyHandler(http.server.SimpleHTTPRequestHandler): def do_GET(self): if self.path == '/users': self.send_response(200) self.send_header('Content-type', 'application/json') self.end_headers() with open('mock_data.json', 'r') as f: data = json.load(f) self.wfile.write(json.dumps(data['users']).encode()) elif self.path == '/products': self.send_response(200) self.send_header('Content-type', 'application/json') self.end_headers() with open('mock_data.json', 'r') as f: data = json.load(f) self.wfile.write(json.dumps(data['products']).encode()) else: super().do_GET() Handler = MyHandler with socketserver.TCPServer(("", PORT), Handler) as httpd: print("serving at port", PORT) httpd.serve_forever()
-
-
运行 Mock 服务:
- 在 Sublime Text 中打开
mock_server.py文件。 -
Ctrl+Shift+P，输入 "SublimeREPL: Python" 并选择它。 这会在 Sublime 内部启动 Python 解释器。 - 现在你应该能在 Sublime Text 的底部看到 Python REPL 运行起来了。
- 如果提示找不到模块，需要安装
http.server和socketserver。
- 在 Sublime Text 中打开
-
测试你的 Mock 服务:
- 打开浏览器，访问
http://localhost:8000/users和http://localhost:8000/products，你应该能看到对应的 JSON 数据。
- 打开浏览器，访问
如何修改端口号以便同时运行多个 Mock 服务？
修改 mock_server.py 中的 PORT 变量即可。比如你想让一个服务运行在 8001 端口，另一个运行在 8002 端口，分别修改两个 mock_server.py 脚本里的 PORT 值。注意不要让端口号冲突。
如何处理 POST 请求或其他 HTTP 方法？
修改 MyHandler 类，添加 do_POST、do_PUT、do_DELETE 等方法。例如，处理 POST 请求：
def do_POST(self):
if self.path == '/login':
content_length = int(self.headers['Content-Length'])
post_data = self.rfile.read(content_length)
data = json.loads(post_data.decode('utf-8'))
# 假设你期望收到 username 和 password
username = data.get('username')
password = data.get('password')
# 模拟登录验证
if username == 'test' and password == '123':
response_data = {'status': 'success', 'message': 'Login successful'}
self.send_response(200)
else:
response_data = {'status': 'error', 'message': 'Invalid credentials'}
self.send_response(401) # Unauthorized
self.send_header('Content-type', 'application/json')
self.end_headers()
self.wfile.write(json.dumps(response_data).encode())
else:
super().do_GET()记得在前端发送 POST 请求时，设置 Content-Type 为 application/json，并将数据转换为 JSON 字符串。
如何让 Mock 服务支持 CORS 跨域请求？
在 MyHandler 类中添加 send_header('Access-Control-Allow-Origin', '*') 即可允许所有域的跨域请求。更安全的方式是指定允许的域。
def send_response_only(self, code, message=None):
# ... (原代码)
self.send_header('Access-Control-Allow-Origin', '*') # 允许所有域
# 或者：
# self.send_header('Access-Control-Allow-Origin', 'http://your-frontend-domain.com') # 只允许特定域请注意，在生产环境中，允许所有域的跨域请求可能存在安全风险，请谨慎使用。
