🍖Vue 與后端交互

一.使用 jQuery 的 ajax 與后端交互

1.版本一 : 存在跨域問題

• 前端 HTML 代碼

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<div id="box">
    <!--點擊按鈕出發事件,向后端發送數據,后端返回數據,渲染到頁面-->
    <button @click="handleClick">加載數據</button>
    <hr>
    后端傳來的數據 : {{name}}
</div>

<script>
    let vm = new Vue({
        el: '#box',
        data: {
            name:'shawn'
        },
        methods: {
            handleClick() {
                // 使用 jQuery 發送 ajax 請求
                $.ajax({
                    // 發送請求的url,5000端口是flask的默認端口(我們后端使用flask)
                    url: 'http://127.0.0.1:5000/',    
                    method: 'get',
                    success: (data) => {
                        this.name = data  // 將后端傳來的數據渲染
                    }
                })
            }
        }
    })
</script>

• 后端文件

# 先安裝 flask : pip3 install flask
# 這里使用 flask 是因為 flask 輕量,兩三行代碼就能起一個項目,方便,使用Django在這就顯得笨拙
from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def index():
    pritn('前端請求來了')
    res = make_response('Hello work!')
    return res

if __name__ == '__main__':
    app.run()

• 展示 (無法得到后端傳來的數據)

> 問題 : 數據沒有渲染成功, 但前端請求已經達到了后端, 錯誤提示 header 中沒有攜帶 Access-Control-Allow-Origin
>
> 原因 : 跨域問題, 瀏覽器檢測到前端和后端來自不同的域, 所以認為這是不安全的, 於是就攔截了該次資源的傳遞
>
> 解決 : 實現跨域資源共享 CORS, 也就是按照提示, 在 header 中加上 Access-Control-Allow-Origin

2.版本二 : 解決跨域問題

• 后端文件

# 這里使用 flask 是因為 flask 輕量,兩三行代碼就能起一個項目,方便,使用Django在這就顯得笨拙
from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def index():
    pritn('前端請求來了')
    res = make_response('Hello work!')
    # 在 header 中加入 ACRS = 所有 (跨域資源共享)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res

if __name__ == '__main__':
    app.run()

• 展示

3.后端讀取 json 格式文件傳給前端

• user_info.json 文件

{
  "name": "shawn",
  "age": 99,
  "sex": "male"
}

• 前端 HTML 文件

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<div id="box">
    <button @click="handleClick">加載用戶數據</button>
    <hr>
    用戶信息 : 姓名:{{userInfo.name}} 年齡:{{userInfo.age}} 性別:{{userInfo.sex}}
</div>

<script>
    let vm = new Vue({
        el: '#box',
        data: {
            userInfo:''
        },
        methods: {
            handleClick() {
                $.ajax({
                    url: 'http://127.0.0.1:5000/', 
                    method: 'get',
                    success: (data) => {
                        this.userInfo = data
                    }
                })
            }
        }
    })
</script>

• 后端文件

from flask import jsonify  # 與Django類似,是flask的三件套之一,返回json格式的數據
import json

@app.route('/')
def index():
    print('前端請求來了')
    # 讀取文件內容進行序列化
    with open('user_info.json','r') as f:
        dic_json = json.load(f)
    res = jsonify(dic_json)
    # 加上跨域資源共享
    res.headers["Access-Control-Allow-Origin"] = '*'
    return res

if __name__ == '__main__':
    app.run()

• 展示

二.使用 fetch 與后端交互

1.fetch 實現數據請求

• fetch是w3c的一種請求標准，不是第三方庫，與vue、jquery無關，且多數瀏覽器已內置(如:谷歌)

2.代碼示例

• 本地准備 json 格式數據

{
  "status": 200,
  "name": "shawn",
  "age": 99,
  "sex": "male"
}

• 前端 HTML 文件

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<div id="box">
    <button @click="handleClick">加載用戶數據</button>
    <hr>
<!--    后端傳來的數據 : {{name}}-->
    用戶信息 : 姓名:{{userInfo.name}} 年齡:{{userInfo.age}} 性別:{{userInfo.sex}}
</div>

<script>
    let vm = new Vue({
        el: '#box',
        data: {
            userInfo:''
        },
        methods: {
            handleClick() {
               fetch('http://127.0.0.1:5000/home')
                   .then(data => data.json())
                   .then(data => {
                       if (data.status == 200){
                           this.userInfo = data
                       }else{
                           alert('加載失敗!!')
                       }
                   })

            }
        }
    })
</script>

• 后端文件

from flask import jsonify  # 與Django類似,是flask的三件套之一,返回json格式的數據
import json

@app.route('/home')
def index():
    print('前端請求來了')
    # 讀取文件內容進行序列化
    with open('user_info.json','r') as f:
        dic_json = json.load(f)
    res = jsonify(dic_json)
    # 加上跨域資源共享
    res.headers["Access-Control-Allow-Origin"] = '*'
    return res

if __name__ == '__main__':
    app.run()

• 展示

三.使用 axios 實現與后端交互

1.Axios 介紹

• Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
• 使用文檔 : https://www.kancloud.cn/yunye/axios/234845

2.為什么使用 Axios

• 因為 vue.js 默認沒有提供ajax功能, 為了實現 ajax 功能, 得通過 axios 實現
• 所以使用 vue 的時候，一般都會使用 axios 的插件來實現 ajax 與后端服務器的數據交互

3.簡單使用

• 先安裝 axios, 或者直接使用 CDN

# 下載
npm install axios

# 引入 CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• user_info.json 文件與 fetch 使用的一樣

• 前端 HTML 頁面

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<div id="box">
    <button @click="handleClick">Axios加載用戶數據</button>
    <hr>
    用戶信息 : 姓名:{{userInfo.name}} 年齡:{{userInfo.age}} 性別:{{userInfo.sex}}
</div>

<script>
    let vm = new Vue({
        el: '#box',
        data: {
            userInfo: ''
        },
        methods: {
            handleClick() {
                axios.get('http://127.0.0.1:5000/home')
                    .then(data => {
                        // axios 會將數據再封裝一層,需要從data中取出來
                        if (data.data.status == 200) {
                            this.userInfo = data.data
                        } else {
                            alert('加載錯誤!')
                        }
                    })
            }
        }
    })
</script>

• 后端文件與 fetch 使用的一樣

• 展示