【实训项目】you书-校园二手书交易APP-阿里云开发者社区

1.设计摘要

现如今，随着教育事业的快速发展，大学生也越来越多，大学中的课业用到的教材，教学资料也越来越多，这些书籍纸张资源由于得不到正确的处理，会造成大量的浪费。同是，大部分同学只能在QQ空间、微信朋友圈等地方发布交易信息，这些信息的受众面较少，且容易被忽视、刷过；而希望买二手书、二手教学资料学习的学生们也很难直接找到交易渠道。由此可见，二手书交易市场缺少规范化、制度化、透明化的管理方式。

基于这种现状，本文设计了一个平台来给这些同学们提供一个良好的交易环境，整合这些售卖信息，使得有需要的同学们能够方便、安全地进行交易。同时，进行二手交易，这不仅使得二手书资源得到二次利用，同时，也可以培养大学生勤俭节约、资源二次利用的消费观。而网络信息时代的快速发展也给二手交易平台的创建提供了技术支持和大环境。

本文介绍运用HTML语言，CSS，MYSQL，JAVA script与后台数据库连接等关键技术建设校园二手书交易APP。利用网络的方便快捷和普遍，提高售书效率。

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

“YOU书”APP是基于C2C模式，致力于打造线上客户之间可以实现交易，能够把二手书放上网去卖，买家和卖家都可以方便快捷的实现个人对个人的交易，同时有一部分B2C模式的加成，是该APP前期盈利的主要手段，正因为我们的APP所针对的产品是二手旧书，决定了我们从中抽取的利润极其微小，与书店合作的B2C模式，将热销新书的推广放在我们APP中，这样从新书中便可以得到一部分利润的同时，新书的出售与二手书的出售不构成竞争关系。

通过我们给出了客户端各功能模块的设计和实现。所设计的功能模块主要包括用户注册、个人中心、购买模块、出售模块、消息模块等，主要针对校内交易。同时，我们也与书店展开合作，同学们也可以从书店中购买学习资料和其他书籍。

3.设计的创新与优势

大学生数量很多，且每年都会有新的用户加入，这是我们的用户来源。学生们对于不再使用的学习资料的处理需求是这个交易平台存在的基本，为这些学生提供一个良好的交易环境是建立平台的缘由。

现如今类似当当网等的线上购书平台并没有增加二手书售卖的模块，究其原因就是二手书利润微薄，书籍回收困难并且代价略高，线上购书平台的B2C模式并不适合这样的买卖方式。而我们所打造的“YOU书”APP是一个专门针对地区内个人之间的买卖，这样卖家可以从平台上获得更大的受众面，买家也可以获得更多的书籍资料信息，使买家和卖家能够直接交易，更加清晰迅速，同时让个人卖家制定价格，支持买卖双方进行消息沟通，改定交易价格，并支持双方选择成交方式，如当面交易，由于我们的客户处于同一地区内，这样可以大大减少类似快递这样的额外费用，使得买卖双方感到更加实惠。默认以学校为单位为同学们提供服务，但并不仅局限于学校、个人或者学习资料，同学们同样可以在平台上出售二手小说漫画等，书店也可以成为卖家，用户也可以在书店中购买一些资料、书籍等。

促进二手书交易，增加二手书的流通性，增加书籍的重复利用率，也是响应国家建设绿色循环经济的号召，建设高校绿色书籍循环使用模式，服务于更多大学生。

4.可行性分析

我们所提供的“YOU书”APP的主要客户是需要各类教材，但又没有购买新书意愿的大学生。他们追求低价格，需要一次性教材，APP上有更多的选择。“YOU书”APP可以激发他们购买二手书的倾向，原因是在于：

（1）“YOU书”APP上购买所需要的教材，可以很大的减少开支，也可以从往届学生做的笔记中找到有用的资料；

（2）在“YOU书”APP上购买的书价格低廉，性价比高，交易双方能够互相沟通达成交易价格；

（3）“YOU书”APP针对同一地区内的学生，尤其是同一学校同一专业，教材重复率更大，并且自提能够省下一笔快递费用开支更加经济实惠。

我们的市场定位：

（1）希望通过我们的努力以最低的价格为有二手书购买意向的同学提供品种齐全的教材书籍品种；

（2）为二手书持有者提供一个可以让资源良性循环利用的渠道。

面临的挑战：

（1）有部分同学购买新书的欲望大于购买二手书籍的欲望

（2）废品收购者按斤收购二手书，再以较低的价格出售给二手书实体摊主，价格上对于二手书市场冲击较大。

（3）二手书线上交易的获利困难，前期运营维护成本入不敷出。

5.需求分析

高校校园的学生有旧书流通的需求,如我们的学校每年都有毕业生在校园内低价出售旧书，这种现象在各大高校都有,针对这样的情况,有必要提出一份需求报告来指导解决方案的实现。高校学生用过的旧书希望通过比较方便的提供技术交易的信息给寻找此种信息的人，寻求旧书的学生希望能够获得全面而自由的手段，而这些都是电子商务所存在的优势，这种方式在高校学生之间可以普遍接受，据统计，80%以上的大学生更愿意用手机进行线上购物，高校学生的这种需求是校园旧书市场电子商务系统，即：“YOU书”APP实施的源动力。

6.总体设计

“二手书交易”app主要包括以下几个模块：用户注册、个人中心、购买模块、出售模块、消息模块。

用户在使用“二手书交易”app时，需要提交的真实信息有学校及手机号（注：学校用于定位，手机号用于卖家与买家之间的沟通）。注册的信息内容包括昵称，性别（可隐藏），联系电话，学校，密码。注册成功以后，系统会生成一个唯一编号。

包括头像、昵称，我的订单【未付款，未发货，已完成】，设置【修改昵称、头像，修改密码，修改绑定手机号】，购物车/收藏夹，优惠券，个人足迹。

搜索（筛选方式：地区），种类【学习资料，其他书籍】，同一学校【选择配送/自提】，加入购物车，提交订单，付款，确认收货。

添加新商品、编辑出售书的信息【书名，出版社，版号，上传图片，价格，数量，几成新，介绍，关键词】，优惠券，保存信息，发布信息，已发布但未出售的书籍，我的出货订单【未完成，已完成】。

聊天列表，聊天界面，可是卖家买家进行沟通，进行互动，商榷详细购买内容，流程。

7.详细设计与实现

7.1主界面

主界面由搜索栏和展示部分组成，然后将两部分组合在一起形成主界面。

（1）搜索栏主要由搜索部分和导航栏部分组成。界面展示使用HTML和CSS设计完成的。而鼠标点击的反应则是由changeIndexFrame()来实现的。

（2）主界面由轮播图、书目分类以及书本精选组成。轮播图的实现是由函数实现的，书目分类及书本精选是由div块和CSS格式实现的。

7.2登陆注册界面

注册功能先由用户在页面填好信息，通过前端的ajax请求将数据发送到到服务器上，通过服务器中的Servlet来处理数据，与数据库做信息交换，最后返回正确结果。其中注册功能的ajax请求的代码如下：

登陆功能与注册功能类似，用户先在页面填好信息，通过ajax请求发送到服务器，经由Servlet处理后，返回到前端。代码如下：

在处理登录的Servlet中，用接收到的用户名去数据库中查询其对应的密码，与接收到的密码作对比，最后判断登录是否成功。代码如下：

在处理注册的Servlet中，将接收到的用户名和密码一起存入数据库中，完成注册操作。代码如下：

应用在系统上，最终效果如下：

7.3定位搜索界面

（1）大学城定位主要用于CSS和HTMI结合来实现。

（2）搜索界面也是通过function（）函数以及CSS布局实现的。

7.4购买出售界面

（1）购买界面是用来展示商品图片以及点击了解详细信息两部分组成的。商品展示由用户头像和商品详情组成。再点击商品后会通过函数跳转到商品详情界面。主要是有函数跳转onClick（）函数以及CSS、HTML实现的。

（2）未出售界面是用户用来添加商品的。用户可以点击图片信息来完善商品信息，然后提交给系统以供显示。

7.5消息推广界面

（1）推广界面是通过主界面的轮播图点击进入的，是通过一个大链接实现的。再贴上商家的新书并进行展示。

（2）消息盒子是通过每个界面右上角的信封图标进入的。主要有四大块实现的。每一块可以和不同用户聊天，实现用户与用户的交流。由消息函数实现。

（六）购买与个人中心界面

（1）购物车界面实现的是收藏添加心爱商品的功能。可以显示出卖商品的用户名以及购买书籍的详细信息。主要由div分块以及CSS实现，点击函数会跳转到登录界面，提醒用户登录。

（2）个人中心是由很多div块组成的。可以实现个人活动的一些基本操作，点击后也是触发登录界面，提醒登录。

8.项目的测试与运行

8.1测试中的问题

（1）主页面部分：

在更改轮播图图片时，由于图片的尺寸太大，而出现覆盖问题；在轮播图下面有四个小的div块，在实时预览以及模拟器上都无法显示，都会被轮播图覆盖，如果删除的话，整个界面就会出现排版错乱问题；在删除导航栏部分时，会出现加深不对应，点击也不对应，点击后页面无法跳转到预想界面。

解决办法就是手动修改图片的size，让旁边被白边覆盖。鉴于删掉那些块会出现排版问题，所以就留下来并做了部分修改，最后界面显示正常并达到预想的效果。关于导航栏的调整方面，我们仔细的看了具体的实现函数，删除了不必要的语句，将数字与界面对应起来，同时把点击的效果CSS部分的width进行改正，最后解决主界面出现的问题。

（2）购买与未出售界面

将原来的四个部分改成了两部分，同样出现了界面不对称以及点击效果延时的问题；在添加商品图片时出现过度放大问题；添加商品信息时，出现与图片重叠的问题。在删除另外两个多余的界面代码时，出现了整体混乱，并且在恢复后，图片无法显示。

解决办法：利用更改主界面的经验，修改了该界面额不对称问题。关于所有的图片问题，都仔细检查了代码，确保代码中的图片已经添加至文件夹中并显示在正确的位置。在恢复删除的界面后，仔细的重新更改，达到之前的效果。

（3）登录注册界面

最主要的问题是，不知道怎样把前端代码与后端的数据库联系起来。

解决办法：询问老师，仔细研读了老师给出的示例代码，明白了相关原理。然后套用部分代码并做出相应更改，即实现了通过Eclipse与MySQL与前端联系起来的功能。可以在前端注册登录并把信息保存在数据库中，实现成功登陆。

（4）购物车部分

购物车中的商品图片无法更改显示，并且无法勾选。

解决办法：发现图片写错了位置，并且没有改对格式，犯了低级错误。设置块的属性，设置成可勾选的CSS属性。

（5）个人中心界面

删除多余的块后，块的布局出现问题，一些块贴在一起，而另一些块无法补充空缺。在更换登录背景时，无论怎样更改都没有发生变化。

解决办法：个人界面的显示代码是每三个小块组成一行，形成一个大块。如果从一个大块中删除一个小块，必须从另一个大块中选取并填补空缺。确保每一块都是三块，这样才不会出错。在文件夹里找到了这个背景图片的具体路径位置。

8.2测试方法以及步骤

（1）部分测试

由于课程的设计是小组分工协作完成的，所以基本的测试方法就是个人对于自己所负责的模块的测试。主要实现手法是通过实时预览，模拟器预览以及网站云编译手机预览。每个人进行修改后都通过上述三种方式来测试界面是否规整，界面是否具备了预想的功能。

（2）整体测试

在最后的整合阶段，测试十分必要，并且十分繁琐。每个人实现的代码要顺利连接起来，测试方法没有什么具体变化，就是测试频率十分频繁，经常牵一发而动全身。为了实现软件的流畅与连贯，我们每个人都从自己的角度测试了软件并进行修改调整。

9.项目小组成员

成员1（组长）：主导产品初期的设计计划，以及出售模块的实现，包括用户出售界面（添加宝贝、未售出宝贝），编辑出售商品信息界面的设计等。

成员2（组员）：参与产品初期的设计计划，以及首页模块的实现，包括首页界面的设计、商品搜索页面、以及地点索引界面的设计等。

成员3（组员）：参与产品初期的设计计划，以及消息模块的实现，包括客服、快递、我的消息等界面的设计，制作产品路演ppt等。

成员4（组员）：参与产品初期的设计计划，以及个人中心模块的实现，包括个人中心界面、购物车界面、个人信息设置界面的设计等。

成员5（组员）：参与产品初期的设计计划，以及注册登录模块的实现，包括前端注册、登录界面的设计，后端连接数据库实现用户信息储存等功能。

10.心得体会

成员1：学会了如何在APICLOUD网站创建一个app并通过云编译可以下载安装包，看到app设计过程中每一阶段的效果，在设计首页模块时，最开始对前端页面设计的代码很不熟悉，不知如何下手，还遇到了照片大小不适配，轮播图与下方内容块重合的问题，后来查阅资料解决了这些问题。

成员2：这次的课程设计前一周和考研时间重合了，这就使得我在第一周的课设中起到的作用和角色并不多，也非常感谢小组成员的帮助和包容。我所做的是产品的初期设计计划，以及后一周的消息模块界面，路演PPT制作等内容，这次的课设经历让我学习到了许多前端知识，对整个产品的开发流程有了更加清晰的认识，切实能够着手做一个简易APP界面让我收获很多，但不足的是很多构想、很多后端链接和跳转，以及数据库方面的内容都因为时间原因没能实现成为遗憾，我相信有了这次的开发经验能够对以后APP开发架构有很大的帮助，不仅学到了切实的知识，更让我懂得了团队合作的重要性。

成员3：为期两周的信息管理系统课设结束了，在本次课设中，我收获颇丰，不进回顾了课堂中学到的知识如Java、mySQL、CSS等，还学习到了一些新的知识，学会在新的平台APICloud上建立项目，实现了一个简单的APP"you书"，系统的学习了创建一个项目的各个步骤。同时，我也根据老师提供的实例，学习到了许多经验，让我们在项目的瓶颈期，有所突破，同时，对数据库的了解和利用也更加熟练。通过本次课设，不仅学到了知识和经验，也得知了团队合作的重要性，没有团队的共同努力，也不能完成这次课设。

成员4：本次课设探索了一个非常陌生的领域，即手机APP的开发。本次课设使用到的技术虽不算陌生，但之前掌握地非常浅，难以满足APP的开发需求，而且因为第一周考研，耽误了很多学习技术的时间。第二周只能以需求为导向，使用简单的技术来实现最基本的功能，第二周学习了异步通信的技术，成功的运用在了我们的系统中，最终还是在一定程度上完成了我们的课设任务。过程虽然非常仓促，但这次课设让我们认识到自己的不足之处，也明白了短期的突击难以支撑起一个完整的项目，只有长期的积累才能逐步构建知识体系，并运用到项目开发中。

成员5：本次课设实现的是手机APP的开发。这个看似离我们很近的领域，在实现过程中远比想象的复杂。由于第一周为考研做准备，所以对于这个课设的基本实现流程，所要实现目标，以及具体的过程都不太熟悉。第二周在询问组员并在他们的帮助下开始着手我的模块设计。在前端设计阶段，经常出现界面与预期不符的问题，修改调整花费了大量时间与精力，要想提供一个舒服便利的界面还是非常不易的。通过本次课设，我深深的认识到了自己的不足，虽然之前学过Eclipse的网页设计，但是基本都已忘记，看着后端却无从下手。知识的巩固和

利用必须通过不断地实践，一个知识只有不断整理，反复实现才能做到真正的掌握。

11.核心代码

<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;
    }
 #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/index3.png) center center no-repeat;
        background-size: 100% 100%;
    }
    #nav_top .ju .icon{
        background: url(../../res/img/index4.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;
    }
/*会场*/
/*会场end*/
/*中间大广告*/
/*中间大广告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/1.jpg" 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/2.jpg">
                    </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/3.jpg">
                    </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/4.jpg">
                    </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/5.jpg">
                    </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="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" 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="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" 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="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" 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="http://ju.taobao.com/m/jusp/juhuasuantm/mtp.htm" data-title="聚划算" onclick="toDetail(this);">
                        <i class="icon"></i>
                        <span class="text">特惠榜单</span>
                    </li>
                </ul>
            </div>
            <!-- 上方导航栏 end-->
            <!-- 下方详情 -->
                    <div class="sp1 reload_header">
                        <span class="title">书目分类</span>
                        <!-- <span class="reload">
                            <i class="reload_icon"></i>
                            换一组
                        </span> -->
                    </div>
                    <!-- 行业精选 -->
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">学习类</span>
                            <span class="brief">教材，学习资料</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index1.jpg" alt="">
                        </div>
                    </div>
                    <div class="sp1_2 industry clearfix" tapmode="tap-active" data-url="http://nvzhuang.tmall.com/market/fushi/nvzhuang_mobile.php" data-title="精品女装" onclick="toDetail(this);">
                        <div class="industry_left">
                            <span class="title">其他类</span>
                            <span class="brief">如小说，科普等</span>
                        </div>
                        <div class="industry_right">
                            <img src="../../image/index2.jpg" alt="">
                        </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="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.2.M7uZ74&amp;id=13570491314&amp;abbucket=&amp;acm=03317.1003.1.99094&amp;uuid=jsjqEXAo_mFKjC0zy31sCAXbPnigNyV/z&amp;abtest=&amp;scm=1003.1.03317.ITEM_13570491314_99094&amp;pos=2" data-title="键盘" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index6.jpg" alt="">
                        </div>
                        <span class="price">￥10.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.13.M7uZ74&amp;id=18826634839&amp;abbucket=&amp;acm=03317.1003.1.99094&amp;uuid=OUtYF9zr_mFKjC0zy31sCAXbPnigNyV/z&amp;abtest=&amp;scm=1003.1.03317.ITEM_18826634839_99094&amp;pos=3" data-title="哑铃" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index8.jpg" alt="">
                        </div>
                        <span class="price">￥12.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.13.M7uZ74&amp;id=18826634839&amp;abbucket=&amp;acm=03317.1003.1.99094&amp;uuid=OUtYF9zr_mFKjC0zy31sCAXbPnigNyV/z&amp;abtest=&amp;scm=1003.1.03317.ITEM_18826634839_99094&amp;pos=3" data-title="哑铃" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index5.jpg" alt="">
                        </div>
                        <span class="price">￥15.0</span>
                    </div>
                    <div class="more_unit sp1_2" tapmode="tap-active" data-url="http://detail.m.tmall.com/item.htm?spm=875.7403452.20000008.2.M7uZ74&amp;id=13570491314&amp;abbucket=&amp;acm=03317.1003.1.99094&amp;uuid=jsjqEXAo_mFKjC0zy31sCAXbPnigNyV/z&amp;abtest=&amp;scm=1003.1.03317.ITEM_13570491314_99094&amp;pos=2" data-title="键盘" onclick="toDetail(this);">
                        <div class="img_box">
                            <img src="../../image/index7.jpg" alt="">
                        </div>
                        <span class="price">￥14.0</span>
                    </div>
                </div>
                <!-- 更多惊喜 end -->
            <!-- 下方详情 end -->
            <!--  -->
            <div class="standard_hor">
                <span class="title"></span>
                <span class="brief"></span>
                <img src="" alt="">
            </div>
            <!-- div.standard_per -->
            <!--  -->
        </div>
    </div>
<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页 样式 初始化 end
            var 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>
</body></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/fun.css">
    <style>
        #main{
            padding: 0;
        }
        .slider_shadow{
            width: 100%;
        }
        .slider_shadow img{
            width: 100%;
        }
    </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" onclick="openCommon('topic','天天都是APEC蓝');">
                        <img src="../../image/fun_rec_swipe1.png" alt="">
                    </div>
                    <div class="swipe-box" tapmode="tap-active" onclick="openCommon('topic','天天都是APEC蓝');">
                        <img src="../../image/fun_rec_swipe2.png" alt="">
                    </div>
                    <div class="swipe-box" tapmode="tap-active" onclick="openCommon('topic','天天都是APEC蓝');">
                        <img src="../../image/fun_rec_swipe3.png" alt="">
                    </div>
                </div>
                <div id="title-box">
                    <ul id="title-box-ul">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            -->
            <!-- 轮播图 end -->
            <!-- fun follow -->
            <div class="fun_follow pic">
                <div class="fun_follow_header clearfix" tapmode="tap-active" onclick="openCommon('tafun','详细信息')">
                    <div class="fun_follow_header_left pull-left">
                        <img src="../../image/eye.jpg" alt="">
                    </div>
                    <!--
                    <div class="fun_follow_header_center pull-left">
                        <span class="title">喬喬_台灣模特</span>
                        <span class="brief">11月03日</span>
                    </div>
                    <!-- followed -->
                    <span class="type"></span>
                </div>
                <div class="fun_follow_media">
                    <img src="../../image/ruanjiangongcheng.jpg" alt="">
                    <!--
                    <img src="../../res/img/tm_btn_play.png" alt="" class="play_btn">
                    -->
                </div>
                <span class="text">软件工程</span>
                <!--
                <div class="btn_group">
                    <span class="span_btn" tapmode="tap-active" onclick="showToast();">
                        <i class="i_icon comment"></i>
                        评论
                    </span>
                    <span class="span_btn" tapmode="tap-active" onclick="showToast();">
                        <i class="i_icon like"></i>
                        赞
                    </span>
                    <span class="span_btn" tapmode="tap-active" onclick="openShareframe();">
                        <i class="i_icon share"></i>
                        分享
                    </span>
                </div>
                <div class="to_details">
                    <span class="like">
                        150赞
                    </span>
                    <span class="comment">
                        150评论
                    </span>
                </div>
                -->
            </div>
            <!--
            <div class="topic" tapmode="tap-active" onclick="openCommon('topic','天天都是APEC蓝');">
                <div class="topic_header clearfix">
                    <div class="topic_header_left pull-left">
                        <img src="../../image/fun_topic_icon2.png" alt="">
                    </div>
                    <div class="topic_header_center pull-left">
                        <span class="title">天天都是APEC蓝</span>
                        <span class="brief">向雾霾宣战 天天都是APEC蓝</span>
                    </div>
                </div>
                <div class="topic_pic_box">
                    <div class="topic_pic_group clearfix">
                        <div class="topic_pic_inner">
                            <img src="../../image/fun_topic_pic1.png" alt="">
                        </div>
                        <div class="topic_pic_inner">
                            <img src="../../image/fun_topic_pic2.png" alt="">
                        </div>
                        <div class="topic_pic_inner">
                            <img src="../../image/fun_topic_pic3.png" alt="">
                        </div>
                        <div class="topic_pic_inner">
                            <img src="../../image/fun_topic_pic4.png" alt="">
                        </div>
                    </div>
                </div>
                -->
            </div>
        </div>
<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">
    var topicPicInner = $api.domAll('.topic_pic_inner');
    var domW = $api.offset(topicPicInner[0]).w;
    for (var i = 0,len = topicPicInner.length; i < len; i++) {
        $api.css(topicPicInner[i],'height: '+domW+'px;');
    }
    apiready = function(){
        // 轮播图
        var 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) {
        });
        // 轮播图 end
    };
</script>
</body></html>

12.项目演示PPT

13.参考文献

[1] 安辉．Android APP开发从入门到精通.北京：清华大学出版社.2018

[2] 王斐．Java Web开发基础，.北京：清华大学出版社.2014

[3] 曾建华．HTML5移动前端开发基础与实战, 人民邮电出版社.2018

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