Node.js + Express + MongoDB 实战 TodoList 基础入门

常用链接

1.介绍

  • express

    • 基于 Node.js 的 web 框架
    • 用于快速搭建网站和应用，如博客、商场、聊天室、为前端提供 API
    • 热门、健全、简单、少走弯路
    • 简单路由系统
    • 集成模版引擎
    • 中间件系统

  • 快速开始

    • npm init -y 默认模式生成 package.json
    • npm install --save express 安装框架
    • npm install -g nodemon 方便调试，nodemon xxx 启动应用
var express = require('express')

var app = express()

app.get('/', function (req, res) {
    res.send('this is homepage')
})

app.listen(3000)

2.请求与响应

res.send(new Buffer('whoop'));
res.send({ some: 'json' });
res.send('<p>some html</p>');
res.status(404).send('Sorry, we cannot find that!');
res.status(500).send({ error: 'something blew up' });

res.json({ user: 'tobi' });
res.status(500).json({ error: 'message' });

req.ip
// => "127.0.0.1"

// GET /search?q=tobi+ferret
req.query.q
// => "tobi ferret"

// example.com/users?sort=desc
req.path
// => "/users"

3.路由参数

  • 路由参数是动态的
// http://127.0.0.1:3000/profile/1/user/able
app.get('/profile/:id/user/:name', function (req, res) {
    console.dir(req.params) // 显示属性  { id: '1', name: 'able' }
    res.send("You requested " + req.params.id + req.params.name)
})
  • 路由参数支持正则表达式
app.get('/ab?cd', function (req, res) {
    res.send('ab?cd')
})

4.查询字符串

// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
req.query.order
// => "desc"

req.query.shoe.color
// => "blue"

req.query.shoe.type
// => "converse"

// http://127.0.0.1:3000/?find=hot
app.get('/', function (req, res) {
    console.dir(req.query) // => { find: 'hot' }
    res.send('home page: ' + req.query.find)
})

5.POST请求和postman工具

  • 使用 body-parser 包，处理 post 请求

  • postman 工具，用来图形化模拟浏览器发送各种请求

  • POST 提交数据方式

    • HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种
    • POST 一般用来向服务端提交数据
    • application/x-www-form-urlencoded 普通表单提交
    • multipart/form-data 可以上传文件的表单
var bodyParser = require('body-parser')
// create application/json parser
var jsonParser = bodyParser.json()
// 使用中间件，在请求和响应中间处理 create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.post('/', urlencodedParser, function (req, res) {
    console.dir(req.body)
    res.send('ok')
})

app.post('/upload', jsonParser, function (req, res) {
    console.dir(req.body)
    res.send('ok')
})

6.上传文件

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

  • 安装 npm install --save multer

  • 基于express+multer的文件上传

  • 上传文件的表单需要指定 enctype="multipart/form-data"

  • postman 上传文件，post body form-data

// form.html
<form action="/upload" method="post" enctype="multipart/form-data">
    <h2>上传logo图片</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

// 创建目录，上传文件
var createFolder = function (folder) {
    try {
        fs.accessSync(folder);
    } catch (e) {
        fs.mkdirSync(folder);
    }
};

var uploadFolder = './upload/';

createFolder(uploadFolder);

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder);
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
});
var upload = multer({ storage: storage });

app.get('/form', function (req, res) {
    var form = fs.readFileSync('./form.html', { encoding: "utf8" })
    res.send(form)
})

app.post('/upload', upload.single('logo'), function (req, res) {
    console.dir(req.file); // 列出文件的所有属性
    res.send({ 'ret_code': 0 })
})

7.模版引擎介绍

  • 直接使用res.sendFile(__dirname + '/form.html')响应网页
app.get('/form', function (req, res) {
    // var form = fs.readFileSync('./form.html', { encoding: "utf8" })
    // res.send(form)
    res.sendFile(__dirname + '/form.html')
})
  • 模版引擎 EJS
    • npm install ejs --save
    • 模版文件扩展名 .ejs
    • ejs 模版的Tags 特殊，非对称的，有前面和后面的，如 %> Plain ending tag 
app.get('/form/:name', function (req, res) {
    var person = req.params.name
    res.render('form', { person: person })
})

// views/form.ejs
<h1><%= person %></h1>
// http://127.0.0.1:3000/form/able
// 输出 able
  • 将模板引擎用于 Express
    • 在 Express 可以呈现模板文件之前，必须设置以下应用程序设置
    • views：模板文件所在目录。例如：app.set('views', './views') 默认
    • view engine：要使用的模板引擎。例如：app.set('view engine', 'ejs')

8.使用模版引擎

app.get('/form/:name', function (req, res) {
    // var person = req.params.name
    var person = { age: 29, job: 'CEO', hobbies: ['eating', 'coding', 'finshing']}
    res.render('form', { person: person })
})

app.get('/about', function (req, res) {
    // var person = req.params.name
    res.render('about')
})

<%- include('particals/header.ejs') -%>  // 引用模版
    <h1><%= person %></h1>
    <h1><%= person.age %></h1>
    <h2>hobbies</h2>
    <ul>  //遍历数组
        <% person.hobbies.forEach(function(item){ %>
            <li>
                <%= item %>
            </li>
        <% }) %>
    </ul>

9.中间件介绍

  • 中间件 (middleware)
    • Express 是一个路由和中间件 Web 框架
    • Express 应用程序基本上是一系列中间件函数调用
    • 中间件介于 请求对象 (req)、响应对象 (res) 中间
    • 可以有多个中间件
    • 下一个中间件函数通常由名为 next 的变量来表示
    • 如果当前中间件函数没有结束请求/响应循环那么它必须调用 next()，以将控制权传递给下一个中间件函数。否则，请求将保持挂起状态。
  • 中间件作用
    • 对请求和响应对象进行更改
    • 结束请求或响应循环
    • 调用堆栈中的下一个中间件函数
// 没有路径的中间件函数, 每次收到请求时执行该函数。
app.use(function (req, res, next) {
    console.log('first middleware')
    next() // 没有响应请求，需要将控制权传递给下一个中间件函数
    console.log('first middleware after next')
})

// 安装在某个路径的中间件函数
app.use('/m', function (req, res, next) {
    console.log('second middleware')
    res.send('ok')
})

// app.get('/m', function (req, res, next) {
//     res.send('ok')
// })
  • 内置中间件
    • Express 中唯一内置的中间件函数是 express.static
    • 负责提供 Express 应用程序的静态资源
    • app.use(express.static('public')); 指定静态资源根目录
    • app.use('static', express.static('public')); 前缀目录static/a.png

10.路由中间件

  • 路由器层中间件绑定到 express.Router() 的实例
  • 分离路由到子文件目录中，最上次只调用，总分路由
// server.js
var indexRouter = require('./routes/index')
var usersRouter = require('./routes/users')

app.use('/', indexRouter)
app.use('/users', usersRouter)

// users.js
var express = require('express')

var router = express.Router()
// 这里注意，因为前面路由匹配到/users了，这里直接时根即可，二级目录
router.get('/', function (req, res, next) {
    res.send('users')
})

module.exports = router

11.项目实践 part 1 项目搭建

  • express-todolist 实践项目
    • npm init -y 初始化 package.json
    • npm install --save express body-parser ejs 安装包

12.项目实践 part 2 Controller

  • 新建 controllers 文件夹，单独存放控制器
//app.js
var express = require('express')
var todoController = require('./controllers/todoController')

var app = express()

app.set('view engine', 'ejs')

// 指定public目录下为静态文件根目录
app.use(express.static('public'))

todoController(app)

app.listen(3000)

console.log('listening to port 3000')

// todoController.js
module.exports = function (app) {
    app.get('/todo', function (req, res) {
    })

    app.post('/todo', function (req, res) {
    })

    app.delete('/todo', function (req, res) {
    })
}

13.项目实践 part 3 实现页面

  • 新建 views 文件夹，存放模版页面，todo.ejs

  • 使用 BootCDN 在线免费 jQuery 库

    • https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js

14.项目实践 part 4 实现功能

  • body-parser 处理 post 请求
  • ajax 异步处理提交和删除
// 显示添加表单和取出内容
<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>

var bodyParser = require('body-parser')
var urlencodeParser = bodyParser.urlencoded({ extended: false})
var data = [{item: 'get milk'}, {item: 'walk dog'}, {item: 'coding a'}]

module.exports = function (app) {
    app.get('/todo', function (req, res) {
        res.render('todo', { todos: data })
    })

    app.post('/todo', urlencodeParser, function (req, res) {
        data.push(req.body)
        res.json(data) // 回复结束响应，可以回复其它的
    })

    app.delete('/todo/:item', function (req, res) {
        data = data.filter(function (todo) { // 返回为true的内容
           return todo.item.replace(/ /g, "-") !== req.params.item
        })
        res.json(data)
        console.log(data)
    })
}

// ajax 处理点击提交 和 删除，异步处理
$(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();
            }
        });
    });
});

15.项目实践 part 5 MongoDB 和 mLab

  • 使用 MongoDB 持久化数据

    • nosql 非关系型的数据库，没有行列的概念，存储的 json 格式数据，用js很方便读取
    • MongoDB 概念解析
    • collection 数据库表/集合
    • document 数据记录行/文档
    • primary key 主键,MongoDB自动将_id字段设置为主键

  • 使用线上免费 MongoDB 数据库 mLab

    • Database-as-a-Service features
    • MongoDB on AWS, Azure, or Google. It's this easy.
    • 注册，创建数据库，创建数据库用户
    • shell 连接 mongo ds020208.mlab.com:20208/todos -u <dbuser> -p <dbpassword>
    • URI mongodb://<dbuser>:<dbpassword>@ds020208.mlab.com:20208/todos

16.项目实践 part 6 Mongoose

  • mongoose 用来操作数据库
    • a MongoDB object modeling tool designed to work in an asynchronous environment.
    • npm install mongoose --save
    • 安装，连接，定义 Schema、model ，规定数据类型一致
const mongoose = require('mongoose')
mongoose.connect('mongodb://able8:xx@ds020208.mlab.com:20208/todos')

// Schema 模式，规定数据类型
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')
})

17.项目实践 part 7 保持数据到 MongoDB

  • 操作数据，读取，添加，删除
  • 实践测试 mLab 国内访问太慢了， 简单测试还可以
  • 其他可选包 mongolass 
    app.get('/todo', function (req, res) {
        Todo.find({}, function (err, data) {
            if (err) throw err
            res.render('todo', { todos: data })
        })
    })

    app.post('/todo', urlencodeParser, 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) { // 返回为true的内容
        //    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)
        })
    })
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,425评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,058评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,186评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,848评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,249评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,554评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,830评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,536评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,239评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,346评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,999评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2赞 267