毕业设计（论文）-基于YII的小型手机电商网站设计与制作.doc

基于YII的小型手机电商网站设计与制作计算机与信息科学学院 计算机科学与技术（师范） 摘 要：本论文按照软件开发设计思想，从需求分析、系统设计、详细设计、系统实施等方面，详细阐述了电商网站从设计到制作的全过程。该网站是基于高性能的YII框架开发的，提高了电商网站的快速性、安全性和专业性。关键词：YII；电商网站；数据库Abstract：In this paper, according to the software development and design ideas, from requirements analysis, system design, detailed design, system implementation, etc., it elaborated on the electricity supplier site from design to production of the entire process. The site is based on high-performance YII framework for the development, improve the fast, safe and professional electricity supplier website. Key words：YII; Electricity supplier website; Database全套设计加扣 3012250582 1 需求分析 电子商务是现代的一种商务方式。从95年至今，仅十几年的时间我国电子商务行业发展迅猛，产业规模迅速扩大，电子商务信息、交易和技术等服务企业不断涌现，各种各样的电子商务网站如雨后春笋般出现，而随着年年电子商务网站销售额节节攀升，可以看出人们对电子商务的依赖也逐渐增强，网上购物的人群越来越多，以“用户购物体验需求”为导向,通过分析发现用户在传统购物中的购物行为和社会化心理特征,运用用户体验设计的方法,建立新的用户体验模型，通过用户新体验模型,最后将功能模块设计如下1。 （1）用户注册模块 用户注册模块用于用户填写自己的用户名、密码和确认密码，注册成为网站用户。（2） 用户登录模块 用户登录模块用于用户填写自己的用户名和密码，登录进入网站。（3）商品分类展示模块 商品分类展示模块分为护肤彩妆、母婴用品、汇吃美食、手机数码、运动户外、珠宝配饰六大类，每一大类以列表的形式展示商品，每个商品有商品缩略图、商品名称和商品价格展示。（4）商品列表展示模块 商品列表展示模块展示各种各样的商品，商品展示以行为单位，每行又有两个商品左右排列展示。（5）填写订单信息模块 订单信息模块用于用户填写姓名、电话、收获地址、商品数量等订单信息。（6）客户端下载模块 客户端下载模块固定于首页底部，由客户端logo、下载按钮和宣传描述信息组成，主要是为用户提供下载客户端入口。（7）管理员登录模块 管理员登录模块用于管理员输入用户名、密码和验证码，只有成功登录后才能进入后台管理界面。 （8）商品管理模块 管理员后台登录后，操作商品管理模块，可以对商品进行添加、删除、修改、查询，实现商品动态化管理2。2 系统设计通过分析，最后整个系统设计如图2-1 所示。电商网站网站前台网站后台商品分类客户端下载用户注册用户登录商品列表管理员登录商品管理购买商品商品列表用户登录提交订单去支付图2-1 系统设计图2.1 系统的顺序图顺序图主要是将交互关系表示为一个二维图。纵向代表时间轴，时间沿竖线向下延伸。横向轴代表了在协作中各独立对象的类元角色。类元角色用生命线表示。当对象存在时，角色用一条虚线表示。当对象的过程处于激活状态时，生命线是一个双道线。2.1.1 用户前台浏览顺序图游客访问电商网站后，可浏览各商品信息，包括商品分类、商品标题、商品缩略图、商品描述、商品单价、商品所属类别等，但是不能去购买商品、提交订单和去支付。只有注册用户登录后才可购买商品、提交订单和去支付。用户前台浏览如图2-2所示。去支付购买商品提交订单网站前台 1、输入地址 2、浏览商品分类、 3、填写姓名、 4、订单编号、 访问网站 标题、单价等 电话、地址等 订单金额图2-2 用户前台浏览顺序图2.1.2 管理员后台管理顺序图管理员登录后台后进行商品添加、删除、修改、查询管理，操作完后直接反馈到前台页面。管理员后台管理如图2-3 所示。 商品管理前台页面网站后台1、管理员登录 2、管理操作(添加、删 3、响应到浏览器 除、修改、查询） 4、继续操作 图2-3 管理员后台管理顺序图2.2 系统流程图2.2.1 用户注册流程图用户可以通过电商网站首页提供的注册入口进入注册界面，进行注册。当用户填入自己的信息并提交后，系统将对用户的注册用户名进行检查，如果发现用户名已被注册，页面将自动提示“该用户名已经存在”。为了防止用户输入密码时可能出现的错误，系统也将会检查用户确认密码输入的信息，如果信息不符合，也将给出“两次密码不一致”的提示。当所有信息都正确填写完毕之后，系统将用户的信息添加到数据库中，用户注册也就成功了。用户注册整个流程如图2-4所示。开始注册 用户检查注册成功是否是否可以注册加入数据库否验证确认密码是否成功密码检查否是是否符合标准是图2-4 用户注册流程图2.2.2 用户前台操作流程图网站前台首页商品分类商品列表客户端下载用户登录用户注册购买商品商品列表用户登录用户名和密码是否正确 否填写姓名等 是提交订单去支付图2-5 用户前台操作流程图2.2.3 管理员后台操作流程图后台登录界面用户名和密码是否正确 否网站后台管理界面 是商品管理增加删除修改查询否是操作是否正确 图2-6 管理员后台操作流程图3 详细设计 3.1 数据库设计 电商网站页面数据动态化实现的关键就在于数据的存储3。数据存储于MySQL数据库中，因此数据库的设计是非常重要的一个环节4。3.1.1 数据库说明本电商网站采用MySQL数据库来存储各类用户信息、商品信息、订单信息、管理员信息，用Navicat For MySQL来可视化操作数据库。在本电商网站中，我将数据库命名为shoplocal，其中包含的数据表如图3-1所示。图3-1 数据库结构图3.1.2 数据库概念结构设计数据库概念结构设计是整个数据库设计的关键，它具有一定的独立性5。程序员通常采用E-R 模型来描述概念结构，它可以清晰的将用户的数据表达出来。根据本电商网站所使用的数据库以及系统的功能结构画出系统E-R图如图3-2所示。usernamecategorypasswordmanager_idthumbnamedesc管理管理管理员idtel管理商品订单购买nameaddress拥有price用户originalpricetotalpriceidpasswordusernamecategoryid图3-2 系统E-R图当管理员登录时，需要管理员的信息，管理员的信息存储在数据库中，包括用户名、密码等属性，管理员信息E-R图如图3-3所示。passwordmanager_idusername管理员图3-3 管理员信息表的E-R图当用户注册时，需要将用户的信息存储到数据库中，包括用户名、密码等属性， 用户信息E-R图如图3-4所示。passwordusernameid用户图3-4 用户信息表的E-R图当用户提交订单时，需要订单信息存储到数据库中，包括姓名、电话、地址等属性，订单信息E-R图如图3-5所示。teladdressnametotalprice订单信息图3-5 订单信息表的E-R图 商品详情信息存储在数据库中，包括商品名称、描述、缩略图、单价、分类等属性，商品详情信息E-R图如图3-6所示。idpricedescnamethumbcategoryoriginalpricecategoryid商品图3-6 商品信息表的E-R图3.1.3 数据库逻辑设计手机商城网站系统创建的数据库名为“shoplocal”，MySQL数据库服务器的用户名是“root”，密码为空。在创建的数据库中包括4张数据表，其中各数据表实现的功能如表3.1所示。 表3.1 数据表功能说明表数据表名功能说明shop_goods商品信息表，存储商品id、商品名字、商品描述、商品缩略图、商品单价、商品分类、商品分类id、商品原价信息shop_manager后台管理员表，存储管理员的用户名、密码shop_order用户订单表，存储姓名、电话、收货地址shop_user用户信息表，存储用户的用户名、密码同时根据以上系统E-R图的分析，可以得到本系统数据库中的表和其字段信息。（1）管理员信息表shop_manager图3-7 管理员信息表截图（2）商品信息表shop_goods图3-8 商品信息表截图（3）订单信息表shop_order图3-9 订单信息表截图（4）用户信息表shop_user图3-10 用户信息表截图3.2 前台设计3.2.1 首页(1) 功能介绍作为电商网站首页，是用户第一个访问到的页面，考虑到用户体验，在首页列出了商品的分类，使用户能快速找到自己所需要购买的商品。提供了用户注册和登录的按钮，方便用户注册和登录。(2) 界面实现如图3-11 所示。图3-11 电商网站首页截图3.2.2 用户注册页面(1) 功能介绍用户注册页面有用户名输入框、密码输入框、确认密码输入框，也同时提供了立即登录按钮，已经注册的用户可以直接登录。(2) 界面实现如图3-12 所示。图3-12 用户注册页面截图3.2.3 登录页面(1) 功能介绍 登录页面有用户名输入框、密码输入框，也同时提供了立即注册按钮，没有注册的用户需要注册以后才能登录。(2) 主界面实现如图3-13 所示。图3-13 用户登录页面截图3.2.4 商品详情页面(1) 功能介绍 商品详情页面用户可以浏览到商品的描述、价格、缩略图、商品名称和商品所属类别。(2) 界面实现如图3-14 所示。图3-14 商品详情页面截图3.2.5 购买商品页面(1) 功能介绍 购买商品页面用户可以浏览到商品的描述、单价、缩略图、商品名称和所属类别，还有填写订单信息，包括填写姓名、电话、收货地址、商品数量等。(2) 界面实现如图3-15 所示。图3-15 购买商品页面截图3.2.6 去支付页面(1) 功能介绍 去支付页面用户可以浏览到商品的订单编号和订单金额，确认自己的订单信息。(2) 界面实现如图3-16所示。图3-16 去支付页面截图3.3 后台设计3.3.1 首页(1) 功能介绍系统后台首页包括添加、删除、修改、查询按钮，管理员可以点击对应按钮来管理商品。首页也提供了搜索框，在搜索框中输入关键字，就可以检索出对应的商品，方便管理员查找商品。(2) 界面实现 如图3-17 所示。图3-17 后台首页截图3.3.2 修改商品信息(1) 功能介绍后台修改商品信息页面主要显示商品的名称、描述、缩略图、价格、所属类别、单价、原价等，更改文本框中的内容就可以更改商品的对应信息，对于商品缩略图需要点击选择文件按钮，选择一张图片上传，才能更改原始图片，达到更改商品信息的目的。 (2) 界面实现 如图3-18 所示。图3-18 修改商品信息页面截图4 系统实施 4.1 YII安装 官方建议通过 Composer 的方式安装YII，首先访问 去下载Composer-Setup.exe，并双击安装Composer，等待Composer 安装后，打开cmd命令窗口，切换到一个可以通过 WEB 访问的目录，执行如下命令进行安装操作，第一步安装plugin：composer global require fxp/composer-asset-plugin:1.0.0-beta4。第二步创建YII应用：composer create-project -prefer-dist yiisoft/yii2-app-basic shop。 Composer asset plugin，它是通过 Composer 管理 bower 和 npm 包所必须的，此命令全局生效，一劳永逸6。YII 被安装在名为 shop 的目录中，你也可以随便选择其他名称。在安装过程中 Composer 可能会询问你 GitHub7 账户的登录信息，因为可能在使用中超过了 GitHub API 对匿名用户的使用限制。因为 Composer 需要为所有扩展包从 GitHub 中获取大量信息，所以超限非常正常。登陆 GitHub 之后可以得到更高的 API 限额，这样 Composer 才能正常运行。4.2 环境和开发工具4.2.1 选择 NetBeans IDE8.2的主要原因 NetBeans IDE8.2是一个免费的集成Html5、Css、JavaScript、JQuery和PHP的开发环境8。有代码智能提示功能，提高开发者写入代码速度，也减少了开发者对函数的记忆，代码出错后有出错提示，支持多语言开发，而且还可以追踪代码。4.2.2 选择 WAMP的主要原因 WAMP就是Windows Apache MySQL PHP集成安装环境，即在Windows下的Apache、PHP和MySQL的服务器软件9。PHP扩展、Apache模块,开启/关闭点点就搞定，再也不要亲自去修改配置文件了，WAMP它都会去做。它易用，界面友好，功能丰富，操作方便，因此是一个不错的选择。5 结束语回顾本论文从设计到制作的全过程，发现做电商网站是件比较麻烦的事情。全部数据要求动态传递，动态更新10。而且对于我刚刚学习YII这种比较流行且高性能的PHP框架，再加上网络上的资源很少，一般都不全面，星星点点，难度实在是较大，最后在导师的帮助下，还有自己不断在图书馆、网络上查找资源，才实现了预期的要求，但是还是有许多不完善和不足之处。在购买商品页面，当用户填写订单后点击去支付，还不能完成支付，这需要去支付宝官方网站，注册申请支付宝支付功能，付服务费，申请成功后，支付宝会为你提供支付接口，再按照接口标准接入，才能完成支付功能11。还有一点不足就是没有实现购物车功能，这将在以后不断完善中实现，也是我进一步学习的动力。通过这次系统设计，一方面，让我深刻体会到了导师英明指导的重要性，能让我们少走弯路，迅速走向成功。另一方面，我发现我参加过的二份工作对我的论文产生了深远影响。第一份工作在“闻康集团”，我主要是做pc网站、手机网站，对设计好的效果图进行切片，最后测试，发布到互联网。在这次工作中因为接触到了很多设计图，所以对我这次论文的界面设计帮助很多。第二份工作在“重庆网络广播电视台”，这里是一个很大的发展平台，我