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

浏览: 85 发布日期: 2016-12-05 分类: node.js

上个月只大概花了几个小时就完成简单的评分系统,非常简单的第一个项目。然而在写这个需求收集平台的时候,考虑的问题很多,需求也变了好几回(自己定需求自己开发也是醉了),而且刚开始学习使用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

bootstrap-fileinput插件上传图片样式

功能方面:

  • 首页上点击消息行项目异步请求获取详情内容以及回复

  • 首页aside边栏页面加载完成后异步获取实时内容

  • 添加页动态获取需求分类以及对应的详细分类值

  • 添加页aside边栏在点击详细分类后触发获取可能要提交的问题

  • 引入bootstrap-fileinput插件美化图片上传样式

后台

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

后台首页:admin.ejs

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

功能方面:

  • 使用bootstrap-table插件来实现整体的功能框架

  • 辅助使用bootstrap一些原生javascript插件来展示部分效果,如modal

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

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

返回顶部