基于HTML5+CSS+JacaScript和Java实现的校园校友APP前后台实现
目 录
摘 要 I
Abstract II
第1章 绪论 1
1.1研究背景和意义 1
1.1.1移动终端发展势头持续强劲 1
1.1.2高校校园数字化建设步伐加快 2
1.2 研究现状 2
1.2.1国外研究现状 2
1.2.2国内研究现状 2
1.3 论文研究的特色 3
1.3.1跨平台开发模式 3
1.4 论文的研究目标、主要工作 3
1.4.1研究目标 3
1.4.2主要工作 4
第2章 研究基础 5
2.1相关理论和标准 5
2.1.1校园移动信息服务平台的概念 5
2.1.2移动应用开发模式 5
2.1.3开发平台的选择 6
2.2相关技术介绍 6
2.2.1 Ionic框架 6
2.2.2 AngularJS 技术 7
2.2.3 Node.js 技术 8
2.2.4 Mybatis 技术 9
第3章 项目需求分析 13
3.1项目总体需求 13
3.2项目建设目标 13
3.3项目开发模式需求 14
3.4项目功能需求分析 14
3.4.1项目功能模块 14
3.4.2项目功能需求 16
3.5客户端特殊功能需求 17
3.6业务流程 17
3.7用例分析 18
3.7.1用例图 18
3.7.2主要用例定义 19
3.8非功能需求分析 22
3.9本章小结 23
第4章 成工校园APP的设计 24
4.1数据库设计 24
4.1.1数据库设计思想 24
4.1.2 结构设计 24
4.2.3数据库表设计 25
第5章 成工校园APP的功能实现 27
5.1模块划分 27
5.2前台功能模块的实现 28
5.2.1用户登录 28
5.2.2用户注册 29
5.2.3校园首页 31
5.2.4校园新闻 34
5.2.5校园风景 35
5.2.6校友查询 36
5.2.7个人信息 40
5.2.8退出登录 40
5.3后台功能模块的实现 41
5.3.1管理员登录 41
5.3.2新闻管理 42
5.3.3校友管理 43
5.3.4校园风景 44
第6章 成工校园APP的系统测试 45
6.1系统测试目的与意义 45
6.2系统测试 45
6.2.1测试大纲 45
6.2.2测试用例 45
第7章 总结与展望 48
7.1总结 48
7.2展望 48
参考文献 49
致 谢 51
1.4 论文的研究目标、主要工作
1.4.1研究目标
本文提出的采用Web APP的开发模式开发的成工校园APP，是针对成都工业学院校园数字化建设进程中，解决传统PC端校园信息服务系统的局限性、灵活性不高等实际问题展开的研究，成工校园APP旨在通过各种移动终端设备，如智平板电脑、智能手机等，通过使用移动通信网络技术，能够随时、随地、随需地为校园学生提供一站式的校园信息服务，加强数字化移动校园的建设。
主要目标是设计与实现成工校园APP，首先探讨APP的支撑技术，之后分析学生的功能需求和网络环境方面的需求，再进行总体需求分析和功能等需求分析，在这个基础上对成工校园APP进行设计和相关功能的实现，满足学生对于移动信息服务的需求，丰富校园文化，构建数字化移动成都工业学院学生信息服务平台，结合移动门户“随身、随时、随地”的特点，借助统一的移动端的表现形式为成都工业学院的学生提供：查看校园新闻，查看校园历史，查看校园风景，校友模糊查找等功能，让全体高校学生能够得到移动信息服务。方便全校学生交流互动、满足学生多样化信息需求，促进成都工业学院数字化校园建设和学校整体发展。
1.4.2主要工作
（1）国内外有关移动校园的相关综述研究，在研究理论的基础上，提出基于Web的轻量级的智慧校园一站式服务平台的软件架构。
（2）跨平台的成工校园APP的需求分析
对系统的总体需求、建设目标、功能需求等进行总结和归纳。
（3）跨平台的成工校园APP的设计研究
对基于浏览器的成工校园APP进行设计，主要有应用的总体设计、支撑平台设计、数据库设计及应用功能设计。
（4）跨平台的成工校园APP的实现
在以上基础上，对成工校园APP功能模块进行实现。主要功能包含查看校园新闻，查看校园历史，查看校园风景，校友模糊查找等，合理运用互联网主流技术进行开发。
（5）成工校园APP的测试
系统进行初步实现之后，开始进行对系统进行测试，并尽可能地提高软件的健壮性。
3.4.2项目功能需求
系统提供给这客户端用户是学生，后台管理用户是管理员，两种角色的功能如下。
学生：本文转载自http://www.biyezuopin.vip/onews.asp?id=14791可以使用与自己学习和校园生活相关的各种功能，包括查看校园新闻、校园风景，模糊查询校友，查看个人中心等。
后台管理员：管理校园新闻，校友管理，校园风景管理。
（1）前台部分（学生）：
登录：用户通过登录页面登录。
注册：用户通过注册页面注册校友账号。
注销：退出系统时需点击退出登录按钮。
浏览校内新闻：用户可以浏览校园新闻。
浏览校园风景：用户可以浏览校园风光。
校友模糊查询：用户可以模糊搜索查询到自己可能认识的校友。
个人信息：用户登录后，点击“我”就能查看个人资料。
首页：校园介绍，校园历史。
（2）后台管理系统（管理员）：
登录：管理员用户通过登录来管理。
注销：退出系统时需点击退出。
管理校园新闻：管理员可以新增、修改、删除校园新闻。
校友管理：管理员可以修改、删除校友账户。
校园风景管理：管理员可以新增、删除校友风景的图片。
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html ng-app="ionicApp"><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title>首页</title><link href="css/ionic.min.css" rel="stylesheet"><script src="js/ionic.bundle.min.js"></script><script type="text/javascript">angular.module('ionicApp', ['ionic']).controller('SlideController', function($scope) {$scope.myActiveSlide = 0;})</script><style type="text/css">.col img{width:100%;}.slider {height: 46%;}.slider-slide {color: #000; text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }.a {background-image: url(img/schoolpictureQM.jpg);background-size: 100% 100% ;}.b {background-image: url(img/schoolpictureHP1.jpg);background-size: 100% 100% ;}.c {background-image: url(img/schoolpictureCY.jpg);background-size: 100% 100% ;}.box{ height:100%; } .box h3{position:relative; top:50%; transform:translateY(-50%); }a:link.indexLink {color: black;text-decoration: none;} /* 未被访问的链接*/ a:visited.indexVisited {color: black;} /* 已被访问过的链接 */a:hover.indexHover {color: black;text-decoration: underline;} /* 鼠标悬浮在上的链接 */a:active.indexActive {color: black;} /* 鼠标点中激活链接 */</style></head>
<body>
<!--顶部--><div class="bar bar-header bar-positive" style="background-color: #CD3333;border-color:#CD3333;"><h1 class="title">首页</h1></div><!--内容-->
<ion-view title="Home" hide-nav-bar="true"><ion-scroll direction="y" scrollbar-y="false" style="width: 100%; height: 100%"><div><div ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController"><ion-slide-box active-slide="myActiveSlide" does-continue="true" slide-interval=4000 slide-page="true"><ion-slide><div class="box a"></div></ion-slide><ion-slide><div class="box b"></div></ion-slide><ion-slide><div class="box c"></div></ion-slide></ion-slide-box></div><p style="background-color:#E8E8E8;font-size: 17px;"><a class="indexLink indexVisited indexHover indexActive" href="index.jsp">校园介绍</a> <a class="indexLink indexVisited indexHover indexActive" href="history.jsp">历史沿革</a></p><h2 align="center">学校简介</h2><p><br/> 成都工业学院是四川省人民政府举办、省教育厅主管的公办全日制普通本科学校。学校创办于1913年，是辛亥革命后四川省举办的第一所实业学校。学校曾先后12次更名，历经四川省立第一甲种工业学校、四川省立成都高级工业职业学校、成都无线电机械学校、成都电子机械高等专科学校等多个历史发展阶段。新中国成立后长期直属国家电子工业部，1987年起改由四川省人民政府主办、省电子工业厅主管，2000年调整为四川省教育厅主管。陈毅元帅曾于1916-1918在我校染织专业学习。江泽民同志曾视察过我校，并亲笔为学校七十五周年校庆题词：“发扬优良传统，培养优秀人才”。<br/><br/> 学校现为全国“十三五”产教融合发展工程“应用型本科高校建设”规划项目院校，获得了中央支持地方高校改革发展专项资金项目单位资格，四川省首批“卓越工程师教育培养试点高校”，四川省首批教育综合改革试点单位、“本科院校整体转型发展改革”试点单位，四川省首批创新改革试点院校，学校科技园为四川省第8家省级大学科技园，入围首批四川省高校创新改革试点单位，当选全国新建本科院校联盟副理事长单位，牵头组建并当选为四川省应用型本科高校联盟理事长单位，当选为四川省装备制造业产教联盟副理事长单位。<br/><br/> 建校一百余年来，学校从未间断过办学，始终秉持“手脑并用、学做合一”的校训和“严谨、朴实、勤奋、创新”的校风，坚持根植地方，魂在应用，产教融合，协同育人，为国家培养了一大批优秀人才，为地方的社会经济发展倾尽绵薄之力。<br/><br/> 学校占地面积1000亩，主校区位于成都高新西区，此外还有成都市中心的花牌坊校区和北郊的大丰校区，普通全日制学生集中在主校区学习。学校设有机械工程学院、材料工程学院、电气工程学院、电子工程学院、网络与通信工程学院、经济与管理学院、计算机工程学院、人文体育与设计学院、建筑与环境工程系、信息与计算科学系、外语系、思想政治理论课教学部等12个教学院系（部），以及一个继续教育学院，有24个本科专业，17个专科专业。全日制在校学生约13000人。<br/><br/> 学校有专任教师650余人，副高以上高级职称教师近280人，硕士及以上学位教师近460人；3名国家级教学名师和6名省级教学名师 ，3个国家级教学团队（计算机、机械、机电）和4个省级教学团队，荣获全国师德先进个人、全国优秀教师、省师德标兵、享受政府特殊津贴的专家、省学术与技术带头人及后备人选、突出贡献专家等称号40余人次。<br/><br/> “材料成型及控制工程”、“机械电子工程”、“微电子科学与工程”成功入选四川省首批地方普通本科高校应用型示范专业。《冲压工艺与模具设计》、《高等数学》、《机械制造技术》3门获批为省级精品在线开放课程。学校以《转型发展，产教“五融合”，培养应用型工程人才》为题的教改项目获得四川省第八届高等教育四川省教学成果一等奖。<br/><br/> 学校教学仪器设备总值近亿元，图书馆藏书113万余册，建有设备值超过1000万元、基于万兆主干网的校园网，已形成比较完善的计算机网络服务体系，在四川省高校校园网建设检查评估中被评为“优秀”。<br/><br/> 学校有教育部批准设立的3个国家级实训基地（机械电子工程、数控技术、汽车检测与维修），三个四川省教育厅重点实验室（模具、电加工、无人机飞行控制系统应用与技术）和两个四川省哲学社会科学重点研究基地（性社会学与性教育研究中心、无人机产业发展研究中心、）；建有71个实验室（215个实验分室），其中15个实验室或分室是与英特尔成都公司等校外单位共同建设的“产学研用”实验室，电工电子实验室为“四川省优秀基础课实验室”。学校校内还建有教学实习工厂和“工程素质训练中心”、“学生特质培养创新中心”及与著名品牌企业合作建立的一大批校外实习基地，其中三个省级大学生校外实践教学基地（宏明、仕兰、宁江机床）。<br/><br/> 学校一直坚持产学研相结合的应用型人才培养模式，注重培养学生的学习、实践、创新能力。我校“校企合作，实现工程实训基地运行机制创新的探索与实践”曾获得国家级教学成果一等奖，在校内建设真实工程环境的训练中心的研究成果在其他高校得到了推广应用。学生在各项全国学科竞赛中成绩突出，在“全国大学生数学建模竞赛”“全国大学生电子设计大赛”等比赛中，获得国家级一、二等奖数十项，2013年我校学生荣获全国大学生数学建模竞赛的冠军荣誉——“高教社杯”<br/><br/> 。学校广泛开展了与加拿大、德国、日本、新加坡、澳大利亚、美国、新西兰等国家及我国香港、台湾地区的交流与合作，每年选派多名师生赴海外和港台地区访学进修、合作研究和交换学习。与加拿大荷兰学院合作培养了十届近千名双文凭毕业生。<br/><br/> 经过长期的建设和发展，学校以严谨的治学、稳定的教学秩序、良好的育人环境，保证了人才培养的质量，在培养应用型人才的教学改革方面取得了突出的成绩。毕业生深受社会各界欢迎。学校长期与中国电子科技集团、Intel公司、五粮液、长虹、华为、九洲、迈普、京东方、TCL、格力电器、重庆平伟、上海莫仕、富士康等知名企业合作。毕业生一次性就业率长期稳定在95%左右，一直是四川省教育厅授予的“普通高校毕业生就业工作先进单位”。<br/><br/> 学校秉承“实业兴国”的建校宗旨、弘扬“艰苦奋斗”的办学精神、坚持“卓越创新”的价值追求、倡导“敬业乐群”的人文情怀，以质量和特色为立校之本，立足成都、服务四川、面向西部、辐射全国，依托行业优势，以培养具有现代职业素养、适应地方社会经济发展和行业技术进步的基层应用性工程技术人才为目标，致力于建设一所特色鲜明的地方高水平应用型高等学校。（2018年3月）</p></div><div style="height:50px;width:100%;clear:all"></div></ion-scroll></ion-view><!-- 页脚部分--><jsp:include page="include/footer.jsp"/></body>
</html>
基于HTML5+CSS+JacaScript和Java实现的校园校友APP前后台实现相关推荐
- 电商移动端页面模板(基于html5+css，包括主页，商品详情，转账，付款，购物车等页面)
电商移动端页面模板,基于html5+css,包括主页,商品详情,转账,付款,购物车等页面 文件:n459.com/file/25127180-477876882 以下内容无关: ----------- ...
- html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
- 基于HTML5+CSS+JavaScript+ Three.js实现的Free-Form-Deformation（FFD三维自由变形）
资源下载地址:https://download.csdn.net/download/sheziqiong/85610855 一.实验目的和要求 掌握 FFD 变形算法的思想与实现原理. 能够实现交互控 ...
- 基于HTML5+CSS+JS的响应式圣诞老人过悬崖小游戏
- java计算机毕业设计基于安卓Android的校园助手APP
项目介绍 网络的广泛应用给生活带来了十分的便利.所以把校园助手与现在网络相结合,利用java技术建设校园助手APP,实现校园助手的信息化.则对于进一步提高校园助手发展,丰富校园助手经验能起到不少的促 ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
- 基于javaweb的旅游管理系统(java+jsp+html5+bootstrap+servlet+mysql)
基于javaweb的旅游管理系统(java+jsp+html5+bootstrap+servlet+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse ...
- ssm毕设项目基于HTML5的流浪动物领养平台yww0b（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目基于HTML5的流浪动物领养平台yww0b(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + My ...
- Java毕业设计_基于HTML5的摄影社区的设计与实现
基于HTML5的摄影社区的设计与实现 基于HTML5的摄影社区的设计与实现mysql数据库创建语句 基于HTML5的摄影社区的设计与实现oracle数据库创建语句 基于HTML5的摄影社区的设计与实现 ...
最新文章
- 【二级java】排序技术
- 是你的数据还不够强！谷歌大脑「数据增强」开源，大神QuocLe出品
- 七十六、SpringBoot 的数据缓存cache+Redis（三）
- synchronized同步方法
- linux文件存储、inode、硬链接、软链接
- 模块化加载_谈谈双亲委派模型的第四次破坏-模块化
- 图书馆如何应用视频直播？
- Node.js 连接 MySQL 并进行数据库操作 –node.js 开发指南
- 数据和云，半年文章精选（文末赠书）
- Frame - 快速创建高品质的 Web 应用原型
- 2019支持c99吗_德国LYNX携手北京十方融科科技有限公司成功中标2019年中国联通北京市分公司4K超高清视频信号传输设备购置项目...
- select for update作用
- 【BZOJ1452】【JSOI2009】count
- 杭电、POJ、ZOJ ACM刷题顺序和题目分类详解
- 手机端车牌识别软件下载
- Linux之软件包安装——06
- cada0图纸框_按1：1画图后如何出A0图纸图框怎么设置？
- html肤质测试,皮肤致敏试验
- python爬虫热点项目—滑块验证码项目（以Bilili为例）
- 读《哪有没时间这回事》有感