【《学院网站设计与实现》9300字】

.3结构化程序流程结构化程序流程，是指在模块之间的功能和操作，主要是系统设计部分提出的需求和设计，进行详细的功能模块编码，进而完成各个功能。传媒学院网站建设主要分为三个大板块：网站管理员、用户管理员、模板设计。网站管理员：网站的管理者，可以对网站进行维护、完善，负责管理用户信息，功能使用。用户管理员：网站的使用者，可以在网站上，进行登录、注册，同时可以浏览网站，但不能对其进行修改模板设计：也就是板块，可以对网站内容进行增、删、改，也就是内容的发布和删除，为用户提供浏览内容。3.4主要功能实现及预期效果3.4.1导航管理要求网站在导航上面，简单明了，有好导航设计，对提高用户体验至关重要，简单直观的导航不仅能提高网站易用性，还能吸引到更多的用户。点击不同的导航，可以精准的跳到导航内容，是很必要的，也是避免不必要的用户观览错误和使用感的迷茫，所以这一方面是需要很严谨的，如下图3-4所示。图3-4导航栏图片3.4.2文章展示管理为了便于文章的发布、修改和删除，在后端，连接数据库，可以直接发送文章，文章的展示效果也很关键，在传媒院网站的建设中，我主要运用到了两种方式，第一种是图片外加标题为一个小板块，点击这个小板块，可以跳转到详细的文章内容中；第二种则是很直观的一种方式——标题，直接点击标题，进行跳转。如果普遍都是图片加标题的链接方式，是很难去有效的查询信息，也是比较浪费时间的一种方式，所以适合于文字或者内容较少的使用。在后台发布的时候，可以添加多张图片，也可以添加封面图片，对文字的排版以及大小、颜色进行更改。3.4.2.1预期效果可以同轨内容管理进行查看发布的信息，输入关键词和板块，点击搜索可以查看到不同板块的发布内容，如下图3-5所示。图3-5后台添加的展示点击添加内容，输入标题、简介，可以在前端的标题中显示，输入正文，通过点击文字编译器，对文字可以进行编辑，加粗，加大，也可以添加图片进行展示，选择类型，添加到不同板块中，如下图3-6所示。图3-6后台展示新建图片校园概括主要介绍的是学院简介、师资力量、教学条件和创新教育，突出学院的历史发展和科技创新，如下图3-7所示。图3-7校园概括展示图片通知公告，不涉及三级页面，直接显示通知内容，公告大多出现都是简洁方式，所以也不需要过于复杂的展现，简单清晰明了即可，如下图3-8通知公告展示图片所示。图3-8通知公告展示图片热点新闻，点击了解更多，跳转至三级页面，一般新闻都有标题，内容，图片，大多都是长篇大论，所以相对于通知公告会更加得长篇幅，所以跳转至下一页会更加方便阅读，如下图3-9所示的前端热点新闻图片。相同的，学子光谱，也会涉及到内容过长，图文显示的，所以也是相同的原理，跳转至下一级页面展示，并且可以在后台的文字编辑器上加入图片，调节大小，调节字体等。如下图3-10学子光谱展示图片显示。图3-9热点新闻图片图3-10学子光谱展示图片红色天地以标题展示的方式，点击标题跳转下一页，如下图3-11所示。图3-11红色天地展示图片招生就业，点击图片或者文字可以跳转至下一页，每行只能排列三个，网页的长度随着内容的增多而加长，内容以招生为主，宣传为辅，学校制定招生政策，对学生进行就业指导，如下图3-12所示。图3-12招生就业展示图片全景展示，是一个720°的动态展示，他的原型是一个正方体，通过转动正方体来实现720°的旋转展示，图片是站在明德楼前面的石子路上拍的，由于手机只能全景180°的拍照，所以后期进行了PS，对图片进行裁剪，以一个点为基准，分割，并且进行了颜色的调整，由于不同角度的阳光不同，所以要对颜色进行调整，如下图3-13所示。图3-13全景展示图片3.4.3关键代码展示3.4.3.1调用分页展示//调用分页laypage.render({elem:'demo2',limit:data.per_page,count:data.total//数据总数，从服务端得到,theme:'#1E9FFF',jump:function(obj,first){//obj包含了当前分页的所有参数，比如：console.log(obj.curr);//得到当前页以便向服务端请求对应页的数据。console.log(obj.limit);//得到每页显示的条数通过这段代码，调节页面展示条数，如果当前页面需要展示的内容过多，会分成两页进行展示，向服务器请求对应的数据，得到每页显示的条数。3.4.3.2标题个数展示success:function(data){ lethtml=[],info=data.data;varnum=0if(info.length<6){num=info.length}else{num=6}通过这段代码，展示的是主页上标题栏的数量为6，通过更改数字6从而进行数量上面的更改，如果想将展示条数改为4，则需要将代码中的两个数字6改为4，如下图3-14标题个数展示图片所示。图3-14标题个数展示图片3.4.4.1VR制作根据六个面的信息，新建出六个对象放入场景中，新建的六个对象对其位置和角度进行规定，分别是四个侧面、顶面和底面，构成一个正方体，从而制作出VR的框架。camera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);scene=newTHREE.Scene();varsides={position:[-512,0,0],//位置rotation:[0,Math.PI/2,0]//角度},{position:[512,0,0],rotation:[0,-Math.PI/2,0]},同时对其像素进行定义，规定的是1026的像素，多出来的2像素，是用于闭合正方体，从而得到一个完整的VR，展示效果如图3-15所示。for(vari=0;i<sides.length;i++){varside=sides[i];varelement=document.getElementById("surface_"+i);element.width=1026;varobject=newTHREE.CSS3DObject(element);object.position.fromArray(side.position);object.rotation.fromArray(side.rotation);scene.add(object);}图3-15VR展示图4、网站测试4.1本机测试在本机上，安装Wampserver，然后双击Wampserver64，等待其指示标灯由红色未开启，变到黄色部分开启，再到绿色完全开启，点击图标，进入到Localhost中，输入网址，然后复制链接到GoogleChrome浏览器中，刷新页面，传媒学院的网站就会显示出来如下图4-1、4-2所示图4-1wampsever主页图4-2wampsever打开网页点击Wampserver绿色启动图标，打开phpMyAdmin4.8.3,输入用户名root，密码为空，点击执行，如下图4-3、4-4所示。图4-3phpMyAdmin4.8.3图4-4phpMyAdmin登陆后，进入到数据库展示页面，可以看到数据库展示内容，如下图4-5就是我的毕设数据库展示内容。图4-5phpMyAdmin展示内容4.2外网测试将传媒学院网站上传到服务器以后，可以对网站的每个性能情况都进行检测，同时记录检测的结果。4.2.1性能测试连接速度测试，分别让用户用Wifi和手机热点连接网络，测试不同情况下，网站的显示率，相对于Wifi来说，手机热点显示网站比较慢，加载图片和VR都需要时间，测试时间是否过长，如果时间过长，可以考虑对网站内容的压缩。4.2.2功能测试打开首页后，每个按钮挨个点击，并测试，记录问题，书写一个bug表，同时记录不同人员测试网站时的bug，以及提出的优化，通过正确的账户密码进行登录，然后测试正确用户名错误密码登录等，一个问题通过不同方式进行测试，以正例反例的方式记录。 如果有问题，可以及时进行修改，再而进一步测试，最终发布上线。4.3存在问题及解决措施以下是网站开发所遇到的问题，主要有以下4点，如下表4-1所示。表4-1网站开发过程遇到的问题存在问题错误原因分析解决的措施js特效的显示不成功没有进行浏览器兼容转换浏览器语法错误由于少写引号、分号、括号等造成语句不齐全容易修正MySQL连接错误数据库书写不正确重新检验，根据代码错误提示，找到并修改运行错误图片不在同一文件夹下将图片挪至文件夹中，并更改网站上的图片地址名

参考文献[1]赵学铭,叶颖,王茜.基于HTML5交互式移动学习平台的设计与实践.黑龙江科技信息,2017：20-41.[2]未来科技著.CSS3+DIV网页样式与布局从入门到精通[M].水利水电出版社，2017：15-27.[3]左兆丰.Java嵌入式数据库程序的开发[J].电脑编程技巧与维护,2020(01):101-103.[4]胡菘.Dreamweaver完美网页设计[M].中国青年电子出版社,2010.5[5]朱敏.JavaScript在HTML中的应用探讨[J].科技视界，2016：22-41.[6]SteveFulton著.HTML5canvas[A].东南大学出版社，2014:18-78.[7]张山.计算机软件工程中的数据库编程技术研究[J].无线互联科技,2020,17(03):156-157.[8]丁月光、孙更新、闫吉辉编著，《PHP+MySQL动态网站开发》，清华大学出版社，2017：47-55.[9]陈芳.基于Web的网络数据库安全技术分析[J].无线互联科技,2019,16(22):23-24.[10]W.JasonGilmore.BeginningPHPandMySQLThirdEdition[M].北京:人民邮电出版社,2009：12-47.[11]LarryUllman.PHP6andMySQL5forDynamicWebSitesVisualQuickProGuide[M].北京:人民邮电出版社,2008：24-26.[12]LukeWelling,LauraThomson.PHPandMySQLWebDevelopmentFourthEdition