使用WebAPI建置员工管理系统

WebAPI简介

WebAPI是一个网路服务架构，可以用来建置RESTful应用程式

RESTful中文名称为具象状态传输，是一种设计的风格并非标准

对于资料的操作，是透过URL网址来指定操作以下行为

GET:取得资料

POST:新增资料

PUT:修改资料

DELETE:删除资料

这四种行为对应了资料操作的CRUD

WebAPI实作

1.我们先建立一个WebAPI专案，如果这里是选择MVC专案记得要把右手边的WebAPI选项打勾

2.准备好需要的资料库，并设计好Table Schema(因为重点在程式实作，所以DB从简设计)

3.新增"具有读取/写入动作的Web API2控制器"

4.因为我们DB里的资料是空的，所以我们从新增资料的API开始建置

Controller

public int Post(int EmpNo,string EmpName,string EmpPosition,string EmpDep)
        {
            if (!ModelState.IsValid)
            {
                return 0;//使用0與1判斷資料是否新增成功
            }
            else
            {
                Employee employee = new Employee();
                employee.EmpDep = EmpDep;
                employee.EmpName = EmpName;
                employee.EmpNo = EmpNo;
                employee.EmpPosition = EmpPosition;
                try
                {
                    db.Employee.Add(employee);
                    db.SaveChanges();
                    return 1;
                }catch(Exception ex)
                {
                    return 0;
                }
               
            }
        }

　　

View

主要列出JS实作Ajax的重点程式码，因为HTML的部分仅是建置表单输入资料，所以在此省略

<script>
    function createData() {
        var empNo = $("#EmpNo").val();
        var empName = $("#EmpName").val();
        var empPosition = $("#EmpPosition").val();
        var empDep = $("#EmpDep").val();
        $.ajax({
            url: "https://這邊要用自己的Domain Name/api/Home?EmpNo=" + empNo + "&EmpName=" + empName + "&EmpPosition=" + empPosition + "&EmpDep=" + empDep,
            type: 'POST',
            success: function (res) {
                if (res == 1) {
                    alert("資料新增成功");
                } else {
                    alert("資料新增失敗");
                }
            }
        });
    }
</script>

　　

5.我们接着建置获取资料的API(GET)

Controller

public IEnumerable<Employee> Get()
        {
            var empList = db.Employee;
            return empList.ToList();
        }

View

Response部分需要HTML Tag与JS变数同时输出，所以我们使用ES6的样板语法比较方便

function getData() {
        $.ajax({
            url: "https://API Domain Name/api/Home",
            type: 'GET',
            success: function (res) {
                $("#table").empty();
                $("#table").append("<tr><th>員工編號</th><th>員工姓名</th><th>職務名稱</th><th>所屬部門</th></tr>")
                for (var i = 0; i < res.length; i++) {
                    $("#table").append(`
                        <tr><td>${res[i].EmpNo}</td>
                             <td>${res[i].EmpName}</td>
                             <td>${res[i].EmpPosition}</td>
                             <td>${res[i].EmpDep}</td></tr>
                    `)
                }
            }
        })
    }

6.继续建置修改资料API(PUT)

Controller

修改的部分需要用到两个Controller，一个负责取得修改资料，一个负责保存

public Employee Get(int EmpNo)
        {
            var employee = db.Employee.Find(EmpNo);
            return employee;
        }

public int Put(int EmpNo, string EmpName, string EmpPosition, string EmpDep)
        {
            try
            {
                var employee = db.Employee.Find(EmpNo);
                employee.EmpName = EmpName;
                employee.EmpDep = EmpDep;
                employee.EmpPosition = EmpPosition;
                db.SaveChanges();
                return 1;
            }catch(Exception ex)
            {
                return 0;
            }
        }

View

较需要注意地方在editEmpNo.data.Emp_No，data是资料传递的规则名称，若随意变更会出现Undefined错误，Emp_No是点击按钮所传递过来的参数名称

function editData(editEmpNo) {
        var empNo = editEmpNo.data.Emp_No;
        $("#table").empty();
        $.ajax({
            url: "https://API Domain Name/api/Home?EmpNo=" + empNo,
            type: 'GET',
            success: function (res) {
                $("#editData").append(
                    `
        <div class="form-group row">
        <label for="EmpName" class="col-4 col-form-label">員工編號</label>
        <div class="col-8">
        <input id="EmpNo" name="EmpNo" type="text" class="form-control" value="${res.EmpNo}">
        </div>
    </div>
    <div class="form-group row">
        <label for="EmpName" class="col-4 col-form-label">員工姓名</label>
        <div class="col-8">
            <input id="EmpName" name="EmpName" type="text" class="form-control" value="${res.EmpName}">
        </div>
    </div>
    <div class="form-group row">
        <label for="EmpPositon" class="col-4 col-form-label">職務名稱</label>
        <div class="col-8">
            <input id="EmpPosition" name="EmpPositon" type="text" class="form-control" value="${res.EmpPosition}">
        </div>
    </div>
    <div class="form-group row">
        <label for="EmpDep" class="col-4 col-form-label">所屬部門</label>
        <div class="col-8">
            <input id="EmpDep" name="EmpDep" type="text" class="form-control" value="${res.EmpDep}">
        </div>
    </div>
    <div class="form-group row">
        <div class="offset-4 col-8">
        </div>
    </div>
    <button name="submit" type="submit" class="btn btn-primary" onclick="editedData()">確認修改</button>      
                    `
                )
            }
        });
    }
    function editedData() {
        var empNo = $("#EmpNo").val();
        var empName = $("#EmpName").val();
        var empPosition = $("#EmpPosition").val();
        var empDep = $("#EmpDep").val();
        $.ajax({
            url: "https://API Domain Name/api/Home?EmpNo=" + empNo + "&EmpName=" + empName + "&EmpPosition=" + empPosition + "&EmpDep=" + empDep,
            type: 'PUT',
            success: function (res) {
                if (res == 1) {
                    alert("資料修改成功");
                    getData();
                } else {
                    alert("資料修改失敗");
                }
            }
        });
    }

7.最后我们建置删除的API(DELETE)

Controller

public int Delete(int empNo)
        {
            try
            {
                var employee = db.Employee.Find(empNo);
                db.Employee.Remove(employee);
                db.SaveChanges();
                return 1;
            }catch(Exception ex)
            {
                return 0;
            }
        }

View

function deleteData(delEmpNo) {
        var empNo = delEmpNo.data.Emp_No;
        if (confirm("確定刪除編號為: " + empNo + "員工嗎?")) {
            $.ajax({
                url: "https://localhost:44369/api/Home?EmpNo=" + empNo,
                type: 'DELETE',
                success: function (res) {
                    if (res == 1) {
                        alert("刪除成功");
                        getData();
                    } else {
                        alert("刪除失敗");
                    }
                }
            });
        } else {
            return;
        }
    }

展示一下成果

新增资料

获取资料

修改资料

删除资料

以上是建立WEB Api的简单范例，看起来虽然有点阳春(哈哈)，但是设计风格完全符合RESTful，视专案需求还能更改的更进阶，但是基本的CRUD功能就如同范例