介绍关于我的期末考核项目——ToDoList

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

前言

在我接触到前端几个月之后我第一次与同学合作完成了一个项目，过程很艰辛但同时充满意义，我看到了许多的不足以及努力的空间，自己还有许多方面需要提升，比如这次的ToDoList我最遗憾的是没有实现多端适配，我有研究过许多热门网站的处理，也是学到了许多的布局方法和处理，当然我现在还不足以达到但是慢慢来总会进步的，写这篇文章的目的呢就是记录不同时期的想法，然后继续总结，不断进步（用输出带动输入）

项目分享

ToDoList 前期规划是做一个实现添加、删除、查找、编辑、显示全部的todolist的项目，首先是视觉组绘画UI图后挑选进行前后端同步开发

首先我选择了一个比较好看的视觉UI图，一见倾心我就果断决定以这个图为基础来进行网页的开发

开发过程

首先是确立HTML框架，以及页面的分布，我初步的进行了构造（关键代码）

html部分

<!-- header部分 -->
<div class="header">
        <ul class="left-entry">
            <li><img src="../img/工作室图标.png" alt="" id="qinliimg"></li>
            <li>
                <h1>To do list</h1>
            </li>
        </ul>
        <div class="mid-entry"></div>
        <ul class="right-entry">
            <li><a href="../html/index.html">首页</a></li>
            <li><a href="../html/daynotes.html">日志</a></li>
            <li><a href="#">好友</a></li>
            <li><a href="#">分享</a></li>
            <li><a href="#">动态</a></li>
            <li class="right-entry-li"><a href="#">登录/注册</a></li>
        </ul>
    </div>
    <!-- 主页搜索框部分 -->
    <div class="search-box">
        <input class="search-txt" type="text" name="" placeholder="名称/日期">
        <a class="search-btn" href="#">
            <i class="fas fa-search"></i>
        </a>
    </div>

    <div class="mid-title">
        <div class="touxiang"><img src="../img/头像.jpg" alt="" id="touxiang-picture"></div>
        <div class="name">
            <p>昵称</p>
        </div>
        <div class="main-title">
            <div class="xiahuaxian">
                <p>My Plan Library</p>
            </div>
        </div>
        <div class="title-plan">
            <div class="search">
                <p>每日计划</p>
                <div class="search-icon"><i class="iconfont icon-xiangxiasanjiaoxing"></i></div>
            </div>
        </div>
        <div class="s-title">
            <p>我的计划库</p>
        </div>
    </div>
    <!-- 显示内容部分 -->
    <div class="main">
        <div class="main-div">
            <h2>未完成</h2>
        </div>
        <div class="content">
            <ul class="doing_ul heart">
            </ul>
        </div>
        <div class="main-div">
            <h2>已完成</h2>
        </div>
        <div class="content">
            <ul class="finshed_ul heart">
            </ul>
        </div>
        <div class="button">
            <input type="button" name="popBox" value="添加" onclick="popBox()" class="btn">
        </div>
    </div>
    <!-- 遮罩层 -->
    <div id="popLayer"></div>
    <!-- 弹出框 -->
    <div id="popBox">
        <div class="popBox-name-position">
            <div class="popBox-name">
                <p>添加</p>
            </div>
        </div>
        <div class="popBox-time"> <input type="text" placeholder="请输入标题" id="uploadtitle">
        </div>
        <div class="content-popBox">
            <input type="text" placeholder="开始日期 例如：2020.1.1" id="uploadbegintime">
            <input type="text" placeholder="截至日期 例如：2020.1.2" id="uploaddeadtime">
        </div>
        <div class="content-popBox">
            <input type="text" placeholder="To do list" id="uploadThings">
        </div>
        <div class="content-popBox"><input type="text" placeholder="备注" id="uploadtag"></div>
        <div class="popBox-btn">
            <div class="close">
                <a href="javascript:void(0)" onclick="additive()">完成</a>
            </div>
            <div class="close">
                <a href="javascript:void(0)" onclick="closeBox()">取消</a>
            </div>
        </div>
    </div>

首页首先满足的条件是添加、编辑、搜索和删除的功能，所以我的首页主要由四部分组成：header、标题、内容框以及添加框（popbox） 然后进行了CSS的修饰后我的首页初步的完成，因为后面风格大概类似就不过多阐述html和css部分的东西了

JavaScript部分

因为刚学完ajax不久，所以还没有及时运用好jq的封装ajax所以就初步利用了未封装的ajax进行了功能的实施。添加功能，首先是上传至服务器相应的几个数据：title、congtent、tag、creat_time、deadline_time 利用post的方法传送Json格式的数据给服务器 随后判断服务器相应的值来进行下一步操作 随后我就要解决的问题就是，如何在服务器无返回Json数据的前提下将添加的详情信息显示到页面之中，我就用到了一个项目中新学到的属性：document.createElement 随后将新建的对象插入到ul之中，也就算完成了一个对象的添加

以下是代码

function additive() {
    /*ajax*/
    let uploadbegintime = document.getElementById("uploadbegintime").value;
    let uploaddeadtime = document.getElementById('uploaddeadtime').value;
    let uploadThings = document.getElementById("uploadThings").value;
    let uploadtitle = document.getElementById('uploadtitle').value;
    let uploadtag = document.getElementById('uploadtag').value;
    _value = {
        title: uploadtitle,
        content: uploadThings,
        tag: [uploadtag],
        create_time: uploadbegintime,
        deadline_time: uploaddeadtime,
    };
    if (!_value) return false;
    var xhr = null;

    try {
        xhr = new XMLHttpRequest();
    } catch (error) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open("post", `${baseUrl}/add`, true);//利用baseUrl来代替复杂的地址

    xhr.setRequestHeader("content-type", "application/json");

    xhr.send(JSON.stringify(_value));

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log('_value');
            alert('添加成功，请到日志中查看所有计划');
        }
    }
    const li = document.createElement('li');
    li.innerHTML = `<div>
              <input type="checkbox" id="checkbox"><div>${uploadtitle}</div><div>${uploadThings}备注:${uploadtag}</div><div>${uploaddeadtime}</div></div> <i id="del">删除</i>
              </div>`;
    doing_ul.insertBefore(li, doing_ul.children[0]);
    console.log(uploadThings);
    console.log(uploaddeadtime);
    doingList.unshift(uploadThings);
    doingList.unshift(uploaddeadtime);
    uploadThings.value = "";
    uploaddeadtime.value = "";

    closeBox()//添加完成后关闭添加框


}

因为其他功能的实现大部分原理还是与添加相似的，所以就不过多的赘述，来分享一些我学到的新东西

Json形式数据的发送

_value = {
        title: uploadtitle,
        content: uploadThings,
        tag: [uploadtag],
        create_time: uploadbegintime,
        deadline_time: uploaddeadtime,
    };
    xhr.send(JSON.stringify(_value));
    

因为开始不会Json格式的数据发送所以第一次前后端部署就没有完成数据的对接，后来通过查阅也及时的掌握的格式转换

键盘监听

uploadThings.addEventListener('keyup', e => {
    if (e.keyCode === 13) {
        const li = document.createElement('li');
        li.innerHTML = `<div>
                  <input type="checkbox"><span>${uploadThings.value}</span></div> <i></i>
                  </div>`;
        doing_ul.insertBefore(li, doing_ul.children[0]);
        console.log(uploadThings.value);
        doingList.unshift(uploadThings.value); //将新项添加到数组的开头，并返回新的长度。
        saveInfo();
        uploadThings.value = "";
    }
});

因为搜索和添加都有输入数据的部分，但是因为视觉图的限制添加按钮会影响页面的整体性，所以就用到了键盘的监听，通过用户输入完以后按enter就可以实时相应的操作

勾选框的状态判断

因为要解决基本的已完成和未完成的转换，所以利用了勾选框来判断用户事件对象的状态从而进行操作

doing_ul.addEventListener('click', e => { //用于向指定元素添加事件
    if (e.target.tagName === 'INPUT') {
        finshed_ul.insertBefore(e.target.parentNode.parentNode, finshed_ul.children[0]);
        const index = doingList.indexOf(e.target.nextElementSibling.innerHTML);
        doingList.splice(index, 1);

        finshedList.unshift(e.target.nextElementSibling.innerHTML);
        saveInfo();
        doingNum.innerHTML = parseInt(doingNum.innerHTML) - 1;
        finshNum.innerHTML = parseInt(finshNum.innerHTML) + 1;
    }
    if (e.target.tagName === "I") {
        doing_ul.removeChild(e.target.parentNode);
        const index = doingList.indexOf(e.target.previousElementSibling.children[1].innerHTML);
        doingList.splice(index, 1);
        saveInfo();
        doingNum.innerHTML = parseInt(doingNum.innerHTML) - 1;
    }
});
finshed_ul.addEventListener('click', e => {
    if (e.target.tagName === 'INPUT') {
        doing_ul.appendChild(e.target.parentNode.parentNode, doing_ul.children[0]);

        const index = doingList.indexOf(e.target.nextElementSibling.innerHTML);

        finshedList.splice(index, 1);
        doingList.unshift(e.target.nextElementSibling.innerHTML);
        saveInfo();
        doingNum.innerHTML = parseInt(doingNum.innerHTML) + 1;
        finshNum.innerHTML = parseInt(finshNum.innerHTML) - 1;
    }
    if (e.target.tagName === "I") {
        finshed_ul.removeChild(e.target.parentNode);

        const index = finshedList.indexOf(e.target.previousElementSibling.children[1].innerHTML);
        finshedList.splice(index, 1);
        saveInfo();
        finshNum.innerHTML = parseInt(finshNum.innerHTML) - 1;
    }
});

这一点也是借鉴了csdn上一名优秀作者的想法从而进行学习和运用到项目之中

我也从原来的知识之中得到了巩固与提升，比如ajax的理解和利用，icon的使用，flex布局的理解

总结

经过几天的奋斗与对接完成了第一个项目的基本要求，其实这样小小的成功来之不易，十分感谢后端和运维的同学都能够很好的配合彼此的工作，交流与讨论也是十分的积极，我们每天都会确立每天的计划，比如今天需要写哪些bug？今天需要改进哪些问题？以及找到自己知识上的不足我也利用尽可能的时间去补充空缺，我知道自己知识入门而已，其实还需要很长很长时间的积累和沉淀，我也曾想多多分享文章，但是发现自己学会的都是些很基础的知识，我就知道沉淀的过程还需要继续

写这篇文章的主要目的就是写出我这个项目的想法与进步，有些问题在自己走过弯路之后才会真的理解过程在未来路途上的意义，我十分希望大家可以对我提出所有方面的建议和指导，我会依旧发现自己的不足然后更快进步，希望我可以成为一个可以分享知识的作者