{"id":1176636,"date":"2025-01-15T17:47:21","date_gmt":"2025-01-15T09:47:21","guid":{"rendered":"https:\/\/docs.pingcode.com\/ask\/ask-ask\/1176636.html"},"modified":"2025-01-15T17:47:24","modified_gmt":"2025-01-15T09:47:24","slug":"python%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%89%8d%e5%90%8e%e7%ab%af%e4%ba%a4%e4%ba%92","status":"publish","type":"post","link":"https:\/\/docs.pingcode.com\/ask\/1176636.html","title":{"rendered":"python\u5982\u4f55\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92"},"content":{"rendered":"

\"python\u5982\u4f55\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92\"<\/p>\n

Python\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92\u7684\u65b9\u5f0f\u4e3b\u8981\u6709\u4ee5\u4e0b\u51e0\u79cd\uff1a\u4f7f\u7528Flask\u6216Django\u6846\u67b6\u3001\u901a\u8fc7RESTful API\u3001\u4f7f\u7528WebSocket\u3001\u7ed3\u5408\u524d\u7aef\u6846\u67b6\u5982React\u6216Vue\u8fdb\u884c\u5b8c\u6574\u5f00\u53d1<\/strong>\u3002\u5176\u4e2d\uff0c\u901a\u8fc7RESTful API\u8fdb\u884c\u524d\u540e\u7aef\u4ea4\u4e92\u662f\u4e00\u79cd\u5e38\u89c1\u4e14\u9ad8\u6548\u7684\u65b9\u5f0f\u3002<\/p>\n<\/p>\n

\u4e00\u3001\u4f7f\u7528Flask\u6846\u67b6\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92<\/h3>\n<\/p>\n

Flask\u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684Python Web\u6846\u67b6\uff0c\u975e\u5e38\u9002\u5408\u5c0f\u578b\u5e94\u7528\u548c\u5feb\u901f\u5f00\u53d1\u3002\u5b83\u53ef\u4ee5\u5f88\u65b9\u4fbf\u5730\u521b\u5efaRESTful API\uff0c\u5e76\u4e0e\u524d\u7aef\u8fdb\u884c\u4ea4\u4e92\u3002<\/p>\n<\/p>\n

1\u3001\u5b89\u88c5Flask<\/h4>\n<\/p>\n

\u9996\u5148\uff0c\u786e\u4fdd\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86Flask\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528pip\u6765\u5b89\u88c5\uff1a<\/p>\n<\/p>\n

pip install Flask<\/p>\n
<\/code><\/pre>\n<\/p>\n
2\u3001\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684Flask\u5e94\u7528<\/h4>\n<\/p>\n
\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684Flask\u5e94\u7528\u793a\u4f8b\uff1a<\/p>\n<\/p>\n
from flask import Flask, request, jsonify<\/p>\n
app = Flask(__name__)<\/p>\n
@app.route('\/api\/data', methods=['GET'])<\/p>\n
def get_data():<\/p>\n
    sample_data = {<\/p>\n
        "name": "John",<\/p>\n
        "age": 30,<\/p>\n
        "city": "New York"<\/p>\n
    }<\/p>\n
    return jsonify(sample_data)<\/p>\n
@app.route('\/api\/data', methods=['POST'])<\/p>\n
def post_data():<\/p>\n
    data = request.json<\/p>\n
    response = {<\/p>\n
        "status": "success",<\/p>\n
        "data_received": data<\/p>\n
    }<\/p>\n
    return jsonify(response)<\/p>\n
if __name__ == '__mAI<\/a>n__':<\/p>\n
    app.run(debug=True)<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e24\u4e2aAPI\u7aef\u70b9\uff0c\u4e00\u4e2a\u7528\u4e8eGET\u8bf7\u6c42\uff0c\u53e6\u4e00\u4e2a\u7528\u4e8ePOST\u8bf7\u6c42\u3002<\/p>\n<\/p>\n
3\u3001\u524d\u7aef\u8c03\u7528Flask API<\/h4>\n<\/p>\n
\u524d\u7aef\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55\u73b0\u4ee3\u7684JavaScript\u6846\u67b6\uff08\u5982React\u3001Vue\u3001Angular\uff09\u6216\u7eafJavaScript\u6765\u8c03\u7528\u8fd9\u4e9bAPI\u7aef\u70b9\u3002\u4ee5\u4e0b\u662f\u4f7f\u7528\u7eafJavaScript\u7684\u793a\u4f8b\uff1a<\/p>\n<\/p>\n
<!DOCTYPE html><\/p>\n
<html><\/p>\n
<head><\/p>\n
    <title>Flask API Example<\/title><\/p>\n
<\/head><\/p>\n
<body><\/p>\n
    <h1>Flask API Example<\/h1><\/p>\n
    <button onclick="fetchData()">Get Data<\/button><\/p>\n
    <button onclick="sendData()">Send Data<\/button><\/p>\n
    <script><\/p>\n
        function fetchData() {<\/p>\n
            fetch('http:\/\/127.0.0.1:5000\/api\/data')<\/p>\n
                .then(response => response.json())<\/p>\n
                .then(data => console.log(data))<\/p>\n
                .catch(error => console.error('Error:', error));<\/p>\n
        }<\/p>\n
        function sendData() {<\/p>\n
            const data = {<\/p>\n
                name: 'Jane',<\/p>\n
                age: 25,<\/p>\n
                city: 'San Francisco'<\/p>\n
            };<\/p>\n
            fetch('http:\/\/127.0.0.1:5000\/api\/data', {<\/p>\n
                method: 'POST',<\/p>\n
                headers: {<\/p>\n
                    'Content-Type': 'application\/json'<\/p>\n
                },<\/p>\n
                body: JSON.stringify(data)<\/p>\n
            })<\/p>\n
                .then(response => response.json())<\/p>\n
                .then(data => console.log(data))<\/p>\n
                .catch(error => console.error('Error:', error));<\/p>\n
        }<\/p>\n
    <\/script><\/p>\n
<\/body><\/p>\n
<\/html><\/p>\n
<\/code><\/pre>\n<\/p>\n
\u4e8c\u3001\u4f7f\u7528Django\u6846\u67b6\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92<\/h3>\n<\/p>\n
Django\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\u7684Web\u6846\u67b6\uff0c\u9002\u5408\u5927\u578b\u5e94\u7528\u5f00\u53d1\u3002\u5b83\u81ea\u5e26\u4e86\u8bb8\u591a\u5b9e\u7528\u5de5\u5177\uff0c\u53ef\u4ee5\u65b9\u4fbf\u5730\u8fdb\u884c\u524d\u540e\u7aef\u4ea4\u4e92\u3002<\/p>\n<\/p>\n
1\u3001\u5b89\u88c5Django<\/h4>\n<\/p>\n
\u9996\u5148\uff0c\u786e\u4fdd\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86Django\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528pip\u6765\u5b89\u88c5\uff1a<\/p>\n<\/p>\n
pip install Django<\/p>\n
<\/code><\/pre>\n<\/p>\n
2\u3001\u521b\u5efa\u4e00\u4e2aDjango\u9879\u76ee\u548c\u5e94\u7528<\/h4>\n<\/p>\n
\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Django\u9879\u76ee\uff1a<\/p>\n<\/p>\n
django-admin startproject myproject<\/p>\n
cd myproject<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Django\u5e94\u7528\uff1a<\/p>\n<\/p>\n
python manage.py startapp myapp<\/p>\n
<\/code><\/pre>\n<\/p>\n
3\u3001\u914d\u7f6eDjango\u9879\u76ee<\/h4>\n<\/p>\n
\u5728myproject\/settings.py<\/code>\u4e2d\uff0c\u6dfb\u52a0\u4f60\u7684\u5e94\u7528\u5230INSTALLED_APPS<\/code>\uff1a<\/p>\n<\/p>\n
INSTALLED_APPS = [<\/p>\n
    ...<\/p>\n
    'myapp',<\/p>\n
]<\/p>\n
<\/code><\/pre>\n<\/p>\n
4\u3001\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684Django\u89c6\u56fe<\/h4>\n<\/p>\n
\u5728myapp\/views.py<\/code>\u4e2d\uff0c\u521b\u5efa\u4e24\u4e2a\u89c6\u56fe\uff0c\u4e00\u4e2a\u7528\u4e8eGET\u8bf7\u6c42\uff0c\u53e6\u4e00\u4e2a\u7528\u4e8ePOST\u8bf7\u6c42\uff1a<\/p>\n<\/p>\n
from django.http import JsonResponse<\/p>\n
from django.views.decorators.csrf import csrf_exempt<\/p>\n
import json<\/p>\n
def get_data(request):<\/p>\n
    sample_data = {<\/p>\n
        "name": "John",<\/p>\n
        "age": 30,<\/p>\n
        "city": "New York"<\/p>\n
    }<\/p>\n
    return JsonResponse(sample_data)<\/p>\n
@csrf_exempt<\/p>\n
def post_data(request):<\/p>\n
    if request.method == 'POST':<\/p>\n
        data = json.loads(request.body)<\/p>\n
        response = {<\/p>\n
            "status": "success",<\/p>\n
            "data_received": data<\/p>\n
        }<\/p>\n
        return JsonResponse(response)<\/p>\n
    else:<\/p>\n
        return JsonResponse({"status": "error"}, status=400)<\/p>\n
<\/code><\/pre>\n<\/p>\n
5\u3001\u914d\u7f6eDjango URLs<\/h4>\n<\/p>\n
\u5728myapp\/urls.py<\/code>\u4e2d\uff0c\u914d\u7f6eURL\u8def\u7531\uff1a<\/p>\n<\/p>\n
from django.urls import path<\/p>\n
from .views import get_data, post_data<\/p>\n
urlpatterns = [<\/p>\n
    path('api\/data', get_data, name='get_data'),<\/p>\n
    path('api\/data', post_data, name='post_data'),<\/p>\n
]<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u5728myproject\/urls.py<\/code>\u4e2d\uff0c\u5305\u542b\u5e94\u7528\u7684URL\uff1a<\/p>\n<\/p>\n
from django.contrib import admin<\/p>\n
from django.urls import path, include<\/p>\n
urlpatterns = [<\/p>\n
    path('admin\/', admin.site.urls),<\/p>\n
    path('', include('myapp.urls')),<\/p>\n
]<\/p>\n
<\/code><\/pre>\n<\/p>\n
6\u3001\u524d\u7aef\u8c03\u7528Django API<\/h4>\n<\/p>\n
\u524d\u7aef\u8c03\u7528Django API\u7684\u65b9\u5f0f\u4e0e\u8c03\u7528Flask API\u7c7b\u4f3c\uff0c\u53ef\u4ee5\u4f7f\u7528\u7eafJavaScript\u6216\u5176\u4ed6\u524d\u7aef\u6846\u67b6\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u4f7f\u7528\u7eafJavaScript\u7684\u793a\u4f8b\uff08\u4e0e\u4e0a\u9762\u7684Flask\u793a\u4f8b\u76f8\u540c\uff09\uff1a<\/p>\n<\/p>\n
<!DOCTYPE html><\/p>\n
<html><\/p>\n
<head><\/p>\n
    <title>Django API Example<\/title><\/p>\n
<\/head><\/p>\n
<body><\/p>\n
    <h1>Django API Example<\/h1><\/p>\n
    <button onclick="fetchData()">Get Data<\/button><\/p>\n
    <button onclick="sendData()">Send Data<\/button><\/p>\n
    <script><\/p>\n
        function fetchData() {<\/p>\n
            fetch('http:\/\/127.0.0.1:8000\/api\/data')<\/p>\n
                .then(response => response.json())<\/p>\n
                .then(data => console.log(data))<\/p>\n
                .catch(error => console.error('Error:', error));<\/p>\n
        }<\/p>\n
        function sendData() {<\/p>\n
            const data = {<\/p>\n
                name: 'Jane',<\/p>\n
                age: 25,<\/p>\n
                city: 'San Francisco'<\/p>\n
            };<\/p>\n
            fetch('http:\/\/127.0.0.1:8000\/api\/data', {<\/p>\n
                method: 'POST',<\/p>\n
                headers: {<\/p>\n
                    'Content-Type': 'application\/json'<\/p>\n
                },<\/p>\n
                body: JSON.stringify(data)<\/p>\n
            })<\/p>\n
                .then(response => response.json())<\/p>\n
                .then(data => console.log(data))<\/p>\n
                .catch(error => console.error('Error:', error));<\/p>\n
        }<\/p>\n
    <\/script><\/p>\n
<\/body><\/p>\n
<\/html><\/p>\n
<\/code><\/pre>\n<\/p>\n
\u4e09\u3001\u901a\u8fc7RESTful API\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92<\/h3>\n<\/p>\n
RESTful API\u662f\u4e00\u79cd\u5e38\u89c1\u7684Web\u670d\u52a1\u67b6\u6784\uff0c\u9002\u5408\u7528\u4e8e\u524d\u540e\u7aef\u5206\u79bb\u7684\u9879\u76ee\u3002\u5b83\u4f7f\u7528HTTP\u65b9\u6cd5\uff08\u5982GET\u3001POST\u3001PUT\u3001DELETE\uff09\u8fdb\u884c\u8d44\u6e90\u7684\u64cd\u4f5c\u3002<\/p>\n<\/p>\n
1\u3001\u5b9a\u4e49RESTful API<\/h4>\n<\/p>\n
\u9996\u5148\uff0c\u5b9a\u4e49\u4f60\u7684RESTful API\u7aef\u70b9\u548c\u8d44\u6e90\u3002\u4f8b\u5982\uff0c\u5047\u8bbe\u4f60\u6709\u4e00\u4e2a\u7528\u6237\u8d44\u6e90\uff0c\u4f60\u53ef\u4ee5\u5b9a\u4e49\u4ee5\u4e0b\u7aef\u70b9\uff1a<\/p>\n<\/p>\n
    \n
  • GET \/users – \u83b7\u53d6\u6240\u6709\u7528\u6237<\/li>\n
  • GET \/users\/{id} – \u83b7\u53d6\u7279\u5b9a\u7528\u6237<\/li>\n
  • POST \/users – \u521b\u5efa\u4e00\u4e2a\u65b0\u7528\u6237<\/li>\n
  • PUT \/users\/{id} – \u66f4\u65b0\u7279\u5b9a\u7528\u6237<\/li>\n
  • DELETE \/users\/{id} – \u5220\u9664\u7279\u5b9a\u7528\u6237<\/li>\n<\/ul>\n
    2\u3001\u521b\u5efaAPI\u7aef\u70b9<\/h4>\n<\/p>\n
    \u4f60\u53ef\u4ee5\u4f7f\u7528Flask\u6216Django\u6765\u521b\u5efa\u8fd9\u4e9bAPI\u7aef\u70b9\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u4f7f\u7528Flask\u7684\u793a\u4f8b\uff1a<\/p>\n<\/p>\n
    from flask import Flask, request, jsonify<\/p>\n
    app = Flask(__name__)<\/p>\n
    users = [<\/p>\n
        {"id": 1, "name": "John", "age": 30},<\/p>\n
        {"id": 2, "name": "Jane", "age": 25}<\/p>\n
    ]<\/p>\n
    @app.route('\/users', methods=['GET'])<\/p>\n
    def get_users():<\/p>\n
        return jsonify(users)<\/p>\n
    @app.route('\/users\/<int:user_id>', methods=['GET'])<\/p>\n
    def get_user(user_id):<\/p>\n
        user = next((user for user in users if user["id"] == user_id), None)<\/p>\n
        if user:<\/p>\n
            return jsonify(user)<\/p>\n
        else:<\/p>\n
            return jsonify({"message": "User not found"}), 404<\/p>\n
    @app.route('\/users', methods=['POST'])<\/p>\n
    def create_user():<\/p>\n
        new_user = request.json<\/p>\n
        new_user["id"] = len(users) + 1<\/p>\n
        users.append(new_user)<\/p>\n
        return jsonify(new_user), 201<\/p>\n
    @app.route('\/users\/<int:user_id>', methods=['PUT'])<\/p>\n
    def update_user(user_id):<\/p>\n
        user = next((user for user in users if user["id"] == user_id), None)<\/p>\n
        if user:<\/p>\n
            updated_data = request.json<\/p>\n
            user.update(updated_data)<\/p>\n
            return jsonify(user)<\/p>\n
        else:<\/p>\n
            return jsonify({"message": "User not found"}), 404<\/p>\n
    @app.route('\/users\/<int:user_id>', methods=['DELETE'])<\/p>\n
    def delete_user(user_id):<\/p>\n
        global users<\/p>\n
        users = [user for user in users if user["id"] != user_id]<\/p>\n
        return jsonify({"message": "User deleted"})<\/p>\n
    if __name__ == '__main__':<\/p>\n
        app.run(debug=True)<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    3\u3001\u524d\u7aef\u8c03\u7528RESTful API<\/h4>\n<\/p>\n
    \u524d\u7aef\u53ef\u4ee5\u4f7f\u7528\u7c7b\u4f3c\u524d\u9762\u7684\u65b9\u5f0f\u8c03\u7528\u8fd9\u4e9bAPI\u7aef\u70b9\u3002\u4ee5\u4e0b\u662f\u4f7f\u7528\u7eafJavaScript\u7684\u793a\u4f8b\uff1a<\/p>\n<\/p>\n
    <!DOCTYPE html><\/p>\n
    <html><\/p>\n
    <head><\/p>\n
        <title>RESTful API Example<\/title><\/p>\n
    <\/head><\/p>\n
    <body><\/p>\n
        <h1>RESTful API Example<\/h1><\/p>\n
        <button onclick="fetchUsers()">Get Users<\/button><\/p>\n
        <button onclick="createUser()">Create User<\/button><\/p>\n
        <script><\/p>\n
            function fetchUsers() {<\/p>\n
                fetch('http:\/\/127.0.0.1:5000\/users')<\/p>\n
                    .then(response => response.json())<\/p>\n
                    .then(data => console.log(data))<\/p>\n
                    .catch(error => console.error('Error:', error));<\/p>\n
            }<\/p>\n
            function createUser() {<\/p>\n
                const data = {<\/p>\n
                    name: 'Alice',<\/p>\n
                    age: 28<\/p>\n
                };<\/p>\n
                fetch('http:\/\/127.0.0.1:5000\/users', {<\/p>\n
                    method: 'POST',<\/p>\n
                    headers: {<\/p>\n
                        'Content-Type': 'application\/json'<\/p>\n
                    },<\/p>\n
                    body: JSON.stringify(data)<\/p>\n
                })<\/p>\n
                    .then(response => response.json())<\/p>\n
                    .then(data => console.log(data))<\/p>\n
                    .catch(error => console.error('Error:', error));<\/p>\n
            }<\/p>\n
        <\/script><\/p>\n
    <\/body><\/p>\n
    <\/html><\/p>\n
    <\/code><\/pre>\n<\/p>\n
    \u56db\u3001\u4f7f\u7528WebSocket\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92<\/h3>\n<\/p>\n
    WebSocket\u662f\u4e00\u79cd\u5728\u5355\u4e2aTCP\u8fde\u63a5\u4e0a\u8fdb\u884c\u5168\u53cc\u5de5\u901a\u4fe1\u7684\u534f\u8bae\uff0c\u9002\u7528\u4e8e\u9700\u8981\u5b9e\u65f6\u6570\u636e\u66f4\u65b0\u7684\u5e94\u7528\uff0c\u5982\u804a\u5929\u5e94\u7528\u3001\u5728\u7ebf\u6e38\u620f\u7b49\u3002<\/p>\n<\/p>\n
    1\u3001\u5b89\u88c5WebSocket\u5e93<\/h4>\n<\/p>\n
    \u4f60\u53ef\u4ee5\u4f7f\u7528websockets<\/code>\u5e93\u6765\u5b9e\u73b0WebSocket\u670d\u52a1\u5668\u3002\u4f7f\u7528pip\u5b89\u88c5\uff1a<\/p>\n<\/p>\n
    pip install websockets<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    2\u3001\u521b\u5efaWebSocket\u670d\u52a1\u5668<\/h4>\n<\/p>\n
    \u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684WebSocket\u670d\u52a1\u5668\u793a\u4f8b\uff1a<\/p>\n<\/p>\n
    import asyncio<\/p>\n
    import websockets<\/p>\n
    async def echo(websocket, path):<\/p>\n
        async for message in websocket:<\/p>\n
            await websocket.send(f"Echo: {message}")<\/p>\n
    start_server = websockets.serve(echo, "localhost", 8765)<\/p>\n
    asyncio.get_event_loop().run_until_complete(start_server)<\/p>\n
    asyncio.get_event_loop().run_forever()<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    3\u3001\u524d\u7aef\u8fde\u63a5WebSocket\u670d\u52a1\u5668<\/h4>\n<\/p>\n
    \u524d\u7aef\u53ef\u4ee5\u4f7f\u7528JavaScript\u7684WebSocket API\u6765\u8fde\u63a5\u548c\u901a\u4fe1\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u793a\u4f8b\uff1a<\/p>\n<\/p>\n
    <!DOCTYPE html><\/p>\n
    <html><\/p>\n
    <head><\/p>\n
        <title>WebSocket Example<\/title><\/p>\n
    <\/head><\/p>\n
    <body><\/p>\n
        <h1>WebSocket Example<\/h1><\/p>\n
        <button onclick="connectWebSocket()">Connect WebSocket<\/button><\/p>\n
        <button onclick="sendMessage()">Send Message<\/button><\/p>\n
        <script><\/p>\n
            let socket;<\/p>\n
            function connectWebSocket() {<\/p>\n
                socket = new WebSocket('ws:\/\/localhost:8765');<\/p>\n
                socket.onopen = function(event) {<\/p>\n
                    console.log('WebSocket is open now.');<\/p>\n
                };<\/p>\n
                socket.onmessage = function(event) {<\/p>\n
                    console.log('Received: ' + event.data);<\/p>\n
                };<\/p>\n
                socket.onclose = function(event) {<\/p>\n
                    console.log('WebSocket is closed now.');<\/p>\n
                };<\/p>\n
                socket.onerror = function(error) {<\/p>\n
                    console.log('WebSocket Error: ' + error);<\/p>\n
                };<\/p>\n
            }<\/p>\n
            function sendMessage() {<\/p>\n
                if (socket && socket.readyState === WebSocket.OPEN) {<\/p>\n
                    socket.send('Hello, WebSocket!');<\/p>\n
                } else {<\/p>\n
                    console.log('WebSocket is not open.');<\/p>\n
                }<\/p>\n
            }<\/p>\n
        <\/script><\/p>\n
    <\/body><\/p>\n
    <\/html><\/p>\n
    <\/code><\/pre>\n<\/p>\n
    \u4e94\u3001\u7ed3\u5408\u524d\u7aef\u6846\u67b6\u5982React\u6216Vue\u8fdb\u884c\u5b8c\u6574\u5f00\u53d1<\/h3>\n<\/p>\n
    \u5728\u73b0\u4ee3Web\u5f00\u53d1\u4e2d\uff0c\u524d\u540e\u7aef\u5206\u79bb\u7684\u505a\u6cd5\u8d8a\u6765\u8d8a\u666e\u904d\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528\u524d\u7aef\u6846\u67b6\u5982React\u6216Vue\u6765\u521b\u5efa\u7528\u6237\u754c\u9762\uff0c\u5e76\u901a\u8fc7API\u4e0e\u540e\u7aef\u8fdb\u884c\u4ea4\u4e92\u3002<\/p>\n<\/p>\n
    1\u3001\u4f7f\u7528React\u6846\u67b6<\/h4>\n<\/p>\n
    \u9996\u5148\uff0c\u786e\u4fdd\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86Node.js\u548cnpm\u3002\u7136\u540e\uff0c\u4f7f\u7528Create React App\u521b\u5efa\u4e00\u4e2a\u65b0\u7684React\u9879\u76ee\uff1a<\/p>\n<\/p>\n
    npx create-react-app my-react-app<\/p>\n
    cd my-react-app<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    2\u3001\u521b\u5efaReact\u7ec4\u4ef6<\/h4>\n<\/p>\n
    \u5728\u4f60\u7684React\u9879\u76ee\u4e2d\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6\u6765\u8c03\u7528API\uff1a<\/p>\n<\/p>\n
    import React, { useState, useEffect } from 'react';<\/p>\n
    function App() {<\/p>\n
        const [data, setData] = useState(null);<\/p>\n
        useEffect(() => {<\/p>\n
            fetch('http:\/\/127.0.0.1:5000\/api\/data')<\/p>\n
                .then(response => response.json())<\/p>\n
                .then(data => setData(data))<\/p>\n
                .catch(error => console.error('Error:', error));<\/p>\n
        }, []);<\/p>\n
        const sendData = () => {<\/p>\n
            const dataToSend = {<\/p>\n
                name: 'Alice',<\/p>\n
                age: 28,<\/p>\n
                city: 'San Francisco'<\/p>\n
            };<\/p>\n
            fetch('http:\/\/127.0.0.1:5000\/api\/data', {<\/p>\n
                method: 'POST',<\/p>\n
                headers: {<\/p>\n
                    'Content-Type': 'application\/json'<\/p>\n
                },<\/p>\n
                body: JSON.stringify(dataToSend)<\/p>\n
            })<\/p>\n
                .then(response => response.json())<\/p>\n
                .then(data => console.log(data))<\/p>\n
                .catch(error => console.error('Error:', error));<\/p>\n
        };<\/p>\n
        return (<\/p>\n
            <div><\/p>\n
                <h1>React API Example<\/h1><\/p>\n
                <button onClick={sendData}>Send Data<\/button><\/p>\n
                {data && (<\/p>\n
                    <div><\/p>\n
                        <h2>Data from API:<\/h2><\/p>\n
                        <pre>{JSON.stringify(data, null, 2)}<\/pre><\/p>\n
                    <\/div><\/p>\n
                )}<\/p>\n
            <\/div><\/p>\n
        );<\/p>\n
    }<\/p>\n
    export default App;<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    3\u3001\u8fd0\u884cReact\u5e94\u7528<\/h4>\n<\/p>\n
    \u5728\u9879\u76ee\u76ee\u5f55\u4e2d\uff0c\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8React\u5f00\u53d1\u670d\u52a1\u5668\uff1a<\/p>\n<\/p>\n
    npm start<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    \u516d\u3001\u4f7f\u7528Vue\u6846\u67b6<\/h3>\n<\/p>\n
    Vue\u662f\u53e6\u4e00\u4e2a\u6d41\u884c\u7684\u524d\u7aef\u6846\u67b6\uff0c\u9002\u5408\u7528\u4e8e\u521b\u5efa\u52a8\u6001\u548c\u54cd\u5e94\u5f0f\u7684\u7528\u6237\u754c\u9762\u3002<\/p>\n<\/p>\n
    1\u3001\u521b\u5efaVue\u9879\u76ee<\/h4>\n<\/p>\n
    \u9996\u5148\uff0c\u786e\u4fdd\u4f60\u5df2\u7ecf\u5b89\u88c5\u4e86Vue CLI\u3002\u7136\u540e\uff0c\u4f7f\u7528Vue CLI\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Vue\u9879\u76ee\uff1a<\/p>\n<\/p>\n
    npm install -g @vue\/cli<\/p>\n
    vue create my-vue-app<\/p>\n
    cd my-vue-app<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    2\u3001\u521b\u5efaVue\u7ec4\u4ef6<\/h4>\n<\/p>\n
    \u5728\u4f60\u7684Vue\u9879\u76ee\u4e2d\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u7ec4\u4ef6\u6765\u8c03\u7528API\u3002\u7f16\u8f91src\/components\/HelloWorld.vue<\/code>\uff1a<\/p>\n<\/p>\n
    <template><\/p>\n
      <div><\/p>\n
        <h1>Vue API Example<\/h1><\/p>\n
        <button @click="sendData">Send Data<\/button><\/p>\n
        <div v-if="data"><\/p>\n
          <h2>Data from API:<\/h2><\/p>\n
          <pre>{{ data }}<\/pre><\/p>\n
        <\/div><\/p>\n
      <\/div><\/p>\n
    <\/template><\/p>\n
    <script><\/p>\n
    export default {<\/p>\n
      data() {<\/p>\n
        return {<\/p>\n
          data: null,<\/p>\n
        };<\/p>\n
      },<\/p>\n
      mounted() {<\/p>\n
        fetch('http:\/\/127.0.0.1:5000\/api\/data')<\/p>\n
          .then(response => response.json())<\/p>\n
          .then(data => {<\/p>\n
            this.data = data;<\/p>\n
          })<\/p>\n
          .catch(error => console.error('Error:', error));<\/p>\n
      },<\/p>\n
      methods: {<\/p>\n
        sendData() {<\/p>\n
          const dataToSend = {<\/p>\n
            name: 'Alice',<\/p>\n
            age: 28,<\/p>\n
            city: 'San Francisco',<\/p>\n
          };<\/p>\n
          fetch('http:\/\/127.0.0.1:5000\/api\/data', {<\/p>\n
            method: 'POST',<\/p>\n
            headers: {<\/p>\n
              'Content-Type': 'application\/json',<\/p>\n
            },<\/p>\n
            body: JSON.stringify(dataToSend),<\/p>\n
          })<\/p>\n
            .then(response => response.json())<\/p>\n
            .then(data => console.log(data))<\/p>\n
            .catch(error => console.error('Error:', error));<\/p>\n
        },<\/p>\n
      },<\/p>\n
    };<\/p>\n
    <\/script><\/p>\n
    <\/code><\/pre>\n<\/p>\n
    3\u3001\u8fd0\u884cVue\u5e94\u7528<\/h4>\n<\/p>\n
    \u5728\u9879\u76ee\u76ee\u5f55\u4e2d\uff0c\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8Vue\u5f00\u53d1\u670d\u52a1\u5668\uff1a<\/p>\n<\/p>\n
    npm run serve<\/p>\n
    <\/code><\/pre>\n<\/p>\n
    \u901a\u8fc7\u4ee5\u4e0a\u6b65\u9aa4\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528Python\u548c\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\uff08\u5982React\u6216Vue\uff09\u521b\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u524d\u540e\u7aef\u4ea4\u4e92\u5e94\u7528\u3002\u65e0\u8bba\u9009\u62e9\u54ea\u79cd\u65b9\u5f0f\uff0c\u5173\u952e\u5728\u4e8e\u7406\u89e3\u548c\u638c\u63e1API\u7684\u521b\u5efa\u548c\u8c03\u7528\uff0c\u4ee5\u53ca\u524d\u7aef\u4e0e\u540e\u7aef\u5982\u4f55\u901a\u8fc7API\u8fdb\u884c\u6570\u636e\u4ea4\u6362\u3002\u8fd9\u4e9b\u6280\u5de7\u548c\u65b9\u6cd5\u5c06\u6781\u5927\u5730\u63d0\u5347\u4f60\u7684Web\u5f00\u53d1\u80fd\u529b\u3002<\/p>\n<\/p>\n
    \u76f8\u5173\u95ee\u7b54FAQs\uff1a<\/strong><\/h2>\n
     \u5982\u4f55\u4f7f\u7528Python\u5b9e\u73b0\u4e0e\u524d\u7aef\u7684\u6709\u6548\u6570\u636e\u4ea4\u4e92\uff1f<\/strong>
    \u5728Python\u4e2d\uff0c\u524d\u540e\u7aef\u4ea4\u4e92\u901a\u5e38\u901a\u8fc7API\u5b9e\u73b0\u3002\u53ef\u4ee5\u4f7f\u7528Flask\u6216Django\u7b49\u6846\u67b6\u642d\u5efaRESTful API\uff0c\u524d\u7aef\u901a\u8fc7HTTP\u8bf7\u6c42\uff08\u5982GET\u3001POST\uff09\u4e0e\u540e\u7aef\u8fdb\u884c\u6570\u636e\u4ea4\u6362\u3002\u4f7f\u7528JSON\u683c\u5f0f\u4f20\u8f93\u6570\u636e\u662f\u6700\u5e38\u89c1\u7684\u65b9\u5f0f\uff0c\u786e\u4fdd\u524d\u7aef\u80fd\u591f\u8f7b\u677e\u89e3\u6790\u548c\u4f7f\u7528\u8fd9\u4e9b\u6570\u636e\u3002<\/p>\n
    \u5728Python\u4e2d\uff0c\u5982\u4f55\u5904\u7406\u524d\u7aef\u53d1\u9001\u7684\u8bf7\u6c42\u6570\u636e\uff1f<\/strong>
    \u5f53\u524d\u7aef\u53d1\u9001\u8bf7\u6c42\u5230\u540e\u7aef\u65f6\uff0c\u540e\u7aef\u53ef\u4ee5\u901a\u8fc7Flask\u7684request<\/code>\u5bf9\u8c61\u6216Django\u7684request<\/code>\u6a21\u5757\u83b7\u53d6\u6570\u636e\u3002\u5bf9\u4e8ePOST\u8bf7\u6c42\uff0c\u5e38\u7528request.form<\/code>\u6216request.json<\/code>\u6765\u63d0\u53d6\u8868\u5355\u6570\u636e\u6216JSON\u6570\u636e\u3002\u540c\u65f6\uff0c\u786e\u4fdd\u5728\u540e\u7aef\u8fdb\u884c\u6570\u636e\u9a8c\u8bc1\u548c\u5b89\u5168\u6027\u68c0\u67e5\uff0c\u9632\u6b62\u6076\u610f\u8f93\u5165\u3002<\/p>\n
    \u5982\u4f55\u5728Python\u9879\u76ee\u4e2d\u5b9e\u73b0WebSocket\u4ee5\u5b9e\u73b0\u5b9e\u65f6\u4ea4\u4e92\uff1f<\/strong>
    \u4f7f\u7528WebSocket\u53ef\u4ee5\u5b9e\u73b0\u524d\u540e\u7aef\u7684\u5b9e\u65f6\u53cc\u5411\u901a\u4fe1\uff0c\u9002\u5408\u9700\u8981\u5373\u65f6\u66f4\u65b0\u7684\u5e94\u7528\u573a\u666f\u3002Python\u7684channels<\/code>\uff08Django\uff09\u6216Flask-SocketIO<\/code>\u5e93\u53ef\u4ee5\u5e2e\u52a9\u4f60\u8f7b\u677e\u5b9e\u73b0WebSocket\u529f\u80fd\u3002\u901a\u8fc7\u8bbe\u7f6e\u76f8\u5e94\u7684\u8def\u7531\u548c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff0c\u524d\u7aef\u53ef\u4ee5\u5728\u4e0d\u5237\u65b0\u9875\u9762\u7684\u60c5\u51b5\u4e0b\u63a5\u6536\u6765\u81ea\u540e\u7aef\u7684\u5b9e\u65f6\u6570\u636e\u66f4\u65b0\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"Python\u5b9e\u73b0\u524d\u540e\u7aef\u4ea4\u4e92\u7684\u65b9\u5f0f\u4e3b\u8981\u6709\u4ee5\u4e0b\u51e0\u79cd\uff1a\u4f7f\u7528Flask\u6216Django\u6846\u67b6\u3001\u901a\u8fc7RESTful API\u3001 […]","protected":false},"author":3,"featured_media":1176642,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/1176636"}],"collection":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/comments?post=1176636"}],"version-history":[{"count":"1","href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/1176636\/revisions"}],"predecessor-version":[{"id":1176643,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/1176636\/revisions\/1176643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/media\/1176642"}],"wp:attachment":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/media?parent=1176636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/categories?post=1176636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/tags?post=1176636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}