《网页设计与网站建设》设计报告.doc

网页设计与网站建设-设计报告 学院： 电子商务学院 专业： 电子商务 班级： 姓名： 学号： 成绩： 考核内容评分标准得分数据库设计共15分。表结构（含主键）与表间关系设计是否合理。用户界面体验共15分。LOG设计、页面的美观程度、导航功能。前台主要功能页面共40分。用户注册、鲜花（分类）浏览、购物车和订单查询。后台管理员功能页面共30分。订单状态管理、商品管理、网站文件上传。基于ThinkPHP框架的鲜花网站设计http:/localhost/Flower2/index.php/Index/index （项目名/入口文件/控制器/方法） http:/localhost/Flower2/1 基于MVC模式的ThinkPHP框架1.1 关于MVC框架ThinkPHP（以下简称TP）是PHP的一个免费的面向对象的轻量级的开源开发框架，是为简化企业的Web应用开发而诞生的。使用TP，你可以更方便和快捷地开发和部署Web应用。TP采用模块和操作的方式来执行。用户的请求会通过入口文件生成一个应用实例，应用控制器（也称核心控制器）会管理整个用户执行的过程，并负责模块的调度和操作的执行，并且在最后销毁该应用实例。TP 是基于MVC设计模式的。MVC只是一个抽象的概念，倡导将应用程序的逻辑层和表现层进行分离。TP中的MVC分层大致体现在：l 模型（M）：模型的定义由Model类来完成；l 控制器（C）：应用控制器（核心控制器App类）和Action控制器都承担了控制器的角色，Action控制器完成业务过程控制，而应用控制器负责调度控制； l 视图（V）：由View类和模板文件组成，模板做到了与程序的100分离，可以独立预览和制作。引入TP框架后，对于客户端的HTTP请求，PHP网站的App应用控制器（对应于C层）接收后，调用相应的Action控制器，其处理过程包含对M层（数据库访问）及V层（模板解析）的调用，最后返回客户端HTML代码。注意：TP并不依赖M或者V ，也就是说没有模型或者视图也一样可以工作。TP甚至也不依赖C，这是因为TP在Action之上还有一个总控制器，即App控制器，负责应用的总调度。在没有C的情况下，必然存在视图V，否则就不再是一个完整的应用。引入TP框架后PHP网站工作流程图1.2 ThinkPHP框架及其主要类（含方法）ThinkPHP（以下简称TP）是PHP的一个免费的面向对象的轻量级的开源开发框架，是为简化企业的Web应用开发而诞生的。使用TP，你可以更方便和快捷地开发和部署Web应用。l 模型类M：创建与表对应的实体类对象模型在应用程序中有着更好的重用性和扩展性，在TP中，模型用于表描述实体对象或业务逻辑，模型类Model对应于TP核心包（基础类库）里的文件ThinkPHPLibCoreModel.class.php。使用下面的方式来创建与数据库表user对应的实体对象：$m=new Model(user); /创建对应于数据表user的实体（集）对象/$m=M(user); /等效写法Model类封装了对数据的CRUD等方法，因此，可对$m应用如下方法：l select()：查询表的全部记录，返回一个二维数组；l limit()：获取表中的若干连续的记录；l where()：记录集的条件筛选；l find()：查询指定条件的记录，返回一个二维数组；l add()：增加记录方法；l delete()：删除指定的记录，返回删除的记录总数；l update()：更新指定的记录方法，返回更新的记录总数；l save()：保存当前记录方法；1.3 引入TP框架后的网站文件系统下载TP框架压缩包并解压后，将其内的TP文件夹复制到一个需要该框架的PHP网站项目根目录（如c:wampwwwtestTP）里，并编写引入了TP的前台主入口文件index.php，其关键代码如下：文件c:wampwwwtestTPThinkPHPThinkPHP.php的主要代码如下：/ 系统目录定义defined(THINK_PATH) or define(THINK_PATH, dirname(_FILE_)./);defined(APP_PATH) or define(APP_PATH, dirname($_SERVERSCRIPT_FILENAME)./);defined(APP_DEBUG) or define(APP_DEBUG,false); / 是否调试模式defined(RUNTIME_PATH) or define(RUNTIME_PATH,APP_PATH.Runtime/);/ 加载运行时文件require THINK_PATH.Common/runtime.php;可以看出，任何TP框架的应用最终都是进入TP框架的运行时环境。初次访问http:/localhost:82/index.php时的浏览效果如图7.2.2所示。图7.2.2 初次访问时的浏览效果浏览网站项目的index.php文件，将在项目根目录里自动生成一个名为Home且包含有多个子文件夹的文件夹（如果项目根目录下没有文件夹Home的话）。此时，会在网站根文件夹c:wampwwwtestTP下自动创建一个名为Home的子文件，其文件夹的文件系统结构如图7.2.3所示。图7.2.3 引入TP框架后的网站前台文件系统项目文件夹testTP主要包含前台子项目文件夹Home和TP框架的系统文件夹ThinkPHP，其主要的子文件夹及文件的作用如下：l index.php：前台子项目Home的入口文件；l Home：运行index.php后自动生成的前台子项目文件夹（首次运行时生成）；l HomeConfconfig.php：前台子项目Home应用TP的配置文件；l HomeLibAction：前台子项目Home的模块（控制器）文件夹；l HomeLibTpl：前台子项目Home的模板文件夹，每个模块在该文件夹又对应一个子文件夹；l ThinkPHP：TP框架的系统文件夹。当涉及数据库访问时，需要修存放在文件夹HomeConf里的配置文件，其代码可按如下格式配置：mysql, /设置数据库类型 DB_HOST=localhost,/设置主机 DB_NAME=flower_tp,/设置数据库名-关键 DB_USER=peng, /设置用户名-关键 DB_PWD=123, /设置密码-关键 DB_PORT=3306, /设置端口号 /DB_DSN=mysql:/root:localhost:3306/flower_tp,/优先于DB_NAME设置 DB_PREFIX=tp_, /设置表前缀 TMPL_L_DELIM=, /修改右定界符,默认是 URL_PATHINFO_DEPR=/,/修改URL的分隔符） SHOW_PAGE_TRACE=true /页面跟踪);?访问网站主页时，实质上是执行了主控模块Index的默认方法index()，模块Index对应于文件HomeActionIndexAction.class.php，该类文件中包含index()方法。默认创建的文件HomeActionIndexAction.class.php的代码如下：show(* padding: 0; margin: 0; div padding: 4px 48px; body background: #fff; font-family: 微软雅黑; color: #333; h1 font-size: 100px; font-weight: normal; margin-bottom: 12px; p line-height: 1.8em; font-size: 36px :)欢迎使用 ThinkPHP！,utf-8); 注意：此处由TP自动生成的Index模块中的index()方法没有调用模板，而在网站开发实务中，主控模块默认执行的方法一般会调用某个模板。类似地，可以在TestTP项目里建立网站后台入口文件admin.php，其代码如下：2 TP系统常量与配置文件TP提供了一些系统常量与模板变量，它们是应用开发的基础，在模块及模板设计时可以应用它们。2.1. TP系统常量TP内建的常用系统常量有：l THINK_VERSION：框架版本号；l APP_NAME：表示当前项目名；l APP_PATH：表示当前项目路径；l APP_PUBLIC_PATH ：项目公共文件目录；l TMPL_PATH ： 项目模版目录。注意：系统常量APP_NAME和APP_PATH是在项目入口文件中定义的。TP内建用来存放路径信息的系统常量，以双下划线“_”打头和结尾，在访问时会自动替换。例如：l _ROOT_：相对于Web服务器根路径的网站根路径；l _PUBLIC_：项目公共文件夹路径l _APP_ ：项目入口文件地址；l _URL_（或_SELF_）：当前请求的模块地址；l _ACTION_ ：当前请求的方法地址。2.2 网站系统的配置文件及入口文件网站前（后）台的配置文件及其相应的入口文件如下： 项目配置文件是一个带键名的数组。例如，前台的配置文件代码如下：mysql, /设置数据库类型 DB_HOST=localhost,/设置主机 DB_NAME=flower_tp,/设置数据库名-关键 DB_USER=huhao, /设置用户名-关键 DB_PWD=huhao123, /设置密码-关键 DB_PORT=3306, /设置端口号 /DB_DSN=mysql:/root:localhost:3306/flower_tp,/优先于DB_NAME设置 DB_PREFIX=tp_, /设置表前缀 TMPL_L_DELIM=, /修改右定界符,默认是 URL_PATHINFO_DEPR=/,/修改URL的分隔符） SHOW_PAGE_TRACE=true);?3 TP模型、模块与控制器及其访问模式3.1 TP模块与控制器TP模块实质上是一个类文件，它由若干方法组成。其中，在调用TP模块时默认执行的方法是index()。TP的每个模块就是一个控制器类，位于项目的LibAction目录下面。类名就是模块名加上Action后缀，例如UserAction类就表示了User模块。控制器类必须继承系统的Action基础类，这样才能确保使用Action类内置的方法。需要为每个模块定义一个控制器类，控制器类的命名规范是：模块名+Action.class.php （模块名采用驼峰法并且首字母大写）前台默认对应主控制模块是Index，对应的控制器与项目目录下面的文件Lib/Action/IndexAction.class.php相对应。控制器的默认操作是执行方法index()，它是控制器的一个public方法。事实上，初次生成项目目录结构的时候，系统已经默认生成了一个默认控制器（就是之前看到的欢迎页面），我们可以把方法index()改成下面的代码后测试其浏览效果： class IndexAction extends Action public function index() echo Hello，welcome to ThinkPHP world！; 与模板相关的常用方法如下：l assign()：创建模板变量；l display()：显示默认或指定的模板；l show()：显示指定的信息；l success()：显示操作成功提示信息，在其短暂停留后自动跳转到指定的模块（方法）；l error()：显示操作不成功提示信息，在其短暂停留后自动页面回退；l redirect()：不带计时的直接跳转。注意：(1)每个模块类继承于基类Action，因此，每个模板类拥有类Action的所有方法。(2)作为一个特殊的对象引用方法$this，存在于类的每个成员方法中。成员方法属于哪个对象，$this引用就代表哪个对象。因此，在引用上面方法时，需要前缀$this-，例如$this-display()等。(3)上面的计时跳转和直接跳转方法只能用在本应用内。3.2. TP模块访问模式任何一个URL访问都可以认为是对某个模块的某个操作，例如下面的几种访问方法是等效的：http:/localhost:82/ch07/ThinkPHP_demohttp:/localhost:82/ch07/ThinkPHP_demo/index.phphttp:/localhost:82/ch07/ThinkPHP_demo/index.php/Index http:/localhost:82/ch07/ThinkPHP_demo/index.php/Index/index 系统会根据当前的URL来分析要执行的模块和操作，这个分析工作由URL调度器Dispatcher（对应于核心库里的类文件dispatcher.class.php）来实现，并且都分析成如下的规范格式：http:/域名/项目名/分组名/模块名/操作名/其他参数Dispatcher会根据URL地址来获取当前需要执行的项目、分组（如果有定义的话）模块、操作以及其他参数。 read操作其实就是IndexAction类的一个公共方法，所以我们在浏览器里面输入URL： http:/localhost/App/index.php/User/read/id/8上面的访问模式称为PathInfo访问模式。还有一种常用的访问模式是普通访问模式，它在入口文件后面使用“?”、使用了用于指定模块的m、用于指定控制器的c和用于指定方法的a。例如，下面的两种访问模式等效：http:/localhost:82/ch07/ThinkPHP_demo/index.php/Index/index /PathInfo模式http:/localhost:82/ch07/ThinkPHP_demo/index.php?m=Index&a=index /PathInfo模式注意：(1)使用PathInfo访问模式时，在方法后面还可以加“/参数名/参数”，以实现对请求页面的GET传参。(2)除了上面两种常用的访问模式外，还有所谓的REWRITE伪静态模式和兼容模式（混合模式）。控制器必须继承Action类，一个模块可以包括多个操作方法。模块的设计最终是类方法的设计，其要点如下：l 每个模块类都继承于基类Action，通过使用方法$this-assign()来建立模板变量；l 通过TP函数M()建立与某个数据表相应的实体模型类对象；l 通过模型类方法select()将实体集数据转存至一个二维数组中；l 通过使用方法$this-display()调用默认模板或指定的模板。4 TP模板设计一般地，TP的每个模块会对应一个在文件夹Tpl里与模块名同名的子文件夹，在其内供该模块方法调用的模板文件。在模板文件里，除了可以HTML标记和TP的系统常量与模板变量外，还可以使用TP的专用标签。4.1 循环输出标签volist/foreachVolist通常用于实现对二维数组的循环输出，它有两个必填属性，一个属性是name，表示要输出的数据模板变量；另一个是属性是id，表示循环变量。 注意：TP的循环标签foreach与volist类似，只是将id属性换成item。4.2 模板包含标签include对于很多模块（方法）调用的公共模板文件（如网站头部和底部），可将它们存放在Tpl下一个名为Public的子文件夹里，以达到快速修改的目的。TP框架中，可以将模板中的公共部分可以提取出来形成一个独立的模板文件，使用模板标签include来包含外部的模板文件，使用方法如下：例如：注意：(1)TP模板标签与使用HTML标签方式相同，不受配置文件的影响。(2)模板文件名必须包含后缀，特别要注意文件包含指的是服务器端包含，而不是包含一个URL地址，通过属性file给出被包含文件的服务器端路径，如果使用相对路径的话，则是基于项目的入口文件位置。5 使用TP框架开发的鲜花网站Flower25.1 网站文件系统及其关键配置鲜花网站根目录位于c:wampwwwflower2，包含一个前台入口文件index.php和一个后台入口文件admin.php。前台应用对应于文件夹Home，后台应用对应于文件夹Admin。在网站根目录里新建名为Public的文件夹，它是前台及后台共用的文件夹，其内又分别创建名为Css、Images和Js的文件夹，分别用于存放CSS样式文件、图像素材文件和JS脚本文件，如图所示。网站数据库等配置信息，必须在两台及后台的配置文件文件（即HomeConfconfig.php和HomeAdminconfig.php）中，要添加的主要配置项信息如下：mysql, /设置数据库类型 DB_HOST=localhost,/设置主机 DB_NAME=flower_tp,/设置数据库名-关键 DB_USER=huhao, /设置用户名-关键 DB_PWD=huhao123, /设置密码-关键 DB_PORT=3306, /设置端口号 /DB_DSN=mysql:/root:localhost:3306/flower_tp,/优先于DB_NAME设置 DB_PREFIX=tp_, /设置表前缀 TMPL_L_DELIM=, /修改右定界符,默认是 URL_PATHINFO_DEPR=/,/修改URL的分隔符） SHOW_PAGE_TRACE=true);?与使用纯PHP制件的鲜花网站Flower1相比，有如下重要的不同：l 数据库flower_tp的所有表名都加上了前缀“tp_”；l 前台及后台文件分开存放但共用TP框架；l 前台及后台公用的文件夹c:wampwwwPublic；l 模块控制器控制程序的运行；l 模块与模板文件命名及调用有特别的约定。5.2 网站前台主控模块及其模板网站前台共用的模板文件存放文件HomeTplPublic里，开发除了主页之外的每个模块时，都应在HomeTpl下建立与模块名相同的文件夹，如图所示。 网站前台文件系统示意图网站前台页面共用的模板文件header.html及footer.html存放文件HomeTplPublic里，模板文件header.html通过系统变量_PUBLIC_引用公共文件夹Flower2Public里的图像文件等，其设计效果如图所示。网站前台主页头部浏览效果图头部模板文件header.html中包含了导航链接和鲜花商品搜索表单，其代码如下： 登录丨 注册 欢迎您：     登出丨注册 首页    鲜花     站内新闻     留言簿     会员信息修改     购物车     我的订单     联系我们 dt $(function () /本方法在页面加载（或刷新）时会自动执行 $(#login).click(function () /login是“登录”超链接的虚拟样式 $(#cover_log).show(); /显示遮罩 ); $(#register).click(function () $(#cover_reg).show(); ); $(.cancel).click(function () /单击登录框里的“取消”按钮时,cancel是虚拟的.样式 $(#cover_log).hide(fast); /将隐藏”登录“遮罩 $(#cover_reg).hide(fast); /将隐藏”注册“遮罩 ); ); setInterval(document.getElementById(header22_dt).innerText=new Date().toLocaleString()+ 星期+日一二三四五六.charAt(new Date().getDay(), 1000); window.onload = function () /调用第三方JS脚本里定义的对象及其方法，第1参数为图片数量 babyzone.scroll(5, banner_list, list, banner_info); 网站前台主页对应的模板文件HomeTplIndexindex.html，除了调用分别调用header及footer两个模板外，还调用第三方JS显示了图片新闻、使用TP模板标签volist显示了来自主控模块执行默认方法index()后传入了新闻数据。前台主页的主体内容是推荐商品的显示，使用CSS+Div布局来显示8种推荐的商品，其相关信息（如商品名、图片、价格等）包含在数据表flower_details里。其设计效果如图所示。前台主页主体及底部浏览效果网站前台主页默认使用模板文件的代码如下： 鲜花网站主页 a href=_URL_/newsdata?id= img src=_PUBLIC_/   元 a href=_URL_/flower_detail?bh=   a href=_APP_/ShoppingCar/putcar?bh= Pic2.innerHTML = Pic1.innerHTML; /复制一组图片，但被隐藏 function scrolltoleft() /定义向左移动方法 sm.scrollLeft+; /改变层的水平坐标，实现向左移动 if(sm.scrollLeft=Pic1.scrollWidth) /需要复位 sm.scrollLeft=0; /层的位置复位，浏览器窗口的宽度是有限的 var MyMar = setInterval(scrolltoleft, 40); /定时器，方法名后不可加一对括号() /两面两行是用方法响应对象的事件 sm.onmouseover=function() /匿名方法（函数） clearInterval(MyMar); /停止滚动 sm.onmouseout=function() MyMar = setInterval(scrolltoleft, 40); /继续滚动 网站前台主页对应的主控模块文件HomeLibActionIndex.class.php的代码如下：where($condition)-find(); $this-assign(news_data,$news_data); if(empty($_SESSIONusername) $isLogin=尚未登录; else $isLogin=$_SESSIONusername; $this-assign(isLogin,$isLogin); /建立模板变量 $this-display(newsdata); /调用默认模板TplIndexindex.html public function index() /默认方法 $m_news=M(tnews); /新闻表 $arr_news=$m_news-limit(7)