KeystoneJS, A Javascript CMS (Part 4— Accessing Data)

Part 1 — Getting Started
Part 2 — Code Structure & the DB Model
Part 3 — Routes, View, and Templates
Part 4 — Accessing Data

In the last session, we created a route, a view, and a new template.
In this session, we will focus with a bit more depth on accessing our data.

By default, all routes are registered in routes/index.js. Let’s begin by adding some structure —

1. Create a folder called `api` in routes.
2. Create a folder called `announcement` in routes/api.
3. Create a file called `index.js` in routes/api/announcement and add the following code :

var keystone = require('keystone');
var Announcement = keystone.list('Announcement').model;
var handlers = {
  getAnnouncements: function(req, res) {
    Announcement.find().exec(function(err, data) {
      if(err) {
        console.log(err);
        res.status(500).send('DB Error');
      }
res.status(200).send(data);
    });
  }
}
module.exports = handlers;

The code above retrieves Announcement data stored on our database. keystone.list(‘Announcement’).model gives us the Mongoose model. Once we obtain a mongoose model, we can then query the Mongo database directly, i.e. With Announcement.find().

The next step is to utilise the db function above. Replace the contents of file routes/index.js with :

var keystone = require('keystone');
var middleware = require('./middleware');
var importRoutes = keystone.importer(__dirname);
var apiHandlers = require('./api/announcement');
var routes = {
 views: importRoutes('./views'),
};
keystone.pre('routes', middleware.initLocals);
keystone.pre('render', middleware.flashMessages);
exports = module.exports = function (app) {
 // Views
 app.get('/', routes.views.index);
 app.get('/announcement', routes.views.announcement);
// API Routes
 app.get('/api/announcement', apiHandlers.getAnnouncements);
};

Here, we have imported the handler and used it in the ExpressJS route -app.get(‘/api/announcement’, apiHandlers.getAnnouncements);
Basically when the server is asked for a resource at the endpoint ‘/api/announcement’, it will call our handler function with the request and response object.

Save and Reload the app. (You may need to stop and restart it — node keystone.js). Go to localhost:3000/api/announcement into the browser and you should see an empty array returned. Empty because we haven’t added any data yet.

Let’s add some Announcement records using the admin UI. Browse to http://localhost:3000/keystone/ and create an announcement entry.

Calling localhost:3000/api/announcement will now return the new Announcement record/s.

[{"_id":"592c0b126f3845652544bb36","description":"Brand New Website Created for School.","title":"My School's Website Launch!","__v":0,"date":"2017-04-01T10:50:33.000Z"}]

Displaying Data In the UI

We can very easily use the same code to access data and display it to the front-end. Open up routes/views/announcement.js and add the following-

var Announcement = keystone.list('Announcement').model;
 Announcement.find().exec(function(err, data) {
  locals.announcements = data;
 });

Now Replace the code contents of templates/views/announcement.hbs with-

<div class="container">
 <h2>Announcements</h2>
<div class="list-group">
  {{#each announcements}}
   <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">{{title}}</h4>
    <p class="list-group-item-text">{{description}}</p>
    <p>{{date}}</p>
   </a>
  {{/each}}
 </div>
</div>

We should end up with a list of announcements displayed nicely on the Announcements page. We can go to the admin UI and add new announcement entries, and you will see those reflected on the page.

Thanks for reading. Happy Coding!

Need professional software development services ?
Visit http://www.biztek.co.nz/