How to integrate Express.js and Sequelize - Part 2

October 6, 2017 3 Min

This article will continued Part 1, in the part 1 we create two models, in the part 2 we will know how to use model to do CRUD(Create, Read, Update, Delete).

If you are lost, do not know what is this, you may read part 1 first.

0x00

We need a page to display master information, first edit your index route in the routes directory, it could look likes below.

1
2
3
4
5
6
7
8
9
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

First, require the models then we can easy to access our database.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
'use strict'

const express = require('express');
const router = express.Router();
const models = require('../models')

router.get('/', function(request, response, next) {
  response.render('index', {masters: masters})
})

module.exports = router

Now we must read data from the database, all models is an object and name is what you defined in the models directory, in this case, we need to call Master model so syntax will be models.Master.

Next we call findAll method to read all data from table, in the next line we can see .then(), right! Sequelize is using promise to instead of callback.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
'use strict'

const express = require('express');
const router = express.Router();
const models = require('../models')

router.get('/', (request, response) => {
  models.Master.findAll()
  .then(masters => {
    response.render('index', {masters: masters})
  })
})

module.exports = router

0x01

We completed a basic route and using Sequelize to read data from table, next we must create a view to render html page, now open index.pug in the views directory and do a little edit.

Default index could be likes below.

1
2
3
4
5
extends layout

block content
  h1= title
  p Welcome to #{title}

Remove all below content block and add a little simple html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
extends layout

block content
  h1 Master List
  p
    a(href='/master') New Master
  ul
    each master in masters
      li= master.name
    else
      li No Master

For now, a simple web page is done, we can run the app, in the application root, run command likes below.

1
yarn start

And open browser and go to http://localhost:3000/, we can see a simple page is here and show No Master.

0x02

We have master list now, next step we can make a master detail page, this page must have master and pet info, let’s add a new route first.

Here just a little different, we used url params and we can see a keyword named include, if we need to read data from relations table, we must give model name in here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
router.get('/master/:masterId', (request, response) => {
  models.Master.findOne({
    where: {
      id: request.params.masterId
    },
    include: [models.Pet]
  })
  .then(master => {
    response.render('info', {master: master})
  })
})

Next make a view for master detail, create a new file in the views directory and named info.pug and putsome simple html.

1
2
3
4
5
6
7
8
extends layout

block content
  h1= 'Master: ' + master.name
  h2 Pet List
  ul
    each pet in master.Pets
      li= pet.name

We can restart the application and open http://localhost:3000/, we completed a Node.js with Express and Sequelize!

You can find the source code in the GitHub.
https://github.com/ShawnOY/express-sequelize/tree/part2

Let me know if you have any question, thanks!