backend
npm init -y
npm i mysql2
npm i express
npm i nodemon
npm i dotenv
npm i cors
routes/userRoutes.js
controllers/userController.js
models/userModel.js
config/db.js
.env
.env
HOST=127.0.0.1
USER=root
PASSWORD=
DATABASE=db1
config/db.js
import 'dotenv/config';
import mysql from 'mysql2';
const pool = mysql.createPool
({
host: process.env.HOST,
user: process.env.USER,
password: process.env.PASSWORD,
database: process.env.DATABASE,
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0,
});
export default pool;
frontend/src/views/DatabaseView.vue
<template>
<div>
<h2>MySQL Database</h2>
<button @click="onBack">Back</button>
<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>
routes/userRoutes.js
import express from 'express';
import { readAllUsers } from '../controllers/userController.js'
const router = express.Router()
router.get('/users', readAllUsers)
// OTHER CRUD FUNCTIONS
export default router
controllers/userController.js
import { read_all_users} from '../models/userModel.js';
//READ ALL
export const readAllUsers = (req, res) => {
read_all_users((err, result) => {
if(err){
res.send(err)
} else {
res.json(result)
}
})
}
// OTHER CRUD FUNCTIONS
models/userModel.js
import pool from "../config/db.js"
//READ ALL
export const read_all_users = (result) =>{
pool.query(
"SELECT * FROM users",
(err, res) => {
if(err) {
console.log(err)
} else {
result(res)
}
})
}
// OTHER CRUD FUNCTIONS
backend/app.js
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")
})