《web应用技术》第七次课后练习

<form id="poemForm">
    <input type="text" id="author" placeholder="诗人姓名" required>
    <input type="text" id="gender" placeholder="性别（1-男，0-女）" required>
    <input type="text" id="dynasty" placeholder="朝代" required>
    <input type="text" id="title" placeholder="头衔" required>
    <textarea id="style" placeholder="风格描述" required></textarea>
    <button type="submit">添加诗人</button>
</form>

<script>
document.getElementById('poemForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 收集表单数据
    var poemData = {
        author: document.getElementById('author').value,
        gender: document.getElementById('gender').value,
        dynasty: document.getElementById('dynasty').value,
        title: document.getElementById('title').value,
        style: document.getElementById('style').value
    };
    // 发送AJAX请求到后端API
    axios.post('/add-poem', poemData)
        .then(function(response) {
            console.log('添加成功', response);
            // 清空表单
            document.getElementById('poemForm').reset();
        })
        .catch(function(error) {
            console.error('添加失败', error);
        });
});
</script>

CREATE TABLE poems (
    id INT AUTO_INCREMENT PRIMARY KEY,
    author VARCHAR(100) NOT NULL,
    gender CHAR(1) NOT NULL,
    dynasty VARCHAR(100) NOT NULL,
    title VARCHAR(100) NOT NULL,
    style TEXT NOT NULL
);

INSERT INTO poems (author, gender, dynasty, title, style) 
VALUES ('李白', '1', '唐代', '诗仙', '豪放飘逸的诗风和丰富的想象力');

DELETE FROM poems WHERE id = 1;、

UPDATE poems 
SET author = '李太白', style = '浪漫主义风格' 
WHERE id = 1; 

SELECT * FROM poems;