网站弹出文字,和wordpress类似,招标信息发布,什么是网站html静态化1.设计摘要
1.1市场背景
随着经济的迅速发展与科技日新月异的进步#xff0c;家庭内的各项物品更新换代频率越来越快#xff0c;人们购买新商品后越来越多旧的商品积压需要处理#xff1b;在互联网电商的各种营销刺激下#xff0c;消费者非常容易形成“冲动”消费#x…1.设计摘要
1.1市场背景
随着经济的迅速发展与科技日新月异的进步家庭内的各项物品更新换代频率越来越快人们购买新商品后越来越多旧的商品积压需要处理在互联网电商的各种营销刺激下消费者非常容易形成“冲动”消费因而产生了大量的闲置、二手物品。现阶段物价越来越高加之生活压力越来越大人们生活成本也在逐步提高。随着经济意识的不断增强生活习惯和消费观念也在悄然改变人们逐渐倾向于购买便宜而又实惠的二手商品。对于废旧物品有人会拿到当地的二手交易市场去交易有人会因离二手市场较远或二手物品不易搬运而把它当废品卖掉甚至扔掉。这不仅不利于环保还浪费了社会资源。
1.2产品介绍
易行APP是一个大型二手货交易APP用户可以随时随地以较低的价格购买自己想要的二手货物。易行在具有普通购物APP优点的基础上增加了用户悬赏功能随时发布悬赏告诉卖家自己想要的货物以合适的价格较快的速度购买到自己急需的商品。而且易行APP使得每个人都可以是卖家随时上架自己不需要的二手货物审批合格后即可上架对人们的日常生产生活提供了极大的便利。
2.设计的模式及产品目标
2.1设计的模式
“易行”APP采用C2C二手交易平台使得客户和客户可以直接交流沟通。对于卖家来说可以很方便的售卖自己不需要的物品而不需要丢弃或者给回收站。对于买家来说可以快速地找到自己所需的旧物并以自己理想的价格进行购买。APP的收入主要来源于交易额的抽取、广告的植入以及现金提现的手续费。
2.2产品目标
(1)卖家方面
由于二手市场难以维护卖方的商品很可能在销售过程中被损坏或盗窃线上的APP可以有效防止这类事故的发生。此外卖家可以随时上架自己想卖的物品有效及时地处理二手货物尽可能多地赚取利益。
(2)买家方面
二手市场通常人数较多物品种类多而杂非常不方便买方的出行与选择而线上的APP很好的解决了这些问题。此外APP的使用可以使得买方可以随时随地参与二手物品的购买无需前往二手市场在家也可挑选所需的二手货物。同时还可以发布悬赏令向附近用户发出寻求及时解决自己急需。
3.创新与优势
“易行”APP保留传统购物APP在线购物分类挑选等优点的基础上增加了传统二手市场讲价的特点买家可以根据卖家的起价和卖家沟通进行讲价以及验证商品的好坏性然后双方确认价格后完成付款使得买卖双方都能获得最大利益。此外“易行”APP中有悬赏功能使得买方能够将急需的物品发布给附近用户解决买方的需要也能使卖家赚取更多的利益。所以“易行”APP对于买卖双方都有着巨大的利益让人们更好的处理不需要但能用的旧物而且对生态环境的保护也有着相当大的好处。
4.设计思路
系统设计思路
4.1调研完成一份详细的需求文档
1系统要实现什么功能
2性能上有什么特别的要求
3哪些是技术难点可以的话对技术难点首先测试攻关。
4.2确定系统的运行环境
1系统运行的操作系统
2使用何种编程语言
3使用何种界面交互环境
4 需要使用哪些第三方库。
4.3划分系统模块设计总体框图
1整个系统从大的方向来划分的话可以分为哪几个模块每个模块又可以继续划分为哪几个小模块
2每个模块的提供的功能是什么
3模块之间怎么交互。
4.4分析模块的需求抽象出实现模块功能的各个类
1本模块可以设计哪些类哪些类是作为本模块对外的接口
2模块内部的类之间怎么交互模块间的类之间怎么交互
3类的设计时需要考虑是否可以通过继承、组合等方式简化设计
4画出简单的UML设计图。
4.5设计每个类的属性和方法
1每个类有哪些成员变量提供哪些功能函数
2哪些功能通过继承获取哪些功能需要用到重载哪些功能需要利用多态
3完成类的头文件的定义。
4.6实现每个类的功能及集成测试
1编码实现每个类的功能
2根据前面的设计完成类之间的交互代码实现系统所需要的功能
3集成和测试优化代码修改bug
5.可行性论证
在之前的项目的市场背景下大量二手物品交易市场应运而生二手物品的交易已成为国民经济中不可缺少的一部分。二手商品交易APP是基于一种新的思想文化理念的生活方式伴随互联网及移动端的高速发展快速、便利、精准地为人们提供高性价比的二手物品既能满足人们日益增长的生活需要又可促进可利用资源的循环使用减少资源的浪费。在注重商品交易的同时更多的考虑到环境保护因素贴合时下主流文化让每个人在交易的同时能够参与到环境保护中。所以该方案是可行的有市场的。
6.需求分析
6.1 主界面功能
用户的主界面主要显示首页、推荐、悬赏我的这四类基础总功能
性能需求
6.2系统主要功能要求
首页
1类别:将上架售卖的商品事先分好类别例如电子产品衣物书籍其他生活用品等等。
2刚刚上架/火热销售:首页推荐商品。
3搜索输入搜索查找商品
推荐
根据用户的浏览记录推荐相关商品。
悬赏
1我的悬赏:可以发布一些悬赏令来悬赏急需的物品而在交易中心没有查找到的。
2附近悬赏:可以查看其他人的悬赏来以一个较高的价格出售二手商品。
我的
1个人资料:保存用户个人详细信息。
2上架货物:用户在作为卖家时上架货物的清单。
3我要上架上架自己想要出售的二手物品。
4浏览记录:用户在使用APP时浏览商品的记录方便查找。
5个人订单:用户在作为买家时购买物品后的订单。
6收货地址用户可以设置或修改收货地址
6.3运行需求
1用户界面
其用户界面要求为包括简洁、易用、易懂美观具备一定的兼容性同时符合用户的操作习惯。
2尚需解决的问题
预留软件更新功能添加新收货地址买卖双方交流平台。
6.4其他专门要求
软件质量要求为易用、兼容性好、运行稳定、有一定安全保障。
7.项目总体设计
“易行”APP一共分为五大模块个人中心、用户注册、悬赏中心、交易中心、推荐。
系统结构图如下 8.详细设计与实现
8.1首页板块
由广告栏类别栏首页推荐栏三大部分组成广告栏用于展示商品广告并有响应的货物连接。类别栏链接至对应类别的商品列表。首页推荐栏用于展示卖家要求的推荐货物信息。总体采用HTML、CSS、JavaScript等前端技术实现。 8.2 推荐板块
根据用户的浏览历史表中货物的相关信息将类似的物品推荐给用户采用HTML、CSS、JavaScriptjQuery等技术实现商品展示。 8.3悬赏板块
可以查看用户已经发布的悬赏或者接受用户的悬赏也可以发布自己的悬赏采用HTML、CSS、JavaScript实现。 8.4我的板块
里面有多个小板块都采用HTML、CSS等技术。内容如下
1个人中心:提供个人信息的超链接可查看自己的详细信息。 2上架货物:用户在作为卖家时上架货物的清单。 3我要上架上架自己想要出售的二手物品。 4个人订单:用户在作为买家时购买物品后的订单。 5收货地址用户可以设置或修改收货地址 6登录界面 7注册界面 8我的首页 9.项目测试与运行
前端页面的测试过程中常常出现CSS未正常现实、图片未显示等问题都是因为图片或者CSS文件的路径不对在将对应路径修改正确后即可正确显示。
后端代码的测试过程中出现了Ajax不能访问Servlet的问题。通过前端页面alert()方法确定到jQuery未能正常工作最终发现jQuery放置在WEB-INF文件夹下而在运行过程中此文件夹下的文件不可获取所以产生错误。将jQuery放至外部文件夹后便可正常运行。
测试过程主要遇到以上两种问题解决后整个系统便可成功运行。
10.项目小组分工
组长:首页页面商品页面页面整合页面优化测试APP后端开发。
组员1:登录页面我的页面注册页面。
组员2商品列表查询素材。
组员3悬赏列表发布悬赏上架物品。
组员4我的订单填补素材。
组员5收货地址页面,PPT的制作素材收集
11.心得体会
组长经过此次课程设计使我充分了解了Java语言在Android系统上的APP开发的流程虽然类似于JavaWeb系统的开发但又新加入了特有的API也使我们在短时间内学会了一种新工具的使用锻炼了我们快速学习的能力。此外此次课程设计也使我在Java编程方面更加的熟练对jQuery Ajax的使用尤为深刻因为这项技术不同于以前jsp中的同步的前后端交互模式可以异步实现并对页面局部进行刷新可以实现静态页面与后端的完美交互。总之这次的课程设计使我受益颇多不仅学习巩固的编程技术也对软件开发的整个流程有了更加明确的认识所以我希望这样的课程设计可以时间安排长一些将自己的项目完善的更好。
组员1通过本次课程设计第一次有了手机App的开发经验初步掌握和熟悉了手机App开发工具APICloud的使用和App的开发流程并且了解了手机前端和PC前端开发的区别和联系。借鉴于以前PC前端的开发经验本次课设的前端工作基本上能够很好地适应只不过需要注意一下API的使用。但是在后端实现方面由于时间上的紧张所以并没有实现很多功能所以对于后端方面我还需要努力学习加以改进。
组员2经过本次课程设计认识到了合作的重要性还有复习了Java Web的前端代码的设计与实现并且还把后端的部分链接数据库的代码复习了一边。再学习到了ADPCloud的使用。了解手机APP的初步开发与实现。在本次课程设计中在组长的带领下学习到了许多知识同时对合作开发有了一定的理念。
组员3通过本次课程设计我深刻认识到团队以及合作得重要性在如此短的时间里要完成一个项目得设计必须要有明确的分工在组长的带领下我们完成了应用开发。同时学习了APICloud的使用了解了APP的开发流程如何应用javaweb开发APP但由于是ios系统很遗憾没能在自己手机上体验一番自己小组设计的APP。
组员4此次实验不仅使我对Android平台app的开发技术有了一定的掌握还使我对实际中项目的开发流程有了一定的了解。而且我还深切体会到了团队合作的重要性相信这对我今后的学习和工作都有很大的益处。由于时间的紧迫和对技术的掌握有限造成了产品中还存在许多不足功能上还不够完善与实际的产品仍存在很大差距。这让我们认识到了自己的不足在之后的学习中去尽力弥补争取成为一名合格的从业人员。
组员5通过本次实验我掌握了app制作的基本技术并且学会了创造一个有商用价值的产品需要思考哪些方面更难得的是体会到了团队合作的重要性和必要性。明确的分工、共同的理念目标使得小组任务得以出色完成。遗憾的是由于个人考研原因在前期的工作中没有过多的参与到项目的制作中。今后在工作生活中会努力将所学知识应用于实践创造出更多更好的产品。
12.参考文献
[1] Bruce Eckel.Thinking in Java[M].北京:机械工业出版社,2007:880.
[2] Ryan Benedetti,Ronan Cranley.Head First jQuery[M].北京中国电气出版社2005
13.核心代码
!DOCTYPE html
html
headmeta charsetUTF-8title全部分类/titlelink relstylesheet typetext/css href../css/api.css /link relstylesheet typetext/css href../css/common.css /stylehtml, body {width: 100%;min-height: 100%;background: #f0f0f0;}.h80 {height: 80px;}.h40 {height: 40px;}.h20 {height: 20px;}.h10 {height: 10px;background: #f0f0f0;}.h1 {height: 1px;margin-left: 15px;background: #f0f0f0;}.fr {float: right;}.fl {float: left;}.hightitem {background-color: #fff;}.inwrap {margin: 0 10px;}/* 2X2样式 */.row {display: -webkit-box;display: -webkit-flex;}.col {-webkit-box-flex:1; -webkit-flex:1; flex:1;position: relative;}.col img {position: absolute; right: 0; width: 80px; top: 0;}.col .matrixcell {display: table-cell;vertical-align: middle; padding-left: 10px;}.col .matrixcell .title {margin-bottom: 10px;}.matrix {display: table;height: inherit;}/* 1. 2X2 */.flipcard {height: 30px; line-height: 30px; text-align: center; margin: 5px 5px 3px 5px; color: #000; background-color: #fff; font-size: 14px;}.darktitle {height: 40px;line-height: 40px;margin-left: 15px;font-size: 14px;color: #666;}/* 2. 三列 */.scratch02 .word {margin-top: 10px;margin-left: 10px;}.scratch02 .word .title{font-size: 18px;}.scratch02 .word .info{font-size: 12px;color: #666;}.scratch02 img {position: relative;width: 60px; height: 50px;}.showposter {text-align: center;margin-top: 5px;padding-bottom: 10px;}/* 列表 */.classify {height: 60px;line-height: 60px;background-color: #fff;position: relative;border-bottom: 1px solid #e0e0e0;}.classify .sublogo {width: 30px;margin-top: 15px;margin-left: 15px;float: left;}.classify .arrow {position: absolute;vertical-align: top;right: 15px;top:20px;height: 20px;}.classify .info {line-height: 20px; float: left; height: 60px;margin-left: 10px;}.classify .info .title {font-size: 15px; color: #000; margin-top: 10px;}.classify .info .subtitle {font-size: 12px; color: #666; margin-top: 5px;}.subclass {display: none;}.subclass .flipcard {margin:0;}.brb {border-right: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;}.bb {border-bottom: 1px solid #e0e0e0;}.presshover {background-color: #FAFAFA;}/style
/head
body!-- 1 2X2 --div classdarktitle热门搜索/divdiv classrow inwrapdiv classcol flipcard tapmodepresshover onclickopenDetail()球鞋/divdiv classcol flipcard tapmodepresshover onclickopenDetail()键盘/divdiv classcol flipcard tapmodepresshover onclickopenDetail()计算器/div/div!--div classrow inwrapdiv classcol flipcard tapmodepresshover onclickopenDetail()亚运/divdiv classcol flipcard tapmodepresshover onclickopenDetail()望京/divdiv classcol flipcard tapmodepresshover onclickopenDetail()国贸/div/div--/body
script typetext/javascript src../script/api.js/script
script
function openDetail()
{api.openWin({name: tuandetail,url: ./tuandetail_header.html,// delay:200bounces: false});
}
/script
/html!DOCTYPE html
html
head meta charsetutf-8 titleframe/title meta nameviewport contentmaximum-scale1.0,minimum-scale1.0,user-scalable0,widthdevice-width,initial-scale1.0/ link relstylesheet typetext/css href../css/api.css / link relstylesheet typetext/css href../css/common.css / style html, body {width: 100%;min-height: 100%;background: #e5e5e5;} .h80 {height: 80px;} .h40 {height: 40px;} .h20 {height: 20px;} .h10 {height: 10px;background: #e5e5e5;} .h1 {height: 1px;margin-left: 15px;background: #e5e5e5;} .fr {float: right;} .fl {float: left;} .hightitem {background-color: #fff;} .inwrap {padding-right: 15px;padding-left: 15px;} /* 2. 价格样式 */ .priceitem {height: 60px; line-height: 60px;border-bottom: 1px solid #ccc;} .priceitem .price, .priceitem .symbol {color: #6ab494;} .priceitem .price {font-size: 20px;} .priceitem .o-price {font-size: 12px; color: #666;} .priceitem .buynow {background-color: #6ab494; color: #fff; height: 25px; line-height: 25px; border-radius: 3px;padding: 10px 20px;margin-top: 7px;} /* 3. */ .brief .title {height: 50px;line-height: 50px;font-size: 18px;color: #000;} .brief .describe {color: #666;font-size: 14px;line-height: 20px;} .brief .ico {height: 50px;line-height: 50px;font-size: 14px;color: #7AB388;} .brief .ico img {height: 14px;} /* 4. */ .goodcomment {height: 50px;line-height: 50px;font-size: 14px;} .goodcomment img {height: 15px;padding-right: 5px;} .goodcomment .arrow {float: right;height: 20px;padding-top: 15px;} .goodcomment .commentnum {font-size: 15px;color: #666;padding-right: 5px;float: right;} /* 5. */ .darktitle {height: 50px;line-height: 50px;font-size: 14px;color: #666;} .firstrow {position: relative;} .secrow {font-size: 14px;color: #666;border-bottom: 1px solid #e0e0e0;padding-bottom: 15px;} .shopinfo .left {height: 60px;padding: 10px 0;} .shopinfo .right {position: absolute;top: 0px; right: -15px; padding: 15px;border-left: 1px solid #e0e0e0;} .shopinfo .right img {height: 36px;} .shopinfo .shopname {font-size: 20px;} .moreshop {height: 50px;line-height: 50px;font-size: 14px;} /* 6. */ .tuanitem {height: 50px;line-height: 50px;font-size: 14px;border-bottom: 1px solid #e0e0e0;} .tuanitem .tuan02,.tuanitem .tuan03,.tuantotalprice .totalprice01, .tuantotalprice .totalprice02, .tuanrealprice .realprice01, .tuanrealprice .realprice02 {float: right; width: 50px;font-size: 14px;} .tuantotalprice {margin-top: 10px;} .tuantotalprice, .tuanrealprice {height: 30px;} .tuanrealprice .realprice02 {font-size: 16px;color: #6ab494;} .tuanitem .tuan03, .tuantotalprice .totalprice02, .tuanrealprice .realprice02 {text-align: right;} .smallitem .averageprice {float: right;} .smallitem {height: 20px;line-height: 20px;font-size: 14px;} .recommandtitle {line-height: 25px; font-size: 14px; color: #666;} .recommanddish {line-height: 22px; font-size: 14px;} .moredetail {height: 50px;line-height: 50px;font-size: 14px;border-top: 1px solid #e0e0e0;} .lastitem {padding-bottom: 10px;}/* 7. */ .buyinfo .infotitle {line-height: 25px;font-size: 14px;color: #666;} .buyinfo li {line-height: 24px;font-size: 13px;color: #000;} .buyinfo li img {height: 5px; padding-right: 5px;} .arrow {float: right;height: 20px;padding-top: 15px;} /* 8. */ .othertuan {height: 50px;line-height: 50px;} .othertuan .price, .othertuan .symbol {color: #6ab494;} .othertuan .price {font-size: 15px;} .othertuan .o-price {font-size: 12px; color: #666;} .othertuan .price01 {display: inline-block; width: 30%; vertical-align: top;} .othertuan .title {width: 50%; white-space: nowrap; text-overflow: ellipsis; word-wrap: normal; overflow: hidden;} .bb {border-bottom: 1px solid #e0e0e0;} .presshover {background-color: #FAFAFA;} .buyhover {background: rgba(252, 85, 0, 0.6);} .swipe { width: 100%; background-color: #fff; overflow: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap .swipe-box { float: left; width: 100%; position: relative; } .swipe-box img{ width:100%; } /style
/head
body !-- 1. 头部swipe -- div idswipe classswipe div classswipe-wrap div classswipe-box img src../image/good/20160112161653_16475.jpg alt /div div classswipe-box img src../image/good/20160112161653_16475.jpg alt /div div classswipe-box img src../image/good/20160112161653_16475.jpg alt /div /div /div !-- 2. 价格样式 -- div classpriceitem hightitem inwrap span classsymbol¥/span span classprice6499/span !--del classo-price¥30/del-- div classbuynow fr tapmodebuyhover onclick立即购买/div /div !-- 3. -- div classbrief inwrap hightitem div classtitle九成新苹果手机/div div classdescribe苹果机就是牛/div div classico/div /div
/body
script typetext/javascript src../script/api.js/script
script typetext/javascript src../script/swipe.js/script
script window.onload function() { var mySwiper Swipe($api.byId(swipe),{ continuous: true }); }
/script
/html
14.汇报PPT展示 喜欢的点赞收藏加关注私信作者沟通交流
