Vue3 - MySQL (UiTM)

<template>

    <div>

        <h2>MySQL Database</h2>

        <button @click="onBack">Back</button> &nbsp;

        <button @click="onFetch">Fetch</button>

        <hr>

    </div>

</template>

<script setup>

    import router from "../router/index.js";

    import axios from "axios";

    const onBack = () => {router.push('/')}

    const onFetch = async () => {

        console.log('fetch database.....')

        try {

            const response = await axios.get('abc')

            router.push('/')

        } catch (error) {

            console.log(error)

        }

    }

</script>

import express from 'express';

import mysql from 'mysql2';

const app = express();

app.use(express.json());

// connecting Database

const connection = mysql.createPool({

    host: "localhost",

    user: "root",

    password: "",

    database: "db1",

});

app.get("/registration", async(req, res) => {

    try {

        const data = await connection.promise().query(

          `SELECT * from registration;`

        );

        res.status(202).json({data: data[0] });

        console.log( data[0])

    } catch (err) {

        res.status(500).json({ message: err });

    }

});

app.listen(5000,()=>{

    console.log("Server listening in http://localhost:5000")

})