vue 發起get請求和post請求

超级宝宝11發表於2024-06-09
Vue

一、vite方式初始化vue3專案

C:\Users\Administrator>npm init vite-app his-project

> npx
> create-vite-app his-project

Scaffolding project in C:\Users\Administrator\his-project...

Done. Now run:

  cd his-project
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)


C:\Users\Administrator>cd his-project

C:\Users\Administrator\his-project>npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 299 packages, and audited 300 packages in 1m

39 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (1 low, 3 moderate, 3 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

C:\Users\Administrator\his-project>npm run dev

> his-project@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://10.111.40.30:3000/
  > Network:  http://192.168.10.225:3000/
  > Local:    http://localhost:3000/

二、vue3

修改his-project\src\components\HelloWorld.vue檔案，支援發起get請求和post請求

<template>  
  <div>  
    <button @click="fetchData">發起 GET 請求</button>  
    <button @click="postData">發起 POST 請求</button>  
    <!-- 你可以在這裡新增用於顯示響應資料的元素 -->  
    <div v-if="responseData">  
      <pre>{{ responseData }}</pre>  
    </div>  
  </div>  
</template>  
  
<script>  
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      responseData: null, // 用於儲存響應資料的變數  
    };  
  },  
  methods: {  
    // 發起 GET 請求的方法  
    fetchData() {  
      axios.get('http://127.0.0.1:5000/get_data') // 替換為你的 API URL  
        .then(response => {  
          this.responseData = response.data; // 儲存響應資料  
        })  
        .catch(error => {  
          console.error('GET 請求失敗:', error);  
        });  
    },  
    // 發起 POST 請求的方法  
    postData() {  
      const postData = {  
        key1: 'value1',  
        message: 'value2' // 根據你的 API 要求設定資料  
      };  
  
      axios.post('http://127.0.0.1:5000/post_data', postData) // 替換為你的 API URL  
        .then(response => {  
          this.responseData = response.data; // 儲存響應資料  
        })  
        .catch(error => {  
          console.error('POST 請求失敗:', error);  
        });  
    },  
  },  
};  
</script>

三、後端flask配置get請求介面和post請求介面

from flask import Flask, request, jsonify  
from flask_cors import CORS
  
app = Flask(__name__)  
CORS(app, resources=r'/*')
@app.route('/get_data', methods=['GET'])  
def get_data():  
    # 這裡可以新增獲取資料的邏輯  
    data = {'message': 'Hello from GET request','data':'test_data'}  
    return jsonify(data)  


  
@app.route('/post_data', methods=['POST'])  
def post_data():  
    # 假設我們期望收到一個 JSON 資料體  
    data = request.get_json()  # 從請求中獲取 JSON 資料  
    # 你可以在這裡新增處理資料的邏輯  
    message = data.get('message', 'No message provided')  
    response = {'message': f'Received: {message}'}  
    return jsonify(response), 201  # 201 是CREATED狀態碼，表示資源已成功建立  
  
if __name__ == '__main__':  
    app.run(debug=True)

四、頁面效果，點選按鈕發起請求，顯示介面返回資訊

相關文章