Deno MySQL 增刪查改 (包含頁面)

視頻演示：https://www.bilibili.com/video/BV1BT4y1E7Nh/?p=10

一起來完成以下步驟:

1. 使用之前工程代碼(09.MySQL增刪查改API)),如果你還沒有看過09視頻，建議看一下

2. 添加CRUD頁面，使用ejs 頁面模板

3. 修改Controller相應的CRUD代碼(Service到Repository層無需修改代碼)

4. 測試

#controllers/employeeController.ts

//後臺redirect
import { Context, REDIRECT_BACK } from "https://deno.land/x/oak/mod.ts";
import { Employee } from "../models/employee.ts";
import employeeService from "../services/employeeService.ts";
//解析Form
import { multiParser } from 'https://raw.githubusercontent.com/deligenius/multiparser/master/mod.ts'

const { cwd } = Deno;

class Controller {
    static async list(ctx: any) {
        //cwd獲取當前工程目錄 
        //注意 ' !== `
        //獲取所有員工
        const employees = await employeeService.findAll();
        ctx.render(`${cwd()}/views/list.ejs`, {
            data: { employees }
        });
    }

    //新增
    static async new(ctx: any) {
        let employee = {} as Employee;
        ctx.render(`${cwd()}/views/form.ejs`, {
            data: employee
        });

    }

    //保存
    static async save(ctx: Context) {
        const strEmployee = JSON.stringify(await multiParser(ctx.request.serverRequest));
        const saveEmployee: Employee = JSON.parse(strEmployee);
        //如果ID是空，將保存。否則修改
        if (!saveEmployee.id) {
            const result = await employeeService.save(saveEmployee);
        } else {
            const result = await employeeService.update(saveEmployee);
        }

        //保存成功後調轉到list頁面
        ctx.response.redirect(REDIRECT_BACK, "/");

    }

    //修改頁面
    static async edit(ctx: any) {
        const id = ctx.params.id;
        //根據ID獲取員工
        const employees = await employeeService.findById(id);
        const updateEmployee = employees[0];
        ctx.render(`${cwd()}/views/form.ejs`, {
            data: updateEmployee
        });

    }

    //刪除
    static async delete(ctx: any) {
        const id = ctx.params.id;
        //根據ID獲取員工
        const result = await employeeService.deleteById(id);
        //刪除成功後調轉到list頁面
        ctx.response.redirect(REDIRECT_BACK, "/");
    }

}

export default Controller;

#database/database.ts

import { Client } from "https://deno.land/x/mysql/mod.ts"

const client = await new Client().connect({
        hostname: "127.0.0.1",
        username: "root",
        db: "deno",
        poolSize: 3,
        password: "123456"
});

export default client;

#models/employee.ts

export interface Employee{
    id: number,
    name: string,
    age: number
}

#routers/employeeRouter.ts

import { Router } from "https://deno.land/x/oak/mod.ts";
import Controller from "../controllers/employeeController.ts";

const router = new Router();

router.get("/",Controller.list);
//新增頁面
router.get("/form",Controller.new);
//修改頁面
router.get("/form/:id",Controller.edit);
//保存
router.post("/save",Controller.save);
//刪除
router.get("/delete/:id",Controller.delete);

export default router;

#services/employeeService.ts

import { Employee } from  "../models/employee.ts";
import emlpoyeeRepo from "../repositories/employeeRepo.ts";

class employeeService{
    static async save(employee: Employee){
        return emlpoyeeRepo.save(employee);
    }

    static async update(employee: Employee){
        return  emlpoyeeRepo.update(employee);  
    }
    static async findById(id: number){
        return  emlpoyeeRepo.findById(id);
    }
    static async findAll(){
        return  emlpoyeeRepo.findAll();
    }

    static async deleteById(id: number){
        return  emlpoyeeRepo.deleteById(id);
    }

    
}

export default employeeService;

#repositories/employeeRepo.ts

import client from "../database/database.ts";
import { Employee } from "../models/employee.ts";

class employeeRepo {

    //新增
    static async save(employee: Employee) {
        let result = await client.execute(
            `insert into employee(name,age) values(?,?)`,
            [employee.name, employee.age]);
        employee.id = Number(result.lastInsertId);

        console.log(result);
        return employee;
    }

    //更新
    static async update(employee: Employee) {
        let result = await client.execute(`update employee set name = ?,age= ? where id = ?`,
            [employee.name, employee.age, employee.id]);
        console.log(result);
        return employee;
    }

    //根據ID獲取
    static async findById(id: number) {
        const employee = await client.query(
            "select * from employee where id = ?",
            [id]
        );
        console.log(employee);
        return employee;
    }
    //獲取所有
    static async findAll() {
        const employees = await client.query(
            "select * from employee"
        );
        console.log(employees);
        return employees;
    }

    //根據ID刪除
    static async deleteById(id: number) {
        let result = await client.execute(`delete from employee where id = ?`, [id]);
        console.log(result);
        return true;
    }

}

export default employeeRepo;

#main.ts

import { Application } from "https://deno.land/x/oak/mod.ts"
import {viewEngine,engineFactory,adapterFactory} from "https://deno.land/x/view_engine/mod.ts";
import router from "./routers/employeeRouter.ts";

const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

const app = new Application();
app.use(viewEngine(oakAdapter,ejsEngine));
app.use(router.routes());
app.use(router.allowedMethods());

console.log("Server Port 8000");

await app.listen({port: 8000 })

#views/form.html

   <form action="/save" enctype="multipart/form-data" method="POST">
            <!--ID在修改的時候用到-->
            <input type="hidden" name="id" value="<%= data.id %>" required>

            <div class="modal-header">
              <h4 class="modal-title">Add/Edit Employee</h4>

            </div>
            <div class="modal-body">
              <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" name="name" value="<%= data.name %>" required>
              </div>

              <div class="form-group">
                <label>Age</label>
                <input type="text" class="form-control" name="age" value="<%= data.age %>" required>
              </div>

              <div class="form-group">
                <label>Address</label>
                <textarea class="form-control" required></textarea>
              </div>

            </div>
            <div class="modal-footer">
              <a href="/" class="btn btn-default"> <span>Cancel</span></a>
              <input type="submit" class="btn btn-success" value="Save">
            </div>
          </form>

<div class="container">
    <div class="table-wrapper">
      <div class="table-title">
        <div class="row">
          <div class="col-sm-6">
            <h2>Manage <b>Employees</b></h2>
          </div>
          <div class="col-sm-6">
            <a href="/form" class="btn btn-success" ><i
                class="material-icons">&#xE147;</i> <span>Add New Employee</span></a>
          </div>
        </div>
      </div>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
            <th>Address</th>
            <th>Phone</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>

          <% data.employees.forEach(function(employee){ %>
          <tr>
            <td><%= employee.id%></td>
            <td><%= employee.name%></td>
            <td><%= employee.age%></td>
            <td>[email protected]</td>
            <td>89 Chiaroscuro Rd, Portland, USA</td>
            <td>[phone]</td>
            <td>
              <a href="/form/<%= employee.id%>"><i class="material-icons"
                  title="Edit">&#xE254;</i></a>
              <a href='/delete/<%= employee.id%>' class="delete" data-toggle="modal"><i class="material-icons"
                  data-toggle="tooltip" title="Delete">&#xE872;</i></a>
            </td>
          </tr>
          <% }); %>
          
        </tbody>
      </table>

    </div>
  </div>