之前做的localStorage版本的TodoList,这个版本的需求点就是打开TodoList输入item显示在Doing_List的列表里面,再次打开TodoList的时候Doing_List显示之前存储在LocalStorage。现在呢,我们在云服务器上写API接口,使用express框架对外能使其他前台进行调用。
这个项目的前端架构
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<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>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"> item left</span>
<!-- Remove this if you don't implement routing -->
<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>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
使用template-web进行数据拼接
<script type="text/html" id="do_list">
{{each list_val}}
<li class="{{$value.completed ? 'completed' : ''}}">
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>{{$value.title}}</label>
<button class="destroy" data-id="{{$value._id}}"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
{{/each}}
</script>
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