简述电子商务网站前台功能的设计与应用（PHP项目案例开发 | 电子商务系统：前台功能模块设计）

php自学教程http://www.xiasansan.com/post/

电子商务源于英文Electronic Commerce，简称EC，是利用简单、快捷、低成本的电子通信方式，在互联网上开展的各种商贸活动近年来，随着信息技术的不断发展，电子商务已关系到经济资源结构、产业升级和国家整体经济竞争力，利用电子商务平台出售或购买商品，更是在日常生活中随处可见。http://www.xiasansan.com/post/

本系列文章介绍一个简单的电子商务系统项目开发过程，帮助进一步熟悉PHP Web应用开发的框架技术1前台功能资源模块设计在Web应用项目中，由于数据表之间的相互关联，常常不能或不方便使用数据库管理工具直接向数据表中插入测试数据，需要通过代码来完成相应的操作。http://www.xiasansan.com/post/

所以，在通常情况下，Web应用项目的开发都是从后台管理资源系统功能模块的开发开始的由于本教材是PHP Web项目开发学习用基础教程，并且为读者提供了完整的数据库测试数据，所以，本案例项目的开发从前台模块的功能实现开始。http://www.xiasansan.com/post/

前台首页设计内容请查看 上一篇内容1●商资源品展示模块系统前台商品信息的显示请求，主要来自访问前台主页、访问商品分类、访问合作品牌、访问合作店铺，以及查看商品详情等情形下面实现部分功能1. 特定商品信息展示。http://www.xiasansan.com/post/

本项目中的特定商品包括最新、推荐品以资源及热卖商品，它们的信息在系统主页中显示，如图9.14所示。http://www.xiasansan.com/post/

■ 图9.14主页中的最新/热门/推荐商品信息显示该功能的实现比较简单，只要使用模型方法获取到相应的数据并在视图中输出即可// 获取主页中的最资源新/热门/推荐商品$this->data[goods_new。http://www.xiasansan.com/post/

] = $this->getFeatureGoods(is_new, 4);$this->data[goods_hot] = $this-资源>getFeatureGoods(is_hot, 4);$thishttp://www.xiasansan.com/post/

->data[goods_commend] = $this->getFeatureGoods(is_commend, 4);代码中的g资源etFeatureGoods()，是自定义的Home控制器私有方法，其代码如下：http://www.xiasansan.com/post/

/*** 获取最新/热门/推荐商品* @param string $feature* @param string $nu资源m* @param string $order* @return array*/privatehttp://www.xiasansan.com/post/

functiongetFeatureGoods($feature = is_hot, $num = FAL资源SE, $order = id){// 获取数据$this->load->model(goodshttp://www.xiasansan.com/post/

);$data = $this->goods->find__product_by_feature($fe资源ature, $num, $order);// 获取商品图片信息$this->load->model(http://www.xiasansan.com/post/

product_image);foreach ($data as $k=>$v) {    $im资源g = $this->product_image->getImageByProductID($v[id]);http://www.xiasansan.com/post/

$data[$k][img] = $img[0][file];}// 获取商品品牌$this资源->load->model(brand);foreach ($data as $k=>$v) {    $brand =http://www.xiasansan.com/post/

$this->brand->getDataByID($v[brand_id]);资源    $data[$k][brand] = $brand[0][name];}return $data;}由于商品的图片属性较多，所以将其单独存放在数据表wm_image中。http://www.xiasansan.com/post/

该表对应的模型为Prod资源uct_Image，通过其方法来获取商品图片属性2. 输出商品详情单击图9.14页面中每件商品信息中的“查看详情”按钮，则会跳转到系统前台的Product控制器，通过该控制器的detail()方法来输资源出商品的详细信息，如图9.15所示。http://www.xiasansan.com/post/

■ 图9.15商品详细信息的显示Product控制器的detail()方法代码如下/*** 输出商品的详细信息*/publicfunctiondetail(){//资源 获取商品$id = $this->uri->segment(。http://www.xiasansan.com/post/

3, 0);$goods = $this->goods->getDataByID($id);// 获取商品类型$category = $资源this->category->getDataByID($goods[http://www.xiasansan.com/post/

0][cat_id]);//面包屑导航$breadcrumb = array(    [name=>商品首页,href=>base资源_url().product],);// 将商品的PATH属性转换成面包屑导航项http://www.xiasansan.com/post/

$path = explode(,, $category[0][path]);foreach ($path as $v)资源{    $category = $this->category->getCategoryName([http://www.xiasansan.com/post/

id=>$v],1);    array_push($breadcrumb, [name=>$ca资源tegory[0][name],href=>base_url().product/category/.$v]);http://www.xiasansan.com/post/

}array_push($breadcrumb, [name=>商品 【.$goods[资源0][name].】 详情]);// 创建面包屑导航$this->bulidBreadcrumb($breadcrumb);http://www.xiasansan.com/post/

//加载数据$this->data[goods] = $goods;// 加资源载视图$this->load->view(product/detail, $this->data);;}注意： 页面中创建了由商品分类组成的面包屑导航。http://www.xiasansan.com/post/

在如图9.15所示的页面中，面包屑导航为“商品首资源页/电脑产品/电脑整机/笔记本/…”，其中的第1项“商品首页”表示全部商品；  后面是商品的一、二、三级分类上述代码中的buildBreadcrumb()为自定义的控制器私有方法。http://www.xiasansan.com/post/

/*** 构造面包屑资源导航* @param unknown $breadcrumb*/privatefunctionbulidBreadcrumb($breadcrumb){$breadcrumb_html = ;http://www.xiasansan.com/post/

$n =资源 count($breadcrumb);for ($i = 0; $i < count($breadcrumb)-1; $i++) {    $breadcrumb_html .=

.$breadcrumb[$i][href]." style="font-size: 20px; color: blue; line-height: 26px; text-align: left;">.$breadcru资源mb[$i][name]. / ;}$breadcrumb_html .= $breadcrumb[$nhttp://www.xiasansan.com/post/

-1][name];$this->data[breadcrumb_html] = $breadcr资源umb_html;}单击页面中的面包屑导航，可以查询到分类下的所有商品，它实现了商品的分类查询3. 商品分类输出。http://www.xiasansan.com/post/

在如图9.15所示的页面中，单击页面头部的商品分类，可以输出不同类型的商品信息由于头部资源区域大小有限，这里只输出了商品的一、二级分类单击页面头部的“家用电器”一级分类，则会输出所有的“家用电器”类型商品，如图9.16所示。http://www.xiasansan.com/post/

■ 图9.16商品分类显示商品的分类输出功能由控制器Product资源的category方法来实现，其代码如下/*** 商品的分类查询*/publicfunctioncategory(){// 获取商品分类ID与名称。http://www.xiasansan.com/post/

$category_id = $this->uri-资源>segment(3, 0);$category = $this->category->getCategoryName([id=>$category_id]);http://www.xiasansan.com/post/

// 查找该分类及其子类下的商品$goo资源ds = [];$this->getGoodsByCategoryID($goods, $category_id);// 设置面包屑导航$breadcrumb =http://www.xiasansan.com/post/

array(    [name=>商品资源首页,href=>base_url().product],);// 将商品的PATH属性转换成面包屑导航项$path = explode(,, $category[http://www.xiasansan.com/post/

0][path]);foreach 资源($path as $v){    $category = $this->category->getCategoryName([id=>$v],1);    array_push($breadcrum资源b, [http://www.xiasansan.com/post/

name=>$category[0][name],href=>base_url().product/category/.$v]);}array_push($breadcrumb, [name=资源>类型 【http://www.xiasansan.com/post/

.$category[0][name].】 全部商品]);// 构建面包屑导航$this->bulidBreadcrumb($breadcrumb);//加载数据$this->data[go资源odshttp://www.xiasansan.com/post/

] = $goods;// 加载视图$this->load->view(product/index, $this->data);}代码中使用了自定义私有方法getGoodsByCategoryI资源D()，它根据商品类型查询该类型及其子类型中的所有商品，代码如下。http://www.xiasansan.com/post/

/*** 根据商品类型获取商品信息* @param unknown $goods* @param unknown $category_资源id*/privatefunctiongetGoodsByCategoryIDhttp://www.xiasansan.com/post/

(&$goods, $category_id){// 获取全部分类$category = $this->category-资源>getAll();// 获取分类及其子类中的所有商品foreach ($categoryhttp://www.xiasansan.com/post/

as $c) {    $path = explode(,, $c[path]);if(count($path资源) == 3){foreach ($path as $p) {if((int)$p == $category_id){http://www.xiasansan.com/post/

$g = $this->goods->getDataByCategoryID($p资源ath[2]);if (!empty($g)) {foreach ($g as $gv){      array_push($goods, $gv);http://www.xiasansan.com/post/

}    }      }  }    }}}注意资源，该方法的第一个参数为引用，表示category()方法中的$goods变量商品均位于第三级分类中，所有只需要获取到第三级分类下的商品即可。http://www.xiasansan.com/post/

另外，单击系统主页侧边栏中的树形分类，也可以查询到第三级分类资源下的所有商品。如图9.17所示，为单击“家用电器/大家电/洗衣机”分类后的效果。http://www.xiasansan.com/post/

■ 图9.17商品分类显示前面已经介绍过，侧边栏中的树形分类数据是通过AJAX请求的方式获取的，所以单击树形结构中的节点资源时，必须通过AJAX请求的返回值得到该分类的ID，并且还要阻止用户单击一、二级分类节点时页面的跳转。http://www.xiasansan.com/post/

修改主页中的JavaScript脚本如下//侧边栏分类查询var test = tree.rende资源r({  elem: #side-category  ,data: http://www.xiasansan.com/post/

http://www.xiasansan.com/post/