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

Vue-nodejs-express-restapi-sequelize-postgresql---feature-image

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.

Related Posts:
Node.js/Express RestAPIs CRUD – Sequelize ORM – PostgreSQL
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes

Technologies

– Node.js/Express
– Sequelize

– Vue 2.5.17
– Vue Router 3
– Axios 0.18.0

– PostgreSQL

Overview

This is full-stack Architecture:

Vue-nodejs-express-restapi-sequelize-postgresql---full-stack-architecture

1. Node.js Server

Vue-nodejs-express-restapi-sequelize-postgresql---backend-mysql-architecture

2. Vue.js Client

Vue-nodejs-express-restapi-sequelize-postgresql---front-vue.js

Practice

1. Node.js Backend

Project structure:

Vue-nodejs-express-restapi-sequelize-postgresql---nodejs-project-structure

Setting up Nodejs/Express project

Init package.json by cmd:

npm init

Install express, postgresql, sequelize & cors:

-> now package.json file:

Setting up Sequelize PostgreSQL connection

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

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

Create Sequelize model

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

Express RestAPIs

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

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

Server.js

server.js file:

2. Vue Client

Vue-nodejs-express-restapi-sequelize-postgresql---vue.js-project-structure

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:

Vue-nodejs-express-restapi-sequelize-postgresql---cli

Add Vue Router to Project

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

Define Routes

src/router.js:

App template with Navbar and router-view

src/App.vue:

2.1 Initialize HTTP Client

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

2.2 Components
List of Items

components/CustomersList.vue

Item Details

components/Customer.vue

Add Item

components/AddCustomer.vue

Search Items

components/SearchCustomers.vue

2.3 Configure Port for Vue App

vue.config.js

Run

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

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

Add Customers

Vue-nodejs-express-restapi-sequelize-postgresql---add-customer

-> PostgreSQL’s records:

Vue-nodejs-express-restapi-sequelize-postgresql---select-all

Search Customers

Vue-nodejs-express-restapi-sequelize-postgresql---search-customer

Load All Customers

Vue-nodejs-express-restapi-sequelize-postgresql---load-all-customer

Vue-nodejs-express-restapi-sequelize-postgresql---load-customer-katherin

Update Customers

– Update Katherin customer from inactive to active ->

Vue-nodejs-express-restapi-sequelize-postgresql---update-customer

-> See PostgreSQL’s records:

Vue-nodejs-express-restapi-sequelize-postgresql---update-katherin-customer

Delete Customer

Delete Jack:
Vue-nodejs-express-restapi-sequelize-postgresql---delete-customer

-> PostgreSQL’s records:

Vue-nodejs-express-restapi-sequelize-postgresql---delete-jack-customer

Node.js Logs

-> Logs:

SourceCode

Nodejs-RestAPIs
Vue.js-Client

By grokonez | December 26, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*