Flask 前後端分離實戰

一、概述

隨著Web應用程序的複雜度不斷增加，前後端分離開始變得越來越流行。Flask是一個輕量級框架，可以輕鬆地實現前後端分離。使用Flask，我們可以實現嚴密的後端邏輯和鬆散的前端耦合，允許我們在不受前端限制的情況下構建可擴展、靈活的Web應用程序。

二、後端實現

使用Flask實現後端是非常簡單的，下面是一個示例代碼：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    data = {'name': 'John', 'age': 30}
    return jsonify(data)

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

在這個示例中，我們創建了一個/api/data路由，並返回了JSON數據。這個路由可以通過HTTP Get請求訪問，並且返回一個JSON數據。

三、前端實現

在前端，可以使用jQuery輕鬆地實現從伺服器請求JSON數據，然後使用JavaScript將其顯示在頁面上。下面是一個示例代碼：

$(document).ready(function() {
    $.get('/api/data', function(data) {
        $('#name').text(data.name);
        $('#age').text(data.age);
    });
});

在這個示例中，我們使用jQuery從伺服器請求數據，然後將數據顯示在一個div元素中。

四、前後端分離實戰

現在我們將用實戰來演示前後端分離的實現。假設我們要構建一個簡單的TODO應用程序。首先，我們需要創建一個具有RESTful API的後端。

1.後端實現

我們將使用Flask和MongoDB來實現後端。下面是一個示例代碼：

from flask import Flask, jsonify, request
from flask_pymongo import PyMongo
from bson.objectid import ObjectId

app = Flask(__name__)
app.config['MONGO_URI'] = 'mongodb://localhost:27017/todo'
mongo = PyMongo(app)

@app.route('/api/tasks', methods=['GET', 'POST'])
def tasks():
    if request.method == 'GET':
        tasks = mongo.db.tasks.find()
        result = []
        for task in tasks:
            result.append({'_id': str(task['_id']), 'title': task['title']})
        return jsonify(result)
    elif request.method == 'POST':
        title = request.json['title']
        task_id = mongo.db.tasks.insert_one({'title': title}).inserted_id
        task = mongo.db.tasks.find_one({'_id': task_id})
        return jsonify({'_id': str(task['_id']), 'title': task['title']})

@app.route('/api/tasks/', methods=['GET', 'PUT', 'DELETE'])
def task(id):
    if request.method == 'GET':
        task = mongo.db.tasks.find_one({'_id': ObjectId(id)})
        return jsonify({'_id': str(task['_id']), 'title': task['title']})
    elif request.method == 'PUT':
        title = request.json['title']
        mongo.db.tasks.update_one({'_id': ObjectId(id)}, {'$set': {'title': title}})
        task = mongo.db.tasks.find_one({'_id': ObjectId(id)})
        return jsonify({'_id': str(task['_id']), 'title': task['title']})
    elif request.method == 'DELETE':
        mongo.db.tasks.delete_one({'_id': ObjectId(id)})
        return '', 204

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

在這個示例中，我們創建了一個任務(tasks)路由，可以用來獲取和創建任務。我們還創建了一個子路由(tasks/)，可以用來獲取、更新和刪除單個任務。

2.前端實現

在前端，我們使用JavaScript和jQuery來實現TODO應用程序。下面是一個示例代碼：

$(document).ready(function() {
    $.get('/api/tasks', function(data) {
        $.each(data, function(index, task) {
            var $li = $('
').attr({'data-id': task._id, 'data-title': task.title});
            var $span = $('').text(task.title);
            var $input = $('').attr({'type': 'text'}).css({'display': 'none'}).val(task.title);
            var $button_edit = $('').text('編輯');
            var $button_delete = $('').text('刪除');
            $button_edit.on('click', function() {
                $(this).parent().find('span').css({'display': 'none'});
                $(this).parent().find('input').css({'display': 'inline-block'});
            });
            $input.on('blur', function() {
                var $li = $(this).parent();
                var id = $li.attr('data-id');
                var title = $li.find('input').val();
                $.ajax({
                    url: '/api/tasks/' + id,
                    type: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify({'title': title}),
                    success: function() {
                        $li.attr('data-title', title);
                        $li.find('span').text(title).css({'display': 'inline-block'});
                        $li.find('input').css({'display': 'none'});
                    }
                });
            });
            $button_delete.on('click', function() {
                var $li = $(this).parent();
                var id = $li.attr('data-id');
                $.ajax({
                    url: '/api/tasks/' + id,
                    type: 'DELETE',
                    success: function() {
                        $li.remove();
                    }
                });
            });
            $li.append($span).append($input).append($button_edit).append($button_delete);
            $('#tasks').append($li);
        });
    });
    $('#add-task-form').on('submit', function(event) {
        event.preventDefault();
        var title = $('#add-task-input').val();
        $.ajax({
            url: '/api/tasks',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({'title': title}),
            success: function(task) {
                var $li = $('
').attr({'data-id': task._id, 'data-title': task.title});
                var $span = $('').text(task.title);
                var $input = $('').attr({'type': 'text'}).css({'display': 'none'}).val(task.title);
                var $button_edit = $('').text('編輯');
                var $button_delete = $('').text('刪除');
                $button_edit.on('click', function() {
                    $(this).parent().find('span').css({'display': 'none'});
                    $(this).parent().find('input').css({'display': 'inline-block'});
                });
                $input.on('blur', function() {
                    var $li = $(this).parent();
                    var id = $li.attr('data-id');
                    var title = $li.find('input').val();
                    $.ajax({
                        url: '/api/tasks/' + id,
                        type: 'PUT',
                        contentType: 'application/json',
                        data: JSON.stringify({'title': title}),
                        success: function() {
                            $li.attr('data-title', title);
                            $li.find('span').text(title).css({'display': 'inline-block'});
                            $li.find('input').css({'display': 'none'});
                        }
                    });
                });
                $button_delete.on('click', function() {
                    var $li = $(this).parent();
                    var id = $li.attr('data-id');
                    $.ajax({
                        url: '/api/tasks/' + id,
                        type: 'DELETE',
                        success: function() {
                            $li.remove();
                        }
                    });
                });
                $li.append($span).append($input).append($button_edit).append($button_delete);
                $('#tasks').append($li);
                $('#add-task-input').val('');
            }
        });
    });
});

在這個示例中，我們使用Ajax來從伺服器請求數據，並使用JavaScript將數據顯示在頁面上。我們還使用Ajax來創建、編輯和刪除任務。

五、總結

在本文中，我們簡要地介紹了如何使用Flask實現前後端分離。我們用一個簡單的TODO應用程序演示了如何在後端使用Flask和MongoDB創建RESTful API，並在前端使用jQuery和JavaScript實現交互操作。