多肉植物商城设计与实现.docx

《多肉植物商城设计与实现.docx》由会员分享，可在线阅读，更多相关《多肉植物商城设计与实现.docx（18页珍藏版）》请在第一文库网上搜索。

1、继18世纪第一次工业革命一蒸汽技术的革命，从此机器代替了手工，19世纪第二次工业革命一电力技术革命，人类从此进入“电气时代”。如今21世纪掀起的第三次工业革命“互联网革命”，从此走上万物互联的道路。在中国尤其明显，随着阿里巴巴，腾讯，京东，拼多多等一批巨头互联网公司的崛起，使我国人民从衣、食、住、行、用等生活方式上发生了翻天覆地的变化。在手机上只需手指点一点，心仪的衣物、美味的食物、更实惠的酒店、更简便出行方式、更实惠好用的日用品等一键统统搞定。其中最令人称赞的还是网上购物，在手机，电脑上打开网上购物商城挑选好自己心仪的商品一键下单。上午下单，下午心仪的商品就已经到了自己手中，再也不需要劳心费

2、力大老远跑到购物街买到心仪的商品然后又不辞辛苦的回家。极大程度上节省了人们的时间，精力。随着绿色环保的理念根植人心，如今的人们都喜欢在家里办公室等场所摆放一些多肉植物。无论是从绿色环保的角度还是从装饰品的角度，都无可挑剔。甚至还有一些人群热衷于养殖多肉植物，但是放眼整个中国专门运营多肉植物的网站也是屈指可数，所以本人特意制作了专门运营多肉植物的网站。一方面满足了喜爱多肉植物的人群，一方面填补市场的空白。本网站总体划分为首页，店铺，单品，关于我们等模块。整体布局清新自然，动画效果优美。使用户心情愉悦，享受购物的快感。目录一设计背景31.1选题背景312选题意义3二开发环境及技术构架41.1 开发

3、环境与工具42. 2技术架构5三需求分析53设计目标63.1设计需求63. 2功能需求63. 3性能要求6四网站设计64.1网站总体设计74. 2网站总体设计84. 2系统详细设计8五系统实现95. 功能实现95.3店铺模块135.4单品模块14六、作品测试15七、毕业设计总结16参考文献17-设计背景1.1 选题背景随着21世纪“第三次科技革命”如火如荼的进行，在中国更是愈演愈烈。互联网这个词已经深深刻在人们心底，互联网无时不刻不在影响我们的生活。其中网络购物已然成为如今不可替代的生活方式，这是时代的趋势，不可阻挡。1.2 选题意义前有淘宝，京东，拼多多等专业购物平台，其中涵盖了生活中的方方

4、面面，但太过于庞杂纷乱。我的目的是想打造一个小而精的专业运营多肉植物的网络购物平台，让用户随时随地在网络上也可以买到自己心仪的多肉植物。另外网络购物商城极大程度上减少了线下开门店的成本与风险，同时也更加便于管理，只需在家中，一台电脑就可以解决问题。1.3 收集资料与分析在美图网中寻找一些有关多肉植物的清新图片，去字体网站下载一些免费字体。百度搜索有关绿植网站，参考借鉴他们是如何设计，学习他们整个网站的布局，以及网站整体的色调。参考课本上的项目案例，如何去优化网站，不懂的地方翻阅相关资料，或者与同学一起探讨资料与资源的合理运用与功能的实现。二开发环境及技术构架2.1开发环境与工具HBui1der

5、是由数字天堂推出的一款支持HTM15的Web开发软件，主要特点快，而快恰好就是HBUi1der最大的优势，有完整的语法提示与代码输入法，代码块，能够大幅度提升HTM1,css,js的开发效率。还有极为友好的提示ID、C1ass,图片、链接、字体等功能。还可以边看边改，一边看代码，一边看网页效果，非常适合新手作为开发工具使用。HTM1称为超文本标记语言，是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTM1文本是由HTM1命令组成的描述性文本,HTM1命令可以说明文字,图形、动画、声音、表格、链接等。CSS是一种定义

6、样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTM1网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称CSS中的“层叠(CaSCading)”表示样式单规则应用于HTM1文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，

7、更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。2.2.1前后分离目前主要流行的前端主要包含PC浏览器，小程序，以及移动应用app移动应用app可以通过原生页面，以及内置的WebVieW等插件渲染h5页面向用户展示ui信息客户端主要涉及到网页浏览器以及原生的app这些客户端不但可以展示数据，并且还可以存贮数据，尤其是对于移动端app可以使用强大的SQ1ite数据库对数据进行持久化存贮通过客户端的离线存贮可以实现某些场景的离线访问，尤其是对于用户的重要数据且更新频次较低的数据，离线存储的意义非常明显。服务器端（后端）的服务器种类主要分为WEB服务器以及应

8、用服务器，WEB服务器主要用来发布静态资源（htm1、css等静态资源文件），如Nginx服务器、Apache以及CDN服务器等。WEB服务器对于静态资源发布以及静态文件缓存有极大的优势。应用服务器主要用来发布应用程序代码（ASP.NET、PHP、JAVA等），如TOmCat、S服务器等2.2.2Bootstrap简单灵活可用于架构流行的用户界面和交互接口的htm1、cssjavascript工具集。基于htm15、css3的bootstrap,具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。自定义JQUery插件，完整的类库，基于1eSS等2.2.3J

9、Query具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。JQuery兼容各种主流浏览器。三需求分析3设计目标3.1 设计需求为了让用户拥有更好的购物体验，首先页面排版要尽可能的简洁、简约，模块分工明确，使用户能够在最短时间内找到自己心仪的商品。网页设计时更加贴近多肉植物偏清新，自然的风格。同时也要实现更加赏心悦目的动画效果，更加符合人类直觉的操作逻辑。尽可能把每一处的细节做到最好，使用户拥有更舒心的视觉体验。3.2 功能需求本网站主要经营业务为多肉植物，需要尽可能的展示多肉植物的多样性，丰富性，以及相应的

10、功能介绍，方便用户更好的挑选到心仪的商品并购买。同时还需要一个购物车功能，用户看到心仪的多肉时可以点击收藏放入购物车。还有登陆注册功能，使每个用户拥有独立的账户。重中之中是售后问题，所以在每个页面的最底端留下联系方式，方便用户遇到问题时打电话询问，以及评论功能，认真听取每个用户的声音。打造成用户心中最温暖，最暖心的网站。3.3 性能要求休息时间或者下班时间，人们有了空闲时间，可能会来我们网站逛一逛，这时候访问人数一多，服务器压力必然骤增，首先解决的是人数压力承载问题。以及用户在平时使用时不卡顿，页面切换流畅。考虑到用户的多样性，用户使用的设备，浏览器的不同，所以要实现不同设备不同浏览器的兼容性

11、。四网站设计4.1.1网站流程图首页店铺单品我的轮播图我们的故事按类别购物特色产品我们的帖子发送实时通讯关于我们五系统实现5.功能实现5.1.1首页的实现首页顶端为一个手动轮播图，点击两边的黑色箭头即可切换2019完美盆栽享你所想图5-1-1首页轮播图完美多肉享你所想图5-1-2首页第二个轮播图的实现5.1.3限时秒杀的实现限时秒杀活动界面铁观音草玉露山影拳V4000V40M-oo图5-卜3限时秒杀界面的实现用户发的的帖子，一个分享生活的社区514用户帖子界面的实现我In就新的估夕发送实时通讯MtS的电子年件地玷作为WD的*件54.以保持金的自加6折图514用户帖子界面的实现5.1.5关于我们

12、模块的实现Se319Q子邮件地域作力10豳物演.以保持电的自我更新图5-15关于我们界面的实现5.2.1 用户注册界面的实现图5-2-1注册界而的实现5.2.2 用户登陆界面的实现5.3.1 店铺界面的实现产品类别图5-3-1店铺模块的实现5.3.2 店铺购物车界面的实现按价格猫选5.4.1单品界面的实现图5-4-1登陆界面的实现六、作品测试6.1编写测试用例图6-1登陆界面的实现测试类型功能测试模块名称多肉植物商城的基本功能实现用例描述该用例用于测试网站的基本功能是否以及实现编号测试项操作步骤期望结果实际结果1登录功能实现点击登录按钮是否跳转到登录页面成功跳转到登录页面Pass2注册功能实现

13、点击登录按钮是否跳转到登录页面成功跳转到注册页面Pass3轮播图切换点击轮播图箭头,看是否切换轮播图成功切换轮播图页面Pass4登录时输入手机号码与密码点击登录框输入手机号码与密码框的密码可输入手机号码与密码Pass5注册时输入手机号码进行注册点击注册框进行注册注册成功Pass6跳转店铺页面点击店铺按钮成功跳转到店铺页面Pass7跳转单品页面点击单品按钮成功跳转到单品页面Pass8在店铺页面能否跳转到首页点击首页按钮成功跳转到首页页面Pass9在单品页面能否跳转到店铺点击店铺按钮成功跳转到店铺页面Pass网站总体功能实现正常，也发现了平时写代码不仔细的一些漏洞，比如标题不对，图片放置位置不对，

14、大小与页面不协调。甚至错误直接出现在代码当中，写错了字母，没有分中文英文标点符号，链接地址链错等不应该犯的错误。在这次测试中体现的淋漓精致，也充分说明了测试的重要性，没有人能写出完美的代码，也没有人能一直不犯错。而测试正是给我们一个发现错误并纠正错误的机会。也让我明白了写代码应该更细心，更仔细。七、设计总结纸上学来终觉浅，绝知此事要躬行就是此次毕业设计最好的总结。平时我们都是在课堂上听老师讲，如何如何去做一个网站，却始终没有真正独立自主的去完成一个网站的设计与实现。这次毕业设计正好提供了这样一个绝佳的机会，所谓养兵千日，用兵一时差不多就是此理。同时这也是一次检验我能力最好的机会,也是一个查漏补缺的绝佳机会，不仅锻炼了我的独立思考能力，更加锻炼了我的独立动手能力。期间虽然遇到了很多困难，也遇到了自己百思不得其解的难题，通过翻阅相关资料，询问身边的大神同学都得到了有效的解决。与他人交流问题时更加加深自己对平时课堂上所学的知识做到了巩固与夯实，不断强化自己的基础知识。此次毕业设计耗时差不多四个月时间，从定标题，再到设计，与实现相关功能，一路坎坷不断，但我还时坚持不懈的做下来了，只想给大学生活交上一份自己觉得完美的答卷，以后到了社会上能够更加的努力与坚持，成就人生梦想!参考文献1向昌成.J