Sublime搭建前端Mock数据服务_方便开发阶段接口模拟测试

在前端开发阶段，若接口尚未完成，可通过 Sublime Text 快速搭建 Mock 数据服务，实现接口模拟测试。以下是具体步骤：

1. Package Control

   插件管理器，用于安装其他插件。

   操作步骤：

   打开 Sublime Text 控制台（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。

   

2. SublimeREPL

   允许在 Sublime 内部运行 Python 解释器。

   操作步骤：

   按 Ctrl+Shift+P（Mac 为 Cmd+Shift+P），输入 Install Package，选择 Package Control: Install Package。

   搜索 SublimeREPL 并安装。

3. Python 环境

   确保电脑已安装 Python（建议 Python 3.x）。

1. 新建文件 mock_data.json，填充测试数据，例如：{ "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} ]}

1. 创建文件 mock_server.py，写入以下代码：import http.serverimport socketserverimport jsonPORT = 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.send_header('Access-Control-Allow-Origin', '*') # 支持跨域 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.send_header('Access-Control-Allow-Origin', '*') # 支持跨域 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 = MyHandlerwith socketserver.TCPServer(("", PORT), Handler) as httpd: print("serving at port", PORT) httpd.serve_forever()

1. 在 Sublime Text 中打开 mock_server.py。
2. 按 Ctrl+Shift+P，输入 SublimeREPL: Python 并选择，启动 Python 解释器。
3. 底部控制台显示 serving at port 8000 即表示服务启动成功。

1. 浏览器访问以下地址查看数据：
   http://localhost:8000/users
   http://localhost:8000/products

1. 修改端口号

   修改 mock_server.py 中的 PORT 变量（如 PORT = 8001），可同时运行多个服务。

2. 支持 POST 请求

   在 MyHandler 类中添加 do_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 = 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) self.send_header('Content-type', 'application/json') self.send_header('Access-Control-Allow-Origin', '*') self.end_headers() self.wfile.write(json.dumps(response_data).encode()) else: super().do_GET()

3. 支持 CORS 跨域

   在响应头中添加 Access-Control-Allow-Origin: *（允许所有域）或指定域名（如

   http://your-frontend-domain.com
   ）。

• 生产环境需谨慎使用 Access-Control-Allow-Origin: *，建议指定具体域名。
• 确保 Python 环境正常，且 mock_data.json 与 mock_server.py 在同一目录。

通过以上步骤，即可在 Sublime Text 中快速搭建 Mock 数据服务，提升前端开发效率。