In the previous articles we learned briefly about Express, in this section we will use Express to build a simple note-taking application, using MVC model.
MVC pattern in Express
Express itself is not built according to the MVC model, but the express-generator module used to create an Express project gives us an application that is almost identical to MVC because these projects exist two things:
If you have used Linux operating systems, you will probably know that the HTTP request senders are wget or curl. We will write a code to simulate wget.
- The views folder contains template files (files with the extension .ejs), these files are used to display data, which is similar to the Views section in MVC.
- The routes directory is used to redirect the URLs to the corresponding processing functions, which is similar to the Controller in MVC.
So in order for our application to operate in accordance with the MVC model, the missing component is the Model . Model has data storage function, change / update data, support data query. And of course the model store code should also be stored in a separate directory with views and routes.
Create Notes application
We will build a simple Notes application.
First we create the project:
1 2 3 4 5 6 | <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="1b6a6e7a757c3573747a5b737e7777797462">[email protected]</a> :~$ sudo npm install -g express-generator <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="a5d4d0c4cbc28bcdcac4e5cdc0c9c9c7cadc">[email protected]</a> :~$ express --view=ejs notes <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="661713070801480e0907260e030a0a04091f">[email protected]</a> :~$ express --view=ejs ~/Projects/Node/notes <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="700105111e175e181f113018151c1c121f09">[email protected]</a> :~$ cd ~/Projects/Node/notes <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="aedfdbcfc0c980c6c1cfeec6cbc2c2ccc1d7">[email protected]</a> :~/Project/Node/notes$ npm install |
To test run the application:
1 2 | <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="ef9e9a8e8188c187808eaf878a83838d8096">[email protected]</a> :~/Project/Node/notes$ npm start |
The result will look like the image below: 
1 Create model In the root of the project, we create a folder named models located with views, routes, etc. In the models directory, we create a file named notes.js with the following content:
models / notes.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var notes = []; exports.update = exports.create = function(key, title, body) { notes[key] = { title: title, body: body }; } exports.read = function(key) { return notes[key]; } exports.destroy = function(key) { delete notes[key]; } exports.keys = function() { return Object.keys(notes); } |
In the above code we create an array named notes used to store notes, each note includes key (id), title (title) and body (content). In this section, we only store the RAM for simplicity, that is, every time the server is shutdown / restart, the notes will be deleted, in the following sections we will use the database to save data.
In the above code the update and create functions are the same because here we have not used the database yet, in the sections after using the database, the functions will have to be separated.
Each note will be managed by key (key or id).
Customize the homepage
First we create a file named notes.js in the routes directory and then, we will write this file later. Next in the app.js file we add the following line with the require () lines at the top of the file:
app.js
1 2 3 4 | ... var notes = require('./routes/notes'); ... |
Next, as in the previous sections, we split the site into top.ejs and bottom.ejs files so that we can use them flexibly as needed.
In the views directory we create the top.ejs and bottom.ejs files as follows:
views / top.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <div class='navbar'> <p> <a href='/'>Home</a> | <a href='/noteadd'>ADD Note</a> </p> </div> |
We print the homepage title and 2 links to ‘/’ and ‘/ noteadd’, the / noteadd page will be written later.
views / bottom.ejs
1 2 3 | </body> </html> |
Then adjust the index.ejs file as follows:
views / index.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <% include top %> <% var keys = notes.keys(); if(keys) { keys.forEach(function(key) { var note = notes.read(key); %><p><%= key %>: <a href="/noteview?key=<%= key %>"><%= note.title %></a> </p><% }); } %> <% include bottom %> |
In the index.ejs file, we use the notes variable, we use this variable to get the key of each note, then display a link to that key, the notes variable will be sent from which render () function. There, and that will be the routing code in the routes / index.js file, we will modify the routes / index.js file as follows:
routes / index.js
1 2 3 4 5 6 7 8 9 10 11 12 | var express = require('express'); var router = express.Router(); var notes = require('../models/notes'); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Notes', notes: notes }); }); module.exports = router; |
We add the require () line to the models / notes module, then pass the call to res.render () so that the index.ejs file can be used.
Here we can test the application:
1 2 | <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="e69793878881c88e8987a68e838a8a84899f">[email protected]</a> :~/Project/Node/notes$ npm start |
Here we only see the homepage and the two links are empty, because we haven’t created a note yet. When clicking ADD Note, an error will occur because we have not written code for this page.
Create a note
So now we will add notes.
In the app.js file, add the following line along with the other routing lines:
app.js
1 2 3 4 | ... app.use('/noteadd', notes.add); ... |
In the routes / notes.js file, we add the following code:
routes / notes.js
1 2 3 4 5 6 7 8 9 10 | var notes = require('../models/notes'); exports.add = function(req, res, next) { res.render('noteedit', { title: "Add a note", docreate: true, notekey: "", note: undefined }); } |
The above code is very simple, we use the res.render () function to call the file noteedit.ejs and pass the parameters title, docreate, notekey, note into this file and return it to the user. Here the docreate parameter indicates whether we are updating or creating a new note, if the update is the note parameter will be some object, while creating a new one this object is empty (undefined), in the section Updated notes we will understand these two additional parameters ,.
Next in the views folder, we create the file noteedit.ejs with the following content:
views / noteedit.ejs
1 2 3 4 5 6 7 8 9 10 11 12 | <% include top %> <form method='POST' action='/notesave'> <input type='hidden' name='docreate' value='<%= docreate ? "create" : "update"%>'> <p>Key: <input type='text' name='notekey' value='<%= note ? notekey : "" %>'></p> <p>Title: <input type='text' name='title' value='<%= note ? note.title : "" %>'></p> <br/> <textarea rows=5 cols=40 name='body'><%= note ? note.body : "" %></textarea> <br/> <input type='submit' value='Submit' /> </form> <% include bottom %> |
As we all know, the notes creation and updating section share the same function, and the same template is the noteedit.ejs file. Here we create a form with fields to enter data for a note, if the operation is updated, we fill the existing data into these fields, users just need to change the required fields, If created, these fields will be empty.
This form will send to the page / notesave, and this form uses the POST method to send, so now we have to do this page. In the app.js file we add the following:
app.js
1 2 3 4 | ... app.post('/notesave', notes.save); ... |
Next in the routes / notes.js file we add the following code to handle the / notesave path:
routes / notes.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | exports.save = function(req, res, next) { if (req.body.docreate === 'create') { notes.create(req.body.notekey, req.body.title, req.body.body); } else { notes.update(req.body.notekey, req.body.title, req.body.body); } res.redirect('/noteview?key='+req.body.notekey); } |
The above code is also very simple, we check what the docreate parameter is, if it is create, we create a new element in the array of notes using the notes.create () method, if it is updated then We update notes.update ().
We then redirect the site to the / noteview page.
And because the form passed in the POST method, the data will be in the req.body attribute created from the bodyParser module. In the app.js Express file automatically added this module for us in the app.use line (bodyParser.json ());
You can run the project again and can press the ADD Note button to create a new note. When you click submit, you will get a 404 error page, simply because we have not made the / noteview page yet.
However, if you go back to the Home page, you can still see the note has been added and displayed on the homepage.
See notes
We will now make the / noteview page to see the details of a note.
In the app.js file we add the following:
app.js
1 2 3 4 | ... app.use('/noteview', notes.view); ... |
In the routes / notes.js file we add the following code:
routes / notes.js
1 2 3 4 5 6 7 8 9 10 11 12 | exports.view = function(req, res, next) { var note = undefined; if(req.query.key) { note = notes.read(req.query.key); } res.render('noteview', { title: note ? note.title : "", notekey: req.query.key, note: note }); } |
The above code will handle the URL / noteview, here we have to check before returning data to the browser, by checking whether the key is empty or not, then in their res.render () function We also check if the title is empty or not to return the data appropriately. Because users can enter the link manually, not just use the mouse to click on the link on the site.
Finally, we create a file named noteview.ejs in the views folder with the following content:
views / noteview.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 | <% include top %> <h3><%= note ? note.title : "" %></h3> <p><%= note ? note.body : "" %></p> <p>Key: <%= notekey %></p> <% if (notekey) { %> <hr/> <p> <a href="notedestroy?key=<%= notekey %>">Delete<a/> <a href="noteedit?key=<%= notekey %>">Edit</a> </p> <% } %> <% include bottom %> |
The code above will be responsible for displaying the content of the note. Also displays two links to the / notedestroy page for deleting notes and / noteedit for editing notes.
However, if we click on those two links, we will get a 404 error page, the reason is simply because we have not written the routing function for these two links.
Edit the note
In the app.js file we add the following:
app.js
1 2 3 4 | ... app.use('/noteedit', notes.edit); ... |
In the routes / notes.js file we add the following code:
routes / notes.js
1 2 3 4 5 6 7 8 9 10 11 12 | exports.edit = function(req, res, next) { var note = undefined; if(req.query.key) { note = notes.read(req.query.key); } res.render('noteedit', { title: note ? ("Edit " + note.title) : "Add a Note", docreate: note ? false : true, notekey: req.query.key, note: note }); |
As you know, both creation and editing functions use the same template, notedit.ejs file, so here we do not need to create another .ejs file. Unlike the note creation function, where we get a key of an existing note, we will pass this note’s data to the return parameters. First we declare a note variable with the value undefined, then we find the notes object in the notes array based on the key, if found, pass the res.render () function, otherwise we pass the The parameters are the same as when creating a new note. This will prevent users from manually entering the link to the browser and giving the wrong path.
You can now make note updates.
Delete note
Similar to the above functions, we first add the following line to the app.js file:
app.js
1 2 3 4 | ... app.use('/notedestroy', notes.destroy); ... |
Next in the routes / notes.js file, we add the following code:
routes / notes.js
1 2 3 4 5 6 7 8 9 10 11 12 | exports.destroy = function(req, res, next) { var note = undefined; if(req.query.key) { note = notes.read(req.query.key); } res.render('notedestroy', { title: note ? note.title : "", notekey: req.query.key, note: note }); } |
Similar to other functions, here we check if the post is valid or not and then return in the page / notedestroy.
Next we create the notedestroy.ejs file in the views directory as follows:
views / notedestroy.ejs
1 2 3 4 5 6 7 8 9 10 | <% include top %> <form method="POST" action='notedodestroy'> <input type='hidden' name='notekey' value='<%= note ? notekey : "" %>'> <p>Delete <%= note.title %> ?</p> <br/> <input type="submit" value="DELETE" /> <a href="/noteview?key=<%= notekey %>">Cancel</a> </form> <% include bottom %> |
Here we display a form for the user to confirm the deletion of the file, which will be sent to / notedodestroy with the POST method. So now we have to handle this path.
First we add the following to app.js file:
app.js
1 2 3 4 | ... app.post('/notedodestroy', notes.dodestroy); ... |
Next we add this code to the routes / notes.js file:
routes / notes.js
1 2 3 4 5 | exports.dodestroy = function(req, res, next) { notes.destroy(req.body.notekey); res.redirect('/'); } |
The above code will delete the note from the notes array and redirect to page ‘/’.
Now we can use the delete function.
Reference: https://devskill.org/express-generator