項目總結：遊船管理系統

項目總結：遊船管理系統

http://blog.percymong.com/201...

這個學期有一門課，叫軟件工程。老師說，這個學期有四個項目，可使用 any language（帥氣，正好能夠拿來練 js）。這裏先亮出第一個項目。

需求

某公園有一個遊船碼頭，負責人但願開發一遊船管理系統。要求以下：當遊客租船時，管理員輸入 S 表示租船週期開始；當遊客還船時，管理員輸入 E 表示租船週期結束。

• 一天結束後，要求打印租船次數和平均租船時間

• 輸出一天中的最長租用時間

• 將報告分上午和下午輸出

• 當通訊線路出問題時，刪除一切不完整租船信息

只要你學過 C/C++，看到輸入 S 和輸入 E，總會不由自主地想起那個黑黑的窗口，沒錯，就是控制端程序的那個窗口。

可是老師不是說了，可使用任何語言嘛！

真巧，最近正好發現了 node-webkit，能夠用前端三把斧（HTML、CSS、JavaScript）來開發桌面應用嘍，那就來試試唄！

程序語言與環境

• 語言： HTML、CSS、JavaScript

• 編輯器： Sublime Text 3

• 運行環境： node-webkit

• 打包工具： Inno Setup Compiler

源代碼與應用

我已經將源代碼寄存到了 GitHub 上面了，連接在這裏！

應用文件放在了度盤裏：點這裏。

優化

• 添加身份驗證信息（姓名：2到4個漢字；身份證號：18位數字；租船編號：boat+編號）

• 將主界面與詳細租船信息界面分離

• 打開程序時，檢測文件中的有效數據，讀取並顯示在頁面上（使用nodejs的fs模塊）

• 還船時，將完整數據存入文件（租船結束的稱之爲完整數據）

• 添加歡迎界面，關閉頁面提醒（使用了一個JavaScript庫：PleaseWait.js）

• 加入價格，租船結束後顯示帳單

• 將船的總量和租船價格只在全局變量中進行定義，方便更改船的數量

• 管理員可經過更改 config.json 文件，從而更改船的數量以及租船價格（原本準備爲應用添加一個設置菜單來實現這個功能，後來爲了美觀，放棄了這個決定）

• 表單優化，再也不使用alert提示錯誤信息，使用css僞元素顯示錯誤信息

• 禁用鼠標右鍵和 F12

• 阻止外部文件拖拽進窗口

記錄可重用代碼

/* 禁用鼠標右鍵、F12
*************************************************/
document.addEventListener("contextmenu", function(e) {
  e.preventDefault();
});
window.addEventListener("keydown", function(e) {
  if (e.keyCode == 123) {
    e.preventDefault();
  }
});


/* 阻止文件拖拽進窗口
***************************************************/
window.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'none';
});
window.addEventListener("drop", function(e) {
  e.preventDefault();
});


/* 一些 nodejs 路徑
****************************************************/
  var fs = require("fs");
  var path = require("path");
  // 獲取當前exe文件所在的路徑
  var execPath = process.execPath;
  // 獲取當前exe文件所在的目錄
  var execDirPath = path.dirname(execDirPath);

總結

• 尋找應用中的類似性，以便重用代碼。

• 無論作什麼東西，提早的設計是很是有必要的，不能瞎頭瞎腦就開始寫代碼，否則你的代碼的重用性就大打折扣了。

• 不要惹惱你的用戶，這也是我爲何對錶單報錯進行了優化，要是以前，每次報錯都要 alert 一次，好煩的。

最後，引用張鑫旭大神說過的一句話：經過技術彌補設計缺陷是很傻逼的。