{"id":998250,"date":"2024-12-27T09:31:08","date_gmt":"2024-12-27T01:31:08","guid":{"rendered":"https:\/\/docs.pingcode.com\/ask\/ask-ask\/998250.html"},"modified":"2024-12-27T09:31:11","modified_gmt":"2024-12-27T01:31:11","slug":"vue%e5%89%8d%e7%ab%af%e5%a6%82%e4%bd%95%e6%8e%a5python","status":"publish","type":"post","link":"https:\/\/docs.pingcode.com\/ask\/ask-ask\/998250.html","title":{"rendered":"vue\u524d\u7aef\u5982\u4f55\u63a5python"},"content":{"rendered":"

\"vue\u524d\u7aef\u5982\u4f55\u63a5python\"<\/p>\n

Vue\u524d\u7aef\u63a5Python\u7684\u65b9\u6cd5\u4e3b\u8981\u5305\u62ec\uff1a\u901a\u8fc7RESTful API\u8fdb\u884c\u901a\u4fe1\u3001\u4f7f\u7528WebSocket\u8fdb\u884c\u5b9e\u65f6\u4ea4\u4e92\u3001\u901a\u8fc7GraphQL\u63a5\u53e3\u83b7\u53d6\u6570\u636e\u3002<\/strong>\u5176\u4e2d\uff0c\u4f7f\u7528RESTful API\u662f\u6700\u5e38\u89c1\u7684\u65b9\u6cd5\uff0c\u56e0\u4e3a\u5176\u7b80\u5355\u3001\u6613\u4e8e\u5b9e\u73b0\u4e14\u5177\u6709\u826f\u597d\u7684\u517c\u5bb9\u6027\u3002RESTful API\u5141\u8bb8Vue\u524d\u7aef\u901a\u8fc7HTTP\u8bf7\u6c42\u4e0ePython\u540e\u7aef\u8fdb\u884c\u4ea4\u4e92\uff0c\u83b7\u53d6\u6570\u636e\u6216\u63d0\u4ea4\u6570\u636e\u3002\u4e0b\u9762\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u901a\u8fc7RESTful API\u8fdb\u884c\u901a\u4fe1\u3002<\/p>\n<\/p>\n

\u4e00\u3001\u901a\u8fc7RESTful API\u8fdb\u884c\u901a\u4fe1<\/h2>\n<\/p>\n

RESTful API\u662f\u4e00\u79cd\u57fa\u4e8eHTTP\u534f\u8bae\u7684\u63a5\u53e3\u8bbe\u8ba1\u98ce\u683c\uff0c\u5e7f\u6cdb\u7528\u4e8e\u524d\u540e\u7aef\u901a\u4fe1\u3002\u4f7f\u7528RESTful API\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0Vue\u524d\u7aef\u4e0ePython\u540e\u7aef\u7684\u6570\u636e\u4ea4\u4e92\u3002<\/p>\n<\/p>\n

1. \u4f7f\u7528Flask\u521b\u5efaRESTful API<\/h3>\n<\/p>\n

Flask\u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684Python Web\u6846\u67b6\uff0c\u975e\u5e38\u9002\u5408\u7528\u6765\u521b\u5efaRESTful API\u3002\u8981\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684API\uff0c\u9996\u5148\u9700\u8981\u5b89\u88c5Flask\uff1a<\/p>\n<\/p>\n

pip install Flask<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u7136\u540e\uff0c\u7f16\u5199\u4e00\u4e2a\u7b80\u5355\u7684Flask\u5e94\u7528\uff1a<\/p>\n<\/p>\n
from flask import Flask, jsonify, request<\/p>\n
app = Flask(__name__)<\/p>\n
\u6a21\u62df\u6570\u636e<\/strong><\/h2>\n
data = {<\/p>\n
    "users": [<\/p>\n
        {"id": 1, "name": "Alice"},<\/p>\n
        {"id": 2, "name": "Bob"}<\/p>\n
    ]<\/p>\n
}<\/p>\n
@app.route('\/api\/users', methods=['GET'])<\/p>\n
def get_users():<\/p>\n
    return jsonify(data)<\/p>\n
@app.route('\/api\/users', methods=['POST'])<\/p>\n
def add_user():<\/p>\n
    new_user = request.json<\/p>\n
    data['users'].append(new_user)<\/p>\n
    return jsonify(new_user), 201<\/p>\n
if __name__ == '__mAI<\/a>n__':<\/p>\n
    app.run(debug=True)<\/p>\n
<\/code><\/pre>\n<\/p>\n
2. \u5728Vue\u524d\u7aef\u4f7f\u7528Axios\u53d1\u9001HTTP\u8bf7\u6c42<\/h3>\n<\/p>\n
Axios\u662f\u4e00\u4e2a\u57fa\u4e8ePromise\u7684HTTP\u5e93\uff0c\u7528\u4e8e\u5728\u6d4f\u89c8\u5668\u4e2d\u53d1\u9001HTTP\u8bf7\u6c42\u3002\u9996\u5148\uff0c\u5b89\u88c5Axios\uff1a<\/p>\n<\/p>\n
npm install axios<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u7136\u540e\uff0c\u5728Vue\u7ec4\u4ef6\u4e2d\u4f7f\u7528Axios\u53d1\u9001\u8bf7\u6c42\uff1a<\/p>\n<\/p>\n
<template><\/p>\n
  <div><\/p>\n
    <h1>User List<\/h1><\/p>\n
    <ul><\/p>\n
      <li v-for="user in users" :key="user.id">{{ user.name }}<\/li><\/p>\n
    <\/ul><\/p>\n
  <\/div><\/p>\n
<\/template><\/p>\n
<script><\/p>\n
import axios from 'axios';<\/p>\n
export default {<\/p>\n
  data() {<\/p>\n
    return {<\/p>\n
      users: []<\/p>\n
    };<\/p>\n
  },<\/p>\n
  created() {<\/p>\n
    this.fetchUsers();<\/p>\n
  },<\/p>\n
  methods: {<\/p>\n
    fetchUsers() {<\/p>\n
      axios.get('http:\/\/localhost:5000\/api\/users')<\/p>\n
        .then(response => {<\/p>\n
          this.users = response.data.users;<\/p>\n
        })<\/p>\n
        .catch(error => {<\/p>\n
          console.error('Error fetching users:', error);<\/p>\n
        });<\/p>\n
    }<\/p>\n
  }<\/p>\n
};<\/p>\n
<\/script><\/p>\n
<\/code><\/pre>\n<\/p>\n
3. \u5904\u7406\u8de8\u57df\u95ee\u9898<\/h3>\n<\/p>\n
\u5f53Vue\u524d\u7aef\u548cPython\u540e\u7aef\u4e0d\u5728\u540c\u4e00\u4e2a\u57df\u65f6\uff0c\u9700\u8981\u5904\u7406\u8de8\u57df\u95ee\u9898\u3002\u53ef\u4ee5\u5728Flask\u5e94\u7528\u4e2d\u4f7f\u7528Flask-CORS\u6269\u5c55\u6765\u89e3\u51b3\uff1a<\/p>\n<\/p>\n
pip install Flask-CORS<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u5728Flask\u5e94\u7528\u4e2d\u542f\u7528CORS\uff1a<\/p>\n<\/p>\n
from flask_cors import CORS<\/p>\n
app = Flask(__name__)<\/p>\n
CORS(app)<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u4e8c\u3001\u4f7f\u7528WebSocket\u8fdb\u884c\u5b9e\u65f6\u4ea4\u4e92<\/h2>\n<\/p>\n
WebSocket\u662f\u4e00\u79cd\u5168\u53cc\u5de5\u901a\u4fe1\u534f\u8bae\uff0c\u9002\u7528\u4e8e\u9700\u8981\u5b9e\u65f6\u4ea4\u4e92\u7684\u573a\u666f\u3002Vue\u524d\u7aef\u53ef\u4ee5\u901a\u8fc7WebSocket\u4e0ePython\u540e\u7aef\u8fdb\u884c\u5b9e\u65f6\u6570\u636e\u4f20\u8f93\u3002<\/p>\n<\/p>\n
1. \u4f7f\u7528Flask-SocketIO\u521b\u5efaWebSocket\u670d\u52a1<\/h3>\n<\/p>\n
Flask-SocketIO\u662fFlask\u7684\u4e00\u4e2a\u6269\u5c55\uff0c\u7528\u4e8e\u652f\u6301WebSocket\u3002\u9996\u5148\uff0c\u5b89\u88c5Flask-SocketIO\uff1a<\/p>\n<\/p>\n
pip install Flask-SocketIO<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684WebSocket\u670d\u52a1\uff1a<\/p>\n<\/p>\n
from flask import Flask<\/p>\n
from flask_socketio import SocketIO, send<\/p>\n
app = Flask(__name__)<\/p>\n
socketio = SocketIO(app)<\/p>\n
@socketio.on('message')<\/p>\n
def handle_message(msg):<\/p>\n
    print('Received message:', msg)<\/p>\n
    send('Echo: ' + msg)<\/p>\n
if __name__ == '__main__':<\/p>\n
    socketio.run(app, debug=True)<\/p>\n
<\/code><\/pre>\n<\/p>\n
2. \u5728Vue\u524d\u7aef\u4f7f\u7528WebSocket<\/h3>\n<\/p>\n
\u5728Vue\u7ec4\u4ef6\u4e2d\u4f7f\u7528WebSocket\u8fdb\u884c\u901a\u4fe1\uff1a<\/p>\n<\/p>\n
<template><\/p>\n
  <div><\/p>\n
    <h1>WebSocket Chat<\/h1><\/p>\n
    <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message"><\/p>\n
    <ul><\/p>\n
      <li v-for="msg in messages" :key="msg">{{ msg }}<\/li><\/p>\n
    <\/ul><\/p>\n
  <\/div><\/p>\n
<\/template><\/p>\n
<script><\/p>\n
export default {<\/p>\n
  data() {<\/p>\n
    return {<\/p>\n
      socket: null,<\/p>\n
      message: '',<\/p>\n
      messages: []<\/p>\n
    };<\/p>\n
  },<\/p>\n
  created() {<\/p>\n
    this.socket = new WebSocket('ws:\/\/localhost:5000');<\/p>\n
    this.socket.onmessage = (event) => {<\/p>\n
      this.messages.push(event.data);<\/p>\n
    };<\/p>\n
  },<\/p>\n
  methods: {<\/p>\n
    sendMessage() {<\/p>\n
      if (this.message) {<\/p>\n
        this.socket.send(this.message);<\/p>\n
        this.message = '';<\/p>\n
      }<\/p>\n
    }<\/p>\n
  }<\/p>\n
};<\/p>\n
<\/script><\/p>\n
<\/code><\/pre>\n<\/p>\n
\u4e09\u3001\u901a\u8fc7GraphQL\u63a5\u53e3\u83b7\u53d6\u6570\u636e<\/h2>\n<\/p>\n
GraphQL\u662f\u4e00\u79cd\u67e5\u8be2\u8bed\u8a00\uff0c\u7528\u4e8eAPI\u7684\u7075\u6d3b\u6570\u636e\u83b7\u53d6\u3002\u4e0eREST\u4e0d\u540c\uff0cGraphQL\u5141\u8bb8\u5ba2\u6237\u7aef\u6307\u5b9a\u6240\u9700\u6570\u636e\u7684\u7ed3\u6784\u3002<\/p>\n<\/p>\n
1. \u4f7f\u7528Graphene\u521b\u5efaGraphQL\u670d\u52a1<\/h3>\n<\/p>\n
Graphene\u662f\u4e00\u4e2a\u7528\u4e8e\u6784\u5efaGraphQL API\u7684Python\u5e93\u3002\u9996\u5148\uff0c\u5b89\u88c5Graphene\uff1a<\/p>\n<\/p>\n
pip install graphene<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684GraphQL\u670d\u52a1\uff1a<\/p>\n<\/p>\n
from flask import Flask<\/p>\n
from flask_graphql import GraphQLView<\/p>\n
import graphene<\/p>\n
class User(graphene.ObjectType):<\/p>\n
    id = graphene.Int()<\/p>\n
    name = graphene.String()<\/p>\n
class Query(graphene.ObjectType):<\/p>\n
    users = graphene.List(User)<\/p>\n
    def resolve_users(root, info):<\/p>\n
        return [<\/p>\n
            User(id=1, name="Alice"),<\/p>\n
            User(id=2, name="Bob")<\/p>\n
        ]<\/p>\n
schema = graphene.Schema(query=Query)<\/p>\n
app = Flask(__name__)<\/p>\n
app.add_url_rule('\/graphql', view_func=GraphQLView.as_view('graphql', schema=schema, graphiql=True))<\/p>\n
if __name__ == '__main__':<\/p>\n
    app.run(debug=True)<\/p>\n
<\/code><\/pre>\n<\/p>\n
2. \u5728Vue\u524d\u7aef\u4f7f\u7528Apollo Client<\/h3>\n<\/p>\n
Apollo Client\u662f\u4e00\u4e2a\u7528\u4e8e\u4e0eGraphQL\u670d\u52a1\u4ea4\u4e92\u7684\u5e93\u3002\u9996\u5148\uff0c\u5b89\u88c5Apollo Client\uff1a<\/p>\n<\/p>\n
npm install @apollo\/client graphql<\/p>\n
<\/code><\/pre>\n<\/p>\n
\u5728Vue\u7ec4\u4ef6\u4e2d\u4f7f\u7528Apollo Client\uff1a<\/p>\n<\/p>\n
<template><\/p>\n
  <div><\/p>\n
    <h1>User List<\/h1><\/p>\n
    <ul><\/p>\n
      <li v-for="user in users" :key="user.id">{{ user.name }}<\/li><\/p>\n
    <\/ul><\/p>\n
  <\/div><\/p>\n
<\/template><\/p>\n
<script><\/p>\n
import { ApolloClient, InMemoryCache, gql } from '@apollo\/client\/core';<\/p>\n
const client = new ApolloClient({<\/p>\n
  uri: 'http:\/\/localhost:5000\/graphql',<\/p>\n
  cache: new InMemoryCache()<\/p>\n
});<\/p>\n
export default {<\/p>\n
  data() {<\/p>\n
    return {<\/p>\n
      users: []<\/p>\n
    };<\/p>\n
  },<\/p>\n
  created() {<\/p>\n
    this.fetchUsers();<\/p>\n
  },<\/p>\n
  methods: {<\/p>\n
    async fetchUsers() {<\/p>\n
      const response = await client.query({<\/p>\n
        query: gql`<\/p>\n
          query {<\/p>\n
            users {<\/p>\n
              id<\/p>\n
              name<\/p>\n
            }<\/p>\n
          }<\/p>\n
        `<\/p>\n
      });<\/p>\n
      this.users = response.data.users;<\/p>\n
    }<\/p>\n
  }<\/p>\n
};<\/p>\n
<\/script><\/p>\n
<\/code><\/pre>\n<\/p>\n
\u901a\u8fc7\u4ee5\u4e0a\u65b9\u6cd5\uff0cVue\u524d\u7aef\u53ef\u4ee5\u987a\u5229\u5730\u4e0ePython\u540e\u7aef\u8fdb\u884c\u901a\u4fe1\uff0c\u65e0\u8bba\u662f\u901a\u8fc7RESTful API\u3001WebSocket\u8fd8\u662fGraphQL\u63a5\u53e3\u3002\u9009\u62e9\u54ea\u79cd\u65b9\u6cd5\u53d6\u51b3\u4e8e\u5177\u4f53\u7684\u5e94\u7528\u9700\u6c42\u548c\u573a\u666f\u3002RESTful API\u9002\u7528\u4e8e\u5927\u591a\u6570\u4f20\u7edf\u7684\u5ba2\u6237\u7aef-\u670d\u52a1\u5668\u4ea4\u4e92\uff0cWebSocket\u9002\u5408\u5b9e\u65f6\u6570\u636e\u4f20\u8f93\uff0c\u800cGraphQL\u5219\u63d0\u4f9b\u4e86\u4e00\u79cd\u7075\u6d3b\u7684\u6570\u636e\u83b7\u53d6\u65b9\u5f0f\u3002<\/p>\n<\/p>\n
\u76f8\u5173\u95ee\u7b54FAQs\uff1a<\/strong><\/h2>\n
 \u5982\u4f55\u5728Vue\u524d\u7aef\u4e0ePython\u540e\u7aef\u8fdb\u884c\u901a\u4fe1\uff1f<\/strong>
Vue\u524d\u7aef\u901a\u5e38\u901a\u8fc7API\u4e0ePython\u540e\u7aef\u8fdb\u884c\u6570\u636e\u4ea4\u4e92\u3002\u53ef\u4ee5\u4f7f\u7528Axios\u5e93\u53d1\u9001HTTP\u8bf7\u6c42\u5230Python\u540e\u7aef\u7684RESTful API\u3002\u786e\u4fddPython\u540e\u7aef\u4f7f\u7528Flask\u6216Django\u7b49\u6846\u67b6\u6765\u5904\u7406\u8bf7\u6c42\u5e76\u8fd4\u56deJSON\u683c\u5f0f\u7684\u6570\u636e\u3002\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0cVue\u53ef\u4ee5\u8f7b\u677e\u83b7\u53d6\u548c\u5c55\u793a\u540e\u7aef\u6570\u636e\u3002<\/p>\n
\u5728\u4f7f\u7528Vue\u548cPython\u65f6\uff0c\u5982\u4f55\u5904\u7406\u8de8\u57df\u95ee\u9898\uff1f<\/strong>
\u5f53Vue\u524d\u7aef\u548cPython\u540e\u7aef\u8fd0\u884c\u5728\u4e0d\u540c\u7684\u57df\u65f6\uff0c\u4f1a\u51fa\u73b0\u8de8\u57df\u95ee\u9898\u3002\u53ef\u4ee5\u5728Python\u540e\u7aef\u4e2d\u4f7f\u7528CORS\uff08\u8de8\u57df\u8d44\u6e90\u5171\u4eab\uff09\u6765\u89e3\u51b3\u3002\u5bf9\u4e8eFlask\uff0c\u53ef\u4ee5\u4f7f\u7528Flask-CORS\u5e93\uff0c\u800cDjango\u5219\u53ef\u4ee5\u901a\u8fc7Django CORS Headers\u6765\u5b9e\u73b0\u3002\u786e\u4fdd\u5728\u54cd\u5e94\u5934\u4e2d\u5141\u8bb8\u7279\u5b9a\u7684\u6e90\u8fdb\u884c\u8bbf\u95ee\uff0c\u4ee5\u4fbfVue\u80fd\u591f\u6b63\u5e38\u8c03\u7528API\u3002<\/p>\n
\u5982\u4f55\u5728Vue\u4e2d\u5904\u7406Python\u8fd4\u56de\u7684\u9519\u8bef\u4fe1\u606f\uff1f<\/strong>
\u5728Vue\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7Axios\u7684\u54cd\u5e94\u62e6\u622a\u5668\u5904\u7406Python\u540e\u7aef\u8fd4\u56de\u7684\u9519\u8bef\u4fe1\u606f\u3002\u540e\u7aef\u53ef\u4ee5\u8fd4\u56de\u4e0d\u540c\u7684HTTP\u72b6\u6001\u7801\u4ee5\u53ca\u76f8\u5e94\u7684\u9519\u8bef\u6d88\u606f\u3002\u5728Vue\u4e2d\u6355\u83b7\u8fd9\u4e9b\u9519\u8bef\u540e\uff0c\u53ef\u4ee5\u6839\u636e\u72b6\u6001\u7801\u8fdb\u884c\u76f8\u5e94\u7684\u5904\u7406\uff0c\u6bd4\u5982\u5c55\u793a\u53cb\u597d\u7684\u63d0\u793a\u4fe1\u606f\u6216\u91cd\u5b9a\u5411\u7528\u6237\u3002\u8fd9\u6837\u53ef\u4ee5\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u5e76\u5e2e\u52a9\u7528\u6237\u7406\u89e3\u53d1\u751f\u4e86\u4ec0\u4e48\u95ee\u9898\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"Vue\u524d\u7aef\u63a5Python\u7684\u65b9\u6cd5\u4e3b\u8981\u5305\u62ec\uff1a\u901a\u8fc7RESTful API\u8fdb\u884c\u901a\u4fe1\u3001\u4f7f\u7528WebSocket\u8fdb\u884c\u5b9e\u65f6\u4ea4\u4e92 […]","protected":false},"author":3,"featured_media":998255,"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\/998250"}],"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=998250"}],"version-history":[{"count":"1","href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/998250\/revisions"}],"predecessor-version":[{"id":998256,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/posts\/998250\/revisions\/998256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/media\/998255"}],"wp:attachment":[{"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/media?parent=998250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/categories?post=998250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.pingcode.com\/wp-json\/wp\/v2\/tags?post=998250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}