微生活”网站设计与开发

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

8、fast in the information ageso, 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 an

9、d students as the core, using the latest internet 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

10、recreation functions such as anonymous friends, 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 obj

11、ect oriented design, the function between 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 des

12、ign, and key code compilation process, and 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;

13、目 录1. 引 言11.1 研究背景11.2 研究目的与意义11.3 研究内容12. 基本技术和理论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设计以及传

15、统ajax和jquery等js库，能够很好的使得网站去切身实际的去满足广大用户的使用。而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，关系数据库管理系统) 应用软件之一，具有分布式数据库和数据仓库功能，将数据库中数据保存到不同的表中，而不

18、是放在一个大仓库中，更好的提高了灵活性，而其所使用的sql语言是用于访问数据库的最常用标准化语言。由于体积小，速度快，总体拥有成本低，又开放源码等特点，因此，一般中小型网站开发都选择mysql作为网站数据库，而搭配php，apache可组成良好的开发环境。图2-1为mysql的可视化图形界面图： 图2-1 数据库可视化图2.2 ajax技术ajax = asynchronous javascript and xml即异步操作的javascript和xml。能够是网页在整个页面不重新加载的情况下能够和服务器交换数据，更新网页部分技术。主要就是创建请求对象，发送请求，获取响应等步骤，从而与服务器交

19、互，包括get和post两种方法去对接。浏览器中添加了负责发送请求的ajax对象，该对象事先会绑定一段事件（js调用）处理函数。用户填写信息点击注册时，会调用ajax对象的方法，发送请求，ajax对象发请求并不会影响页面的存在，所以在ajax对象发送请求的同时，表单页面还可以进行其他的工作。服务器接收到请求后获取数据，处理判断，响应时的数据不再是完整的页面，而是部分数据。当响应提供的部分数据到达客户端时，并不是直接由浏览器展示，事先准备好的事件处理函数接收、解析。部分数据取出来后由javascript代码控制这些数据，更新至页面的某位置。整个过程中，ajax负责发送请求，也负责接受返回的响应，

20、并将响应中的数据更新至页面中主要流程图如图2-2所示图2-2 ajax工作示意图2.3 响应式布局div+css是在静态页面中最常用的前段技术，是web设计的标准，一种网页布局，与之前的表格布局可以完美的实现页面内容与表现相分离。而本文用了简单的响应式设计，集中创建页面的图片排版，智能的根据使用设备进行相应的布局。响应式布局是在2010年提出的，主要是为了适应不同终端，为用户提供一个更加舒适的界面，提高用户体验。因为代码编写需要使网页适应多个终端设备，因此会出现代码量大，加载时间长，又因为涉及到多方面设计，因此很多效果达不到最佳效果。主要的设计思路是通过javascript语句去判断设备的分辨

21、率，从而去加载不同的css样式效果，而与此同时在设定各个参数的时候，采用百分比，或者自动（auto）等参数，能够充分适应界面。主要样式图如图2-3所示。图2-3 自适应样式图3. 基本系统设计 3.1 需求分析3.1.1 系统基本功能需求1. 基本教务系统查询：对接教务系统，结合网页，微信，实现功能主要包括学生成绩，课表等教务信息的一键查询和在线查询。2. 图书信息查询对接学校图书馆系统，获取主要包括个人借书信息，还书时间提醒，以及书籍查询，包括馆藏，出版社等基本信息。3. 无线公交查询和宁波通、市公交系统对接，实现公交实时查询，公交到站提醒登录和匹配对接提醒功能。4. 宁工出行拼车（修改案）

22、拼车信息填写及查询，主要解决学校出行问题，例如东校区来回拼车，市区来回拼车等5. 匿名交友微信平台上学生的匿名交友功能，快速回复等，主要丰富平台的娱乐功能。3.1.2 系统性能需求1.时间特性：系统响应时间足够迅速(<5 s)，能够满足用户要求。2.适应性：在操作方式、运行环境、使用设备改变以及接口改变的场景下，系统需要能够自动适应，有相应的布局调整。3.可使用性： 操作界面简单明了，但对格式和数据类型进行验证，包括对客户端验证和服务端验证，并采用错误友好提醒，提示用户输入正确数据和使用正确的操作方式。4.安全保密性只有合法用户才能登录使用系统，因此对每个用户都有不同等级的设置。对用户名

23、、密码、以及用户相关信息进行加密处理，保证账号信息安全。5.可维护性 采用功能间的低耦合连接，相互之间的数据库主外键连接，使用面向对象进行调用，方便修改操作。系统采用了记录日志，用于记录用户的操作及故障信息，同时本系统采用的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进程，请求结束后该进程

24、才能服务于下一个请求。平台通过模块方式扩展了apache和php的相关功能。但也一些函数和类被限制使用例如函数exec,system等，sqlitedatabase类等。本地测试则使用wamp(windows+apache+mysql+php)环境，而在wampserver安装完成后，通过http:/localhost/打开后可以看到wampserver自带的一个简单的页面，里面有phpinfo、phpmyadmin和sqlitemanager三个工具，能够图形化mysql和网页界面。3.2系统总体架构设计图 3.2.1 设计结构功能图从首页登录之后，可以更具登录帐号密码去访问学校的教务网站，

25、图书馆系统，以及匿名交友等功能，宁波无线公交功能是在未登录状态也可使用，公交提醒功能则需要登录使用。图3-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,v

26、erification_code,check_user登录功能的流程图如图3-4所示。图3-4 登陆功能流程图3.3.2 基本教务系统的查询功能描述教务系统的成绩课表查询等（本学期和所有课表）。关键技术帐号密码验证，模拟登录，正则表达式匹配，放入缓存。所需要主要函数及关键类check_uesr_edu，curl，ereg(pattern, string)等设计思路使用curl模拟登录教务系统，返回到微信和网页端，学生的帐号密码根据openid从数据库查找获取。表3-1 教务系统查询功能介绍从教务系统模拟登录获取教务系统获取cookie如图3-5所示，而整个系统走向如图3-6所示。图3-5 抓取

27、教务系统cookie图图3-6 教务系统模拟登陆示意图3.3.3 图书信息的查询表3-3 图书信息功能介绍功能描述包括个人借书信息，还书时间提醒，书籍查询关键技术图书馆帐号密码验证，模拟（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 无线公交

28、功能介绍功能描述获取实时公交，加入到站提醒功能关键技术h5的自适应网页，get获取公交信息，解析json，ajax技术以及配合微信api的到站提醒功能。所需要主要函数及关键类memcache，bus，send_message等。设计思路发送路线（523）get请求，在获取参数后返回json数据，通过解析用ajax修改站点选项框，通过php语言把所提交的信息写入数据库，带着时间参数整个设计流程图如图3-8所示。图3-8 无线公交提醒信息流程图3.3.5 匿名交友（仅限微信）表3-5 匿名交友功能介绍功能描述在平台匿名交友关键技术微信api，sae缓存所需要主要函数及关键类memcache，acc

29、ess_token接口等设计思路主要利用微信平台做为一个类似的中转站，客服功能，使得发送过来的消息能够通过平台去发送到指定同学图3-9 微信匿名交友流程图3.4数据库设计3.4.1 数据库关系图图3-10 数据库关系图3.4.2 数据库设计1.用户帐号密码设计userform存放用户信息，id是用户的编号为主键，自动生成。username是用户称呼，password是用户的密码，email是用户的邮箱，realname是用户的真实姓名， 这几行的内容在注册时必须填写不能为空。regedate是用户注册日期，格式为年-月-日，是自动添加，openid是微信fromusername（具有唯一标识）

30、。表3-6 userform字段类型null注释idint(11)否主键usernamevarchar(255)否用户passwordvarchar(255)否密码emailvarchar(24)否邮箱realnamevarchar(255)否真实姓名openidvarchar(255)否用户idregedatedate否注册时间教务系统帐号密码设计主要存放用户的教务系统账号和密码，以及主键id和用户的唯一标识openid，表格3-7 user_edu字段类型注释idint(11) 主键iduservarchar(200) 用户名passwordvarchar(200)&#

31、160;密码openidvarchar(200) 用户id2. 图书馆帐号密码设计表3-8 user_lib字段类型空idint(11)否 uservarchar(200)否 passwordvarchar(200)否 usernamevarchar(200)否 3. 匿名交友数据库设计其中主键是id，与其他表对接的键是openid，time是存储用户参与活动的时间，用在判断用户是否已经过了四十八小时互动，在这里设定是18小时，black是判断是被拉黑，0是被拉黑，1是未被拉黑，默认是1；表3-9 maker_friend字段类型默认注释idi

32、nt(11)  主键idopenidvarchar(200)  用户idtimevarchar(200)  发送时间blackint(1)0  是否被拉黑4. 系统实现及测试4.1 主要类设计主要设计如下几个类：check_user，user_edu，user_lib,bus，library_serach，send_message，maker_friend。每个类都有各自的功能，查询课表成绩，查询公交车等，但 在登录教务系统和图书馆的时候调用check_user类去检验用户的账号密码的正确与否，而设计到要发送消息的时候即调用

33、send_mseeage。关系如下图4-1所示。图4-1 类关系图下面对这几个类进行简要说明：1. user_edu:用户可以通过登陆之后，直接获取自己的教务系统成绩课表信息，如果未登陆状态，可以直接使用账号密码登陆，调用check_user验证信息，在线查询信息。包含成绩获取，课表获取，用户验证以及成绩课表匹配等功能。2. user_lib：图书馆用户功能在登陆的时候调用check_user_lib验证图书个人信息，查询个人图书借阅情况，设置图书还书提醒信息，但是图书信息查询不需要登陆，使用ajax去显示反馈的信息。包含图书信息查询，还书提醒。3. bus：公交车查询宁波实时公交，反馈到微信

34、客户端，并让用户可以设置自己的到站提醒功能，到站提醒功能包含公交车查询，公交车到站提醒。4. library_serach包含图书查询。5. check_user主要是调用图书馆和教务系统信息的验证，通过返回值去说明账号密码是否正确，即模拟登陆是否成功。4.2 关键功能的实现代码4.2.1 user_edu包含成绩获取，课表获取以及成绩课表匹配等功能。成绩获取：private function grade($jwid,$jwpwd)$cookie_file = tempnam('./temp', 'cookie');$ch=curl_init("cur

35、l_setopt($ch,curlopt_returntransfer,1);curl_setopt($ch, curlopt_followlocation, 1);curl_setopt($ch, curlopt_cookiejar, $cookie_file);$str=curl_exec($ch);$info=curl_getinfo($ch);curl_close($ch);$pattern = '/<input type="hidden" name="_viewstate" value="(.*)" />

36、/i' 此处省略正则表达式和返回值课表获取：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&

37、#39;=>"星期四",'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($kebiao);$w=$week$i;4.2.2 check_user:private function che

38、kc_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, c

39、urlopt_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);curl_close($ch);if(preg_match("/xs_main/",$str)return 1;elsereturn 0;4.2.3 user_lib：包含图书信息查询，还书提醒。个人借阅信息：pri

40、vate function library_info($login_url,$username,$password) /拿图书系统cookie$post1= 'referer='.$login_url.'&&logintype=callno&&username='.$username.'&&password='.$password;/._viewstate=ddw1mjq2odmxnzy7oz5hsx7i9bouktx%2fpf18wou9lwttww%3d%3d&textbox1=2011

41、30101004&textbox2=3187116&radiobuttonlist1=%d1%a7%c9%fa&button1=+%b5%c7%c2%bc+$ch=curl_init("8:8080/pages/ucenter/checklogin.jsp");curl_setopt($ch, curlopt_post, 1);/显示图书系统主页$ch=curl_init($login_url);curl_setopt($ch,curlopt_cookiefile, $cookie_file);$header='

42、referer:'.$login_url.'ucenter/login'/获取图书馆：我的首页$ch1=curl_init($login_url.'ucenter/mylibrary/do.jsp?type=index&tag=index&subtag=subindex');curl_setopt($ch1,curlopt_cookiefile, $cookie_file);preg_match_all('|<td class="title">(.*?)</td>|i',$dat

43、a,$m);for ($i = 0; $i < sizeof($m1); $i=$i+5) preg_match('|bank">(.*?)</a>|i',$m1$i,$n);$m1$i=$n1;/打印return $m;4.2.4 bus：包含公交车查询，公交车到站提醒，公交车查询（已正向为例）。此处是一个bus的php文件，已json格式传递值需要解析。<?php/ 用名字来填充数组$bus_line=$_get"q"$desc=$_get"a"if($desc=1)$transtr2=file

44、_get_contents($url);/读入文件$bus_z = explode('geo_lat',$transtr2);foreach($bus_z as $item) $c =$c.$item;if (preg_match("/end_station/", $item) break;if ($hint = "") $response="没有这个公交车" else $response=$hint; 4.2.5 library_serach包含图书查询。 $content = $_get'content&#

45、39;$login_url='8:8080/opac/search?tag=search&subtag=searchresult&gcbook=yes&viewtype=view&viewtype=view&q='.$content.'&corename=gcall&aliasname=%e5%85%a8%e9%83%a8%e9%a6%86%e8%97%8f&search=&q3=%e8%ae%ba%e8%af%ad%2b%2b&su=&field=ti

46、tle'$html = file_get_contents($login_url); echo $html; 4.2.6 前端设计主要技术公交提醒功能输入部分的ajax代码（部分）：<script>function change(vae) while (div.haschildnodes() div.removechild(div.firstchild);if (window.xmlhttprequest) xmlhttp = new xmlhttprequest(); else xmlhttp = new activexobject("microsoft.xml

47、http");xmlhttp.onreadystatechange = function() if (xmlhttp.readystate = 4 && xmlhttp.status = 200) var strs = new array();strs = xmlhttp.responsetext.split(" ");document.getelementbyid('fang').innerhtml = strs0 + " 开往 " + strsstrs.length - 2;for (var i = 0; i

48、 < strs.length; i+) var para = document.createelement("option");var node = document.createtextnode(strsi);para.appendchild(node);var element = document.getelementbyid("bus_wait");element.appendchild(para);xmlhttp.open("get","./return.php?q=" + vv + "&a=" + vae,true);xmlhttp.send();</script>4.2.6响应设计判断代码（部分）：a.加入一行viewport元标签<meta name="viewport" content="width=device-width, initial-scale=1" />b.不使用绝对宽度（使用百分比或者自动即auto）width: xx%;或者width:auto;c.相对字体大小body font: normal 100% helvetic