Node Js And Vue Js Tutorial

Pada tutorial ini Dia akan belajar bagaimana membentuk full stack permintaan web dengan backend node.js express, MySQL, dan frontend Vue js.

Tidak hanya itu,

Puas pelajaran ini Anda juga akan sparing menggunakan Bulma CSS untuk style pada frontend.

Dengan demikian permohonan menjadi lebih user friendly dengan user interface (UI) yang elegan dan responsif.

Ini bukanlah latihan cak bagi pemula,

Jikalau Anda seorang pemula di node.js express, saya sarankan Anda malah suntuk mempelajari “Tutorial Express Js Lakukan Pemula”.

Tutorial ini terdiri dari 3 parts: Part #1 Backend, Part #2 Frontend, dan Part #3. Testing.

Mari kita menginjak.

Dapatkan reduksi 75% buntelan hosting dan gratis domain + extra korting 5% dengan menggunakan kupon: MFIKRI

Order Masa ini.!

Part #1. Backend

1.1. Buat database dan table

Buat database baru pada MySQL, Engkau dapat menunggangi tools sebagai halnya SQLyog, PHPMyAdmin maupun sejenisnya.

Disini saya membuat database dengan nama
pos_db.

Seandainya Dia mewujudkan database dengan cap nan sama itu lebih baik.

Untuk  membuat database dengan MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE pos_db;

Perintah SQL diatas akan membuat sebuah database dengan nama
pos_db.

Lebih lanjut, kerjakan sebuah table di dalam database
pos_db.

Disini saya membentuk sebuah table dengan nama
product.

Kalau Anda membuat table dengan tera yang sederajat itu kian baik.

Untuk membuat table
product, bisa dilakukan dengan mengeksekusi perintah SQL berikut:

CREATE TABLE product( product_id INT(11) PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(200), product_price DOUBLE  )ENGINE=INNODB;
      

1.2. Install Express, MySQL2, dan Cors

Buat sebuah folder di komputer Ia, disini saya beri nama “fullstack-app”.

Jika Anda mewujudkan dengan nama yang sebanding, itu lebih baik.

Anda adil membuatnya di manapun, baik di C, D, ataupun di Desktop.

Folder ini akan menjadi folder project kita nantinya.

Kemudian buka folder tersebut menggunakan kode editor, disini saya menggunakan
Visual Studio Code.

Saya juga menyarankan Anda buat menggunakan
Optis Bengkel seni Code.

Beliau dapat mendownload Okuler Studio Code plong link berikut dan menginstallnya di komputer Anda:

https://code.visualstudio.com/

Lebih lanjut, buka terminal pada Visual Studio Code lega menubar terminal.

Kemudian, bikin folder “backend” di dalam folder “fullstack-app” dengan mengetikan perintah berikut plong terminal:

mkdir backend

Kemudian masuk ke folder “backend” dengan perintah berikut:

cd backend

Setelah itu, ketikan perintah berikut lakukan membuat file “package.json” di privat folder “backend”:

npm init –y

Selanjutnya, install express, mysql2, dan cors dengan mengetikan perintah berikut puas terminal:

npm install express mysql2 cors

Seperti gambar berikut:

express-install

Selanjutnya, tambahkan kode berikut puas file “package.json”:

"type": "module",

Sehingga file “package.json” terpandang menjadi seperti mana berikut:

{   "name": "backend",   "version": "1.0.0",   "description": "",   "type": "module",   "main": "index.js",   "scripts": {     "test": "echo "Error: no test specified" && exit 1"   },   "keywords": [],   "author": "",   "license": "ISC",   "dependencies": {     "cors": "^2.8.5",     "express": "^4.17.1",     "mysql2": "^2.2.5"   } }
      

Hal ini berniat sepatutnya kita boleh memperalat ES6 Module Syntax untuk export dan import module.

1.3. Struktur Aplikasi

Agar aplikasi lebih terstruktur rapi, kita akan menerapkan hipotetis MVC (Kamil-View-Controllers).

Buat folder “config”, “controllers”, “models”, dan “routes” di dalam folder “backend”.

Kemudian bikin file “database.js” di dalam folder “config”, buat file “product.js” di dalam folder “controllers”, buat file “productModel.js” di dalam folder “models”, buat file “routes.js” di n domestik folder “routes”, dan bakal file “index.js” di dalam folder “backend”.

Perhatikan gambar berikut buat makin jelasnya:

app-struktur

1.4. Connect ke Database

Buka file “database.js” lega folder “config”, kemudian ketikan kode berikut:

import mysql from "mysql2";   // create the connection to database const db = mysql.createConnection({   host: 'localhost',   user: 'root',   password: '',   database: 'pos_db' });  export default db;
      

1.5. Models

Buka file “productModel.js” pada folder “models”, kemudian ketikan kode berikut:

// import connection import db from "../config/database.js";  // Get All Products export const getProducts = (result) => {     db.query("SELECT * FROM product", (err, results) => {                      if(err) {             console.gelondong(err);             result(err, null);         } else {             result(null, results);         }     });    }  // Get Single Product export const getProductById = (id, result) => {     db.query("SELECT * FROM product WHERE product_id = ?", [id], (err, results) => {                      if(err) {             console.log(err);             result(err, null);         } else {             result(null, results[0]);         }     });    }  // Insert Product to Database export const insertProduct = (data, result) => {     db.query("INSERT INTO product SET ?", [data], (err, results) => {                      if(err) {             console.log(err);             result(err, null);         } else {             result(null, results);         }     });    }  // Update Product to Database export const updateProductById = (data, id, result) => {     db.query("UPDATE product SET product_name = ?, product_price = ? WHERE product_id = ?", [data.product_name, data.product_price, id], (err, results) => {                      if(err) {             console.log(err);             result(err, null);         } else {             result(null, results);         }     });    }  // Delete Product to Database export const deleteProductById = (id, result) => {     db.query("DELETE FROM product WHERE product_id = ?", [id], (err, results) => {                      if(err) {             console.log(err);             result(err, null);         } else {             result(null, results);         }     });    }
      

1.6. Controllers

Urai file “product.js” pada folder “controllers”, kemudian ketikan kode berikut:

// Import function from Product Model import { getProducts, getProductById, insertProduct, updateProductById, deleteProductById } from "../models/productModel.js";  // Get All Products export const showProducts = (req, res) => {     getProducts((err, results) => {         if (err){             res.send(err);         }else{             res.json(results);         }     }); }  // Get Single Product  export const showProductById = (req, res) => {     getProductById(req.params.id, (err, results) => {         if (err){             res.send(err);         }else{             res.json(results);         }     }); }  // Create New Product export const createProduct = (req, res) => {     const data = req.body;     insertProduct(data, (err, results) => {         if (err){             res.send(err);         }else{             res.json(results);         }     }); }  // Update Product export const updateProduct = (req, res) => {     const data  = req.body;     const id    = req.params.id;     updateProductById(data, id, (err, results) => {         if (err){             res.send(err);         }else{             res.json(results);         }     }); }  // Delete Product export const deleteProduct = (req, res) => {     const id = req.params.id;     deleteProductById(id, (err, results) => {         if (err){             res.send(err);         }else{             res.json(results);         }     }); }
      

1.7. Routes

Buka file “routes.js” pada folder “routes”, kemudian ketikan kode berikut:

// import express import express from "express";  // import function from controller import { showProducts, showProductById, createProduct, updateProduct, deleteProduct } from "../controllers/product.js";  // init express router const router = express.Router();  // Get All Product router.get('/products', showProducts);  // Get Single Product router.get('/products/:id', showProductById);  // Create New Product router.post('/products', createProduct);  // Update Product router.put('/products/:id', updateProduct);  // Delete Product router.delete('/products/:id', deleteProduct);  // export default router export default router;
      

1.8. Index.js

Buka file “index.js” plong folder “backend”, kemudian ketikan kode berikut:

// import express import express from "express"; // import cors import cors from "cors"; // import routes import Router from "./routes/routes.js";  // init express const app = express();  // use express json app.use(express.json());  // use cors app.use(cors());  // use router app.use(Router);  app.listen(5000, () => console.gelondong('Server running at http://localhost:5000'));
      

Selanjutnya, ketikan perintah berikut pada terminal:

node index

Seperti lembaga berikut:

node-index

Sampai disini Anda sudah lalu berhasil membuat backend.

Bikin memastikan backend berjalan dengan baik, Ia dapat memperalat POSTMAN bakal melakukan pengujian.

Part #2. Frontend

2.1. Install Vue CLI

Untuk menginstall Vue CLI dapat dilakukan dengan mudah menggunakan NPM.

Buka halte mentah pada Visual Studio Code, kemudian ketikan perintah berikut untuk menginstall Vue CLI:

npm install –g @vue/cli

Perintah diatas, akan menginstal Vue CLI secara global di komputer Dia.

Untuk memastikan Vue CLI terinstall di komputer Anda, ketikan perintah berikut pada halte:

vue --version

Seperti mana gambar berikut:

vue-version

2.2. Create Vue Project

Jika Vue CLI sudah terinstal di komputer Kamu, silahkan buat project vue dengan mengetikan perintah berikut puas terminal:

vue create frontend

Sekiranya instalasi bertelur, maka akan terdapat folder “frontend” di kerumahtanggaan folder “fullstack-app”.

Sehingga di dalam folder “fullstack-app” terwalak dua folder adalah: “backend” dan “frontend” seperti gambar berikut:

fullstack-folder

Folder “backend” merupakan folder aplikasi yang dibangun sebelumnya memperalat node.js express, sedangkan “frontend” merupakan folder aplikasi yang dibuat menggunakan vue js.

Selanjutnya, masuk kedalam folder “frontend” dengan mengetikan perintah berikut sreg terminal:

cd frontend
      

Sehabis itu, install
vue-router,
axios, dan
bulma
dengan mengetikan perintah berikut pada terminal:

npm install vue-router axios bulma

Begitu juga rancangan berikut:

dependencies

Vue-router berfungsi kerjakan membuat route pada aplikasi vue js, axios merupakan promise based http client lakukan browser dan node.js, dan bulma merupakan framework CSS lakukan mempercantik user interface (UI).

Setelah itu, kerjakan memastikan semuanya berjalan dengan baik, ketikan perintah berikut untuk menjalankan permintaan vue js:

npm run serve
      

Sebagai halnya gambar berikut:

npm-run-serve

Buka browser Dia, kemudian kunjungi URL berikut:

http://localhost:8080/

Takdirnya berjalan dengan baik, maka akan tampil seperti berikut:

welcome-vue

2.3. Components

Buat file components “ProductList.vue”, “AddProduct.vue”, dan “EditProduct.vue” sreg folder “frontend/src/components”.

Seperti kerangka berikut:

components

Bentang file “ProductList.vue”, kemudian ketikan kode berikut:

<template>   <div>     <router-link :to="{ name: 'Create' }" class="button is-success mt-5"       >Add New</router-link     >     <table class="table is-striped is-bordered mt-2 is-fullwidth">       <thead>         <tr>           <th>Product Name</th>           <th>Price</th>           <th class="has-text-centered">Actions</th>         </tr>       </thead>       <tbody>         <tr v-for="item in items" :key="item.product_id">           <td>{{ item.product_name }}</td>           <td>{{ item.product_price }}</td>           <td class="has-text-centered">             <router-link               :to="{ name: 'Edit', params: { id: item.product_id } }"               class="button is-info is-small"               >Edit</router-link             >             <a               class="button is-danger is-small"               @click="deleteProduct(item.product_id)"               >Delete</a             >           </td>         </tr>       </tbody>     </table>   </div> </template>  <script> // import axios import axios from "axios";  export default {   name: "ProductList",   data() {     return {       items: [],     };   },    created() {     this.getProducts();   },    methods: {     // Get All Products     async getProducts() {       try {         const response = await axios.get("http://localhost:5000/products");         this.items = response.data;       } catch (err) {         console.log(err);       }     },      // Delete Product     async deleteProduct(id) {       try {         await axios.delete(`http://localhost:5000/products/${id}`);         this.getProducts();       } catch (err) {         console.gelondong(err);       }     },   }, }; </script>  <style> </style>
      

Seterusnya, buka file “AddProduct.vue”, kemudian ketikan kode berikut:

<template>   <div>     <div class="field">       <label class="nama">Product Name</tanda>       <div class="control">         <input           class="input"           type="text"           placeholder="Product Name"           v-model="productName"         />       </div>     </div>      <div class="field">       <cap class="tera">Price</label>       <div class="control">         <input           class="input"           type="text"           placeholder="Price"           v-model="productPrice"         />       </div>     </div>      <div class="control">       <button class="button is-success" @click="saveProduct">SAVE</button>     </div>   </div> </template>  <script> // import axios import axios from "axios";  export default {   name: "AddProduct",   data() {     return {       productName: "",       productPrice: "",     };   },   methods: {     // Create New product     async saveProduct() {       try {         await axios.post("http://localhost:5000/products", {           product_name: this.productName,           product_price: this.productPrice,         });         this.productName = "";         this.productPrice = "";         this.$router.push("/");       } catch (err) {         console.batang kayu(err);       }     },   }, }; </script>  <style> </style>
      

Lebih lanjut, beber file “EditProduct.vue”, kemudian ketikan kode berikut:

<template>   <div>     <div class="field">       <label class="cap">Product Name</keunggulan>       <div class="control">         <input           class="input"           type="text"           placeholder="Product Name"           v-pola="productName"         />       </div>     </div>      <div class="field">       <label class="label">Price</label>       <div class="control">         <input           class="input"           type="text"           placeholder="Price"           v-model="productPrice"         />       </div>     </div>     <div class="control">       <button class="button is-success" @click="updateProduct">UPDATE</button>     </div>   </div> </template>  <script> // import axios import axios from "axios";  export default {   name: "EditProduct",   data() {     return {       productName: "",       productPrice: "",     };   },   created: function () {     this.getProductById();   },   methods: {     // Get Product By Id     async getProductById() {       try {         const response = await axios.get(           `http://localhost:5000/products/${this.$route.params.id}`         );         this.productName = response.data.product_name;         this.productPrice = response.data.product_price;       } catch (err) {         console.batang kayu(err);       }     },      // Update product     async updateProduct() {       try {         await axios.put(           `http://localhost:5000/products/${this.$route.params.id}`,           {             product_name: this.productName,             product_price: this.productPrice,           }         );         this.productName = "";         this.productPrice = "";         this.$router.push("/");       } catch (err) {         console.log(err);       }     },   }, }; </script>  <style> </style>
      

2.4. Main.js

Buka file “main.js” pada folder “frontend/src”, kemudian ganti menjadi sebagaimana berikut:

import Vue from 'vue' import VueRouter from 'vue-router'  import App from './App.vue' import Create from './components/AddProduct.vue' import Edit from './components/EditProduct.vue' import Index from './components/ProductList.vue'  Vue.use(VueRouter)  Vue.config.productionTip = false  const routes = [   {     name: 'Create',     path: '/create',     component: Create   },   {     name: 'Edit',     path: '/edit/:id',     component: Edit   },   {     name: 'Index',     path: '/',     component: Index   }, ];  const router = new VueRouter({ mode: 'history', routes: routes })  new Vue({   // init router   router,   render: h => h(App), }).$mount('#app')
      

2.5. App.vue

Urai file “App.vue” pada folder “frontend/src”, kemudian ganti menjadi seperti berikut:

<template>   <div id="app" class="container is-max-desktop">     <router-view />   </div> </template>  <script> export default {   name: "App", }; </script>  <style> /* import style bulma */ @import "~bulma/css/bulma.css"; </style>
      

Part #3. Testing

3.1. READ

Pun ke browser dan kunjungi URL berikut:

http://localhost:8080/

Seandainya bepergian dengan baik, maka akan tampil seperti tulangtulangan berikut:

product-list

3.2. CREATE

Klik tombol “Add New”, maka akan tampil form sebagaimana berikut:

add-product

Masukan Product Name dan Price, kemudian klik tombol “SAVE”.

Jikalau insert berdampak, maka akan tampil seperti lembaga berikut:

product-list-added

3.3. UPDATE

Bakal mengupdate data klik tombol “Edit”, maka akan tampil form seperti berikut:

edit-product

Silih Product Name atau Price, kemudian klik tombol “UPDATE”.

Kalau update berakibat, maka akan tampil begitu juga bagan berikut:

product-edited

3.4. DELETE

Untuk menghapus data klik cembul “Delete”.

Jika delete berhasil, maka data akan hilang terbit list.product-deleted

Related: Tutorial RESTful Jago merah Memperalat Node JS, Express, dan Sequelize

Kesimpulan:

Pembahasan kelihatannya ini adalah bagaimana membuat full stack permintaan dengan backend node.js express dan frontend menggunakan vue.js.

Dengan demikian, Anda telah mempunyai bayangan bagaimana membentuk aplikasi web beradab yang mengantarai antara backend dan frontend.

Bukan semata-mata itu, Anda juga telah belajar takhlik frontend Single Page Application (SPA) menggunakan Vue CLI.

Bintang sartan tunggu apalagi, Let’s Coding!

Dapatkan diskon 75% pak hosting dan gratis domain + extra rabat 5% dengan menggunakan kupon: MFIKRI

Order Waktu ini.!


Download Source Code

Source: https://mfikri.com/artikel/express-mysql-vue