2016年3月16日 星期三

[MEAN_STACK] miniERP - Development Log 3 : Employee Management

這次要新增管理功能,第一個功能是增加人員的功能

source code 在此


1. 首先修正 module/dbEmployees.js,增加一些員工資料

   然後先手動新增一個 admin 帳號,可以把上次創的 admin 先刪掉,因為資料欄位不同了

   方法和之前一樣,只要將 Schema 修改和 dbEmployee.js 一樣就好

   First, modify module/dbEmployees.js as below to add more employee's data.

   You can also create an admin account manually based on this schema.


2. 修正 public/views/nav.ejs,增加管理的功能,並且根據權限顯示不同選項

   Modify public/views/nav.ejs to add more options in navigation bar.


3. 修正 routes/route.js。這邊增加一個 query 所有員工資料的 function,並且會將資料回傳

   Modify routes/route.js. Add a function to query all employees' data.


   因為現在在render ejs 檔案時,需要是否為 admin 的資料

   所以將相關資料送入,並增加 /adminManage 的 routing rule

   EJS need to know use is admin or not when render pages. So give the relative 

   parameter in.

   And add a new routing rule to handle adminManage.


   增加三個 api : /api/addEmployee、/api/updateEmployee、/api/deleteEmployee

   Add three more APIs.

   /api/addEmployee : 增加一筆員工資料。Add data of one employee.


   /api/updateEmployee : 更新某員工的資料。Update data of one employee


   /api/deleteEmployee : 刪除一筆員工資料。Delete data of one employee


4. 增加 adminManage.ejs 到 public/views,詳細 code 直接看原始碼

   這次是採用 SPA 的方式來寫,透過 ng-show 和 ng-hide 來達到不同頁面的效果

   然後特別說一下使用 ng-repeat 時增加 performance 的方式

   Add adminManage.ejs file to public/views. Won't explain details here, just take a 

   look at the source code. I used SPA concept to design adminManage.ejs.


   可以看到這邊用了 " track by item._id",功用主要是讓 angular 可以不用再重新產生DOM

   更詳細的說明可以參考這兩篇 : 資料1資料2

   There is some tips to improve performance when using ng-repeat. Check the ref.

5. 新增 adminManage.js 到 public/javascript,這邊沒有太複雜的部分,看 code 應該就會懂

   Add adminMange.js to public/javascript. The file is not complicated, just have a 

   look at the source code.

6. 成果






沒有留言:

張貼留言