首先要先把页面渲染出来,http://www.mmkb.com/weixiang/index/index.html

<div class="main3 mt">
<h2 class="w-title">案例展示</h2>
<p class="w-text">提供多种行业解决方案,让你拥有更多选择</p>
<div class="container case">
<div class="row">
<foreach name="alzs" item="vo" >              //这边是遍历输出图片
<div class="col-lg-3 col-xs-12 casepic">
<div class="recent-work-wrap">
<a href="/weixiang/alzs/index?code='{$vo.a_id}'"> //这条是关键
<img class="img-responsive" src="__ROOT__/Uploads{$vo.photo}" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>{$vo.a_title}</h3>
</div>
</div>
</a>
</div>
</div>
</foreach> </div>
</div>
<a href="http://www.mmkb.com/weixiang/case/index" class="more">查看更多</a>
</div>

然后就要把这些图片的路径替换一下,思路是给每一个指向内容页模板的路径加一个code值(指向主键),点击控制器会从数据库进行遍历输出

控制器

<?php
namespace Weixiang\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
/*
* 遍历头部列表
*/
$list = M('article_cate')->where('pid=9')->order('id')->select();
$this->assign('list',$list);
/*
* 案例展示                                  //这个是控制器的显示
*/
$alzs = M('article')->where('cate_id=24')->select();
$this->assign('alzs',$alzs);
/*
* 新闻资讯
*/
$xwzx =M('article')->where('cate_id=21 and a_views=0')->select();
$this->assign('xwzx',$xwzx);
/*
* 关于微享
*/
$datu = M('article')->where('cate_id=33')->select();
$this->assign('datu',$datu);
/*
* 微享优势
*/
$youshi = M('article')->where('cate_id=34')->select();
$this->assign('youshi',$youshi); $this->display('/Public/index');
}
}

指向的内容页模板的控制器

<?php
namespace Weixiang\Controller;
use Think\Controller;
class AlzsController extends Controller {
public function index(){
/*
* 遍历头部列表
*/
$list = M('article_cate')->where("pid=9")->order('id')->select();
$this->assign('list',$list);
/*
* 获取内容
*/
$code =$_GET['code'];                              //用GET方法获取code值
$al = M('article')->where("a_id = $code")->find();             //根据获取到的code值进行数据库查询,注意用find方法查一条数据
$this->assign('al',$al); $this->display('/Public/alzs');                        //指向alzs.html
}
}

指向的 alzs.html

<include file="Public/header" />

<div class="casebg">
<div class="container animated bounceInUp">
<h2>案例展示</h2>
<p>力求视觉与交互的完美契合,以规范的流程和专注的态度,为您提供全方位的设计服务。</p>
</div>
</div>
<div class="newnav">
<div class="container">
<div class="row">
<div class="col-lg-1 col-xs-3"><a href="" class="current">全部</a></div>
<div class="col-lg-1 col-xs-3"><a href="">微官网</a></div>
</div>
</div>
</div>
<div class="detail mt">
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12">
<h2>{$al.a_title}</h2>                              //这里就显示code显示的值
<p>{$al.a_content}</p>
</div> </div>
<div class="row mt">
<div class="col-lg-1 col-xs-12 "><a href="">上一页</a></div>
<div class="col-lg-1 col-xs-12 col-lg-offset-10"><a href="">下一页</a></div>
</div>
</div>
</div>
<include file="Public/footer" />

这样只有在后台界面放入数据就可以实现效果了

thinkphp3.2 实现点击图片或文字进入内容页的更多相关文章

  1. C# 如何添加Excel页眉页脚(图片、文字、奇偶页不同)

    简介 我们可以通过代码编程来对Excel工作表实现很多操作,在下面的示例中,将介绍如何来添加Excel页眉.页脚.在页眉处,我们可以添加文字,如公司名称.页码.工作表名.日期等,也可以添加图片,如LO ...

  2. Qt自定义委托在QTableView中绘制控件、图片、文字(内容比较全)

    自定义委托,继承于,QStyledItemDelegate类,重载Paint()函数, 1.实现在QTableView中绘制 格式字符串 2.实现在QTableView中绘制进度条 3.实现在QTab ...

  3. 一款点击图片进行无限循环的jquery手风琴特效

    一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...

  4. R语言 如何为图片添加文字说明(转载)

    转载:(中文翻译者)[http://blog.csdn.net/chen790646223/article/details/49766659] (原文链接)[http://datascienceplu ...

  5. [转] HTML5终极备忘大全(图片版+文字版)---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...

  6. javaCV开发详解之4:转流器实现(也可作为本地收流器、推流器,新增添加图片及文字水印,视频图像帧保存),实现rtsp/rtmp/本地文件转发到rtmp流媒体服务器(基于javaCV-FFMPEG)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  7. PHP生成小程序二维码合成图片生成文字

    这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...

  8. 如何将word中的图片和文字导入自己的博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  9. C# 10分钟完成百度图片提取文字(文字识别)——入门篇

    现在图片文字识别已经很成熟了,比如qq长按图片,点击图片识别就可以识别图片的文字,将不认识的.文字数量大的.或者不能赋值的值进行二次可复制功能. 我们现在就基于百度Ai开放平台进行个人文字识别,dem ...

随机推荐

  1. 第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...

  2. C++ 把枚举变量的名称,直接当字符串使用方法 字符串化符号 #

    #include <stdio.h> #include <typeinfo> #include <string> using namespace std; enum ...

  3. Mybatis系列(五):mybatis逆向工程

    一.背景 在实际开发中我们会自己去写mapper映射文件,接口,数据库表对应的实体类,如果需求任务比较少,咱们还可以慢慢的一个一个去写,但是这是不现实的,因为在工作中我们的任务是很多的,这时mybat ...

  4. python写的读取json配置文件

    配置文件默认为conf.json 使用函数set完成追回配置项. 使用load或取配置项. 代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- ' ...

  5. TI单节电量计基本介绍及常见问题解答

    电量计(gas gauge /fuel gauge)是用来计量显示电池电量,通常包括mAh剩余容量(RM),满充容量(FCC),百分比容量(SOC),电压,电流,温度等,部分电量计还包含放空,充满时间 ...

  6. 绘制你的第一个图表(jquery-flot-line-chart)

    事前准备 首先, 请先确定你已经下载了Flot档案, 如果还没有的话可以先回到前一章 去下载. 这是你绘制的第一张图, 我们用最常用的折线图当例子, 折线图常被用来显示一段时间间隔趋势的走向, 常见的 ...

  7. Scala2.11.8 spark2.3.1 mongodb connector 2.3.0

    import java.sql.DriverManager import com.mongodb.spark._ import org.apache.spark.SparkConf import or ...

  8. HTTP Analyzer——WEB调试代理

    HTTP Analyzer 是一个实时的web调试代理,如果你对Fiddler不陌生的话,HTTP Analyzer 就是和Fiddler具备一样功能的调试代理. 推荐这个软件而不推荐Fiddler的 ...

  9. keynote代码高亮【转】

    码农即使做ppt,也离不开代码,在keynote下,如果要粘贴代码,如何做到语法高亮呢? 补充1,该功能由pygments提供支持,所以支持的语言见:http://pygments.org/langu ...

  10. Android技巧分享——如何用电脑下载在Google play中应用的apk文件

    [Android技巧分享系列] 1.Android技巧分享——让官方模拟器和genymotion虚拟机飞起来 2.Android技巧分享——如何用电脑下载在Google play中应用的apk文件 G ...