Vue3 - MySQL (Home)

<template>

  <RouterView />

</template>

import { createRouter, createWebHistory } from 'vue-router'

import welcomeView from '../views/WelcomeView.vue'

import AddNewView from '@/views/AddNewView.vue';

import DeleteUserView from '@/views/DeleteUserView.vue';

import UpdateUserView from '@/views/UpdateUserView.vue';

const router = createRouter({

  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [

// CONTENT HERE

  ]

})

export default router

import { ref } from 'vue';

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter',

() => {

  const deleteUser = ref({})       //DeleteUserView

  const updateUser = ref({})       //UpdateUserView

  return { deleteUser, updateUser}

})

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;

HOST=127.0.0.1

USER=root

PASSWORD=

DATABASE=db1

<template>

  <div>

      <h1>Welcome to MySQL</h1>

      <hr><br>

      <button @click="addNew">Add New</button>

      <br><br>

      <table>

        <thead>

          <tr>

            <th>#</th>

            <th>Name</th>

            <th>Email</th>

            <th>Age</th>

            <th>Act1</th>

            <th>Act2</th>

          </tr>

        </thead>

        <tbody>

          <tr v-for="(item,idx) in result" :key="item.id">

            <td>{{idx+1}}</td>

            <td>{{ item.name }}</td>

            <td>{{ item.email }}</td>

            <td>{{ item.age }}</td>

            <td @click="deleteUser(item)"> Delete</td>

            <td @click="onUpdateUser(item)"> Update</td>

          </tr>

        </tbody>

      </table>

      <!-- <pre> {{ result }}</pre> -->

  </div>

</template>

<script setup>

  import axios from "axios";

  import { onMounted, ref } from "vue";

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

  import {useCounterStore} from '../stores/counter';

  const store = useCounterStore();

  const result = ref('');

  onMounted(() => getMySQL());

  function getMySQL(){

    axios

      .get('http://localhost:5000/register')

      .then((response) => {

        result.value = response.data

        //console.log(response.data)

      })

      .catch((error) => {

        console.log(error);

      })

  }

  function addNew(){

    router.push('/addNew')

  }

  function deleteUser(item){

    store.deleteUser = item

    router.push('/deleteUser')

  }

  function onUpdateUser(item){

    store.updateUser = item

    router.push('/updateUser')

  }  

</script>

import express from 'express';

import { getAllRegister} from '../controllers/registerController.js'

const router = express.Router()

router.get('/register', getAllRegister)

// OTHER CRUD FUNCTIONS

export default router

import { readAllRegister} from '../models/registerModel.js';

//GET ALL REGISTER

export const getAllRegister = (req, res) => {

    readAllRegister((err, result) => {

        if(err){

            res.send(err)

        } else {

            res.json(result)

        }

    })

}

// OTHER CRUD FUNCTIONS

import pool from "../config/db.js"

//READ ALL REGISTER

export const readAllRegister = (result) =>{

    pool.query(

        "SELECT * FROM users",

        (err, res) => {

        if(err) {

            console.log(err)

        } else {

            result(res)

        }

    })

}

// OTHER CRUD FUNCTIONS

<template>

    <div>

        <h2> Add New User</h2>

        <form>

            <div>

                <label>Name</label><br>

                <input type="text" v-model="form.name">

            </div><br>

            <div>

                <label>Email address</label><br>

                <input type="email" v-model="form.email">

            </div><br>

            <div>

                <label>Password</label><br>

                <input type="text" v-model="form.password">

            </div><br>

            <div>

                <label>Age</label><br>

                <input type="text" v-model="form.age">

            </div><br>            

        </form><br>

        <button @click="onCancel">Cancel</button> &nbsp;

        <button @click="onSubmit">Submit</button>

        <pre>{{ form }} </pre>

    </div>

</template>

<script setup>  

    import axios from "axios";

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

    import { reactive } from "vue";

    const form = reactive({})

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

    const onSubmit = async() => {

        console.log(form)

        try {

            let response = await axios.post('http://localhost:5000/user', form)

            console.log(response.data)

            router.push('/')

        } catch (error) {

            console.log(error)

        }

    }

</script>

import express from 'express';

import { createUser } from '../controllers/userController.js'

const router = express.Router()

router.post('/user', createUser)

// OTHER CRUD FUNCTIONS

export default router

import { create_user } from '../models/userModel.js';

//CREATE

export const createUser = (req, res) => {

    create_user(req, (err, result) => {

        if(err){

            res.send(err)

        } else {

            res.json(result)

        }

    })

}

// OTHER CRUD FUNCTIONS

import pool from "../config/db.js"

//CREATE

export const create_user = (req, result) =>{

    const data = req.body

    pool.query(

        // 'INSERT INTO users SET ?',

        // [data],

        'INSERT INTO users( name, email, password, age ) VALUES (?,?,?,?)',

        [data.name, data.email, data.password, data.age],

        (err, res) => {

            if (err) {

                console.log(err)

            } else {

                result(null, res)

            }

        }

    )

}

// OTHER CRUD FUNCTIONS

<template>

    <div>

        <h2> Delete User</h2>

        <ul>

            <li>Name : {{ store.deleteUser.name}}</li>

            <li>Email : {{ store.deleteUser.email}}</li>

            <li>Password : {{ store.deleteUser.password}}</li>

            <li>Age : {{ store.deleteUser.age}}</li>

        </ul>

        <br>

        <button type="submit" @click="onCancel">Cancel</button> &nbsp;

        <button type="submit" @click="onDelete(store.deleteUser.id)">Delete</button>

        <br><br>

        <pre>{{ store.deleteUser}}</pre>

    </div>

</template>

<script setup>

    import axios from "axios";

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

    import {useCounterStore} from '../stores/counter';

    const store = useCounterStore()

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

    const onDelete =async(id)=>{

        try {

            const response = await axios.delete('http://localhost:5000/register/'+id)

            router.push('/')

        } catch (error) {

            console.log(error)

        }

    }

</script>

import express from 'express';

import { deleteRegister } from '../controllers/registerController.js'

const router = express.Router()

router.delete('/register/:id', deleteRegister)

export default router

import { removeRegister} from '../models/registerModel.js';

export const deleteRegister = (req, res) => {

    removeRegister(req, (err, result) => {

        if(err){

            res.send(err)

        } else {

            res.json(result)

        }

    })

}

import pool from "../config/db.js"

export const removeRegister = (req, result) =>{

    const id = req.params.id

    pool.query(

        'DELETE FROM users WHERE id=?',

        [id],

        (err, res) => {

            if (err) {

                console.log(err)

            } else {

                result(null, res)

            }

        }

    )

}

<template lang="">

    <div>

        <h2> Update User</h2>

        <form>

            <div>

                <label>Name</label><br>

                <input type="text" v-model="store.updateUser.name">

            </div><br>

            <div>

                <label>Email address</label><br>

                <input type="email" v-model="store.updateUser.email" disabled>

            </div><br>

            <div>

                <label>Password</label><br>

                <input type="text" v-model="store.updateUser.password">

            </div><br>

            <div>

                <label>Age</label><br>

                <input type="text" v-model="store.updateUser.age">

            </div><br>            

        </form><br>

        <button @click="router.push('/')">Cancel</button> &nbsp;

        <button @click="onUpdateUser">Update</button> &nbsp;

        <pre>{{ store.updateUser }} </pre>

    </div>

</template>

<script setup>

    import { useCounterStore } from '../stores/counter';

    const store = useCounterStore();

    import axios from "axios";

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

    async function onUpdateUser(){

        try {

            let response = await axios.put('http://localhost:5000/register', store.updateUser )

            //console.log(response.data)

            router.push('/')

        } catch (error) {

            console.log(error)

        }

    }

</script>

import express from 'express';

import { updateRegister } from '../controllers/registerController.js'

const router = express.Router()

router.put('/register/:id', updateRegister)

// OTHER CRUD FUNCTIONS

export default router

import { alterRegister } from '../models/registerModel.js';

//UPDATE

export const updateRegister = (req, res) => {

    alterRegister(req, (err, result) => {

        if(err){

            res.send(err)

        } else {

            res.json(result)

        }

    })

}

// OTHER CRUD FUNCTIONS

import pool from "../config/db.js"

//UPDATE

export const alterRegister = (req, result) =>{

    const { name, password, age, id } = req.body

    pool.query(

        'UPDATE users SET name = ?, password = ?, age = ? WHERE id = ?',

        [name, password, age, id],

        (err, res) => {

            if (err) {

                console.log(err)

            } else {

                result(null, res)

            }

        }

    )

}

// OTHER CRUD FUNCTIONS