项目总结：游船管理系统

项目总结：游船管理系统

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 一次，好烦的。

最后，引用张鑫旭大神说过的一句话：经过技术弥补设计缺陷是很傻逼的。