标签：改变 size 数据 ext data family auto form prevent
这是在网课上学习的，先建立一个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(); } }); }); });
上诉准备好之后，先初始化一个项目
npm init
安装用到的依赖：
npm install -g nodemon //用来监听服务器代码 当服务器代码改变时 自启动 全局安装一次即可
npm install --save express
npm install --save ejs body-parser
ejs是模板引擎 body-parser是处理表单数据的
----------------------------------------------------------------------------------------------------------------------
接下来在跟目录中新建一个app.js用来写服务短入口代码
标签：改变 size 数据 ext data family auto form prevent
原文地址：https://www.cnblogs.com/fqh123/p/11601672.html
