【实训项目】传道学习助手APP设计

1.设计摘要

跨入21世纪以来,伴随着时代的飞速发展,国民对教育的重视度也有了进一步的提升。我们不难发现虽然很多学习内容有学习资料或者答案,但是这些内容并不能达到让所有求学的人对所需知识进行完全地理解与掌握。所以我们需要进行提问与求助。那么一款可以帮助求学者进行灵活自助的学习类APP也就应运而生了,我们希望我们这款APP可以为求学者提供精准的帮助与服务,同时也为学习助手提供相应的报酬,通过我们这款APP可以使求助者能够真正达到所学即所会的目的。

我们认为我们这款APP的目的是为了帮助求学者而建立的合理的付费服务平台,并使得求助者获得真正的帮助,因为使玄奘成为唐僧的不仅仅是那一卷卷经书,更是那一条山也迢迢水也迢迢的取经之路,我们认为我们的APP就是为了达到帮助求学者可以顺利走完这条“取经路”而研发的。

2.设计的模式及产品目标

对于庞大的有求助需求的人群是我们主要的用户,为了保证这类用户对所需知识想获得实时解答的强烈需求是我 们移动端开发的主要目标。能为用户提供:题目解答、知识点扫盲、学课串讲,针对不同答案力求满足日益提高的消费者需求,提供更舒适、更明确,更便捷的学习服务。

对于学习助手,我们需要对其进行身份认证和并对其进行搜索排名竞价。学习助手可以帮助求助者解决问题,传道授业解惑,并获得相应的报酬,这样既可以满足求助者的需求,也可以使得学习助手通过知识来获得属于自己的相应报酬。

“传道”APP采取线上交流和支付,线上提供服务的模式,即O2O模式。对于用户来说“传道”提供给用户可以即时解决学习方面问题的线上服务平台,对其学习方面的问题进行解决,同时学习助手可以通过知识来赚取相应的报酬。对于不同的需求,我们提供不同的服务,分类后力求满足客户的需求。

3.设计的创新与优势

相比于教师现场讲题,传道在线学习可以做到:随时随地进行,不受时间、空间的限制。教育资源公平是当今教育难关而传道允许各地的同学接收同样高效的教育,从而保证了素质教育的公平合理相比于应用程序搜题如作业帮,小猿搜题等带来的不理解思路和后续讲解,传道提供资深教授解答,思路清晰。而相比于线下辅导班,传道设备成本转化为学费节省了差旅、教室等大量的费用,这就意味着相同的成本可以学习更多的东西。

 传道学生端口实现了课程自由 ,允许同学自主选择课程而非按照学校或政府大纲指定课程。且传道学生端的可重复性帮助同学学习重难点内容,通过反复重学,反复思考,来帮助彻底的理解和掌握。 更好的复习和巩固所学的知识。 避免在课堂学习中容易出现的“学过就忘的问题”。 

传道教师端允许老师创造在非上班时间的额外收入,自由的接收模式保证碎片化的时间得以利用且休息时间不会被意外打扰。

中后期当参与教师端的老师足够多,师资力量足够强大时学生甚至新手老师对于传道的粘性将极高,如此在原先基础上实时客户和聚类分析以及广告推送将目标精准,效益极高

4.项目的可行性分析

设计思路:我们主要思考到面对面授课服务的平台的空缺,从而打造这样一个平台。

技术可行性:对于app的开发,市场上有十分成熟的技术,开发流程也趋于规范。各种app开发接口也较为成熟。

法律可行性:对于此软件,只要不造成信息泄露,是完全合法的。

5.项目的需求分析

软件的设计主要是解决在学习时得不到资料,得不到解答,得不到思路清晰的解题方式。我们的软件切入了这些问题,并且给于了一个对于参考书的售卖和租赁功能。我们的软件主要切入了各个年龄段的需要,但是我们主要负责的人群是大学生。

基于大学生复习的突击性以及短期性,我们提供了交流平台。同时,每个人拥有自己的空间,这也符合了大学生的需要。

该app的设计既满足了大学生突击复习却无从下手的问题,提供了一个与高手近距离接触的平台,还是参考书租赁的宝贵平台。

传道的本质是一个一次性的家教服务平台,它既满足了广大学生获取知识的需要,也使得内容分享者们能获取一定的利润。

6.项目的总体设计

  • 预约解答问题方面:就是对服务的预订功能,用户可以依据自己的需要,来定制自己想要的课程,并按照预定的时间表接受服务。同时还有限时打折的课程供用户选择。
  • 个人页面,在这里,用户可以通过注册登录进行app的使用,并可以参与热门话题的讨论和对其他你感兴趣的人建立联系。

7.项目的设计与实现

7.1用户注册与登录

用户注册和登录我们使用了servlet,Ajax与jdbc,使用mysql作为数据库,用navicat premium作为数据库的管理工具。用户可以自己注册账号,然后登入自己的个人主页。

7.2主页面

主页面提供了丰富多彩的课程以及名目繁多的限时打折课程,为选课的人提供了丰富而多样的选择。主要利用apicloud开发工具,来设计前端页面。提供服务详情。最后我们调用了mooc的接口,给用户提供了更加丰富的选择。

7.3广播页面

展示系统消息,提供第一手的精品课程。

 7.4广场页面

展示当今最热的学习趋势,做一个有方向的好学的大学生。用户可以在广场中表达自己的想法并与学友们一起互动。

 7.5个人主页

展示个人的高光时刻,分享学习的点点滴滴,用户的个人主界面。

7.6购物车

显示用户待完成付款的服务以及待使用的服务。 

8.项目的运行与测试

8.1项目测试情况

(1)页面的跳转不是我们所需要看到的,例如:广场页面对人点关注时,原本应跳转至个人的页面,而不是主页面。
原因:链接出错。

解决方案:修改链接。

(2) servlet的连接出错,导致用户无法注册或登录。

原因:xml文档出错。

解决方案:修改xml文档。

(3)apicloud的打包功能受限,无法生成apk文件。

原因:用户已经无权限对项目进行操作和打包。

解决方案:换另一台电脑进行打包。

(4)数据库无法存储图片,也无法对中文行进行修改和删除。

原因:数据库的编码问题,和项目的规模受限。

8.2软件测试方法

第一步:对要执行测试的产品/项目进行分析,确定测试策略,制定测试计划。该计划被审核批准后转向第二步。测试工作启动前一定要确定正确的测试策略和指导方针,这些是后期开展工作的基础。只有将本次的测试目标和要求分析清楚,才能决定测试资源的投入。

第二步:设计测试用例。设计测试用例要根据测试需求和测试策略来进行,进度压力不大时,应该设计的详细,如果进度、成本压力较大,则应该保证测试用例覆盖到关键性的测试需求。该用例被批准后转向第三步。

第三步:如果满足“启动准则”(EntryCriteria),那么执行测试。执行测试主要是搭建测试环境,执行测试用例。执行测试时要进行进度控制、项目协调等工作。进行单元测试。

第四步:提交缺陷。这里要进行缺陷审核和验证等工作。

第五步:进行总体测试,消除软件缺陷。通常情况下,开发经理需要审核缺陷,并进行缺陷分配。程序员修改自己负责的缺陷。在程序员修改完成后,进入到回归测试阶段。如果满足“完成准则”(ExitCriteria),那么正常结束测试。

第六步:撰写测试报告。对测试进行分析,总结本次的经验教训,在下一次的工作中改正。

9.项目组成员

产品经理:成员1

前端:成员2

后端:成员3

Ui设计:成员4

测试调试:成员5

10.心得体会

成员1心得体会:我是我们组本次课程设计的组长,参与本次课程设计的全部开发流程,首先我与组员们一起积极探讨我们本次课设所准备开发的项目,在确认立项后,首先我和我的团队确定界面大概的布局,与大致所需要的前端设计模板。在这之后我们进行了明确的分工,之后我在本次课设中主要负责了整个项目代码方面的一些问题,以及整个项目的优化设计。在前端设计过程中,我协助我的组员在html模板代码上进行了改进再加工。之后在后端设计方面,首先是注册界面的servlet的设计与Ajax的使用,从而达到同步的效果,之后重新对数据库的连接进行了重新设置,重新编写了Dbutil,使之可以与我的MySQL相连,之后编写了注册界面的HTML与注册功能相对应的Servlet。

通过本次课设,我对之前所学的关于web开发的知识有了更加深入理解,在课设过程中我同时新接触了ajax这项技术,并且初步了解了一些安卓开发的基本尝试。本次课设让我受益匪浅,同时我也感谢我的组员与我共同努力,互相帮助,顺利的完成了本次的课程设计。

成员2心得体会:我们通过这次的课设大致地对于我们这个时代的互联网产品的开发流程有了一个直观的体会,我在其中负责的是前端的设计和编写的部分。在第一个星期,我们主要学习了APIcloud的运用,这是一个非常方便初学者使用的软件,快速上手。当然在第一周对软件的使用也是走了一点弯路,由于对APP的云端编译流程不熟悉,我们也是耗费了不少时间,在李老师的耐心手把手指导下,我们最终能够顺利云编译和下载了。

接下来我就进行了前端的页面编写,经过努力之后,我可以完成其中的前端页面设计,经过仔细的调试,我们最终达到了预期的目标,做出了界面排版令人舒适,同时具有一定功能实现的页面。

成员3心得体会:在这次课设中,我们对手机软件的开发做了一个入门,也知道了app也是基于web的一种开发项目。在这两周的时间内,我们学习了apicloud的接口,再次学习了web的一些知识,包括前端编写和后台编写。

在这两周的时间内,我们见识了不少闪光的点子,我们都是适合创业的互联网的新时代人才。

成员4心得体会:本次课程设计是我第一次接触安卓APP的开发,算是一次实践上手的入门经历,在本次课程设计中,我负责了一部分前端代码的修正,以及软件测试的部分,并且在最后汇演过程中,我负责了PPT设计与演讲部分,经过本次课程设计,我对安卓开发有了进一步的了解,同时我也对之前所学的javaweb有了进一步的巩固。

在这两周时间里,我与其他同组同学共同完成了本次的课设,让我受益匪浅。

成员5心得体会:本次课设主要是使用API cloud进行一个简易手机APP的制作。在本次课设中,我主要负责界面以及用户需求分析等相关部分。通过本次课设,我对于设计一款APP的主要流程以及设计方向有了一定的了解,而且对于APP开发平台API cloud也有了一定的了解。此次课程设计不仅使用了API cloud 还使用了java web以及数据库工具MY SQL。另外,本次课设让我懂得了团队合作的重要性,看似十分复杂的APP设计一旦拆分成多个部分,便变得很轻松,而且在完成各自部分的同时还可以与自己的队友一起讨论功能完善以及功能实现方面的问题。

11.核心代码

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><title>APP</title><link rel="stylesheet" type="text/css" href="../../css/api.css" /><link rel="stylesheet" type="text/css" href="../../css/common.css" /><style>#main{padding: 0;}/*导航栏4个按钮*/#nav_top{padding-top: 130px;margin: 0 0.6em 1em 0.6em;}#nav_top .nav_top_list{background-color: #EEEEF0;overflow: hidden;}#nav_top .nav_top_li{background-color: #EEEEF0;border-radius: 3px;float: left;width: 25%;}#nav_top .nav_top_li:active,#nav_top .nav_top_li.tap-active{background-color: #999999;}#nav_top .text{float: left;text-indent: 6px;color: #58616D;font-size: 0.75em;line-height: 2em;}#nav_top .nav_top_li .icon{float: left;margin-left: 7px;width: 1.5em;height: 1.5em;}#nav_top .score .icon{background: url(../../res/img/index_icon_score.png) center center no-repeat;background-size: 100% 100%;}#nav_top .recharge .icon{background: url(../../res/img/index_icon_recharge.png) center center no-repeat;background-size: 100% 100%;}#nav_top .lottery .icon{background: url(../../res/img/index_icon_lottery.png) center center no-repeat;background-size: 100% 100%;}#nav_top .ju .icon{background: url(../../res/img/index_icon_ju.png) center center no-repeat;background-size: 100% 100%;}
/*导航栏4个按钮 end*/
/* home页具体内容 */.headlines{width: 100%;padding-top: 1em;background-color: #FFFFFF;}.container .title{text-indent: 13px;color: #58616D;width: 100%;display: block;}.container .brief{text-indent: 13px;font-size: 0.7em;color: #BDBDBD;width: 100%;margin: 6px 0 3px 0;display: block;}.headlines img{width: 100%;display: block;}.brand{background-color: #FFF;}.brand:after{clear: both;content: '';display: block;}.brand .brand_left{float: left;width: 46%;padding-top: 1em;}.brand .brand_left img{width: 100%;display: block;}.brand .brand_right{float: left;width: 54%;padding-top: 1em;}.brand .brand_right .title{text-indent: 0;width: 100%;display: block;}.brand .brand_right .brief{text-indent: 0;width: 100%;color: #58616D;display: block;}.brand .brand_right .img_box{width: 100%;margin-top: 20px;}.brand .brand_right .img_box:after{content: '';display: block;clear: both;}.brand .brand_right .img_box img{width: 46%;float: left;margin: 2px;}.count_down{background-color: #FFF;margin-top: 0.75em;margin-bottom: 0.75em;}.count_down:after{content: '';display: block;clear: both;}.count_down .left{float: left;width: 33%;padding-top: 1em;}.count_down .center{float: left;width: 33%;}.count_down .center img{width: 100%;display: block;}.count_down .right{float: left;width: 33%;padding-top: 1.5em;}.count_down .right .title{font-size: 0.7em;color: #58616D;display: block;}#counting_box{padding-left: 13px;}#counting_box li{float: left;font-size: 0.7em;}#counting_box .t{background-color: #333333;border-radius: 2px;color: #FFF;width: 0.75em;height: 1.3em;line-height: 1.4em;text-align: center;margin-right: 1px;text-decoration: line-through;}
/*会场*/.venue{width: 100%;padding-top: 1em;background-color: #FFFFFF;}.venue img{width: 100%;display: block;}.venue_big_box{width: 100%;padding-bottom: 1em;overflow-x: scroll;overflow-y: hidden;}.venue_big_inner{}.venue_big{padding-top: 1em;background-color: #FFFFFF;}.venue_big.v1{margin-left: 0;}.venue_big img{width: 100%;display: block;}
/*会场end*/
/*中间大广告*/.big_ads{margin-top: 0.75em;margin-bottom: 0.75em;}.big_ads.last{margin-top: 0;}
/*中间大广告end*/
/*行业精选*/.industry_select{}.industry{background-color: #FFF;margin-bottom: 0.75em;}.reload_header{margin-top: 0.5em;margin-bottom: 0.5em;}.reload_header .title{float: left;width: auto;}.reload_header .reload{float: right;color: #BDBDBD;border-radius: 3px;text-align: center;width: 5em;font-size: 0.8em;height: 1.5em;line-height: 1.4em;}.reload_header .reload .reload_icon{width: 1em;height: 1em;display: inline-block;background: url(../../res/img/tm_home_refresh_small_normal.png) center center no-repeat;background-size: 100% 100%;vertical-align: baseline;}.reload_header .reload:active,.reload_header .reload.tap-active{background-color: #666666;}.reload_header .reload:active .reload_icon,.reload_header .reload.tap-active .reload_icon{background: url(../../res/img/tm_home_refresh_small_press.png) center center no-repeat;background-size: 100% 100%;}.industry_left{padding-top: 1em;width: 50%;float: left;}.industry_right{width: 50%;float: left;}.industry_right img{width: 100%;display: block;}
/*行业精选end*/
/* 更多惊喜 */.more{}.more_unit{background-color: #FFF;margin-bottom: 0.75em;}.more_unit .img_box{margin: 0.75em auto;}.more_unit img{width: 100%;display: block;}.more_unit .price{text-indent: 0.75em;color: #FF4450;margin-bottom: 8px;}
/*更多惊喜 end*/
/* home页具体内容 end */</style>
</head>
<body><div id="wrap"><div id="main"> <!-- 轮播图 --><div id='slider' class='swipe'><div class='swipe-wrap'><div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="常微分方程" onclick="toDetail(this);"><img src="../../image/indexad1.png" alt=""></div><div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="刑法" onclick="toDetail(this);"><img src="../../image/indexad5.png" alt=""></div><div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="俄语语法入门" onclick="toDetail(this);"><img src="../../image/indexad4.png" alt=""></div><div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="云计算与大数据" onclick="toDetail(this);"><img src="../../image/indexad2.png" alt=""></div><div class="swipe-box" tapmode="tap-active" data-url="http://h5.m.taobao.com/channel/act/other/newbook.php" data-title="生物细胞学" onclick="toDetail(this);"><img src="../../image/indexad3.png" alt=""></div></div><div id="title-box"><!-- <span id="title-box-text">一周电影推荐《移动迷宫》</span> --><ul id="title-box-ul"><li class="active"></li><li></li><li></li><li></li><li></li></ul></div></div><!-- 轮播图 end --><!-- 上方导航栏 --><div id="nav_top"><ul class="nav_top_list"><li class="nav_top_li score" tapmode="tap-active" data-url="comming_soon.html" data-title="优惠" onclick="toDetail(this);"><i class="icon"></i><span class="text">优惠券</span></li><li class="nav_top_li recharge" tapmode="tap-active" data-url="comming_soon.html" data-title="充值" onclick="toDetail(this);"><i class="icon"></i><span class="text">充值</span></li><li class="nav_top_li lottery" tapmode="tap-active" data-url="comming_soon.html" data-title="限时打折" onclick="toDetail(this);"><i class="icon"></i><span class="text">限时打折</span></li><li class="nav_top_li ju" tapmode="tap-active" data-url="comming_soon.html" data-title="拼课" onclick="toDetail(this);"><i class="icon"></i><span class="text">拼课</span></li></ul></div><!-- 上方导航栏 end--><!-- 下方详情 --><div class="container"><div class="headlines sp1_3" tapmode="tap-active" data-url="http://m.tmall.com/channel/act/315/tmall-headlines_2014/11/19.php" data-title="天猫头条" onclick="toDetail(this);"><span class="title">今日关注</span><span class="brief">人工智能</span><img src="../../image/index_img_headlines.png" alt=""></div><div class="brand sp2_3"><div class="brand_left" tapmode="tap-active" data-url="http://brand.tmall.com/mobilestreet/index.htm" data-title="品牌街" onclick="toDetail(this);"><span class="title">精品课</span><span class="brief">听懂才是精品</span><img src="../../image/index_img_brand.png" alt=""></div><div class="brand_right"><span class="title">&nbsp;</span><span class="brief">我关注的才是good</span><div class="img_box"><img src="../../image/1.jpeg" alt="" tapmode="tap-active" data-url="comming_soon.html" data-title="敬请期待" onclick="toDetail(this);"><img src="../../image/2.png" alt="" tapmode="tap-active" data-url="comming_soon.html" data-title=“敬请期待“ onclick="toDetail(this);"><img src="../../image/3.png" alt="" tapmode="tap-active" data-url="comming_soon.html" data-title="敬请期待" onclick="toDetail(this);"><img src="../../image/4.png" alt="" tapmode="tap-active" data-url="comming_soon.html" data-title="敬请期待" onclick="toDetail(this);"></div></div>                  </div><div class="count_down sp1" tapmode="tap-active" data-url="http://page.m.tmall.com/myy/myy_cjy.html" data-title="喵一眼" onclick="toDetail(this);"><div class="left"><span class="title">限时打折</span><span class="brief">精选辅导限时预约</span><ul id="counting_box" class="clearfix"><li class="h1 t">0</li><li class="h2 t">0</li><li class="colon">:</li><li class="m1 t">2</li><li class="m2 t">5</li><li class="colon">:</li><li class="s1 t">0</li><li class="s2 t">0</li></ul></div><div class="center"><img src="../../image/ico.png" alt=""></div><div class="right"><span class="title">高质量网课</span><span class="brief">24小时整点更新</span></div></div><div class="industry_select clearfix"><div class="sp1 reload_header"><span class="title">精选课程</span><span class="brief">   </span><!-- <span class="reload"><i class="reload_icon"></i>换一组</span> --></div><!-- 行业精选 --><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="Notexist2.html" data-title="语文" onclick="toDetail(this);"><div class="industry_left"><span class="title">语文</span></div><div class="industry_right"><img src="../../image/index_img_i1.png" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="demo1.html" data-title="数学" onclick="toDetail(this);"><div class="industry_left"><span class="title">数学</span>         </div><div class="industry_right"><img src="../../image/pos4.PNG" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="demo2.html" data-title="英语" onclick="toDetail(this);"><div class="industry_left"><span class="title">英语</span></div><div class="industry_right"><img src="../../image/pos5.PNG" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="demo3.html" data-title="计算机相关" onclick="toDetail(this);"><div class="industry_left"><span class="title">计算机相关</span></div><div class="industry_right"><img src="../../image/pos.PNG" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="Notexist2.html" data-title="物理" onclick="toDetail(this);"><div class="industry_left"><span class="title">物理</span></div><div class="industry_right"><img src="../../image/index_img_i5.png" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="Notexist2.html" data-title="地理" onclick="toDetail(this);"><div class="industry_left"><span class="title">地理</span></div><div class="industry_right"><img src="../../image/index_img_i6.png" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="Notexist2.html" data-title="心理学" onclick="toDetail(this);"><div class="industry_left"><span class="title">心理学</span></div><div class="industry_right"><img src="../../image/index_img_i7.png" alt=""></div></div><div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="Notexist2.html" data-title="马克思主义" onclick="toDetail(this);"><div class="industry_left"><span class="title">马克思主义</span></div><div class="industry_right"><img src="../../image/index_img_i8.png" alt=""></div></div></div></div><!-- 更多惊喜 --><div class="more clearfix"><div class="sp1 reload_header"><span class="title">精选课程</span><span class="reload" tapmode="tap-active" onclick="changeGroup();"><i class="reload_icon"></i>换一组</span></div><div class="more_unit sp1_2" tapmode="tap-active" data-url="detail3.jsp" data-title="计算机网络" onclick="toDetail(this);"><div class="img_box"><img src="../../image/pos.PNG" alt=""></div><span class="price">¥50.0</span></div><div class="more_unit sp1_2" tapmode="tap-active" data-url="Notexist.html" data-title="化学" onclick="toDetail(this);"><div class="img_box"><img src="../../image/pos1.PNG" alt=""></div><span class="price">¥35.0</span></div><div class="more_unit sp1_2" tapmode="tap-active" data-url="detail1.jsp" data-title="数据结构" onclick="toDetail(this);"><div class="img_box"><img src="../../image/pos2.PNG" alt=""></div><span class="price">¥50.0</span></div><div class="more_unit sp1_2" tapmode="tap-active" data-url="detail2.jsp" data-title="计算机组成原理" onclick="toDetail(this);"><div class="img_box"><img src="../../image/pos3.PNG" alt=""></div><span class="price">¥50.0</span></div></div><!-- 更多惊喜 end --><img src="../../image/index_img_p8.png" alt="" class="big_ads last sp1" tapmode="tap-active" data-url="https://www.icourse163.org" data-title="中国大学mooc" onclick="toDetail(this);"></div><!-- 下方详情 end --><!--  --><div class="standard_hor"><span class="title"></span><span class="brief"></span><img src="" alt=""></div><!-- div.standard_per --><!--  --></div></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/swipe.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">apiready = function(){Zepto(function($){// home页 样式 初始化var sp1_3,sp1_2,sp2_3,sp1,sp1_3_big;var em = parseInt(getComputedStyle(document.body,false).fontSize);var emW = em*3/4;var bodyW = $api.offset(document.body).w;sp1_3 = (bodyW - 4*emW)/3;sp1_3_big = (bodyW - 4*emW)/3 + emW;sp2_3 = bodyW - sp1_3 - 3*emW;sp1_2 = (bodyW - 3*emW)/2;sp1 = bodyW - 2*emW;$('.sp1_3').width(sp1_3);$('.sp1_3_big').width(sp1_3_big);$('.sp2_3').width(sp2_3);$('.sp1_2').width(sp1_2);$('.sp1').width(sp1);$('.venue_big_inner').width((sp1_3_big*3 + emW*2));$('.more_unit .img_box').width(sp1_2 - emW*2);// home页 样式 初始化 endvar aLi = $('#title-box-ul li');// var act_title = $('#title-box-text');window.mySwipe = Swipe($api.byId('slider'),{auto: 3000,continuous: true,callback: function(index,elem) {var i = aLi.length;while (i--) {aLi[i].className = '';}aLi[index].className = 'active';// var text = $(elem).find('img').attr('alt');// act_title.text(text);}});$('#slider .swipe-box').on('click', function(event) {});var toDouble = function(num){var json;if (num < 10) {num = '0' + num;} else{num = num + '';}json = {'n1': num.charAt(0),'n2': num.charAt(1)};return json;}var h1 = $('#counting_box .h1');var h2 = $('#counting_box .h2');var m1 = $('#counting_box .m1');var m2 = $('#counting_box .m2');var s1 = $('#counting_box .s1');var s2 = $('#counting_box .s2');var countDownTimer;var countDown = function(date){var  counting = (date.getTime() - (new Date().getTime()))/1000;// var hh = parseInt(counting/3600);// var mm = parseInt((counting-hh*3600)/60);// var ss = parseInt(counting - hh*3600 - mm*60);// h1.text(toDouble(parseInt(counting/3600)).n1);countDownTimer = setInterval(function(){counting -= 1; if (counting <= 0) {// 倒计时结束……clearInterval(countDownTimer);}var hh = parseInt(counting/3600);var mm = parseInt((counting-hh*3600)/60);var ss = parseInt(counting - hh*3600 - mm*60);// toDouble(counting);h1.text(toDouble(hh).n1);h2.text(toDouble(hh).n2);m1.text(toDouble(mm).n1);m2.text(toDouble(mm).n2);s1.text(toDouble(ss).n1);s2.text(toDouble(ss).n2);},1000)};var countDownTime = new Date();countDownTime.setMinutes(countDownTime.getMinutes()+25);countDown(countDownTime);});}// apiready();
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>您定制的服务不存在或已下架</div>
<div><a href="home.html">点此返回</a></div>
</body>
</html>
<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><title>APP</title><link rel="stylesheet" type="text/css" href="../../css/api.css" /><link rel="stylesheet" type="text/css" href="../../css/common.css" /><link rel="stylesheet" type="text/css" href="../../css/profile.css" /></head>
<body><div id="wrap"><div id="main"><div class="profile_box"><div class="profile_top"><i class="msg_icon" tapmode="tap-active" onclick="openCommon('msg','消息盒子')"></i><span class="config" tapmode="tap-active" onclick="openCommon('config','设置')">设置</span><span class="login_btn" tapmode="tap-active" onclick="openCommon('login','登录')">点击登录</span></div><div class="tabBar"><div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')"><span class="num_top">0</span><span class="text">待付款</span></div><div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')"><span class="num_top">0</span><span class="text">待接单</span></div><div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')"><span class="num_top">0</span><span class="text">待服务</span></div><div class="tabBar_inner" tapmode="tap-active" onclick="openCommon('login','登录')"><span class="num_top">0</span><span class="text">待评价</span></div><div class="tabBar_inner last" tapmode="tap-active" onclick="openCommon('login','登录')"><span class="num_top">0</span><span class="text">退款/服务问题反馈</span></div></div></div><div class="profile_detail_container"><div class="profile_detail_box clearfix"><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/profile_item1.png" alt=""><span class="title">全部订单</span><span class="brief">查看所有</span></div></div><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/pos6.PNG" alt=""><span class="title">会员</span><span class="brief">会员</span></div></div><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/profile_item3.png" alt=""><span class="title">收藏课程</span><span class="brief">收藏过的课程</span></div></div></div><div class="profile_detail_box clearfix"><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/profile_item4.png" alt=""><span class="title">账户</span><span class="brief">查看余额</span></div></div><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/profile_1tem5.png" alt=""><span class="title">优惠券</span><span class="brief">我的优惠券</span></div></div><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/profile_1tem6.png" alt=""><span class="title">会员卡</span><span class="brief">我的会员卡</span></div></div></div><div class="profile_detail_box clearfix"><div class="profile_detail_inner pull-left"><div class="profile_detail" tapmode="tap-active" onclick="openCommon('login','登录')"><img src="../../image/profile_1tem7.png" alt=""><span class="title">收藏服务</span><span class="brief">收藏过的服务</span></div></div></div></div></div></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">apiready = function(){Zepto(function($){var em = parseInt(getComputedStyle(document.body,false).fontSize);var emW = em*3/4;var bodyW = $api.offset(document.body).w;var sp1_3 = (bodyW - 4*emW)/3;$('.profile_detail_inner').width(sp1_3);});}// apiready();
</script>
</html>

12.PPT汇报展示

 13.参考文献

[1] 杨选辉 .网页设计与制作教程.北京:清华大学出版社.2006

[2] 詹国华,潘红等.多媒体网页设计教程,.北京:高等教育出版社.2009

[3] 贾珺.动态网站设计与开发项目教程, 中国电力出版社.2009

喜欢的点赞收藏加关注私信作者沟通交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/63542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国产自主可控C++工业软件可视化图形架构源码

关于国产自主代替的问题是当前热点&#xff0c;尤其是工业软件领域。 “一个功能强大的全自主C跨平台图形可视化架构对开发自主可控工业基础软件至关重要&#xff01;” 作为全球领先的C工业基础图形可视化软件提供商&#xff0c;UCanCode软件有自己的思考&#xff0c;我们认…

Unity实现倒计时和获取系统时间

一:创建UGUI 1.创建Canvas画布组件,调节Canvas画布的分辨率等其他设置。我们可以把视图设置为2D模式下。 2.创建Text文本组件,取名为Timer计时器,我们调整Text文本组件的大小,用锚点设置Text文本组件的位置,并且设置好Text文本组件的颜色。 3.我们再创建一个Text文…

微服务架构|go-zero 的自适应熔断器

原文链接&#xff1a; go-zero 的自适应熔断器 上篇文章我们介绍了微服务的限流&#xff0c;详细分析了计数器限流和令牌桶限流算法&#xff0c;这篇文章来说说熔断。 熔断和限流还不太一样&#xff0c;限流是控制请求速率&#xff0c;只要还能承受&#xff0c;那么都会处理&…

C# 多线程交替按照指定顺序执行

1.关于AutoResetEvent和ManualResetEvent的区别解释如下&#xff1a; AutoResetEvent和ManualResetEvent是.NET中的两个线程同步类。它们之间的主要区别在于其释放信号的方式以及对等待线程的影响。 AutoResetEvent的作用是在等待的线程被信号唤醒后&#xff0c;将信号自动重…

Rust 学习笔记(持续更新中…)

一、 编译和运行是单独的两步 运行 Rust 程序之前必须先编译&#xff0c;命令为&#xff1a;rustc 源文件名 - rustc main.rs编译成功之后&#xff0c;会生成一个二进制文件 - 在 Windows 上还会生产一个 .pdb 文件 &#xff0c;里面包含调试信息Rust 是 ahead-of-time 编译的…

数据库-DML

DML&#xff1a;用来对数据库中表的数据记录进行增、删、改等操作。 添加数据&#xff08;INSERT&#xff09; insert语法&#xff1a; 指定字段添加数据&#xff1a;insert into 表单&#xff08;字段名1&#xff0c;字段名2&#xff09;values&#xff08;值1&#xff0c;值…

CSS中如何实现弹性盒子布局(Flexbox)的换行和排序功能?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 换行&#xff08;Flexbox Wrapping&#xff09;⭐ 示例&#xff1a;实现换行⭐ 排序&#xff08;Flexbox Ordering&#xff09;⭐ 示例&#xff1a;实现排序⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得…

分布式集群框架——有关zookeeper的面试考点

3.掌握Zookeeper的概念 当涉及到大规模分布式系统的协调和管理时&#xff0c;Zookeeper是一个非常重要的工具。 1. 分布式协调服务&#xff1a;Zookeeper是一个分布式协调服务&#xff0c;它提供了一个高可用和高性能的环境&#xff0c;用于协调和同步分布式系统中的各个节点…

Java中支持分库分表的框架/组件/中间件简介

文章目录 1 sharding-jdbc2 TSharding3 Atlas4 Cobar5 MyCAT6 TDDL7 Vitess 列举一些比较常见的&#xff0c;简单介绍一下&#xff1a; sharding-jdbc&#xff08;当当&#xff09; TSharding&#xff08;蘑菇街&#xff09; Atlas&#xff08;奇虎360&#xff09; Cobar&#…

k8s(kubernetes)介绍篇

一、Kubernetes 是什么 Kubernetes 是一个全新的基于容器技术的分布式架构解决方案&#xff0c;是 Google 开源的一个容器集群管理系统&#xff0c;Kubernetes 简称 K8S。 Kubernetes 是一个一站式的完备的分布式系统开发和支撑平台&#xff0c;更是一个开放平台&#xff0c;对…

面试题--从键盘输入网站到网页显示,之间发生了什么

文章目录 首先进入HTTP阶段协议栈阶段TCP阶段IP阶段MAC网卡交换机路由器抵达 首先进入HTTP阶段 1.解析对应的URL&#xff0c;访问一个对应的服务器xxx.com的一个文件index.html; 2 使用DNS查询对应的ip地址&#xff0c;通过DNS服务器进行查找 3 组装http报文&#xff0c;生成h…

低成本32位单片机电动工具无感方波控制方案

RAMSUN介绍基于灵动32位微处理器MM32SPIN0230的BLDC电动工具无感方波控制方案&#xff0c;包括MM32SPIN0230芯片资源。 以下是电动工具无感方波控制方案的简述&#xff1a; MM32SPIN0230电动工具专用板 芯片介绍 MM32SPIN0230系列是灵动微MindSPIN旗下高性能的单电机控制产品…

Spring Boot框架以及它的优势

文章目录 介绍1. **简化配置**2. **快速启动**3. **自动配置**4. **集成第三方库和框架**5. **微服务支持**6. **内嵌式数据库支持**7. **健康监控和管理**8. **可插拔的开发工具**9. **丰富的社区和生态系统**10. **良好的测试支持&#xff1a;** 核心特性**1. 依赖注入&#…

ElasticSearch学习4--复杂查询

1、查询分类 查询所有&#xff1a;查询出所有数据&#xff0c;一般测试用。例如&#xff1a;match_all全文检索&#xff08;full text&#xff09;查询&#xff1a;利用分词器对用户输入内容分词&#xff0c;然后去倒排索引库中匹配。例如&#xff1a; match_query 根据单个字段…

yolov8机器视觉-工业质检

使用训练好的模型进行预测 yolo predict taskdetect model训练好的模型路径 source测试图片文件夹路径 showTrue效果展示 切换模型进行训练&#xff08;yolov8s&#xff09; 修改main.py训练参数文件 使用云gpu进行训练&#xff0c;很方便&#xff1a;点击链接转至在线云gpu…

面试被打脸,数据结构底层都不知道么--回去等通知吧

数据结构之常见的8种数据结构&#xff1a; -数组Array -链表 Linked List -堆 heap -栈 stack -队列 Queue -树 Tree -散列表 Hash -图 Graph 数据结构-链表篇 Linklist定义&#xff1a; -是一种线性表&#xff0c;并不会按线性的顺序存储数据&#xff0c;即逻辑上相邻…

【算法竞赛宝典】语言之争

【算法竞赛宝典】语言之争 题目描述代码展示 题目描述 代码展示 //语言之争 #include<fstream> #include<string>using namespace std;ifstream cin("language.in"); ofstream cout("language.out");string a; int n;int main() {int i;bool …

短信验证码服务

使用的是 阿里云 阿里云官网 1.找到 左上角侧边栏 -云通信 -短信服务 2.在快速学习测试处 &#xff0c;按照步骤完成快速学习&#xff0c;绑定要测试的手机号&#xff0c;选专用 【测试模板】&#xff0c;自定义模板需要人工审核&#xff0c;要一个工作日 3.右上角 获取 Acces…

敦煌网、newegg店铺优化三大方法,测评补单原来可以这样做

我们都知道敦煌网、newegg流量是一个店铺的血液&#xff0c;没有流量的支撑&#xff0c;其他也都将成为浮云。流量能够成为转化率的保证&#xff0c;如何让店铺拥有傲人的流量成为重要之重&#xff0c;店铺的流量又主要来源于以下几部分&#xff1a; 一、主要流量的来源 1.搜索…

PyTorch深度学习遥感影像地物分类与目标检测、分割及遥感影像问题深度学习优化实践技术应用

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…