Categories

Saturday, October 23, 2021
therichposts@gmail.com
Bootstrap 5NodejsPostgreSQLVue3VueJs

Vue 3 Showing PostgreSQL Data Using NodeJS Express WEB API

Vue 3 Showing PostgreSQL Data Using NodeJS Express WEB API

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Showing PostgreSQL Data Using NodeJS Express WEB API.

Working Video
Vue 3 Showing PostgreSQL Data Using NodeJS Express WEB API
Vue 3 Showing PostgreSQL Data Using NodeJS Express WEB API
Postgres SQL Shell
Postgres SQL Shell
Nodejs Web API
Nodejs Web API

Vuejs3 came and if you are new then you must check below link:

  1. Vue 3 Tutorials

Friends now I proceed onwards and here is the code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup with bootstrap 5, axios modules and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npm install -g @vue/cli

vue create vuedemo

cd vuedemo

npm install bootstrap --save

npm install axios

npm run serve //http://localhost:8080/

2. Finally guys we need to add below code into our src/App.vue file to get final output on web browser:

<template>
 <div class="container p-5">
 <h1 class="text-center border-bottom pb-3 mb-3">Vue 3 Showing PostgreSQL Data Using NodeJS Express WEB API</h1>
  <table class="table table-hover table-bordered mt-5">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">User Name</th>
        <th scope="col">Country</th>
      </tr>
    </thead>
    <tbody>
     <tr v-for="user in users" :key="user.id">
        
        <td>{{user.id}}</td>
        <td>{{user.username}}</td>
        <td>{{user.country}}</td>
      </tr>
    
    </tbody>
  </table>
  
 
  </div>
</template>
<script>
//importing bootstrap 5 and axios
import "bootstrap/dist/css/bootstrap.min.css";
import axios from 'axios'
export default {
  data(){
  return {
    users:[]
    
    }
  },
 mounted () {
    //api caling
     axios
      .get('http://localhost:5000/users')
      .then((resp) => {
        console.log(resp);
        this.users = resp.data;
      })
  },
 
}
</script>

Guy’s now we will do Nodejs setup and make WB API using express:

1. Guys first create empty folder name `nodebackend` inside your pc any drive and then please below commands to set node modules:

npm init  

npm i express 

npm i nodemon -D

npm i pg pg-hstore

npm i --save cors

2. Now guy’s inside your nodebackend/package.json file add below code:

{
  "name": "postgres",
  "version": "1.0.0",
  "description": "This is test project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "nodemon index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "pg": "^8.7.1",
    "pg-hstore": "^2.3.4",
    "sequelize": "^6.6.5"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

3. Now guy’s create `index.js` file inside nodebackend folder and add below code inside it:

const express = require('express');

//solve cors issue
const cors = require("cors");

const app = express();

app.use(cors());
const port = 5000;
const Pool = require('pg').Pool;
  //Enter here your Postres database details
const pool = new Pool({
    user: 'postgres',
    host: 'localhost',
    database: 'dbname',
    password: 'root',
    dialect: 'postgres',
    port: 5432
});
  
  //Database connection and also please create postgres database first
pool.connect((err, client, release) => {
    if (err) {
        return console.error(
            'Error acquiring client', err.stack)
    }
    client.query('SELECT NOW()', (err, result) => {
        release()
        if (err) {
            return console.error(
                'Error executing query', err.stack)
        }
        console.log("Connected to Database !")
    })
})
  
app.get('/users', (req, res, next) => {
    console.log("TEST DATA :");
    pool.query('Select * from users')
        .then(testData => {
            console.log(testData);
            res.send(testData.rows);
        })
})

app.listen(port, () => {
  console.log(`Horror jassa app is running on port ${port}.`);
});

4. Now guy’s run below command to run NodeJS:

npm run serve

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. I will come with more demo which will helpful to all.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.