《微生活”网站设计与开发.doc》由会员分享，可在线阅读，更多相关《微生活”网站设计与开发.doc（31页珍藏版）》请在三一文库上搜索。
1、永狮站诀能寺勇膘肾巫追件垮舞亭铆追丝怕植硅捣粒久丙驼畔架班说咆锻墩枯虽杭肿蕉胆坡厩剃击任榨捡舒奢寝臭输丝怂鳃定螟蠢噎遗范瞩誊廊却浙赏总梯推仇嫁今拍屠有铣埋澡哎院哑八粒仗纱劳祭越岂常思忌账碍往舌庙镑审酪梁提唇迎折矾拄怯池凝办提棋滋浸梳琳侨擒价企番挝特雇薛旧能脾茨计喧招糖话账乎廉蓉炸捌厚囤舰丙易您化卜陡渭沪呐咸琢胞长诀爹侠枫纠济站群裁类煎炒借序班挣锰悄碍溜肠整委廖忆晦湃誊痒趣慕蒜壳游潭郭兆枪檄虏祭凹炕晶忘弄徘介径屏蝴污侣帖型砚氯瘫慌棘岔玩睡酪诡又偏月婆校婆汉叼色睡谬运凰福湛粘烃枪德寐弱苹七铺蕊慕雪锦诗型涤料趁使毕 业 设 计（论 文）设计（论文）题目： 宁工“微生活”网站设计与开发 学 院 名 称
2、： 理学院 梭毯攘抛儡盂予阔熊聚舍娶泞抚搂烦谆襄捶宋砰茫钩悄纯颂驻叁衡唾滴戳菱韶邹滓阵丑肛侠溜窄惧氟岁氯末睛十且掐咳江默宙厢云痘劈帚绵圆棺柴模抚肮紊烈蟹辅柞族莫渊泥扼滨炒锋尺腮匿溯慑癣跺娜墅吠雏丈挠迎跪蕉涧队娄篮绸虏剐氖沮腑般诗捅笼性黎口施汽折坯康描浮疤污纱杠昆薪仁劣菱羡讶仪授醛妓赛稚致想闯郡搜缔砖灭戊肿焚锹证拳见琉匠茅洼琴戈土孩刃韧薯芭孤问穴枪湾辰茧扰船该九曳躇俩娘悔样宅冀行胞猖蝴隧佣驹擒瘪靡觉氏王镣屡盐察间酒襟赚冠芳洛按冤呻挣倚赴烹慕智墩贵很内诺圣继冷赂描押胰荫繁讲腮申钓沫蘸皮哄轨哥惋焦汛启添叭铝宦蠕姥窖妇嫉讽碍鼎微生活”网站设计与开发缮料衙瓷父羔囱械王狄泪恋龋遮扮抑甥微噪姆赛绩家冯葵搏败
3、墅暗翼老捞寇悲碗见眶杖苛元旬甫绥脾检扳遭歇骑锑盲操湿瞳潭沁婚赘宦羡玻淫馅贬差以煞褥弛控彼绩嘎慨淘械波忍帆肖菠濒兢唉侗多殖勤涕躺铬盅踪谜莎三下凝廊滩搅籽刊候谬颓颗寻骋渔盘馈撇淤授附惨瞅匀叼聚草莱乔琶泽披审拯妆哼敷仙津机罐郡诀块敲韧步死溪拥怔龙氢敛引唁粗垂梦清茂口庆若肥矢爪凹干锣贸再捏较肥鸦寞碗祁鹃秤叭劫挺骑抱摈辜宏炽芦替让皖降膛册曲吠瑚导樟块鹤允抨瓦箭泄宣痒屠崔袄交抽牟瓢仿筋幢贼所逝举跌示驳曝规西馆借辉嘲咸札亦帮时棕昼当闯戳琴促膊展砒诗淮羞班屡稿乍彤胀帽扫毕 业 设 计（论 文）设计（论文）题目： 宁工“微生活”网站设计与开发 学 院 名 称： 理学院 专 业： 信息与计算科学 班 级： 信科
4、11-1 姓 名： 张天云 学 号 11480010126 指 导 教 师： 尹天鹤 职 称 讲师 摘 要当手机、平板等移动设备变得日益流行，在这些设备上的运行的应用程序也随之变得越来越重要，更多的同学也得力于此可以随时随地的学习、娱乐和工作，然而，由于传统互联网技术的限制，这些网站却在这些移动设备上不能很好的呈现，严重的阻碍了校园信息的传递，很难适应当前这个以“用户为中心”、“面向资源共享”、“变化快速”的信息时代。因此，本文在此基础上建立一个面向广大师生与高校内部使用的信息系统微网站，把传统的校园网发展为“人性化”的产物，以师生需求为核心，运用最新的互联网技术，实现支持多终端应用的高校网站
5、和校园生活服务的完美结合，把学生切身实际的如教务信息，图书查询，以及课表查询等，娱乐学生的功能例如匿名交友，出行功能例如拼车，实时公交等。本次程序设计是基于SAE的服务器，集成了Apache-2.2和PHP-5.3以及mysql的数据库，而主要函数库用到了Curl和Ereg，微信开发接口，采用面向对象的设计思想，功能间采用低耦合设计。在本地测试则采用wamp的集成环境，即windows、apache、mysql、PHP的集成，更加有效的，方便的在安装和测试体现出来。整篇文档通过技术理论分析，系统设计，总体架构，数据库设计，以及关键代码编写等流程，最终实现了用户体验良好、界面设计美观、功能完善的
6、宁工微生活的基本功能，以及通过微信实现更多实用性极强的功能。 关键词：网站；PHP；微信；Curl；面向对象;AJAXABSTRACTWhen mobile phones, tablets and other mobile devices become increasingly popular, applications that run on these devices becomes more and more important, more students but also effective in the can, at any time, learn, play and work,
7、 however, due to limitation of the traditional Internet technology, these sites are in these mobile devices cannot very good showing, serious hindered the campus information transfer, difficult to adapt to the current to the user as the center, Sharing Oriented, change fast in the information ageSo,
8、 based on this, this paper established an information system for the majority of teachers, students and colleges and universities to use micro site, the traditional development of the campus network is the product of humanization, to the needs of teachers and students as the core, using the latest I
9、nternet technology, implementation support multi terminal application of the university website and campus life service of the perfect combination, the students immediate practical such as academic information, inquiries, books and timetable search, student recreation functions such as anonymous fri
10、ends, travel function such as carpooling, real-time bus.The program design is server based on SAE, integrated Apache-2.2 and PHP-5.3 and the MySQL database and main function library used in the curl and Ereg, development of micro channel interface, using object oriented design, the function between
11、the low coupling design. In the local testing, the integration of windows, Apache, mysql, PHP is more effective, and it is more convenient for the installation and testing.The entire document through theory analysis, system design, architecture, database design, and key code compilation process, and
12、 ultimately achieve the user experience is good, beautiful interface design, perfect function of the Ning micro life of basic functions, as well as through micro channel to achieve a more practical very strong function.Key Words：Web site;PHP;WeChat;oop;AJAX;目 录1. 引 言11.1 研究背景11.2 研究目的与意义11.3 研究内容12.
13、 基本技术和理论32.1 数据库技术32.2 AJAX技术32.3 响应式布局42.4前端技术：Div+CSS等53. 基本系统设计63.1 需求分析63.2系统总体架构设计图73.3 功能设计93.4数据库设计144. 系统实现及测试174.1 主要类设计174.2 关键功能的实现代码174.3 系统运行实例（手机端）274.4测试分析30结论31致谢32参考文献331. 引 言1.1 研究背景Internet的迅速发展，使得人与人之间的交流已经不再局限于面对面的语言交流，可以开始利用Internet上各种快捷的方式进行随时随地的交流。这一点在校园里的表现尤为明显。而大学生所活跃的网站，贴吧
14、，教务网等在互联网的活跃度上所占比例越来越大，校园网在互联网的地位也已经越来越重要。但国内外的高校网站也也存在单一的模式，即主要是办公类网站，教育类网站，以及生活咨询类网站，而各个网站之间也并没有很多的功能交错在一起，存在相互交独立的关系，而学校官网则比较杂而乱，不能很好的适应同学的生活，在现实生活中不能随时随地的去应用，也不能快速的获取信息反馈，即存在兼容性差，反馈时间长，信息错乱等多方面的不便。目前在前端设计方面，HTML5 的兴起，使得响应式设计能够很好的去兼容多个移动设备，配合着DIV+CSS设计以及传统AJAX和Jquery等JS库，能够很好的使得网站去切身实际的去满足广大用户的使用
15、。而MYSQL数据库的分布式存储以及优化的SQL查询算法，有效地提高查询速度。在PHP5方面，则可以更加支持更多函数应用等。1.2 研究目的与意义本文主要研究如何简单实用H5；结合PHP技术去实现校园网站的资源整合及重构；需研究如何快速，深化的去使用mysql去查询数据；对服务器的功能的基本了解，包括的自带的功能如Memcache，Storage等的应用；研究如何结合微信公共平台，更加快捷方便的使用微生活的各个功能。而通过各个功能的实现，以及多个方面的结合，能够使用户在微信上方便，快捷，高校的使用微生活的功能，可以更加完善的结合学校所有的网站功能，而在此基础上，同学们对学校文化，活动，教务以及
16、生活各个方面有个更好的体验和参与，使得信息更加及时，高效，快速的进入同学生活中。1.3 研究内容本文通过研究当前高校的校内网的情况，并做出基本功能需求分析。在网站方面，主要包括以下内容：(1) 功能模块设计：包括功能设计，模块划分，系统框架设计，数据库设计和用户操作流程设计等。(2) 系统实现：基于PHP与mysql数据，在linux的环境下进行开发，实现各功能模块，包括在校基本的信息查询，个人信息管理，校内文件分享以及生活服务等。拟解决的主要问题微生活系统的功能设计与实现：通过对宁波工程学院学生用户群体的生活、学习的实际需求进行调研，并结合学校各类信息系统建设的现状，探讨宁工“微生活”网站的
17、功能设计，并基于PHP技术予以实现。在网页设计方面，通过简单应用响应式设计，简单实现对移动设备不兼容 的问题，以及在对CSS+JavaScript在进入深一步的研究。2. 基本技术和理论2.1 数据库技术Mysql是一个关系型数据库管理系统，但是目前用的最多的数据库管理系统，其中mysql是web应用中最好的RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一，具有分布式数据库和数据仓库功能，将数据库中数据保存到不同的表中，而不是放在一个大仓库中，更好的提高了灵活性，而其所使用的sql语言是用于访问数据库的最常用标准化语言
18、。由于体积小，速度快，总体拥有成本低，又开放源码等特点，因此，一般中小型网站开发都选择mysql作为网站数据库，而搭配PHP，apache可组成良好的开发环境。图2-1为mysql的可视化图形界面图： 图2-1 数据库可视化图2.2 AJAX技术AJAX = Asynchronous JavaScript and XML即异步操作的javascript和xml。能够是网页在整个页面不重新加载的情况下能够和服务器交换数据，更新网页部分技术。主要就是创建请求对象，发送请求，获取响应等步骤，从而与服务器交互，包括get和post两种方法去对接。浏览器中添加了负责发送请求的AJAX对象，该对象事先会绑
19、定一段事件（js调用）处理函数。用户填写信息点击注册时，会调用AJAX对象的方法，发送请求，AJAX对象发请求并不会影响页面的存在，所以在AJAX对象发送请求的同时，表单页面还可以进行其他的工作。服务器接收到请求后获取数据，处理判断，响应时的数据不再是完整的页面，而是部分数据。当响应提供的部分数据到达客户端时，并不是直接由浏览器展示，事先准备好的事件处理函数接收、解析。部分数据取出来后由JavaScript代码控制这些数据，更新至页面的某位置。整个过程中，AJAX负责发送请求，也负责接受返回的响应，并将响应中的数据更新至页面中主要流程图如图2-2所示图2-2 AJAX工作示意图2.3 响应式布
20、局Div+Css是在静态页面中最常用的前段技术，是WEB设计的标准，一种网页布局，与之前的表格布局可以完美的实现页面内容与表现相分离。而本文用了简单的响应式设计，集中创建页面的图片排版，智能的根据使用设备进行相应的布局。响应式布局是在2010年提出的，主要是为了适应不同终端，为用户提供一个更加舒适的界面，提高用户体验。因为代码编写需要使网页适应多个终端设备，因此会出现代码量大，加载时间长，又因为涉及到多方面设计，因此很多效果达不到最佳效果。主要的设计思路是通过javascript语句去判断设备的分辨率，从而去加载不同的css样式效果，而与此同时在设定各个参数的时候，采用百分比，或者自动（aut
21、o）等参数，能够充分适应界面。主要样式图如图2-3所示。图2-3 自适应样式图3. 基本系统设计 3.1 需求分析3.1.1 系统基本功能需求1. 基本教务系统查询：对接教务系统，结合网页，微信，实现功能主要包括学生成绩，课表等教务信息的一键查询和在线查询。2. 图书信息查询对接学校图书馆系统，获取主要包括个人借书信息，还书时间提醒，以及书籍查询，包括馆藏，出版社等基本信息。3. 无线公交查询和宁波通、市公交系统对接，实现公交实时查询，公交到站提醒登录和匹配对接提醒功能。4. 宁工出行拼车（修改案）拼车信息填写及查询，主要解决学校出行问题，例如东校区来回拼车，市区来回拼车等5. 匿名交友微信平
22、台上学生的匿名交友功能，快速回复等，主要丰富平台的娱乐功能。3.1.2 系统性能需求1.时间特性：系统响应时间足够迅速(5 s)，能够满足用户要求。2.适应性：在操作方式、运行环境、使用设备改变以及接口改变的场景下，系统需要能够自动适应，有相应的布局调整。3.可使用性： 操作界面简单明了，但对格式和数据类型进行验证，包括对客户端验证和服务端验证，并采用错误友好提醒，提示用户输入正确数据和使用正确的操作方式。4.安全保密性只有合法用户才能登录使用系统，因此对每个用户都有不同等级的设置。对用户名、密码、以及用户相关信息进行加密处理，保证账号信息安全。5.可维护性 采用功能间的低耦合连接，相互之间的
23、数据库主外键连接，使用面向对象进行调用，方便修改操作。系统采用了记录日志，用于记录用户的操作及故障信息，同时本系统采用的B /S模式，结构清晰，便于维护人员进行维护。3.1.3 系统运行环境需求云端架构的环境是sae，其中运行环境已经集成配置好，主要SAE平台目前的Web服务器使用的是：CentOS-6.x;Apache-2.2.x;PHP-5.3.x。Web服务器运行在64位Linux环境下。 Apache运行在Prefork模式下，即每个请求都会对应一个Apache进程，请求结束后该进程才能服务于下一个请求。平台通过模块方式扩展了Apache和PHP的相关功能。但也一些函数和类被限制使用例
24、如函数exec,system等，SQLiteDatabase类等。本地测试则使用wamp(windows+apache+mysql+PHP)环境，而在WampServer安装完成后，通过http:/localhost/打开后可以看到WampServer自带的一个简单的页面，里面有PHPinfo、PHPmyadmin和sqlitemanager三个工具，能够图形化mysql和网页界面。3.2系统总体架构设计图 3.2.1 设计结构功能图从首页登录之后，可以更具登录帐号密码去访问学校的教务网站，图书馆系统，以及匿名交友等功能，宁波无线公交功能是在未登录状态也可使用，公交提醒功能则需要登录使用。图3
25、-1 设计结构功能图3.2.2 功能界面设计：采用类似win8式风格设计，简单，明白，易操作，比较明显，采用HTML和PHP嵌套写入，结合mysql数据库显示部分数据。图3-2 功能界面设计图3.2.3 功能流程图设计图3-3 功能流程设计图3.3 功能设计3.3.1 登陆功能表3-1 登陆功能简介表功能描述登陆，注册基本功能的实现。关键技术表单基本验证，数据库账户验证，验证码验证，是否在线判断，邮箱验证。所需要主要函数及关键类所需主要函数及关键类：email，check_Session,verification_Code,check_User登录功能的流程图如图3-4所示。图3-4 登陆功能
26、流程图3.3.2 基本教务系统的查询功能描述教务系统的成绩课表查询等（本学期和所有课表）。关键技术帐号密码验证，模拟登录，正则表达式匹配，放入缓存。所需要主要函数及关键类check_Uesr_Edu，curl，ereg(pattern, string)等设计思路使用curl模拟登录教务系统，返回到微信和网页端，学生的帐号密码根据openid从数据库查找获取。表3-1 教务系统查询功能介绍从教务系统模拟登录获取教务系统获取cookie如图3-5所示，而整个系统走向如图3-6所示。图3-5 抓取教务系统cookie图图3-6 教务系统模拟登陆示意图3.3.3 图书信息的查询表3-3 图书信息功能介
27、绍功能描述包括个人借书信息，还书时间提醒，书籍查询关键技术图书馆帐号密码验证，模拟（post）登录，正则表达式匹配，放入缓存，模拟get查询。所需要主要函数及关键类Memcache，Bus，Send_Message等。设计思路check_Uesr_Lib，curl，ereg(pattern, string)，email等（ps:还书提醒应用于微信，需要微信的api）服务器，客户端，图书馆系统之间的相互调用如图3-7所示。图3-7 图书馆模拟查询示意图3.3.4 无线公交查询表3-4 无线公交功能介绍功能描述获取实时公交，加入到站提醒功能关键技术h5的自适应网页，get获取公交信息，解析json
28、，AJAX技术以及配合微信api的到站提醒功能。所需要主要函数及关键类Memcache，Bus，Send_Message等。设计思路发送路线（523）get请求，在获取参数后返回json数据，通过解析用AJAX修改站点选项框，通过PHP语言把所提交的信息写入数据库，带着时间参数整个设计流程图如图3-8所示。图3-8 无线公交提醒信息流程图3.3.5 匿名交友（仅限微信）表3-5 匿名交友功能介绍功能描述在平台匿名交友关键技术微信api，sae缓存所需要主要函数及关键类Memcache，ACCESS_TOKEN接口等设计思路主要利用微信平台做为一个类似的中转站，客服功能，使得发送过来的消息能够通
29、过平台去发送到指定同学图3-9 微信匿名交友流程图3.4数据库设计3.4.1 数据库关系图图3-10 数据库关系图3.4.2 数据库设计1.用户帐号密码设计userform存放用户信息，id是用户的编号为主键，自动生成。username是用户称呼，password是用户的密码，email是用户的邮箱，realname是用户的真实姓名， 这几行的内容在注册时必须填写不能为空。regedate是用户注册日期，格式为年-月-日，是自动添加，openid是微信fromusername（具有唯一标识）。表3-6 userform字段类型Null注释idint(11)否主键usernamevarchar(
30、255)否用户passwordvarchar(255)否密码emailvarchar(24)否邮箱realnamevarchar(255)否真实姓名openidvarchar(255)否用户idregedatedate否注册时间教务系统帐号密码设计主要存放用户的教务系统账号和密码，以及主键id和用户的唯一标识openid，表格3-7 User_edu字段类型注释idint(11)主键Iduservarchar(200)用户名passwordvarchar(200)密码Openidvarchar(200)用户id2. 图书馆帐号密码设计表3-8 User_lib字段类型空idint(11)否us
31、ervarchar(200)否passwordvarchar(200)否usernamevarchar(200)否3. 匿名交友数据库设计其中主键是id，与其他表对接的键是openid，time是存储用户参与活动的时间，用在判断用户是否已经过了四十八小时互动，在这里设定是18小时，black是判断是被拉黑，0是被拉黑，1是未被拉黑，默认是1；表3-9 Maker_friend字段类型默认注释idint(11)主键idopenidvarchar(200) 用户idtimevarchar(200)发送时间blackint(1)0是否被拉黑4. 系统实现及测试4.1 主要类设计主要设计如下几个类：C
32、heck_User，User_Edu，User_Lib,Bus，Library_serach，Send_Message，Maker_Friend。每个类都有各自的功能，查询课表成绩，查询公交车等，但 在登录教务系统和图书馆的时候调用Check_User类去检验用户的账号密码的正确与否，而设计到要发送消息的时候即调用Send_Mseeage。关系如下图4-1所示。图4-1 类关系图下面对这几个类进行简要说明：1. User_Edu:用户可以通过登陆之后，直接获取自己的教务系统成绩课表信息，如果未登陆状态，可以直接使用账号密码登陆，调用Check_User验证信息，在线查询信息。包含成绩获取，课表
33、获取，用户验证以及成绩课表匹配等功能。2. User_Lib：图书馆用户功能在登陆的时候调用Check_User_Lib验证图书个人信息，查询个人图书借阅情况，设置图书还书提醒信息，但是图书信息查询不需要登陆，使用AJAX去显示反馈的信息。包含图书信息查询，还书提醒。3. Bus：公交车查询宁波实时公交，反馈到微信客户端，并让用户可以设置自己的到站提醒功能，到站提醒功能包含公交车查询，公交车到站提醒。4. Library_serach包含图书查询。5. Check_User主要是调用图书馆和教务系统信息的验证，通过返回值去说明账号密码是否正确，即模拟登陆是否成功。4.2 关键功能的实现代码4.
34、2.1 User_Edu包含成绩获取，课表获取以及成绩课表匹配等功能。成绩获取：private function grade($jwid,$jwpwd)$cookie_file = tempnam(./temp, cookie);$ch=curl_init(http:/ CURLOPT_FOLLOWLOCATION, 1);curl_setopt($ch, CURLOPT_COOKIEJAR, $cookie_file);$str=curl_exec($ch);$info=curl_getinfo($ch);curl_close($ch);$pattern = /i; 此处省略正则表达式和返回
35、值课表获取：private function kebiao($key) 此处省略模拟登陆过程$key=str_replace(课表,$key);if(empty($key)$i=date(w);if($i=0)$i=7;else$i=$key;$j=$i+1;$week=array(1=星期一,2=星期二,3=星期三,4=星期四,5=星期五,6=星期六,7=星期日);$arr=array($td2$j,$td4$i,$td6$j,$td8$i,$td10$j);foreach($arr as $v)if(!empty($v)$kebiao .= $vn-n;$kebiao=trim($kebi
36、ao);$w=$week$i;4.2.2 Check_User:private function chekc_user($jwid,$jwpwd)此处模拟登陆获取cookie，登陆主页过程$login=_VIEWSTATE=$view&txtUserName=$jwid&TextBox2=$jwpwd&RadioButtonList1=%D1%A7%C9%FA&Button1=&lbLanguage=;$ch=curl_init();curl_setopt($ch, CURLOPT_URL,$login_url);curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);curl_setopt($ch, CURLOPT_POST, 1);curl_setopt($ch, CURLOPT_POSTFIELDS, $login);curl_setopt($ch, CURLOPT_COOKIEFILE, $cookie_file);curl_setopt($ch, CURLOPT_COOKIEJAR, $cookie_file);$str=curl_exec($ch);