Flask是一個輕量級的Python web框架,讓用戶能夠快速開發出簡單性的應用。Vue.js是一款非常流行的前端框架,幫助開發人員構建交互式的web界面。與此同時,AJAX是一種基于JavaScript的技術,使得web應用程序可以在不重新加載整個頁面的情況下更新部分頁面。結合使用Flask、AJAX和Vue.js,可以高效地開發出一個動態、實時的web應用程序。
from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/update_data', methods=['GET']) def update_data(): data = {'name': 'Jerry', 'age': 20} return json.dumps(data), 200, {'ContentType': 'application/json'} if __name__ == '__main__': app.run()
上面是一個使用Flask框架的簡單例子,其中包含兩個路由方法:/和/update_data。/路由返回index.html文件,而/update_data路由返回一個JSON格式的數據。AJAX可以使得web應用程序可以異步地向服務器發送請求,并且根據返回的數據更新頁面的內容。下面是使用Vue.js和AJAX的代碼:
new Vue({ el: '#app', data: { name: '', age: '' }, mounted: function() { var vm = this setInterval(function() { axios.get('/update_data').then(function(response) { data = response.data vm.name = data.name vm.age = data.age }).catch(function(error) { console.log(error); }); }, 5000); } })
在上面的Vue.js代碼中,我們使用了axios庫來向服務器發送GET請求,并根據返回的數據更新Vue實例的屬性。mounted方法在Vue實例掛載到DOM元素后被調用,然后我們每5秒鐘向服務器發一個/update_data請求,以更新數據。使用Vue.js和axios庫可以處理異步請求,并且使得更新頁面變得簡單而高效。
上一篇css一樣好嗎
下一篇html id設置為變量