简单的登录注册-首页_一个简单的项目登录后的主页-CSDN博客

本文链接：https://blog.csdn.net/m0_69045017/article/details/123914817
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var userUuid = localStorage.getItem('uuid');
        // 如果localStorage里面没有uuid，说明没有登陆，就跳转到登录页
        if (!userUuid) {
            location.href = './login.html';
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            line-height: 80px;
            background-color: yellow;
        }

        td,
        th {
            padding: 10px;
        }

        #mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .2);
            display: none;
        }

        #content {
            width: 400px;
            height: 400px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #addForm {
            text-align: center;
            margin-top: 80px;
        }
    </style>
</head>

<body>
    <h1>首页</h1>
    <div class="nav">
        <div id="user">xxx</div>
        <div id="logout">退出登录</div>
    </div>
    <select id="typeList"></select>
    <button id="add">添加</button>
    <table id="table" border="1"></table>


    <div id="mask">
        <div id="content">
            <form id="addForm">
                标题：<input type="text" name="title"><br>
                类型：<input type="text" name="type"><br>
                内容：<textarea name="content" cols="30" rows="10"></textarea><br>
                <button type="submit">添加</button>
                <button id="close" type="button">取消</button>
            </form>
        </div>
    </div>
    <script>
        console.log(userUuid);
        var user = document.getElementById('user');
        var logout = document.getElementById('logout');
        var table = document.getElementById('table');
        var typeList = document.getElementById('typeList');
        var add = document.getElementById('add');
        var mask = document.getElementById('mask');
        var close = document.getElementById('close');
        var addForm = document.getElementById('addForm');

        // 拉取个人信息
        fetch(`http://39.103.177.112:3008/api/user/${userUuid}`).then(res => res.json()).then(res => {
            console.log(res);
            user.textContent = res.data.name;
        });

        // 点击添加按钮
        add.onclick = function () {
            mask.style.display = 'block';
        }
        // 点击取消按钮
        close.onclick = function () {
            mask.style.display = 'none';
        }

        // 表单提交时
        addForm.onsubmit = function () {
            event.preventDefault();
            var data = new FormData(this);

            fetch(`http://39.103.177.112:3008/api/list/${userUuid}`, {
                method: 'post',
                body: data
            })
                .then(res => res.json())
                .then(res => {
                    if (res.code === 1) {
                        addForm.reset();
                        mask.style.display = 'none';
                        getTypeList();
                    }
                })
        }

        // 退出登录
        logout.onclick = function () {
            fetch(`http://39.103.177.112:3008/api/logout/${userUuid}`).then(res => res.json()).then(res => {
                if (res.code) {
                    localStorage.removeItem('uuid');
                    location.href = './login.html';
                }
            })
        }


        // 下拉框筛选
        typeList.onchange = function () {
            // location.search = `?type=${this.value}`;

            // 地址更改之后页面不刷新
            history.replaceState({}, '', `?type=${this.value}`);

            getList();
        }


        // 拉取下拉框数据
        getTypeList();
        function getTypeList() {
            fetch('http://39.103.177.112:3008/api/type-list').then(res => res.json()).then(res => {
                console.log(res);
                typeList.innerHTML = '<option value="">全部</option>';
                res.data.forEach(item => {
                    typeList.innerHTML += `<option>${item}</option>`;
                })

                var v = location.search.split('?')[1]
                var v1 = v ? v.split('=')[1] : '';
                // console.log(decodeURIComponent(v));
                typeList.value = decodeURIComponent(v1);
                getList();
            })
        }


        // 拉取主页数据列表
        function getList() {
            fetch(`http://39.103.177.112:3008/api/list?type=${typeList.value}`).then(res => res.json()).then(res => {
                console.log(res);
                table.innerHTML = `<tr>
                <th>标题</th>
                <th>内容</th>
                <th>喜欢数量</th>
                <th>不喜欢数量</th>
                <th>类型</th>
                <th>创建人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>`;

                res.data.forEach(item => {
                    table.innerHTML += `<tr>
                    <td>${item.title}</td>
                    <td>${item.content}</td>
                    <td>${item.likeList.length}</td>
                    <td>${item.unlikeList.length}</td>
                    <td>${item.type}</td>
                    <td>${item.createUsername}</td>
                    <td>${item.createTime}</td>
                    <td>
                        ${userUuid === item.createUserUuid ? `<button onclick="del('${item.uuid}')">删除</button>` : ''}
                        <button ${item.unlikeList.some(i => i.id === userUuid) ? 'disabled' : ''} onclick="like('${item.uuid}', 0)">踩</button>
                        <button ${item.likeList.some(i => i.id === userUuid) ? 'disabled' : ''} onclick="like('${item.uuid}', 1)">赞</button>
                    </td>
                </tr>`;
                });
            })
        }


        // 删除
        function del(uuid) {
            console.log(uuid);
            fetch(`http://39.103.177.112:3008/api/list/${userUuid}/${uuid}`, {
                method: 'delete'
            })
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    if (res.code === 1) {
                        getTypeList();
                    }
                })
        }


        // 踩和赞
        function like(uuid, type) {
            console.log(uuid);
            fetch(`http://39.103.177.112:3008/api/list/${uuid}/like/${userUuid}/${type}`)
                .then(res => res.json())
                .then(res => {
                    if (res.code === 1) {
                        getList();
                    } else {
                        alert(res.message);
                    }
                })
        }
    </script>
</body>

</html>