这是在网课上学习的,先建立一个express-todolist文件夹作为项目跟目录
另外,我们直接把项目上用到的css文件和js文件下载下来放在项目里
这里直接贴出来
先建立一个public文件夹,放在根目录中,里面建一个assets文件夹,分别放着style.css和todo-list.js两个文件
内容如下:
express-todolist/public/assets/style.css:
body { background: #0d1521; font-family: tahoma; color: #989898; } #todo-table { position: relative; width: 95%; background: #090d13; margin: 0 auto; padding: 20px; box-sizing: border-box; } #todo-table form:after { margin: 0; content: ''; display: block; clear: both; } input[type="text"] { width: 30%; padding: 20px; background: #181c22; border: 0; float: left; font-size: 20px; color: #989898; } button { padding: 20px; width: 30%; float: left; background: #23282e; border: 0; box-sizing: border-box; color: #fff; cursor: pointer; font-size: 20px; } ul { list-style-type: none; padding: 0; margin: 0; } li { width: 100%; padding: 20px; box-sizing: border-box; font-family: arial; font-size: 20px; cursor: pointer; letter-spacing: 1px; } li:hover { text-decoration: line-through; background: rgba(0, 0, 0, 0.2); }
express-todolist/public/assets/todo-list.js:
$(document).ready(function() { $('form').on('submit', function(event) { event.preventDefault(); var item = $('form input'); var todo = { item: item.val().trim() }; $.ajax({ type: 'POST', url: '/todo', data: todo, success: function(data) { //do something with the data via front-end framework location.reload(); } }); return false; }); $('li').on('click', function() { var item = $(this).text().trim().replace(/ /g, "-"); $.ajax({ type: 'DELETE', url: '/todo/' + item, success: function(data) { //do something with the data via front-end framework location.reload(); } }); }); });