526互联

留言板

发布时间 2023-06-30 13:53:08作者: 创克杨戒不掉
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
    <style>
        body {
            background-color: #f6f6f6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            color: #3f51b5;
        }

        .todo-form {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
        .name{
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }
        .account{
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }
        .todo-input {
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }

        .todo-date {
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }

        .error-message {
            color: #ff6b6b;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .todo-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #3f51b5;
            color: #fff;
            cursor: pointer;
        }

        .todo-list {
            list-style: none;
            padding: 0;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #e8e8e8;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .todo-item:last-child {
            margin-bottom: 0;
        }

        .todo-item-checkbox {
            margin-right: 10px;
        }

        .todo-item-text {
            flex: 1;
            color: #3f51b5;
            font-weight: bold;
        }

        .todo-item-delete {
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            background-color: #ff6b6b;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .todo-item-delete:hover {
            background-color: #ff4f4f;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="header">留言板</h1>
    <form class="todo-form" id="todoForm">



<!--        <input type="text" class="name" placeholder="请输入你的昵称" id="name">-->
        <input type="text" class="todo-input" placeholder="请输入你的留言内容" id="todoInput">
        <input type="date" class="todo-date" id="todoDate">
        <button type="submit" class="todo-button">Add</button>
        <div id="errorMessage" class="error-message"></div>
    </form>
    <ul class="todo-list" id="todoList"></ul>
</div>
<script src="/bbb/jquery/dist/jquery.js"></script>
<script>




    $(function() {
        $('#todoForm').submit(function(event) {
            event.preventDefault()
            //
         /*   const todoName=$('#name').val().trim()
            const todoAccount = $('#account').val().trim()*/


            const todoText = $('#todoInput').val().trim()
            const todoDate = $('#todoDate').val().trim()
/*
            if (todoName===null || todoAccount===null) {
                $('#errorMessage').text('请输入内容.')
                return
            }*/

            if (todoText===null) {
                $('#errorMessage').text('请输入内容.')
                return
            }

            if (!todoDate) {
                $('#errorMessage').text('Please enter  todo task and  date.')
                return
            }
            /*if (!todoText || !todoDate) {
                $('#errorMessage').text('Please enter  todo task and  date.')
                return
            }*/
            if (new Date(todoDate) < new Date()) {
                $('#errorMessage').text('The deadline cannot be in the past.')
                return
            }

            $('#errorMessage').text('')

            const todoItem = $('<li>').addClass('todo-item')
            const todoCheckbox = $('<input>').attr({
                type: 'checkbox',
                class: 'todo-item-checkbox'
            })
            const todoTextEl = $('<span>').addClass('todo-item-text').text(todoText)
            const todoDateEl = $('<span>').addClass('todo-item-date').text(todoDate)
            const todoDeleteBtn = $('<button>').addClass('todo-item-delete').text('Delete')

            todoItem.append(todoCheckbox, todoTextEl, todoDateEl, todoDeleteBtn)
            $('#todoList').append(todoItem)


            /*$('#name').val('')
            $('#account').val('')*/


            $('#todoInput').val('')
            $('#todoDate').val('')

            $.ajax({
                type: 'post',
                url: '/app/tasks',
                data: JSON.stringify({

                    // name: todoName,
                    // text: todoAccount,

                    name: todoText,
                    date: todoDate
                }),
                dataType: 'object',
                contentType: 'apply/object',
                success: function(response) {
                    console.log(response)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown)
                }
            })
        })

        $(document).on('click', '.todo-item-delete', function() {
            if (confirm('Are you sure you want to delete this todo?')) {
                $(this).parent().remove()
            }
        })
    })
</script>
</body>
</html>

server js:
const express=require('express')

const app=express()

app.engine('html',require('express-art-template'))


app.use(express.urlencoded({extended:false}))
app.use(express.json())

//开放node_modules,public两个文件夹的权限，允许用户查看
app.use('/bbb',express.static('node_modules'))


app.get('/',(req,res) =>{
    res.render('login.html')
})

let tasks = [];

app.post('/app/tasks', (req, res) => {
    const { name, date } = req.body;
    tasks.push({ name, date });
    res.send({ message: 'Task added success.' });
});

app.get('/app/tasks', (req, res) => {
    res.send(tasks);
});


app.listen(3020,()=>console.log('app listening on http://localhost:3020'))