Vue.js + Nodejs/Express RestAPIs – Sequelize ORM + PostgreSQL CRUD example

In this tutorial, we show you Vue.js Http Client & Node.js Server example that uses Sequelize ORM to do CRUD with PostgreSQL and Vue.js as a front-end technology to make request and receive response.

Technologies

– Node.js/Express
– Sequelize

– Vue 2.5.17
– Vue Router 3
– Axios 0.18.0

– PostgreSQL

Overview

This is full-stack Architecture:

1. Node.js Server

2. Vue.js Client

Practice

1. Node.js Backend

Project structure:

Setting up Nodejs/Express project

Init package.json by cmd:

npm init

Install express, postgresql, sequelize & cors:

$npm install express cors sequelize pg pg-hstore --save

1	$npm install express cors sequelize pg pg-hstore --save

-> now package.json file:

{
  "name": "vue-nodejs-restapis-postgresql",
  "version": "1.0.0",
  "description": "Nodejs-Rest-APIs-Sequelize-PostgreSQL",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Nodejs",
    "RestAPIs",
    "Sequelize",
    "PostgreSQL",
    "Vue.js"
  ],
  "author": "grokonez.com",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "pg": "^7.7.1",
    "pg-hstore": "^2.3.2",
    "sequelize": "^4.42.0"
  }
}

{

"name": "vue-nodejs-restapis-postgresql",

"version": "1.0.0",

"description": "Nodejs-Rest-APIs-Sequelize-PostgreSQL",

"main": "server.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [

"Nodejs",

"RestAPIs",

"Sequelize",

"PostgreSQL",

"Vue.js"

"author": "grokonez.com",

"license": "ISC",

"dependencies": {

"cors": "^2.8.5",

"express": "^4.16.4",

"pg": "^7.7.1",

"pg-hstore": "^2.3.2",

"sequelize": "^4.42.0"

}

Setting up Sequelize PostgreSQL connection

– Create ./app/config/env.js file:

const env = {
  database: 'testdb',
  username: 'postgres',
  password: '123',
  host: 'localhost',
  dialect: 'postgres',
  pool: {
	  max: 5,
	  min: 0,
	  acquire: 30000,
	  idle: 10000
  }
};
 
module.exports = env;

const env = {

database: 'testdb',

username: 'postgres',

password: '123',

host: 'localhost',

dialect: 'postgres',

pool: {

max: 5,

min: 0,

acquire: 30000,

idle: 10000

}

};

module.exports = env;

– Setup Sequelize-PostgreSQL connection in ./app/config/db.config.js file:

const env = require('./env.js');
 
const Sequelize = require('sequelize');
const sequelize = new Sequelize(env.database, env.username, env.password, {
  host: env.host,
  dialect: env.dialect,
  operatorsAliases: false,
 
  pool: {
    max: env.max,
    min: env.pool.min,
    acquire: env.pool.acquire,
    idle: env.pool.idle
  }
});
 
const db = {};
 
db.Sequelize = Sequelize;
db.sequelize = sequelize;
 
//Models/tables
db.customers = require('../model/customer.model.js')(sequelize, Sequelize);
 
 
module.exports = db;

const env = require('./env.js');

const Sequelize = require('sequelize');

const sequelize = new Sequelize(env.database, env.username, env.password, {

host: env.host,

dialect: env.dialect,

operatorsAliases: false,

pool: {

max: env.max,

min: env.pool.min,

acquire: env.pool.acquire,

idle: env.pool.idle

}

});

const db = {};

db.Sequelize = Sequelize;

db.sequelize = sequelize;

//Models/tables

db.customers = require('../model/customer.model.js')(sequelize, Sequelize);

module.exports = db;

Create Sequelize model

– ./app/model/customer.model.js file:

module.exports = (sequelize, Sequelize) => {
	const Customer = sequelize.define('customer', {
	  name: {
		type: Sequelize.STRING
	  },
	  age: {
		  type: Sequelize.INTEGER
	  },
	  active: {
		type: Sequelize.BOOLEAN, defaultValue: false
	  },
	});
	
	return Customer;
}

module.exports = (sequelize, Sequelize) => {

const Customer = sequelize.define('customer', {

type: Sequelize.STRING

age: {

type: Sequelize.INTEGER

active: {

type: Sequelize.BOOLEAN, defaultValue: false

});

return Customer;

}

Express RestAPIs

– Route
-> Define Customer’s routes in ‘./app/route/customer.route.js’ file:

module.exports = function(app) {
 
    const customers = require('../controller/customer.controller.js');
 
    // Create a new Customer
    app.post('/api/customer', customers.create);
 
    // Retrieve all Customer
    app.get('/api/customers', customers.findAll);
 
    // Retrieve a single Customer by Id
    app.get('/api/customer/:customerId', customers.findById);
	
	// Retrieve Customers Age
    app.get('/api/customers/age/:age', customers.findByAge);
 
    // Update a Customer with Id
    app.put('/api/customer/:customerId', customers.update);
 
    // Delete a Customer with Id
    app.delete('/api/customer/:customerId', customers.delete);
}

module.exports = function(app) {

const customers = require('../controller/customer.controller.js');

// Create a new Customer

app.post('/api/customer', customers.create);

// Retrieve all Customer

app.get('/api/customers', customers.findAll);

// Retrieve a single Customer by Id

app.get('/api/customer/:customerId', customers.findById);

// Retrieve Customers Age

app.get('/api/customers/age/:age', customers.findByAge);

// Update a Customer with Id

app.put('/api/customer/:customerId', customers.update);

// Delete a Customer with Id

app.delete('/api/customer/:customerId', customers.delete);

}

– Controller :
-> Implement Customer’s controller in ./app/controller/customer.controller.js file:

const db = require('../config/db.config.js');
const Customer = db.customers;
 
// Post a Customer
exports.create = (req, res) => {	
	// Save to PostgreSQL database
	Customer.create({  
		name: req.body.name,
		age: req.body.age
	}).then(customer => {		
		// Send created customer to client
		res.send(customer);
	}).catch(err => {
		res.status(500).send("Error -> " + err);
	})
};
 
// FETCH all Customers
exports.findAll = (req, res) => {
	Customer.findAll().then(customers => {
		// Send all customers to Client
		res.send(customers);
	}).catch(err => {
		res.status(500).send("Error -> " + err);
	})
};
 
// Find a Customer by Id
exports.findById = (req, res) => {	
	Customer.findById(req.params.customerId).then(customer => {
		res.send(customer);
	}).catch(err => {
		res.status(500).send("Error -> " + err);
	})
};

// Find Customers by Age
exports.findByAge = (req, res) => {
	Customer.findAll({
		where: {
			age: req.params.age
		}
	}).then(
		customers => {
			res.send(customers)
		}
	).catch(err => {
		res.status(500).send("Error -> " + err);
	})
};
 
// Update a Customer
exports.update = (req, res) => {
	var customer = req.body;
	const id = req.params.customerId;
	Customer.update( { name: req.body.name, age: req.body.age, active: req.body.active }, 
						{ where: {id: req.params.customerId} }
				   ).then(() => {
						res.status(200).send(customer);
				   }).catch(err => {
						res.status(500).send("Error -> " + err);
				   })
};
 
// Delete a Customer by Id
exports.delete = (req, res) => {
	const id = req.params.customerId;
	Customer.destroy({
	  where: { id: id }
	}).then(() => {
		res.status(200).send('Customer has been deleted!');
	}).catch(err => {
		res.status(500).send("Error -> " + err);
	});
};

const db = require('../config/db.config.js');

const Customer = db.customers;

// Post a Customer

exports.create = (req, res) => {

// Save to PostgreSQL database

Customer.create({

age: req.body.age

}).then(customer => {

// Send created customer to client

res.send(customer);

}).catch(err => {

res.status(500).send("Error -> " + err);

})

};

// FETCH all Customers

exports.findAll = (req, res) => {

Customer.findAll().then(customers => {

// Send all customers to Client

res.send(customers);

}).catch(err => {

res.status(500).send("Error -> " + err);

})

};

// Find a Customer by Id

exports.findById = (req, res) => {

Customer.findById(req.params.customerId).then(customer => {

res.send(customer);

}).catch(err => {

res.status(500).send("Error -> " + err);

})

};

// Find Customers by Age

exports.findByAge = (req, res) => {

Customer.findAll({

where: {

age: req.params.age

}

}).then(

customers => {

res.send(customers)

}

).catch(err => {

res.status(500).send("Error -> " + err);

})

};

// Update a Customer

exports.update = (req, res) => {

var customer = req.body;

const id = req.params.customerId;

Customer.update( { name: req.body.name, age: req.body.age, active: req.body.active },

{ where: {id: req.params.customerId} }

).then(() => {

res.status(200).send(customer);

}).catch(err => {

res.status(500).send("Error -> " + err);

})

};

// Delete a Customer by Id

exports.delete = (req, res) => {

const id = req.params.customerId;

Customer.destroy({

where: { id: id }

}).then(() => {

res.status(200).send('Customer has been deleted!');

}).catch(err => {

res.status(500).send("Error -> " + err);

});

};

Server.js

– server.js file:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json())

const cors = require('cors')
const corsOptions = {
  origin: 'http://localhost:4200',
  optionsSuccessStatus: 200
}
app.use(cors(corsOptions))
 
const db = require('./app/config/db.config.js');
  
// force: true will drop the table if it already exists
db.sequelize.sync({force: true}).then(() => {
  console.log('Drop and Resync with { force: true }');
});
 
require('./app/route/customer.route.js')(app);
 
// Create a Server
var server = app.listen(8080, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("App listening at http://%s:%s", host, port)
})

var express = require('express');

var app = express();

var bodyParser = require('body-parser');

app.use(bodyParser.json())

const cors = require('cors')

const corsOptions = {

origin: 'http://localhost:4200',

optionsSuccessStatus: 200

}

app.use(cors(corsOptions))

const db = require('./app/config/db.config.js');

// force: true will drop the table if it already exists

db.sequelize.sync({force: true}).then(() => {

console.log('Drop and Resync with { force: true }');

});

require('./app/route/customer.route.js')(app);

// Create a Server

var server = app.listen(8080, function () {

var host = server.address().address

var port = server.address().port

console.log("App listening at http://%s:%s", host, port)

})

2. Vue Client

– package.json with 3 main modules: vue, vue-router, axios.
– 4 components: CustomersList, Customer, AddCustomer, SearchCustomer.
– router.js defines routes, each route has a path and maps to a component.
– http-common.js initializes HTTP Client with baseUrl and headers for axios HTTP methods.
– vue.config.js configures port for Vue App.

For more details about how to use Vue Router in this example, please visit:
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

2.0 Setup Vue Project & Router

Init Project

Point cmd to the folder you want to save Project folder, run command:
vue create vue.js-client

You will see 2 options, choose default:

Add Vue Router to Project

– Run command: npm install vue-router.
– Import router to src/main.js:

import Vue from "vue";
import App from "./App.vue";
import router from './router'

Vue.config.productionTip = false;

new Vue({
  router, // inject the router to make whole app router-aware
  render: h => h(App)
}).$mount("#app");

import Vue from "vue";

import App from "./App.vue";

import router from './router'

Vue.config.productionTip = false;

new Vue({

router, // inject the router to make whole app router-aware

render: h => h(App)

}).$mount("#app");

Define Routes

src/router.js:

import Vue from "vue";
import Router from "vue-router";
import CustomersList from "./components/CustomersList.vue";
import AddCustomer from "./components/AddCustomer.vue";
import SearchCustomers from "./components/SearchCustomers.vue";
import Customer from "./components/Customer.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "customers",
      alias: "/customer",
      component: CustomersList,
      children: [
        {
          path: "/customer/:id",
          name: "customer-details",
          component: Customer,
          props: true
        }
      ]
    },
    {
      path: "/add",
      name: "add",
      component: AddCustomer
    },
    {
      path: "/search",
      name: "search",
      component: SearchCustomers
    }
  ]
});

import Vue from "vue";

import Router from "vue-router";

import CustomersList from "./components/CustomersList.vue";

import AddCustomer from "./components/AddCustomer.vue";

import SearchCustomers from "./components/SearchCustomers.vue";

import Customer from "./components/Customer.vue";

Vue.use(Router);

export default new Router({

mode: "history",

routes: [

{

path: "/",

alias: "/customer",

component: CustomersList,

children: [

{

path: "/customer/:id",

component: Customer,

props: true

}

]

{

path: "/add",

component: AddCustomer

{

path: "/search",

component: SearchCustomers

}

]

});

App template with Navbar and router-view

src/App.vue:

<template>
    <div id="app" class="container-fluid">
        <div class="site-info">
            <h1>grokonez</h1>
            <h3>Vue Nodejs example</h3>
        </div>
        <nav>
            <router-link class="btn btn-primary" to="/">Customers</router-link>
            <router-link class="btn btn-primary" to="/add">Add</router-link>
            <router-link class="btn btn-primary" to="/search">Search</router-link>
        </nav>
        <br/>
        <router-view/>
    </div>
</template>

<script>
export default {
  name: "app"
};
</script>

<style>
.site-info {
  color: blue;
  margin-bottom: 20px;
}

.btn-primary {
  margin-right: 5px;
}

.container-fluid {
  text-align: center;
}
</style>

<h1>grokonez</h1>

<h3>Vue Nodejs example</h3>

</div>

<nav>

<router-link class="btn btn-primary" to="/">Customers</router-link>

<router-link class="btn btn-primary" to="/add">Add</router-link>

<router-link class="btn btn-primary" to="/search">Search</router-link>

</nav>

<br/>

<router-view/>

</div>

</template>

export default {

};

</script>

<style>

.site-info {

color: blue;

margin-bottom: 20px;

}

.btn-primary {

margin-right: 5px;

}

.container-fluid {

text-align: center;

}

</style>

2.1 Initialize HTTP Client

Install axios with command: npm install axios.
Then create http-common.js file:

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json",
  }
});

import axios from "axios";

export default axios.create({

baseURL: "http://localhost:8080/api",

headers: {

"Content-type": "application/json",

}

});

2.2 Components

List of Items

components/CustomersList.vue

<template>
    <div class="list row">
        <div class="col-md-6">
            <h4>Customers List</h4>
            <ul>
                <li v-for="(customer, index) in customers" :key="index">
                    <router-link :to="{
                            name: 'customer-details',
                            params: { customer: customer, id: customer.id }
                        }">
                            {{customer.name}}
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="col-md-6">
            <router-view @refreshData="refreshList"></router-view>
        </div>
    </div>
</template>

<script>
import http from "../http-common";

export default {
  name: "customers-list",
  data() {
    return {
      customers: []
    };
  },
  methods: {
    /* eslint-disable no-console */
    retrieveCustomers() {
      http
        .get("/customers")
        .then(response => {
          this.customers = response.data; // JSON are parsed automatically.
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    },
    refreshList() {
      this.retrieveCustomers();
    }
    /* eslint-enable no-console */
  },
  mounted() {
    this.retrieveCustomers();
  }
};
</script>

<style>
.list {
  text-align: left;
  max-width: 450px;
  margin: auto;
}
</style>

<h4>Customers List</h4>

<ul>

<router-link :to="{

params: { customer: customer, id: customer.id }

}">

</router-link>

</li>

</ul>

</div>

<router-view @refreshData="refreshList"></router-view>

</div>

</template>

import http from "../http-common";

export default {

data() {

return {

customers: []

};

methods: {

/* eslint-disable no-console */

retrieveCustomers() {

http

.get("/customers")

.then(response => {

this.customers = response.data; // JSON are parsed automatically.

console.log(response.data);

})

.catch(e => {

console.log(e);

});

refreshList() {

this.retrieveCustomers();

}

/* eslint-enable no-console */

mounted() {

this.retrieveCustomers();

}

};

</script>

<style>

.list {

text-align: left;

max-width: 450px;

margin: auto;

}

</style>

Item Details

components/Customer.vue

<template>
  <div v-if="this.customer">
    <h4>Customer</h4>
    <div>
      <label>Name: </label> {{this.customer.name}}
    </div>
    <div>
      <label>Age: </label> {{this.customer.age}}
    </div>
    <div>
      <label>Active: </label> {{this.customer.active}}
    </div>
  
    <span v-if="this.customer.active"
      v-on:click="updateActive(false)"
      class="button is-small btn-primary">Inactive</span>
    <span v-else
      v-on:click="updateActive(true)"
      class="button is-small btn-primary">Active</span>
  
    <span class="button is-small btn-danger" v-on:click="deleteCustomer()">Delete</span>
  </div>
  <div v-else>
    <br/>
    <p>Please click on a Customer...</p>
  </div>
</template>

<script>
import http from "../http-common";

export default {
  name: "customer",
  props: ["customer"],
  methods: {
    /* eslint-disable no-console */
    updateActive(status) {
      var data = {
        id: this.customer.id,
        name: this.customer.name,
        age: this.customer.age,
        active: status
      };

      http
        .put("/customer/" + this.customer.id, data)
        .then(response => {
          this.customer.active = response.data.active;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    },
    deleteCustomer() {
      http
        .delete("/customer/" + this.customer.id)
        .then(response => {
          console.log(response.data);
          this.$emit("refreshData");
          this.$router.push('/');
        })
        .catch(e => {
          console.log(e);
        });
    }
    /* eslint-enable no-console */
  }
};
</script>

<h4>Customer</h4>

<div>

<label>Name: </label> {{this.customer.name}}

</div>

<div>

<label>Age: </label> {{this.customer.age}}

</div>

<div>

<label>Active: </label> {{this.customer.active}}

</div>

<span v-if="this.customer.active"

v-on:click="updateActive(false)"

class="button is-small btn-primary">Inactive</span>

<span v-else

v-on:click="updateActive(true)"

class="button is-small btn-primary">Active</span>

<span class="button is-small btn-danger" v-on:click="deleteCustomer()">Delete</span>

</div>

<br/>

<p>Please click on a Customer...</p>

</div>

</template>

import http from "../http-common";

export default {

props: ["customer"],

methods: {

/* eslint-disable no-console */

updateActive(status) {

var data = {

id: this.customer.id,

age: this.customer.age,

active: status

};

http

.put("/customer/" + this.customer.id, data)

.then(response => {

this.customer.active = response.data.active;

console.log(response.data);

})

.catch(e => {

console.log(e);

});

deleteCustomer() {

http

.delete("/customer/" + this.customer.id)

.then(response => {

console.log(response.data);

this.$emit("refreshData");

this.$router.push('/');

})

.catch(e => {

console.log(e);

});

}

/* eslint-enable no-console */

}

};

</script>

Add Item

components/AddCustomer.vue

<template>
  <div class="submitform">
    <div v-if="!submitted">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" id="name" required v-model="customer.name" name="name">
        </div>
    
        <div class="form-group">
          <label for="age">Age</label>
          <input type="number" class="form-control" id="age" required v-model="customer.age" name="age">
        </div>
    
        <button v-on:click="saveCustomer" class="btn btn-success">Submit</button>
    </div>
    
    <div v-else>
      <h4>You submitted successfully!</h4>
      <button class="btn btn-success" v-on:click="newCustomer">Add</button>
    </div>
  </div>
</template>

<script>
import http from "../http-common";

export default {
  name: "add-customer",
  data() {
    return {
      customer: {
        id: 0,
        name: "",
        age: 0,
        active: false
      },
      submitted: false
    };
  },
  methods: {
    /* eslint-disable no-console */
    saveCustomer() {
      var data = {
        name: this.customer.name,
        age: this.customer.age
      };

      http
        .post("/customer", data)
        .then(response => {
          this.customer.id = response.data.id;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });

      this.submitted = true;
    },
    newCustomer() {
      this.submitted = false;
      this.customer = {};
    }
    /* eslint-enable no-console */
  }
};
</script>

<style>
.submitform {
  max-width: 300px;
  margin: auto;
}
</style>

</div>

</div>

<button v-on:click="saveCustomer" class="btn btn-success">Submit</button>

</div>

<h4>You submitted successfully!</h4>

</div>

</template>

import http from "../http-common";

export default {

data() {

return {

customer: {

id: 0,

age: 0,

active: false

submitted: false

};

methods: {

/* eslint-disable no-console */

saveCustomer() {

var data = {

age: this.customer.age

};

http

.post("/customer", data)

.then(response => {

this.customer.id = response.data.id;

console.log(response.data);

})

.catch(e => {

console.log(e);

});

this.submitted = true;

newCustomer() {

this.submitted = false;

this.customer = {};

}

/* eslint-enable no-console */

}

};

</script>

<style>

.submitform {

max-width: 300px;

margin: auto;

}

</style>

Search Items

components/SearchCustomers.vue

<template>
  <div class="searchform">
    <h4>Find by Age</h4>
    <div class="form-group">
      <input type="number" class="form-control" id="age" required v-model="age" name="age">
    </div>
 
    <div class="btn-group">
      <button v-on:click="searchCustomers" class="btn btn-success">Search</button>
    </div>

    <ul class="search-result">
      <li v-for="(customer, index) in customers" :key="index">
        <h6>{{customer.name}} ({{customer.age}})</h6>
      </li>
    </ul>
  </div>
</template>

<script>
import http from "../http-common";

export default {
  name: "search-customer",
  data() {
    return {
      age: 0,
      customers: []
    };
  },
  methods: {
    /* eslint-disable no-console */
    searchCustomers() {
      http
        .get("/customers/age/" + this.age)
        .then(response => {
          this.customers = response.data; // JSON are parsed automatically.
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    }
    /* eslint-enable no-console */
  }
};
</script>

<style>
.searchform {
  max-width: 300px;
  margin: auto;
}
.search-result {
  margin-top: 20px;
  text-align: left;
}
</style>

</div>

<button v-on:click="searchCustomers" class="btn btn-success">Search</button>

</div>

<h6>{{customer.name}} ({{customer.age}})</h6>

</li>

</ul>

</div>

</template>

import http from "../http-common";

export default {

data() {

return {

age: 0,

customers: []

};

methods: {

/* eslint-disable no-console */

searchCustomers() {

http

.get("/customers/age/" + this.age)

.then(response => {

this.customers = response.data; // JSON are parsed automatically.

console.log(response.data);

})

.catch(e => {

console.log(e);

});

}

/* eslint-enable no-console */

}

};

</script>

<style>

.searchform {

max-width: 300px;

margin: auto;

}

.search-result {

margin-top: 20px;

text-align: left;

}

</style>

2.3 Configure Port for Vue App

vue.config.js

module.exports = {
  devServer: {
    port: 4200
  }
}

module.exports = {

devServer: {

port: 4200

}

Run

– Node.js Server: npm start.
– Vue.js Client: npm run serve.

Open Browser with Url: http://localhost:4200/.

Add Customers

-> PostgreSQL’s records:

Search Customers

Load All Customers

Update Customers

– Update Katherin customer from inactive to active ->

-> See PostgreSQL’s records:

Delete Customer

Delete Jack:

-> PostgreSQL’s records:

Node.js Logs

-> Logs:

D:\gkz\article\Node.js-RestAPIs>npm start

> vue-nodejs-restapis-postgresql@1.0.0 start D:\gkz\article\Node.js-RestAPIs
> node server.js

App listening at http://:::8080
Executing (default): DROP TABLE IF EXISTS "customers" CASCADE;
Executing (default): DROP TABLE IF EXISTS "customers" CASCADE;
Executing (default): CREATE TABLE IF NOT EXISTS "customers" ("id"   SERIAL , "name" VARCHAR(255), "age" INTEGER, "active" BOOLEAN DEFAULT false, "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL, PRIMARY KEY ("id"));
Executing (default): SELECT i.relname AS name, ix.indisprimary AS primary, ix.indisunique AS unique, ix.indkey AS indkey, array_agg(a.attnum) as column_indexes, array_agg(a.attname) AS column_names, pg_get_indexdef(ix.indexrelid) AS definition FROM pg_class t, pg_class i, pg_index ix, pg_attribute a WHERE t.oid = ix.indrelid AND i.oid = ix.indexrelid AND a.attrelid = t.oid AND t.relkind = 'r' and t.relname = 'customers' GROUP BY i.relname, ix.indexrelid, ix.indisprimary, ix.indisunique, ix.indkey ORDER BY i.relname;
Drop and Resync with { force: true }
Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer";
Executing (default): INSERT INTO "customers" ("id","name","age","active","createdAt","updatedAt") VALUES (DEFAULT,'Jack','20',false,'2018-12-25 08:41:32.570 +00:00','2018-12-25 08:41:32.570 +00:00') RETURNING *;
Executing (default): INSERT INTO "customers" ("id","name","age","active","createdAt","updatedAt") VALUES (DEFAULT,'Katherin','23',false,'2018-12-25 08:41:40.043 +00:00','2018-12-25 08:41:40.043 +00:00') RETURNING *;
Executing (default): INSERT INTO "customers" ("id","name","age","active","createdAt","updatedAt") VALUES (DEFAULT,'Adam','23',false,'2018-12-25 08:41:46.320 +00:00','2018-12-25 08:41:46.320 +00:00') RETURNING *;
Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer" WHERE "customer"."age" = '23';
Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer";
Executing (default): UPDATE "customers" SET "name"='Katherin',"age"=23,"active"=true,"updatedAt"='2018-12-25 08:45:04.404 +00:00' WHERE "id" = '2'
Executing (default): DELETE FROM "customers" WHERE "id" = '1'
Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer";

D:\gkz\article\Node.js-RestAPIs>npm start

> vue-nodejs-restapis-postgresql@1.0.0 start D:\gkz\article\Node.js-RestAPIs

> node server.js

App listening at http://:::8080

Executing (default): DROP TABLE IF EXISTS "customers" CASCADE;

Executing (default): CREATE TABLE IF NOT EXISTS "customers" ("id" SERIAL , "name" VARCHAR(255), "age" INTEGER, "active" BOOLEAN DEFAULT false, "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL, PRIMARY KEY ("id"));

Executing (default): SELECT i.relname AS name, ix.indisprimary AS primary, ix.indisunique AS unique, ix.indkey AS indkey, array_agg(a.attnum) as column_indexes, array_agg(a.attname) AS column_names, pg_get_indexdef(ix.indexrelid) AS definition FROM pg_class t, pg_class i, pg_index ix, pg_attribute a WHERE t.oid = ix.indrelid AND i.oid = ix.indexrelid AND a.attrelid = t.oid AND t.relkind = 'r' and t.relname = 'customers' GROUP BY i.relname, ix.indexrelid, ix.indisprimary, ix.indisunique, ix.indkey ORDER BY i.relname;

Drop and Resync with { force: true }

Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer";

Executing (default): INSERT INTO "customers" ("id","name","age","active","createdAt","updatedAt") VALUES (DEFAULT,'Jack','20',false,'2018-12-25 08:41:32.570 +00:00','2018-12-25 08:41:32.570 +00:00') RETURNING *;

Executing (default): INSERT INTO "customers" ("id","name","age","active","createdAt","updatedAt") VALUES (DEFAULT,'Katherin','23',false,'2018-12-25 08:41:40.043 +00:00','2018-12-25 08:41:40.043 +00:00') RETURNING *;

Executing (default): INSERT INTO "customers" ("id","name","age","active","createdAt","updatedAt") VALUES (DEFAULT,'Adam','23',false,'2018-12-25 08:41:46.320 +00:00','2018-12-25 08:41:46.320 +00:00') RETURNING *;

Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer" WHERE "customer"."age" = '23';

Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer";

Executing (default): UPDATE "customers" SET "name"='Katherin',"age"=23,"active"=true,"updatedAt"='2018-12-25 08:45:04.404 +00:00' WHERE "id" = '2'

Executing (default): DELETE FROM "customers" WHERE "id" = '1'

Executing (default): SELECT "id", "name", "age", "active", "createdAt", "updatedAt" FROM "customers" AS "customer";

SourceCode

– Nodejs-RestAPIs
– Vue.js-Client

By grokonez | December 26, 2018.

Vue.js + Nodejs/Express RestAPIs – Sequelize ORM + PostgreSQL CRUD example

Technologies

Overview

1. Node.js Server

2. Vue.js Client

Practice

1. Node.js Backend

Setting up Nodejs/Express project

Setting up Sequelize PostgreSQL connection

Create Sequelize model

Express RestAPIs

Server.js

2. Vue Client

2.0 Setup Vue Project & Router

Init Project

Add Vue Router to Project

Define Routes

App template with Navbar and router-view

2.1 Initialize HTTP Client

2.2 Components

List of Items

Item Details

Add Item

Search Items

2.3 Configure Port for Vue App

Run

Add Customers

Search Customers

Load All Customers

Update Customers

Delete Customer

Node.js Logs

SourceCode

Post Tags

1 thought on “Vue.js + Nodejs/Express RestAPIs – Sequelize ORM + PostgreSQL CRUD example”

Got Something To Say: Cancel reply

Technologies

Overview

1. Node.js Server

2. Vue.js Client

Practice

1. Node.js Backend

Setting up Nodejs/Express project

Setting up Sequelize PostgreSQL connection

Create Sequelize model

Express RestAPIs

Server.js

2. Vue Client

2.0 Setup Vue Project & Router

Init Project

Add Vue Router to Project

Define Routes

App template with Navbar and router-view

2.1 Initialize HTTP Client

2.2 Components

List of Items

Item Details

Add Item

Search Items

2.3 Configure Port for Vue App

Run

Add Customers

Search Customers

Load All Customers

Update Customers

Delete Customer

Node.js Logs

SourceCode

Related Posts

Post Tags

1 thought on “Vue.js + Nodejs/Express RestAPIs – Sequelize ORM + PostgreSQL CRUD example”

Got Something To Say: Cancel reply