使用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功能就如同范例
posted on 2020-08-23 16:03 www.blender-3d.cn 阅读(130) 评论(0) 编辑 收藏 举报