“二点点甜点网站”的设计与制作

题目：“二点点甜点网站”的设计与制作 目录摘要 4前言 5第一章绪论 61.1系统背景 61.2系统意义 61.3开发环境及工具 71.3.1GitHub代码托管 71.3.2Xmind 81.3.3Yii2框架 81.3.4Layui框架 81.3.5Photoshop 9第二章需求功能实用性分析 102.1网站流量转换分析 102.2在线购物流程 102.3可行性分析 11第三章系统架构设计 123.1网站的设计体现 123.1.1网站设计结构 123.1.2网站模块设计 133.2用户注册登录流程图 13第四章系统详细设计及代码实现 144.1主页设计展示 144.2产品列表展示 164.3商品详情设计 174.4在线留言页面设计 18结束语 20致谢 22参考文献 23摘要随着时代的不断改变，科技也飞速发展，现在的高科技已经无处不在，家里、饭店里、酒店里……它们可以说是一点一滴渗透进我们生活，也让我们生活更加丰富多彩，并有了许多方便之处。网络上能挣钱方法的很多，比如网络游戏卖装备，电子竞技参加比赛，网络主播，博客点击量卖广告，视频签约，但这些对我们来说，相对成功的难度要大一点，考虑良久发现，在网上开个网店是个不错的主意，但网店千奇百怪的都有，所以说找一个适合自己的很重要。这几年甜品店有越来越火的趋势，但不可否认的一点，现在甜品店的死亡率也非常高，通过对周围学校的店铺调查，发现大多数店铺在学生放假期间的购买量差距非常巨大，甜点店尤为突出，甜点店的主要购买人群大多数是在校的学生，学生放假这段时间，很多类似的店铺可以说是相当于零收入。因此对于类似以学生为主要客流的线下实体来说，在网上开发一个线上的虚拟店铺是对线下的实体生意会有很大的帮助。二点点甜点网站是一电商类网站，因此它具有用户注册、商品购买、产品信息介绍、物流信息跟踪、用户评论、信息反馈等功能。二点点网站是以yii框架为基础进行二次开发，开发的语言使用的是php语言,js语言，样式使用的是bootstrap框架，本篇论文通过对网站的开发起因分析、功能介绍、代码书写、网站布局进行讲解。关键词：甜点，在线购物，yii，框架前言在这个网络时代，很多年轻人都想要在网上淘金，不过开网店也并非是容易的时间，因为网店之间的竞争很是激烈，而且大家应该提前的想好卖什么，选择成本低利润高的。通过学校周边的甜点店的调查，发现进店购买甜点的人群和购买时间比较固定，每月的成交量非常稳定，因为是在学校周边因此在学生放假期间，很多的店铺客流量是非常的少。通过对店内的购买者分析发现购买者大多数是在校的学生，虽然是学生购买群体购买量非常不错，但具有不确定性，购买人群固定单一，非常不利于发展。节假日期间是学校周围店成交量的低潮期，在网上开一间店铺，是对线下单一实体店的一个补充方法，在网上开一个线上甜点店首先在销售范围上有所增加，销售人群也从单一的在校生，发展为某一区域的所有人。二点点甜点网站是基于mvc模式设计的一款实时在线的甜点预定购买网站，网站通过对甜点制作流程的分享、甜点做法的教学、甜点知识的交流、甜点的在线预定、购买的功能来实现对喜欢甜点的人群的全方位服务。

第一章绪论1.1系统背景这几年甜品店有越来越火的趋势，但不可否认的一点，现在甜品店的死亡率也非常高，现在很多年轻人选择餐饮创业都选择甜品，我想大概是因为在年轻人心目中甜品店算是一种干净卫生而又小资的店。不过在残酷的生活现实面前，没有小资的店，只有挣钱与不挣钱的店。甜品店目前在部分城市跟地区已经严重饱和，甜品非刚需，而甜腻的东西顾客的消费频次相对来说没有香辣的高（部分南方地区喜欢甜食的除外）。通过对线下的甜品店的销售数据来年，线下的实体店的利润远没有最初几年的利润高，大多数的店面勉强能够维持收入和支出平衡，而且近几年实体店的房租、人工、水电成本也越来越高，对只经营线下的经营者来说又是一个新的挑战。开设一个线上的甜品店或许会带来新的机会，网店可以说是对线下实体店的的一个有效补充，相比较于线的经营方式，线上的推广方法，产品的推广销售会更方便，效果也会更好些，二点点甜点网站拥有在线预定甜点、甜点产品介绍、甜点制作方法、视频教学、在线购买等功能，用户可以通过手机、或电脑等上网工具通过互联网实现远程购物，对于喜爱和爱做甜点的用户也可以当作交流学习的平台。1.2系统意义网络开店已经成为很多创业者喜欢的创业道路之一，网络开店不仅没有了选址装修等烦恼，而且更是可以在家里就将钱到自己的口袋。前几天，听到有几个朋友在讨论，想要开个店作为自己的副业，但自己没多少钱，也就几万块，不知道有没有戏？有朋友觉得不靠谱，本金有点少，他觉得现在租个店铺、外加装修，基本上就是一大笔的开销，再加上进货以及其他的一些花费，钱基本就花完了。哪怕把店开了起来，店内缺少流动的资金，如果店铺生意好还行，还能有点资金的运转，若是前期生意不行，基本上一两个月就倒闭了。也有朋友觉得可以，钱少可以开小店，比如小卖部、小超市、两元店之类的，这些店铺的成本并不高，又不需要很好的装修，所以不需要太多资金，完全可以开的起来。对于绝大多数的店铺来说，开一家店需要花钱的地方无外乎几个方面：房租、装修、设备、人工、库存备货以及开加盟店的加盟费。开店老板想要节省开支，就需要在这几个方面想办法。网店可以说是对线下实体店的的一个有效补充，经营一个线上网店，可以很大程度的减小线下实体的经营的压力，经营都可以根据自己的线上的销售量来调整线下实体店的投资占比，二点点甜点网站就是为了解决成本而设计的。1.3开发环境及工具曾经江湖有句传言，生活用百度，技术用谷歌，这一点简直是太形象不过了，Google在专业能力上比百度有较大的优势，而且Google虽然也做搜索引擎广告，但是比起百度臭名昭著的竞价排名体系和医疗广告还是要靠谱的多。程序员的工作和日常生活非常的枯燥，这里给大家推荐一些程序员经常使用的网站，也是我经常上的一些网站，尤其是前三个网站感觉用起来非常的舒服。我大致把这些网站分为三类，使用工具类，设计分享类，资讯交流类，业界良心类。希望能对大家有所帮助。1.3.1GitHub代码托管关于GitHub，相信每一个程序员都再熟悉不过了。它为开发者提供Git仓库的托管服务，是全世界最大的代码集中地，被戏称为“全球最大同性交友网站”。。但是对于很大一部分程序员来说，GitHub却是一个陌生的地方。我们中有些人可能从来没有申请过一个账号，没有创建过属于自己的Repository，甚至没有真的去访问过这个网站。更不用说要在上面看看有哪些热门的开源项目，尝试着为这些项目添砖加瓦既然人人都说它好，那它到底好在哪里？或许，我们应该花点时间重新审视GitHub。在很长一段时间，项目的源代码是公司的财产，与商业秘密有关，是封闭和不可能公开的。后来开始有人在互联网上分享自己写的代码，互相讨论，逐渐形成了一种特殊的虚拟社区。社区成员大部分都是职业的程序员或编程爱好者，他们根据相应的开源软件许可证协议公布软件源代码，分享源代码，共同自由学习交流。GitHub的出现，极大地推进开源社区的发展。在上面，我们可以随意地下载各种著名开源项目和开源开发框架。例如android系统的源代码、前端开发的jQuery框架、Spring系列开发框架、MyBatis等等。1.3.2XmindXmind，一款思维导图设计软件，在网站设计或者其它项目的组建和开发过程中，对梳理流程、思路，提开开发速度有非常大的帮助。现在的信息量真的是非常大，各种微信群，各种在线学习，各种书籍，看一遍，听一遍还可以，但是要想复习就很难，天天工作那么忙，真的是没有时间重复观看，但是有了这个宝贝之后，可能2个小时要看完的内容，你5分钟就复习一遍，快速帮助你回忆，非常方便，简单直接，而且可以随时在手机中查看，真的是让我产生依赖了。我们做网站时，一定事先画好思维导图，这样你在开发网站时会显得特别有条理，开发效率会变的很高。1.3.3Yii2框架为Yii2框架之所以称之为高效快速开发的一款框架，是因为有一个神奇的工具Gii，用过Yii1框架的Coder都知道，Gii可以为你快速生成代码，也就是说搭建一个可以增删改查的WebApp可能一行代码都不用写。当然作为Coder，不写代码怎么能实现我们想要的功能呢。介绍一下如何使用gii工具快速实现CRUD功能。框架安装完成后可以通过如下链接访问Gii工具，http://localhost/yii2test/backend/web/index.php?r=giiYii2的Gii工具使用了Bootstrap，对比Yii1看起来漂亮了许多。yii2框架提供的生成工具有6个：Model，CRUD，Controller，Form，Module，Extension我安装了一个yii2-kartikgii插件，此插件是用来生成Kartik模式的CRUD方法的。本次就拿KartikCrud配合默认生成工具来讲解。模块的生成，如果你想实现应用模块化，那么ModuleGenerator能帮助到你。点击ModuleGenerator生成模块生成一个名为“user”的模块。1.3.4Layui框架讲真，layui确实简洁大方，而且是拿来即用，几乎没有入门门槛。最近也调研了一些基于yii的UI（elementUI等），不得不承认，结合yii可以大幅提高开发效率。个人认为，视觉效果上layui更胜elementUI，对于专注于后端的程序猿，vue可以作为layui的补充。但layui相比于elementUI少了一些组件（如Badge标记等），如果在这些方面尽快补上就更好了。此外，layer作为弹层组件比elementUI中的弹层更轻量。layui是应需求而生，目标用户非常明确服务端程序员。大部分程序员同学还在为炫技感到兴奋的时候，人家闲心同学看到的是更深层次的业务需求，从这个层面上看就比别的同学高出多少倍。目前大部分前端大牛都在搞移动前端框架，如果再搞一个类似的框架估计很难脱颖而出，不如反其道而行。1.3.5Photoshop当我们看的PS教程越来越多、掌握的PS技巧越来越多的时候，可能就反思最初看到的教程到底是不是正确的。在背景图层上直接编辑，由于PS初学者总会犯些小错误，所以大多数的Photoshop教程都会要求创建副本，然后在副本上进行操作，即使出错都可以迅速回到原点，再次进行操作。不过，如果你已经意识到自己的每一步操作都能令作品更加完美，那就没有需要再回到原点了。用好橡皮擦工具，橡皮擦与图层蒙版的功能比较类似，通过“擦掉”和“遮蔽”，就能将不想要的像素不显示出来。而图层蒙版的优点在于通过改变蒙版颜色的不透明度，达到不同程度的遮蔽效果。所以在大多数情况下都比较建议选用图层蒙版，因为蒙版下的图像仍在，只是被“遮蔽”，只要改变黑色的深浅就将图像显示出来。键盘快捷键会让人错过一些发现，在Photoshop教程中，时常提及通过使用键盘快捷键进行操作。比如，通过复制目标图层来创建新图层，快捷键是Ctrl+J，菜单选择是“图层>新建>通过拷贝的图层”。

第二章需求功能实用性分析2.1网站流量转换分析一个好的网站成功的原因各不相同，但是，有一点是不能忽视的，那就是用户的参与性。可以说，每个网站都是一个社区，人们可以在这里发布信息，与我们进行沟通交流，人们也可以在这里阐述自己的观点或者评论，再或者在这里交朋识友。互动性的重要特征就是它既要能满足用户之间的沟通与交流，又能提高用户的参与和贡献，这才能使网站赢得良好的口碑，并且很好地聚集人气。总之，如果我们在网站平时的维护或者推广过程中，时时注意到上述的这几个点，相信慢慢的自己的网站一定能积累自己想要的客户，也自然而然的受到外界的认可，不仅仅是用户成交方面。所以我们的网站需要内容是可以分享的，而且网站的内容是可以交流的，我们还要设计一些互动，这些小功能都会使我们获得更多的用户。2.2在线购物流程如何在我们网站上购物，打开我们的网站，进入主页，进入主页面，你看看有没有喜欢的商品，你也可以在搜索栏中输入需要的商品名称，点击搜索就可以了，搜索后会出来很多商品。你可以点击要购买商品的照片进入了解详情，就可以选购您所要购买的甜品，选择一下大小和价格，点击确定后进入下一步操作，点击确定以后，如果你第一次在平台购物，你需要填写收货地址、联系电话等一些信息，填写完成之后呢即可选择付款方式，支付完成后，你可以在个人中心里的“待发货”中查看相关订单详情了，下面这张就是这个操作的示意图，如图2-1。图2-1（在线购物流程）2.3可行性分析2.3.1技术可行性二点点甜点网站属于二次开发，相对于传统开发方式上，开发难度有所降低，网站开发过程中所使用的yii后端框架、bootstrap前端框架、php语言、js语言都是专业课学习的内容，开发过程中所使用的方法，网站的功能的设计方法都是很简单的，因此网站的开发技术上是可行的。2.3.2经济可行性开网店并不需要多少钱，大概投资了2000元左右了，因为网店是属于虚拟店铺，不需要租门面，不需要交水电费等，也可以不用囤货，所以开网店比做实体店投资少很多，工作人员自己或者是店内的员工都可以，经济上是可行的。

第三章系统架构设计3.1网站的设计体现在这个快节奏的时代，人们的耐心总是有限的，所以网上购物系统设计上要多费心思，特别是移动端的购物系统受到手机屏幕的限制，更需要将系统界面设计精美直观，能够第一时间吸引到消费者的注意，并能够点击进入到你搭建的网上购物平台浏览，进而为平台带来更多的流量和销量。在做网上购物系统设计时要重视界面的美观度，并不是说要多么花哨，当一个页面里放了太多的东西不单会影响加载速度，还会让整个网站页面显得杂乱拥挤。一般而言，简洁、大方的网站界面能够给消费者带来舒适的视觉体验。特别是要根据商家所处的行业和企业特色，选择符合实际情况的设计风格。一个网上购物商城系统存在的终极目的就是能满足消费者获取产品信息和完成购物流程，从而为商家拓展销售渠道。因此做设计时要分析消费者的需求，如优惠信息、产品价格和支付信息等，并展示在比较显眼的位置。网上购物系统主要包括前台、后台和模板页三大块，因此在设计上要界面、业务、数据分开，关注每个层次的焦点，遵照此原则设计，将分为3个大层次：表示层、业务逻辑层、数据访问层。作为一个好的购物系统商城，页面的排版设计是需要有明确的，并且在颜色搭配上要合适，这都需要设计师进行巧妙的搭配，在不浪费页面空间的同时给用户以最好的体验。3.1.1网站设计结构一个好的网站，要有一个好的结构，链接结构是相对于外部的物理结构来说的，也就是网站的一个合理逻辑的提现，有内部链接形成。举例来说就是你的网站不可以只有一条路，要么从前往后，要么从后往前，你的网站应该像城市的公交车交通路线一样呈网状结构，就是可以随时上车，随时下车，随时反向，随时换乘，四通八达，灵活无阻，具体情况如下图3-1网站设计结构图。图3-1（网站设计结构图）3.1.2网站模块设计1、在线支付功能：电商网站设计中，支付功能是必不可少的，你需要了解下现在主流网上付款方式有哪些，不同客户所使用支付方式不一样，为了服务不同的购买人群，网站在支付方式设计了微信、支付宝、银行卡三种支付方式。2、产品搜索功能：一般网站提供的数据会非常的多，用户想像在最短的时间内找到自己需要的信息，产品搜索功能是必要的，有了该功能之后，用户就可以通过搜索，直接找到自己所想要产品进行购买，能够提高购物网站用户体验。3、用户登录功能：用户登录方式现在也有很多种，比如说微信登录、QQ登录、邮箱登录、手机号码登录等等，登录方式多，这样可以节省这些用户注册账号时间，有利于他们更好的去购物。4、网站会员功能：会员功能就是讨好这些忠实客户最好功能。购物网站设计中所需要加入功能是非常多，其实功能并不是购物网站重点。购物网站系统才是关键，像一些购物网站有第三方商家入驻，在网站后台操作上，需要设计三个后台，这是一项比较复杂事情。3.2用户注册登录流程图评价网站运营好坏，除了一大堆数据之外，还有一个关键的地方，那就是注册用户的多少，用户只有注册了，才算是真正的用户的开始，注册步骤越简单越能给用户留下好的印象。下面是常见的注册流程，如下图3-2所示。图3-2（注册流程）第四章系统详细设计及代码实现4.1主页设计展示市面上的一些网站设计公司它在已经形成特定的设计思路，在设计理念上也是很守旧，然而随着网络行业不断发展，技术以及理念等都是在不断的进行翻新，而如果坚持这样的方式是难以提高竞争力的，因此完善网站以及提升体验就成为了当中务必重视的一个问题，别具一格的设计才能让网站访客眼前一亮。我们网站是在首页是以一张漂亮的糕点为背景进行设计，如图4-1所示。图4-1（主页背景图）下面展示首页的部分代码：publicstaticfunctionloadValidatorMetadata(ClassMetadata$metadata){$metadata->addPropertyConstraint('path',newAssert\NotNull);$metadata->addPropertyConstraint('path',newAssert\NotBlank);$metadata->addPropertyConstraint('path',newAssert\Length(['max'=>255,]));$metadata->addPropertyConstraint('sortOrder',newAssert\NotNull);$metadata->addPropertyConstraint('sortOrder',newAssert\Range(['min'=>0,'max'=>65535,]));}.2产品列表展示想生意好，好的网站布局少不了。要想产品卖的好，产品摆放要做好，在网站上也是样的道理，相对于购物类的网站，用户需要快速浏览查看每个列表的信息，从而针对优惠信息进行对比，因此采用列表布局较为适合。如图4-2。图4-2（产品列表信息）下面给出的代码部分：publicfunctionaddCoupon(Coupon$coupon){if($this->coupons->contains($coupon)){thrownewInvalidCartActionException('DuplicateCoupon');}if(!$this->couponCanCombineWithOtherCoupons($coupon)){thrownewInvalidCartActionException('Cannotstackcoupon');}if(!$this->existingCouponsCanCombineWithOtherCoupons()){thrownewInvalidCartActionException('Cannotstackcoupon');}$this->coupons->add($coupon);}4.3商品详情设计商品的详情页，是网站流量转化的关重要因素之一，为什么很多商品都没有转化，有很大原因是详情页没有打动买家，详情页除了要有美观漂亮的图片外，还需要辅以完美的文案，才能一击必中。如图4-3图4-3（商品介绍的展示）这部分展示的商品详情部分：publicfunction__construct(){$this->setId();$this->setCreated();}publicstaticfunctionloadValidatorMetadata(ClassMetadata$metadata){//TODO:ImplementloadValidatorMetadata()method.}publicfunction__clone(){$this->setId();}publicfunctiongetOptionValue():?OptionValue{return$this->optionValue;}4.4在线留言页面设计对于我们网站而言，在制作网站时添加上这个功能尤为重要。我们网站虽然有在线客服，但是在线客服不一定存在24小时工作的情况。而留言板，则可以在客服非工作期间，让用户进行留言，待客服进入工作时间后，便可对用户进行答复，留言页面数据提交的方式采用的是application/json，使用file_get_content从php://input里获得原始输入流，下图上4-4为留言页面。图4-4（留言页面）代码如下：publicstaticfunctionloadValidatorMetadata(ClassMetadata$metadata){$metadata->addPropertyConstraint('origUnitPrice',newAssert\NotNull);$metadata->addPropertyConstraint('origUnitPrice',newAssert\Range(['min'=>-2147483648,'max'=>2147483647,]));$metadata->addPropertyConstraint('quantityPrice',newAssert\NotNull);$metadata->addPropertyConstraint('quantityPrice',newAssert\Range(['min'=>-2147483648,'max'=>2147483647,]));}结束语亲身体会一次，才真真切切地体会到，自己独立做一个项目并非想像的那么简单。做项目并非做单独的一个网页，只需要把这个网页做的好就行了，你需要考虑到方方面面。一个月来,自己一个人做这个毕业设计.说起做这个做网站自己也是从来没有独自一人做过,刚刚开始做这个东西的时候是一头的雾水,我也不知道从哪开始干,该怎么干,到底干到什么程度。但是,当你按照自己的想法有点眉目的时候,需求象雪片一样,开始满天飞了.你也不知道到底该不该整理一下需求呢,还是就安现有的东西.继续往下干.这种摸着石头过河的日子,真不是好过的生活,但总算是完成了。要想做成一个网站，首先你要明确项目目标我做这个网站到底是为了干什么?我们该做在自己的脑袋中,应该有一个大概的软件运行效果图,可以多和别人交流交流，可以把你的思路用软件画一个思维导图，然后按照思维导图内容进行开发，只有这样你才能做的有条理，遇到不会的问题一定要问出来，不要不好意思问问题，不能因为不会，就不做那个功能。这样不仅浪费时间，你也不会做好一件事。总之做网站时，或者做任何事的时候，我们都要敢问，敢思考，敢学习，不会就问，还不会就去学，而且一定要坚持，不轻易改变方向和思路，要三思而后行。

致谢珍贵的三年的大学生活已接近尾声，感觉非常有必要总结一下大学三年的得与失，从中继