一个简单的WEB开发案例

最新推荐文章于 2024-11-18 11:56:41 发布

老小聂

最新推荐文章于 2024-11-18 11:56:41 发布

阅读量17

点赞数

文章标签：前端

一个简单的Web开发案例的概述，并提供关键代码片段，你可以根据这些片段在你的本地环境中搭建和运行它。

案例概述

我们将构建一个简单的待办事项（Todo List）应用。这个应用将允许用户添加、查看和删除待办事项。我们将使用Python的Flask框架作为后端，HTML和JavaScript（使用jQuery简化DOM操作）作为前端。

步骤 1: 设置环境

首先，确保你的机器上安装了Python和pip。然后，使用pip安装Flask：

步骤 2: 创建后端

在你的工作目录中，创建一个名为app.py的文件，并添加以下

from flask import Flask, request, jsonify

app = Flask(__name__)

todos = []

@app.route('/')
def index():
    return '''
    <!doctype html>
    <html>
    <head><title>Todo List</title></head>
    <body>
        <h1>Todo List</h1>
        <ul id="todo-list">
            {% for todo in todos %}
                <li>{{ todo }}</li>
            {% endfor %}
        </ul>
        <form action="/add" method="post">
            <input type="text" name="todo" placeholder="Add new todo">
            <button type="submit">Add</button>
        </form>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                function fetchTodos() {
                    $.getJSON('/todos', function(data) {
                        $('#todo-list').empty();
                        data.forEach(function(todo) {
                            $('#todo-list').append('<li>' + todo + '</li>');
                        });
                    });
                }

                $('form').submit(function(e) {
                    e.preventDefault();
                    var todo = $('input[name="todo"]').val();
                    $.post('/add', {todo: todo}, function() {
                        fetchTodos();
                        $('input[name="todo"]').val('');
                    });
                });

                fetchTodos();
            });
        </script>
    </body>
    </html>
    '''

@app.route('/todos', methods=['GET'])
def get_todos():
    return jsonify(todos)

@app.route('/add', methods=['POST'])
def add_todo():
    todo = request.form['todo']
    if todo:
        todos.append(todo)
    return jsonify({'status': 'success'})

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