TP-前台

最新推荐文章于 2022-07-18 00:15:22 发布

原创最新推荐文章于 2022-07-18 00:15:22 发布 · 657 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#响应式 #布局 #thinkphp

开发应用专栏收录该内容

170 篇文章

订阅专栏

前台：
响应式布局为了适应现在的手机屏幕你的网站的宽度会随着你的屏幕大小而自动适应
比如：width:100%; 设计做的，了解
前台在home里面
搭建前台首页：将css js 等放在commom里面
新建IndexController 直接继承 Controller
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
$this->display();
}
在config.php里面
//'配置项'=>'配置值'
'TMPL_PARSE_STRING' =>array(
'__COMMON__' => '/Application/Home/Common/', // 更改默认的/Public 替换规则
),
然后修改路径
在首页里面
幻灯片：IndexController
public function index(){

$banner = M("banner");
$banner_data = $banner->order("sort desc")->select();
$this->assign("banner_data",$banner_data);
找到index.html里面的banner，然后循环
推荐商品
$rec = M("rec");
$rec_data = $rec->order("sort desc")->select();
$this->assign("rec_data",$rec_data);
$this->display();
}
<ul class="slidee">
<foreach name="banner_data" item="v">
<li>
<a href="{:U('Goods/detail',array('goods_id'=>$v['goods_id']))}">
<img src="{$v.img}" alt=""></a>
</li>
</foreach>
</ul>
推荐商品
<ul class="list-unstyled">
<volist name="rec_data" id="v">
<li>
<a href="{:U('Goods/detail',array('id'=>$v['goods_id']))}">
<img class="lazy" src="{$v.img}"></a>
</li>
</volist>
</ul>
联系客服：
<a href="tel:4007200770">联系客服</a>
点击a标签，手机端会自动将a标签里面的tel后面的电话拨出格式 href="tel:电话号码"

首页其他的就只剩下页面跳转的链接了，做了的时候再改，也可以先假设

后台一个功能一个控制器

前台五六个功能用一个控制器
用户中心 {:U('User/index')}
购物车 {:U('Cart/index')}
全部商品 {:U('Index/cate')} --> 分类界面
订单查询 {:U('Order/index')}

做头尾分离：
在View下面新建 Public 文件夹
header.html 把index里面的头部那去过
footed.html 把尾部拿过去
<include file="Public:footer" /> 在模板层加载html页面
Public表示你要加载的html文件所在的文件夹 footer表示html的文件名
在视图html的后头部加载
<include file="Public:header" /> <head></head>
在尾部加载
<include file="Public:footer" /> （每个页面） <footer></footer>

点击全部商品： Index/cate
public function cate(){
$cate = D("Admin/Cate"); 夸模块调用模型
//$cate = D("Admin/Cate"); 跨模块调用我再Home调用Admin的模型
$cate_data = $cate->get_list();//得到的是一级分类
foreach($cate_data as $key=>$val){
$data1 = $cate->get_list($val['id']);
$cate_data[$key]['son'] = $data1;//把查询到的子分类放入到当前循环的变量里面
}
$this->assign("cate_data",$cate_data);
$this->display();
}
cate.html 分类.html 找到分类的li
<ul class="list-unstyled m-category-list">
<volist name="cate_data" id="v">
<li onclick="close_next({$v.id})">
<a class="fdayicon">
<img src="{$v.img}" style="float: left;width: 36px;height: 36px;border-radius: 50%;margin: 2px 10px 2px 0;"></i>
<h5>{$v.name}</h5>
<div>{$v.info}</div>
</a>
</li>
<foreach name="v['son']" item="val">
<li class="li_{$v.id}" style="margin-left: 50px;display: none">
<a href="{:U('Index/goods_list',array('cate_id'=>$val['id'],'cate_name'=>$val['name']))}" class="fdayicon"> //cate_name 是显示在商品列表的头部
<img src="{$val.img}" style="float: left;width: 36px;height: 36px;border-radius: 50%;margin: 2px 10px 2px 0;"></i>
<h5>{$val.name}</h5>
<div>{$val.info}</div>
</a>
</li>
</foreach>
</volist>
</ul>
在cate.html
用户中心 {:U('User/index')}
购物车 {:U('Cart/index')}
全部商品 {:U('Index/cate')} --> 分类界面
订单查询 {:U('Order/index')}
忘记密码 {:U('User/forget')}
产品详情 {:U('Goods/detail')}
产品列表页 U('Index/goods_list',array('cate_id'=>$val['id'],'cate_name'=>$val['name']))}
收索之后会跳转到商品列表页，所以先做商品列表页
goods_list 不能用cate_list hui 报错

产品列表页 cate_list.html
public function goods_list(){
$cate_id = I("get.cate_id",0,"int");
$cate_name = I("get.cate_name","分类名字","addslashes");
$goods = M("goods");
$goods_data = $goods->where("cate_id=".$cate_id)->select();
$this->assign("goods_data",$goods_data);
$this->assign("name",$cate_name);
$this->display("cate_list");
}
找到cate_list.html 修改路径循环遍历
<ul class="list-unstyled">
<volist name="goods_data" id="v">
<li>
<a href="{:U('Goods/detail',array('id'=>$v['id']))}" title="{$v.name}">
<img class="lazy pull-left" src="{$v.img}">
<div class="m-prolist-info">
<h3>{$v.name}</h3>
<h4>{$v.info}</h4>
<h5>￥{$v.shop_price}<del>￥{$v.market_price}</del></h5>
<span class="m-prolist-car"><i class="glyphicon fdayicon fdayicon-procart"></i></span>
</div>
</a>
</li>
</volist>

收索：在cate.html里面
<form action="{:U('Index/search')}" method="post">
<span class="navbar-search">
<input onblur="tijiao()" id="keyword" type="text" placeholder="寻找鲜果" class="form-control" name="keyword"/>
</span>
</form>
js里面先判断input里面是否为空，如果不为空就自动提交，否则就不提交
function tijiao(){
var keyword = $("#keyword").val();
if($.trim(keyword)!=""){
$("form").submit();//表单自动提交
}
}
在php里面
public function search(){
$keyword = I("post.keyword","水果","addslashes");
$goods = M("goods"); 到产品表里面收索
$goods_data = $goods->where("name like '%".$keyword."%'")->select();
$this->assign("goods_data",$goods_data);
$this->assign("name",$keyword);
$this->display("cate_list");
}
模糊查询：
查询名字里面有"张"的
select * from `user` where `name` like '%张%' 查询name字段里面有张字的
select * from `user` where `name` like '张%' 查询张开头的
select * from `user` where `name` like '%张' 查询张结尾的
%表示占位符占0到多个位置
_表示占位符只表示占一个位置
select * from `user` where `name` like '_张%' 查询名字第二个字是张的

产品详情：新建goods控制器产品详情 {:U('Goods/detail')}
namespace Home\Controller;
use Think\Controller;
class GoodsController extends Controller{
public function detail(){
$id = I("get.id",1,"int");
$goods = D("GoodsView"); 多表联查要使用视图模型
$goods_data = $goods->where("goods.id=".$id)->find();
$this->assign("goods_data",$goods_data);
$this->display();
}
}
namespace Home\Model;
use Think\Model\ViewModel;
class GoodsViewModel extends ViewModel{
public $viewFields = array( 'goods'=>array('id','name','info','cate_id','img','shop_price',"market_price"),//主表以及要查询的字段
'goods_detail'=>array('content','_on'=>'goods_detail.goods_id=goods.id'),
);
}
在视图里面 detail.html 修改头部路径
<ul class="slidee">
<li><img src="{$goods_data.img}"></li>
</ul>
<div class="m-pro-parameter">
<h3>{$goods_data.name}</h3>
<h4>{$goods_data.info}</span>
<div class="num_sel_lage pull-right clearfix">
<span class="inC">-</span>
<input type="text" id="buy_num" disabled="" value="1">
<span class="deC">+</span>
</div>
</h4>
<h5 class="clearfix">
￥<span class="price">{$goods_data.shop_price}</span>
<del>￥<span class="originalcost">{$goods_data.market_price}</span></del>
<div class="pull-right">
<button type="button" class="btn btn-warning add-cart">加入购物车</button>
<button type="button" class="btn btn-danger">立即购买</button>
</div>
</h5>
</div>
<div role="tabpanel" class="m-pro-info" id="proinfo">

{$goods_data.content}
</div>
修改选项卡的js
<li onclick="change('proinfo','proappraise',this)" role="presentation" class="active"><a role="tab" data-toggle="tab">详细信息</a></li>
<li onclick="change('proappraise','proinfo',this)" role="presentation"><a role="tab" data-toggle="tab">用户评价</a></li>
function change(id1,id2,o){
if(!$(o).hasClass("active")){
$(".active").removeClass("active");
$(o).addClass("active");
$("#"+id1).css("display","block");
$("#"+id2).css("display","none");
}
}