一个简单的WEB开发案例

鹿屿二向箔

于 2024-08-19 22:54:43 发布

阅读量129

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/m0_52011717/article/details/141336810

版权

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

案例概述

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

步骤 1: 设置环境

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

pip install 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)

注意：上面的代码将前端和后端混合在同一个文件中，这在实际开发中是不推荐的。但为了简化示例，我们在这里这样做。

步骤 3: 运行应用

在命令行中，运行app.py文件：

python app.py

然后，在浏览器中打开http://127.0.0.1:5000/，你应该能看到一个简单的待办事项列表，可以添加新的待办事项。

注意事项

这个示例使用了Flask的模板渲染功能来渲染HTML，但这里为了简化，我们将HTML直接写在了Python代码中。
我们使用了jQuery来简化AJAX请求和DOM操作。
这个示例没有实现待办事项的删除功能，但你可以根据add_todo函数的逻辑来添加它。
真实环境中，待办事项应该存储在数据库中，而不是像这里一样存储在内存中的列表中。
安全性、错误处理和性能优化在这个示例中都没有涉及，但在实际开发中是非常重要的。

鹿屿二向箔

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个简单的WEB开发案例

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

扫一扫