MongoDB - Building A Simple CRUD Application With Express and MongoDB

Building a Simple CRUD Application with Express and MongoDB | Ze...
1 de 22
http://zellwk.com/blog/crud-express-mongodb/
26/08/2016 13:58
2 de 22
26/08/2016 13:58
3 de 22
$ node -v
npm init
package.json
$ npm init
node
server.js
26/08/2016 13:58
4 de 22
$ touch server.js
server.js
console.log
server.js
console.log('May Node be with you')
node server.js
npm install express --save
$ npm install express --save
package.json
26/08/2016 13:58
5 de 22
server.js
const express = require('express');

const app = express();
listen
app.listen(3000, function() {
})
console.log('listening on 3000')
node server.js
localhost:3000
get
app.get(path, callback)
26/08/2016 13:58
6 de 22
path
localhost:3000
localhost:3000/
app.get('/', function (request, response) {

})
// do something here
send
app.get('/', function(req, res) {

})
res.send('Hello World')
// Note: request and response are usually written as req and res respectively.
function()
app.get('/', (req, res) => {

})
res.send('hello world')
CTRL + C
node server.js
localhost:3000
26/08/2016 13:58
7 de 22
index.html
sendFile
res
res.sendFile(__dirname + '/index.html')
// Note: __dirname is the path to your current working directory. Try logging it
and see what you get!

})
// Mine was '/Users/zellwk/Projects/demo-repos/crud-express-mongo' for this app.
sendFile
index.html
touch index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MY APP</title>
</head>
<body>
May Node and Express be with you.
</body>
</html>
26/08/2016 13:58
8 de 22
server.js
$ npm install nodemon --save-dev
--save-dev
devDependency
package.json
nodemon server.js
-g
node_modules
$ ./node_modules/.bin/nodemon server.js
26/08/2016 13:58
9 de 22
script
package.json
// ...
"scripts": {
}
"dev": "nodemon server.js"
// ...
npm run dev
nodemon server.js
<form>
<form>
<form>
index.html
action
method
name
<input
<form action="/quotes" method="POST">
<input type="text" placeholder="name" name="name">
<input type="text" placeholder="quote" name="quote">

<button type="submit">Submit</button>
</form>
26/08/2016 13:58
10 de 22
action
/quotes
method
post
app.post('/quotes', (req, res) => {

})
console.log('Hellooooooooooooooooo!')
Hellooooooooooooooooo!
<form>
$ npm install body-parser --save
use
const express = require('express')
26/08/2016 13:58
11 de 22
const bodyParser= require('body-parser')

const app = express()
app.use(bodyParser.urlencoded({extended: true}))
// All your handlers here...
urlencoded
<form>
req.body
body
request
console.log

})
console.log(req.body)
npm install mongodb --save
26/08/2016 13:58
12 de 22
Mongo.Client
const MongoClient = require('mongodb').MongoClient

MongoClient.connect('link-to-mongodb', (err, database) => {
})
// ... start the server
sandbox
26/08/2016 13:58
13 de 22
MongoClient.connect
26/08/2016 13:58
14 de 22
MongoClient.connect('your-mongodb-url', (err, database) => {

})
// ... do something here
app.listen
db
connect
var db
MongoClient.connect('your-mongodb-url', (err, database) => {
if (err) return console.log(err)
db = database
app.listen(3000, () => {
})
})
quotes
quotes
quotes
db.collection()
save
26/08/2016 13:58
15 de 22
db.collection('quotes').save(req.body, (err, result) => {

console.log('saved to database')
})
})
res.redirect('/')
<form>
collection
find
var cursor = db.collection('quotes').find()
26/08/2016 13:58
16 de 22
})
find
cursor
console.log
cursor
toArray
toArray
console.log()
db.collection('quotes').find().toArray(function(err, results) {
console.log(results)
})
// send HTML file populated with quotes here
26/08/2016 13:58
17 de 22
index.html
ejs
view engine
ejs
$ npm install ejs --save
app.set('view engine', 'ejs')
view engine
response
render
render
res.render(view, locals)
views
views
index.ejs
views
26/08/2016 13:58
18 de 22
mkdir views
touch views/index.ejs
index.ejs
<ul class="quotes">
<% for(var i=0; i<quotes.length; i++) {%>

<li class="quote">
<span><%= quotes[i].name %></span>
<span><%= quotes[i].quote %></span>
</li>
<% } %>
</ul>
<%=
<%
%>
%>
quotes[i].name
<form>
index.ejs
quotes[i].quote
index.html
quotes
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MY APP</title>
</head>
<body>
May Node and Express be with you.
<ul class="quotes">
<% for(var i=0; i<quotes.length; i++) {%>

<li class="quote">
26/08/2016 13:58
19 de 22
<span><%= quotes[i].name %></span>
<span><%= quotes[i].quote %></span>
</li>
<% } %>
</ul>
<form action="/quotes" method="POST">
<input type="text" placeholder="name" name="name">
<input type="text" placeholder="quote" name="quote">

<button type="submit">Submit</button>
</form>
</body>
</html>
index.ejs
index.ejs
quotes
db.collection('quotes').find().toArray((err, result) => {

// renders index.ejs
})
})
res.render('index.ejs', {quotes: result})
26/08/2016 13:58
20 de 22
26/08/2016 13:58
21 de 22
53 Comments
Zell's Blog
Recommend 14
Login
Sort by Newest
Share
Join the discussion

Absay 11 days ago
In case you're wondering, here's the complete code:

const express = require('express');
const MongoClient = require('mongodb').MongoClient

const bodyParser= require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.set('view engine', 'ejs');
var db;
MongoClient.connect('mongodb://127.0.0.1:27017/{your database}', (err, database) => {

db = database
app.listen(3000, () => {
})
})
Reply Share
see more
Deepak Naik 15 days ago
Thanks a lot ! I wish all the documentations / walkthroughs should be crystal clear
like this.
Reply Share
Ryan Garant 17 days ago
Super helpful! This helped fill in a lot of gaps in my mind about how this all fits
together! Still have some ways to go though ;)
Reply Share
cbstodd 19 days ago
How would you connect to mongodb using mongoose and a local instance?
Can I use the same MongoClient function and just add my mongoose.connect
instead?
***UPDATE*** if anyone is trying to use a local instance of MongoDB with
mongoose, you can connect using:
26/08/2016 13:58
22 de 22
26/08/2016 13:58

MongoDB - Building A Simple CRUD Application With Express and MongoDB

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

MongoDB - Building A Simple CRUD Application With Express and MongoDB

Uploaded by

Copyright:

Available Formats

Building a Simple CRUD Application with Express and MongoDB | Ze...

Building a Simple CRUD Application with Express and MongoDB | Ze...

Building a Simple CRUD Application with Express and MongoDB | Ze...

Building a Simple CRUD Application with Express and MongoDB | Ze...

console.log('May Node be with you')

npm install express --save

$ npm install express --save

Building a Simple CRUD Application with Express and MongoDB | Ze...

const express = require('express');

Building a Simple CRUD Application with Express and MongoDB | Ze...

app.get('/', function (request, response) {

app.get('/', function(req, res) {

app.get('/', (req, res) => {

Building a Simple CRUD Application with Express and MongoDB | Ze...

app.get('/', (req, res) => {

and see what you get!

// Mine was '/Users/zellwk/Projects/demo-repos/crud-express-mongo' for this app.

May Node and Express be with you.

Building a Simple CRUD Application with Express and MongoDB | Ze...

$ npm install nodemon --save-dev

Building a Simple CRUD Application with Express and MongoDB | Ze...

"dev": "nodemon server.js"

npm run dev

<form action="/quotes" method="POST">

<input type="text" placeholder="name" name="name">

<input type="text" placeholder="quote" name="quote">

Building a Simple CRUD Application with Express and MongoDB | Ze...

app.post('/quotes', (req, res) => {

$ npm install body-parser --save

const express = require('express')

Building a Simple CRUD Application with Express and MongoDB | Ze...

const bodyParser= require('body-parser')

app.post('/quotes', (req, res) => {

npm install mongodb --save

Building a Simple CRUD Application with Express and MongoDB | Ze...

const MongoClient = require('mongodb').MongoClient

// ... start the server

Building a Simple CRUD Application with Express and MongoDB | Ze...

Building a Simple CRUD Application with Express and MongoDB | Ze...

MongoClient.connect('your-mongodb-url', (err, database) => {

// ... do something here

app.post('/quotes', (req, res) => {

Building a Simple CRUD Application with Express and MongoDB | Ze...

db.collection('quotes').save(req.body, (err, result) => {

app.get('/', (req, res) => {

var cursor = db.collection('quotes').find()

Building a Simple CRUD Application with Express and MongoDB | Ze...

// send HTML file populated with quotes here

Building a Simple CRUD Application with Express and MongoDB | Ze...

$ npm install ejs --save

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

Building a Simple CRUD Application with Express and MongoDB | Ze...

<% for(var i=0; i<quotes.length; i++) {%>

<span><%= quotes[i].name %></span>

<span><%= quotes[i].quote %></span>

May Node and Express be with you.

<% for(var i=0; i<quotes.length; i++) {%>

Building a Simple CRUD Application with Express and MongoDB | Ze...

<span><%= quotes[i].name %></span>

<span><%= quotes[i].quote %></span>

<form action="/quotes" method="POST">

<input type="text" placeholder="name" name="name">