Node项目之需求收集平台(一)- 基本介绍

 

上个月只大概花了几个小时就完成简单的评分系统,非常简单的第一个项目。然而在写这个需求收集平台的时候,考虑的问题很多,需求也变了好几回(自己定需求自己开发也是醉了),而且刚开始学习使用 jQuery 框架来实现页面交互,所以直到现在还没有完整的完成所有功能。这个需求收集平台相对于第一个项目有如下方面的改进:

  • 适当添加了部分CSS代码,不再只是使用原生bootstrap样式而不写一句css代码
  • 全面使用 jQuery 来实现界面交互(现学现卖)
  • 大幅使用 ajax 来异步获取响应,而不再是没写一句js代码
  • 每个页面不再是独立的一个文件,适当的使用了分块拼凑的方式,但仍然使用ejs(下次该换了它)
  • 使用 bootstrap-table 以及 bootstrap-fileinput 等等插件实现部分功能
  • 数据依然使用的MySQL,只是根据表分文件编写,不再混为一谈

整个项目到目前为止,前前后后也差不多1个月时间了,边学习边开发,个人感觉进步还是比较明显的,个人技能的主要更新都在 jQuery 上了,从开始做这个项目的时候,才刚开始学习 jQuery,在进行这个项目的这个月,也看完了《锋利的jQuery》一书,收获颇丰,书中学习的好多内容也在这个项目中得到了实践。下面简单介绍一下整个项目的界面以及基本功能。

前台

前台目前就两个界面,一个是首页 index.ejs,一个是需求添加页面 add.ejs,简单的两个界面需求变更了好几次,前期没有提前设计出来,都是靠想象来写前端代码,故而总是写完后看着不爽就换了。最终形成下面的样子,也不想再变动了。

首页:index.ejs

点击条目的时候,会异步加载详细内容以及回复内容等等。

添加页面:add.ejs

上传图片样式

功能方面:

  • 首页上点击消息行项目异步请求获取详情内容以及回复
  • 首页aside边栏页面加载完成后异步获取实时内容
  • 添加页动态获取需求分类以及对应的详细分类值
  • 添加页aside边栏在点击详细分类后触发获取可能要提交的问题
  • 引入 bootstrap-fileinput 插件美化图片上传样式

后台

整个后台看上去就一个页面 admin.ejs,不同的设置页面都是通过 bootstrap-table 异步加载json的方式来显示的,其中包括基本信息的设置、部门分类设置,需求分类设置以及用户账号密码设置。其实也可以理解为有4个单独的页面,只是URL是不变的,全部通过异步加载的方式来处理。

后台首页:admin.ejs

使用 bootstrap 原生 modal 实现的效果:

功能方面:

  • 使用 bootstrap-table 插件来实现整体的功能框架
  • 辅助使用 bootstrap 一些原生javascript插件来展示部分效果,如 modal

做这个项目的时间跨度已经将近一个月时间,其中不乏各种需求变更,迟迟得不到自己想要的效果,很多时候都是梦想很美好,现实很残酷(PS. 能力有限)。虽然现在好多的功能还没有写完,但是大体的样式以及要实现的功能已经定型了,不想再改了,善始善终,接下来的时间就是完成它了。

完成之前在这里简单记录一下,也算做是自己学习Node Web的一个项目实践吧。关于这个项目的一些细节单独再整理文章进行介绍。