基于AngularJS的后台管理系统页面的设计与实现.doc

摘要：当今时代发展迅速，各类高新技术层出不穷，管理系统这个名词相对于大众来说已经不是一个陌生的名词。毫不客气的说，我们的工作和生活里到处都充斥着管理系统的身影，白领上班需要有工作考勤管理系统，学生学习有学校的教务处管理系统，而这些种样繁多的管理系统，便利着我们的生活。因管理系统愈发贴近我们的生活，所以人们对于信息管理系统界面的要求就越来越高，优美的界面设计，合理人性的 UI 风格，是现在信息系统管理界面所必须得，所以前端这个概念就和信息管理系统一拍即合，成为信息管理系统界面主要编程方式。

Angular.JS 是一个基于单页 web 的规范架构。以 HTML 语言作为基础和模板，并在其上做扩增，来支持更加清晰方便的创建应用的组件。Angular 的数据绑定，依赖注入，和路由跳转等思想提供了良好的用户体验，可和任何服务器端技术完美结合。

在典型的 Web 应用实现流程中，首先将全部的页面加载进来，然后再跟用户沟通，再根据用户操作来何后台进行互通，但这样每次的互通都会和后天服务器进行交互，会给用户造成很不好的体验，而每次浏览器对于后台服务器请求新页面数据的加载，这对于数据层与 UI 之间的设计不可以很好的分离，简略来讲就是不利于前后端的分离。而 angular.js 在首次响应后，就会把所有的 HTML 语句全部加载到客户端页面，而后的所有用户操作指令全部由 REST API 来获取 json 数据。这样每次得数据请求，都可以很好的完成前后端分离的做法。

一般来说一个整套信心管理系统开发下来，需要前端+数据库+后台，细致划分的话，就是 Angular/Bootstrap+MongoDB+Node.js，但本文只对前端界面进行开发，所以只进行前端部分进行讨论，另页面实验数据皆为自行创建的 json 文件。

关键字：管理信息系统；AngularJS；前端开发

目录

摘要

Abstract

第一章  绪 论  1

1.1 管理信息系统  1

1.2 研究背景及意义  2

1.3 主要研究内容  2

1.4 国内外状况研究  2

1.5 可行性研究  3

1.5.1 经济可行性  3

1.5.2 技术可行性分析  3

第二章  系统开发的相关技术 . 4

2.1 开发工具和环境  4

2.1.1 Sublime Text 3  4

2.1.2 WNMP  4

2.1.3 Protractor 和 AngularJS Batarang  5

2.1.4 Google Chrome . 5

2.2 开发技术  6

2.2.1AngularJS  6

2.2.2Bootstrap  6

2.2.3HTML5  7

2.2.4MVC 和 MVVM . 7

第三章  系统总体设计 . 9

3.1 系统需求分析  9

3.2 系统功能模块  9

第四章  系统实现  11

4.1 开发环境搭建 . 11

4.2 系统关键代码 . 12

4.3 系统展示 . 15

4.3.1 登录页 15

4.3.2 主界面 15

第五章 系统调试和测试 17

5.1 程序调试 17

5.2 程序的后期测试 17

总结 18

致谢 19

参考文献 20