这是在网课上学习的，先建立一个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用来写服务短入口代码
之后运行一下 nodemon app 服务器就运行起来了
-----------------------------------------------------------------------------------------
我们这一次将路由逻辑代码 单独放在一个文件中，然后引入到app.js中执行，这样app.js中的代码就不会显的臃肿，这也会模块化的一种体现
在根目录用建立一个controllers文件夹，在里面建立todoController.js
module.exports= function(app){ app.get("/todo",function(req,res){//访问todolist页面时用到的路由 res.render("todo") }); app.post("/todo",function(req,res){//新增项时 用到的路由 }) app.delete("/todo",function(req,res){//删除项时 用到的路由 }) app.get("*",function(req,res){//404页面 res.send("404") }) }
那么这个todoController.js就是mvc中的c，将来引入数据库 会重新创建一个model模块 专门用来处理数据那么 这个模块就是mvc中的m 然后view就是mvc中的v
-------------------------------------------------------------------------------------
接下来我们把页面实现了，我们用了ejs这个模板引擎，所以要在根目录用创建一个views文件，里面存放页面（ejs），这个views是ejs默认的存放目录
里面新建一个todo.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!-- 注意引入静态资源的方式 可以查看express.static内置中间件的说明 --> <link rel="stylesheet" href="/assets/styles.css"> <script src="/assets/todo-list.js"></script> <title>todolist</title> </head> <body> <div id="todo-table"> <form action=""> <input type="text" name="item" placeholder="add new item" required> <button type="submit">Add Item</button> </form> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </body> </html>
之后访问localhost:3000/todo 就可以访问到这个页面
----------------------------------------------------------------------------------------------------------------------
接下来我们实现功能
我们现在还未引入数据库，可以先把数据存在node的内存中，把功能先实现了，先更改controllers/todoController.js
var data = [{item:"get milk"},{item:"wolk dog"},{item:"coding something"}] module.exports= function(app){ app.get("/todo",function(req,res){//访问todolist页面时用到的路由 res.render("todo",{todos:data});//将数据传给todo页面 }); app.post("/todo",function(req,res){//新增项时 用到的路由 }) app.delete("/todo",function(req,res){//删除项时 用到的路由 }) app.get("*",function(req,res){//404页面 res.send("404") }) }
然后在todo.ejs中拿到数据将它渲染出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!-- 注意引入静态资源的方式 可以查看express.static内置中间件的说明 --> <link rel="stylesheet" href="/assets/styles.css"> <script src="/assets/todo-list.js"></script> <title>todolist</title> </head> <body> <div id="todo-table"> <form action=""> <input type="text" name="item" placeholder="add new item" required> <button type="submit">Add Item</button> </form> <ul> <% todos.forEach(function(todo){ %> <li><%= todo.item %></li> <% }) %> </ul> </div> </body> </html>
现在点击Add Item 按钮会向服务器发送一个post请求，具体代码见express-todolist/public/assets/todo-list.js
会将表单中输入框中的内容传给服务器，我们现在需要在服务端拿到这个传过来的数据，将这个值放进data中
下面来更改一下todoController.js中的代码
var bodyParser = require("body-parser");
var urlencodedParser = bodyParser.urlencoded({extended:false});//用来处理表单数据的中间件
var data = [{item:"get milk"},{item:"wolk dog"},{item:"coding something"}]
module.exports= function(app){
app.get("/todo",function(req,res){//访问todolist页面时用到的路由
res.render("todo",{todos:data});//将数据传给todo页面
});
app.post("/todo",urlencodedParser,function(req,res){//新增项时 用到的路由
data.push(req.body);
res.json(data)
})
app.delete("/todo",function(req,res){//删除项时 用到的路由
})
app.get("*",function(req,res){//404页面
res.send("404")
})
}
然后我们就完成了添加item的功能，刷新页面数据是不会变的，因为数据是存在服务器的内存中的，只要服务器不重启，数据就不会变，我们可以在终端输入rs让服务器重启一下，数据就重置了
----------------------------------------------------------------------------------------------------------------------------------
下面来实现 删除项的功能
根据express-todolist/public/assets/todo-list.js中的代码可以知晓，我们点击某一项时，会取到这一项的内容，将内容中的空格替换成-，这是为了不让路由看起来怪异
下面来看一下todoController.js中怎么删除这个数据
var bodyParser = require("body-parser"); var urlencodedParser = bodyParser.urlencoded({extended:false}); var data = [{item:"get milk"},{item:"wolk dog"},{item:"coding something"}] module.exports= function(app){ app.get("/todo",function(req,res){//访问todolist页面时用到的路由 res.render("todo",{todos:data});//将数据传给todo页面 }); app.post("/todo",urlencodedParser,function(req,res){//新增项时 用到的路由 data.push(req.body); res.json(data) }) app.delete("/todo/:item",function(req,res){//删除项时 用到的路由 data = data.filter(function(todo){ return todo.item.replace(/ /g,"-") !== req.params.item; }); res.json(data); }) app.get("*",function(req,res){//404页面 res.send("404") }) }
然后打开一面 删除一下某一项 ok 成功删除，那么我们的删除功能就实现了
--------------------------------------------------------------------------------------------------------------------
我们以上部分是将 数据存在了node的内存中，当服务器重启就会消失，为了避免存在这样的问题，我们将数据存在一个地方，这个地方就是 数据库
mongoDB是属于noSQL类型的数据库 它不像mySQL一样有 table 列 行的概念，mongoDB的存储是用json的形式存储数据的，这样用js操作会比较方便，属于散乱行数据库。使用时也得安装，这次我们为了快速了解和使用，可以借用一个线上的服务来存储数据，这个服务提供了线上的地址，我们用账号和密码就可以登录使用，每个用户有512MB的磁盘容量，跳过了安装的步骤，重在使用和理解，那么这个服务就是mLab，线上地址：https://mlab.com/
创建账号后，整整等了好几十分钟才出来页面，之后创建连接账号和密码，
下面我们需要安装一个插件来连接mongoDB，这个插件叫：mongoose
安装：
npm install mongoose --save
更改todoController.js代码
var bodyParser = require('body-parser'); var urlencodedParser = bodyParser.urlencoded({ extended: false }); var mongoose = require('mongoose'); mongoose.connect('mongodb://hfpp2012:hfpp2012@ds151068.mlab.com:51068/todos'); var todoSchema = new mongoose.Schema({ item: String }); var Todo = mongoose.model('Todo', todoSchema); // var itemOne = Todo({item: 'buy flowers'}).save(function(err) { // if (err) throw err; // console.log('item saved'); // }); // // var data = [ {item: 'get milk'}, {item: "walk dog"}, {item: 'kick some coding ass'} ];; module.exports = function(app) { app.get('/todo', function(req, res) { Todo.find({}, function(err, data) { if (err) throw err; res.render('todo', { todos: data }); }); }); app.post('/todo', urlencodedParser, function(req, res) { var itemOne = Todo(req.body).save(function(err, data) { if (err) throw err; res.json(data); }); }); app.delete('/todo/:item', function(req, res) { // data = data.filter(function(todo) { // return todo.item.replace(/ /g, "-") !== req.params.item; // }); Todo.find({item: req.params.item.replace(/-/g, " ")}).remove(function(err, data) { if (err) throw err; res.json(data); }); }); }
以上是简单的数据库应用 重在理解 感受一下