TodoList，ajax版用到了node+jquery+template-web

曾经终败给现在 2022-09-16 11:04 128阅读 0赞

之前做的localStorage版本的TodoList,这个版本的需求点就是打开TodoList输入item显示在Doing\_List的列表里面，再次打开TodoList的时候Doing\_List显示之前存储在LocalStorage。现在呢，我们在云服务器上写API接口，使用express框架对外能使其他前台进行调用。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

这个项目的前端架构

<section class="todoapp">
            <header class="header">
                <h1>todos</h1>
                <input class="new-todo" placeholder="What needs to be done?" autofocus>
            </header>
            
            <section class="main">
                <input class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list" id="todo-list">
                </ul>
            </section>
            
            <footer class="footer">
                
                <span class="todo-count"> item left</span>
                
                <ul class="filters" id="filters">
                    <li data-value="0">
                        <a class="selected" href="javascript:;">All</a>
                    </li>
                    <li data-value="1">
                        <a href="javascript:;">Active</a>
                    </li>
                    <li data-value="2">
                        <a href="javascript:;">Completed</a>
                    </li>
                </ul>
                
                <button class="clear-completed">Clear completed</button>
            </footer>
        </section>

使用template-web进行数据拼接

express架构下的路由这样写，拦截这些路由

app.post('/addList', require('./route/addList'));
    app.get('/loadList', require('./route/loadList'));
    app.get('/deleteList', require('./route/deleteList'));
    app.get('/modifyList', require('./route/modifyList'));
    app.get('/activeList', require('./route/activeList'));
    app.get('/completedList', require('./route/completedList'));

没多少很值得说的技术要点就是简单的ajax调用接口，将返回的数据渲染在对应的位置上。

链接: https://pan.baidu.com/s/18YF1-DTlRCXS717awxmxkQ 提取码: 2b5s

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1a1592c7b45740e7afa029b29df959ce.png