1. 程式人生 > >Build a task app with Hapi, MongoDB and Vue.js

Build a task app with Hapi, MongoDB and Vue.js

The idea for this tutorial is we’re going to build a task app with Node.js, MongoDB and Vue.js. Users will be able to read, create and delete tasks from their web browser. All of the tasks will be stored in the database and updates will happen asynchronously from the web browser. That means users won’t have to refresh the page in order to see the changes take effect. This application is straightforward and should provide a clear introduction to how build with Node.js, MongoDB and Vue.js.

The final product will look something like this:

Example todo app using Node.js server, Mongo database and Vue client side app.

To begin with, we’re going to start by building the server. Therefore we’ll have to introduce…

Hapijs

Hapi is a Node.js server framework that’s used by great companies such as

Lob, Stitch Labs and Auth0. To get started generate a project with npm init and use this as your main server file:

const Hapi     = require('hapi');const routes   = require('./routes');
require('./utils/database');
const server = Hapi.server({  port: 3000,  host: 'localhost',  routes: { cors: true }});
const startServer = async () => {  try {    routes.forEach((route)=>{      server.route(route);    });
await server.start();    console.log(`Server running at: ${server.info.uri}`);  } catch (err) {    console.error(err);  }};
startServer();
module.exports = server;

If you’re familiar with express this looks pretty similar to an express app. We can see clearly though we’re using async / await functions. This is a new feature of recent Node.js version and a great addition to the Javascript language. Essentially the function, prefixed with “async” can hold execution until the await promise call is returned. Async functions return promises.

We’re configuring cors here with a default Hapi option and connecting to the database through a require statement.

MongoDB and Mongoose

To connect an d query MongoDB we’re going to use an ORM called Mongoose that’s for querying and writing to Mongo.

const mongoose = require('mongoose');
require('../models');
mongoose.connect('mongodb://localhost/task-app-backend', {  useNewUrlParser: true}, (err) => {  if (err) throw err;});

That connects to the MongoDB database (you might need to have mongod running in a separate tab on your local machine).

With MongoDB there are no database migrations. The ORM wrapper has a concept of models that we can take advantage. Since this is a task app we’ll create a Task model.

const mongoose = require('mongoose');
const taskModel = mongoose.Schema({  name: {type: String, required: '{PATH} is required!'},  description: {type: String},}, {  timestamps: true});
module.exports = mongoose.model('Task', taskModel);

This sets up a MongoDB collection for us, which is basically a table shaped like a big old Javascript object. They use something called BSON that they wrote a white paper about at MongoDB.

MongoDB stock price.

In contrast, Mongoose is an open source npm package.