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

2023-12-18 15:58
文章标签 基础 实战 入门 js mongodb node express todolist

本文主要是介绍Node.js + Express + MongoDB 实战 TodoList 基础入门，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

视频地址

  • https://www.rails365.net
  • b站

常用链接

  • express 官网
  • express 官网中文
  • express github
  • Nodejs学习笔记以及经验总结

看视频整理要点笔记:

  • hello-express
    • 1.介绍
    • 2.请求与响应
    • 3.路由参数
    • 4.查询字符串
    • 5.POST请求和postman工具
    • 6.上传文件
    • 7.模版引擎介绍
    • 8.使用模版引擎
    • 9.中间件介绍
    • 10.路由中间件
    • 11.项目实践 part 1 项目搭建
    • 12.项目实践 part 2 Controller
    • 13.项目实践 part 3 实现页面
    • 14.项目实践 part 4 实现功能
    • 15.项目实践 part 5 MongoDB 和 mLab
    • 16.项目实践 part 6 Mongoose
    • 17.项目实践 part 7 保持数据到 MongoDB

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.请求与响应

  • 学会查看 官网 API 文档，最快最全，这个文档太清晰易懂了
  • res.send([body])
  • req.ip
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.查询字符串

  • 文档 req.query
// 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 请求

    • body-parser 文档
    • npm install body-parser --save 安装
    • 查看文档，使用例子

  • 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 包 处理上传文件

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.nameres.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.namevar person = { age: 29, job: 'CEO', hobbies: ['eating', 'coding', 'finshing']}res.render('form', { person: person })
})app.get('/about', function (req, res) {// var person = req.params.nameres.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 frameworklocation.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 frameworklocation.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 errconsole.log('item saved')
})

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

  • 操作数据，读取，添加，删除
  • 实践测试 mLab 国内访问太慢了， 简单测试还可以
  • 其他可选包 mongolass
    • mongolass 知乎
    app.get('/todo', function (req, res) {Todo.find({}, function (err, data) {if (err) throw errres.render('todo', { todos: data })})})app.post('/todo', urlencodeParser, function (req, res) {var itemOne = Todo(req.body).save(function (err, data) {if (err) throw errres.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 errres.json(data)})})

 

原文https://github.com/able8/hello-express

这篇关于Node.js + Express + MongoDB 实战 TodoList 基础入门的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/508981。

相关文章

用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
C#基础之委托详解(Delegate)

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》：本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托（Multicast Delegates）4. 委托的用途事件处理回调函数LINQ
阅读更多...
Python实战之屏幕录制功能的实现

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕
阅读更多...
nvm如何切换与管理node版本

nvm如何切换与管理node版本

《nvm如何切换与管理node版本》：本文主要介绍nvm如何切换与管理node版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录nvm切换与管理node版本nvm安装nvm常用命令总结nvm切换与管理node版本nvm适用于多项目同时开发，然后项目适配no
阅读更多...
最新Spring Security实战教程之Spring Security安全框架指南

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security？同类框架对比Spring Security典型应用场景传统
阅读更多...
最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言
阅读更多...
OpenManus本地部署实战亲测有效完全免费(最新推荐)

OpenManus本地部署实战亲测有效完全免费(最新推荐)

《OpenManus本地部署实战亲测有效完全免费(最新推荐)》文章介绍了如何在本地部署OpenManus大语言模型,包括环境搭建、LLM编程接口配置和测试步骤,本文给大家讲解的非常详细,感兴趣的朋友一... 目录1.概况2.环境搭建2.1安装miniconda或者anaconda2.2 LLM编程接口配置2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2