【实训项目】传道学习助手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.rhkb.cn/news/116224.html

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

相关文章

实现不同局域网间的文件共享和端口映射,使用Python自带的HTTP服务

文章目录 1. 前言2. 本地文件服务器搭建2.1 python的安装和设置2.2 cpolar的安装和注册 3. 本地文件服务器的发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 数据共享作为和连接作为互联网的基础应用&#xff0c;不仅在商业和办公场景有广泛的应用…

仿`gRPC`功能实现像调用本地方法一样调用其他服务器方法

文章目录 仿gRPC功能实现像调用本地方法一样调用其他服务器方法 简介单体架构微服务架构RPCgPRC gRPC交互逻辑服务端逻辑客户端逻辑示例图 原生实现仿gRPC框架编写客户端方法编写服务端方法综合演示 仿 gRPC功能实现像调用本地方法一样调用其他服务器方法 简介 在介绍gRPC简介…

CDL基础原理

一、CDL简介 CDL&#xff08;全称Change Data Loader&#xff09;是一个基于Kafka Connect框架的实时数据集成服务。 CDL服务能够从各种OLTP数据库中捕获数据库的Data Change事件&#xff0c;并推送到kafka&#xff0c;再由sink connector推送到大数据生态系统中。 CDL目前支…

【位运算】leetcode面试题:消失的两个数字

一.题目描述 消失的两个数字 二.思路分析 本题难度标签是困难&#xff0c;但实际上有了只出现一次的数字iii这道题的铺垫&#xff0c;本题的思路还是很容易想到的。 温馨提示&#xff1a;阅读本文前可以先查看我的【位运算】专栏的第一篇文章&#xff0c;其中包含位运算这类…

如何使用CSS实现一个响应式图片幻灯片(Responsive Image Slider)效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 响应式图片幻灯片⭐ HTML结构⭐ CSS样式⭐ JavaScript交互⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个…

视频垂直镜像播放,为您的影片带来新鲜感

大家好&#xff01;在制作视频时&#xff0c;我们常常希望能够给观众带来一些新鲜感和独特的视觉效果。而垂直镜像播放是一个能够让您的影片与众不同的技巧。然而&#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…

动手学深度学习(四)多层感知机

经过了多层感知机后&#xff0c;相当于将原始的特征转化成了新的特征&#xff0c;或者说提炼出更合适的特征&#xff0c;这就是隐藏层的作用。 from&#xff1a;清晰理解多层感知机和反向传播 - 知乎 一、多层感知机的从零开始实现 import torch from torch import nn from d2…

微信小程序左上角home图标的解决方法之一 层级混乱导致的home图标显示的问题 自定义左上角左侧图标的返回路径

这个项目的编辑页在tabbar上 导致跳到tabbar得使用wx.switchTab 保存后返回原来的页面就出现了左上角的home图标 本来想通过自定义home图标的跳转路径来解决这个问题 没想到居然找不到相关内容 有清楚的朋友麻烦给我留个言不胜感激 那我写一下我的骚操作 app.js globalData: {…

Kafka3.0.0版本——手动调整分区副本示例

目录 一、服务器信息二、启动zookeeper和kafka集群2.1、先启动zookeeper集群2.2、再启动kafka集群 三、手动调整分区副本3.1、手动调整分区副本的前提条件3.2、手动调整分区副本的示例需求3.3、手动调整分区副本的示例 一、服务器信息 四台服务器 原始服务器名称原始服务器ip节…

CSS 实现平面圆点绕椭圆动画

前言 &#x1f44f;CSS实现平面圆点绕椭圆动画,速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现原理 transform-style&#xff1a;CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面&#xf…

WEBGL(3):鼠标动态绘制点

1 实现思路 绘制单个点鼠标事件监听点击事件将点推送到数组中绘制数组中所有点 2 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…

【前端demo】简易计算器 原生实现

文章目录 效果代码htmlcssjs 其他demo&#xff1a;https://blog.csdn.net/karshey/article/details/132585901 效果 效果预览&#xff1a;https://codepen.io/karshey/pen/RwERjGz 参考&#xff1a; js实现仿华为手机计算器&#xff0c;兼容电脑和手机屏幕_dengluandai1740的…

16 Linux之JavaEE定制篇-搭建JavaEE环境

16 Linux之JavaEE定制篇-搭建JavaEE环境 文章目录 16 Linux之JavaEE定制篇-搭建JavaEE环境16.1 概述16.2 安装JDK16.3 安装tomcat16.4 安装idea2020*16.5 安装mysql5.7 学习视频来自于B站【小白入门 通俗易懂】2021韩顺平 一周学会Linux。可能会用到的资料有如下所示&#xff0…

【C++进阶(三)】STL大法--vector迭代器失效深浅拷贝问题剖析

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; vector-下 1. 前言2. 什么是迭代器失效?3. 迭代…

使用环境中的视觉地标和扩展卡尔曼滤波器定位移动机器人研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Solidity 小白教程:6. 引用类型, array, struct

Solidity 小白教程&#xff1a;6. 引用类型, array, struct 这一讲&#xff0c;我们将介绍solidity中的两个重要变量类型&#xff1a;数组&#xff08;array&#xff09;和结构体&#xff08;struct&#xff09;。 数组 array 数组&#xff08;Array&#xff09;是solidity常…

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

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

基于OpenCV+LPR模型端对端智能车牌识别——深度学习和目标检测算法应用(含Python+Andriod全部工程源码)+CCPD数据集

目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境OpenCV环境Android环境1. 开发软件和开发包2. JDK设置3. NDK设置 模块实现1. 数据预处理2. 模型训练1&#xff09;训练级联分类器2&#xff09;训练无分割车牌字符识别模型 3. APP构建1&#xff09;导入OpenCV库…