请用Python+javascript+html5写一个问题记录的小页面-CSDN博客

本文链接：https://blog.csdn.net/chailangcompany/article/details/142603265

要创建一个问题记录的小系统，我们可以使用Python、JavaScript和HTML5来构建后端API和前端界面。以下是构建该系统的基本步骤和代码示例：

1. 设计数据库结构

首先，我们需要设计一个数据库来存储问题记录。在这个例子中，我们假设使用SQLite作为数据库。我们可以创建一个名为questions的表，包含id（主键）、title（问题标题）、content（问题内容）和created_at（创建时间）等字段。

2. 使用Python搭建后端

使用Python和Flask框架，我们可以创建API接口来处理前端请求。

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

# 连接到SQLite数据库
db = sqlite3.connect('questions.db')

@app.route('/questions', methods=['GET'])
def get_questions():
    cursor = db.cursor()
    cursor.execute("SELECT * FROM questions")
    questions = cursor.fetchall()
    return jsonify(questions)

@app.route('/questions', methods=['POST'])
def add_question():
    data = request.get_json()
    title = data.get('title')
    content = data.get('content')

    cursor = db.cursor()
    cursor.execute("INSERT INTO questions (title, content) VALUES (?, ?)", (title, content))
    db.commit()
    return jsonify({'message': 'Question added successfully'})

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

3. 使用HTML5和JavaScript构建前端

我们可以使用HTML5和JavaScript来构建前端界面，并实现用户提问和展示问题的交互功能。

<!DOCTYPE html>
<html>
<head>
    <title>问题记录系统</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>问题记录系统</h1>

    <form id="question-form">
        <label for="title">问题标题:</label>
        <input type="text" id="title" name="title">
        <label for="content">问题内容:</label>
        <textarea id="content" name="content"></textarea>
        <button type="submit">提交问题</button>
    </form>

    <div id="questions-container"></div>

    <script>
        $(document).ready(function() {
            $('#question-form').submit(function(e) {
                e.preventDefault();
                var title = $('#title').val();
                var content = $('#content').val();

                $.ajax({
                    url: '/questions',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        title: title,
                        content: content
                    },
                    success: function(response) {
                        console.log(response);
                        // TODO: 更新问题列表
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });

            // TODO: 获取问题列表并显示
        });
    </script>
</body>
</html>