thinkphp3.2 实现点击图片或文字进入内容页

首先要先把页面渲染出来,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" />

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

时间: 2024-10-11 13:01:50

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

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

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

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片备忘 下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆),而且还是英文的,所以自己觉得有必要将上面的内容文字化,同时做下简单的中文翻译.整理一番,于是就有下面的些内容.

android控件布局 ToggleButton按钮 图片和文字

ToggleButton控件具有checked属性对于要切换状态的功能按钮来说十分好用 这里以phone的开启DTMFTwelveKeyDialer的按钮为例 展示其效果和布局 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" andro

如何给gif图片添加文字?GIF图片添加文字教程

我们经常会在网上下载一下GIF动态图片,有时候我们想给我们下载的GIF动态图片添加文字,这时候该怎么操作,下面小编就来分享一下给GIF图片添加文字的教程给大家,供大家参考和学习,希望大家都是能够满意的. GIF格式可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画. 迅捷GIF制作工具添加文字就是将我们添加进来GIF图片逐帧分解成若干张图片,然后我们批量的在这些图片上添加文字. 迅捷GIF制作工具http://www.xunjieshipin.

迅捷OCR文字识别软件教你如何将图片转文字

大家平时接收到的资料或者下载的文件,很多都是图片格式的,有时候需要将里面的文字提取出来应用在别的地方,这时候就需要将图片转文字了,具体如何去操作呢?准备工作:图片转文字需要使用到工具,我们可以打开电脑搜索下载一个迅捷OCR文字识别软件到自己的电脑中去,接下来会使用到. 操作步骤: 1:将安装好的软件打开,打开你会发现自动弹出来一个窗口,主要讲解软件的功能优势,简单看一下将其关闭. 2:关闭弹窗之后,进入的就是整个软件的基本板块,这时候我们点击上方图片局部识别板块. 3:紧接着就可以将你需要识别转

快速将图片转文字的方法,超实用的小技巧

相信使用电脑办公的小伙伴经常会遇到图片转文字的问题,因为图中文字不可直接进行复制粘贴,所以想要将文字应用到别的地方去的话就很麻烦,那这时候有什么轻松将图片转文字的方法呢? 参考工具:迅捷OCR文字识别软件 迅捷OCR文字识别软件可以解决什么问题呢? 像办公或者学习中经常出现的PDF识别.扫描件识别.图片文字识别.票证识别.图片局部识别的问题都是可以解决的,从而提高您的工作与学习效率, 操作步骤: 1:首先打开电脑中的OCR文字识别软件,在上方导航栏选择图片局部识别板块. 2:进入图片局部识别操作

职场办公必备:快速将图片转文字的小技巧

相信办公中或者学习中的小伙伴们经常会遇到这样的问题,有时候需要将图中文字提取应用到别的地方去,但是手动输入图中文字的效率太低了,不建议大家这样去做,那有什么好的方法呢?接下来,小编就来为大家分享一种快速将图片转文字的方法,超实用的哦! 辅助工具:迅捷OCR文字识别软件 使用具体文字识别软件的方法适用于那些在办公或者学习中经常处理到文字图片需要进行识别转换的朋友,工具在手,就可以方便随时实现转换了,下面一起来看看具体的操作步骤吧. 第一步.打开电脑中的OCR文字识别软件,关闭弹窗点击界面上方图片局

懒得打字,教你一招快速将图片转文字

在平时的工作和学习中,一般遇到图中文字需要整理下来的时候,大家都是如何去操作的呢? 相信有一些小伙伴们采取的方法是手动敲出图中文字,但是面对图中密密麻麻的文字,这显然不是一种高效的做法,其实根本不需要傻傻的手敲文字的,借助一些文字识别软件就可以快速将图片转文字了,下面我们一起来看下具体的操作方法. 操作步骤: 1:[做好准备工作] 首先将需要识别转换的图片在电脑中准备好,因为使用到的是PC端的工具,所以整个步骤都是在电脑中完成的. 2:[打开软件+选择板块]接着将迅捷OCR文字识别软件打开,点击

如何识别JPG图片转文字,简单的方法讲解

相信办公中的小伙伴们经常会遇到图片转文字的问题,需要将图片上的文字应用到别的地方去,但是图中的文字又不可以直接进行复制粘贴,接下来小编就来给大家分享一种识别JPG图片转文字的简单操作方法,大家可以以此来参考下. 辅助工具:迅捷OCR文字识别软件 操作步骤: 1:在电脑中打开接下来使用到的OCR文字识别软件,点击图片局部识别板块. 2:进入图片局部识别板块后,点击添加文件按钮选择一张所需转换的文字图片并打开. 3:图片打开后可以通过下方一排小工具来简单对图片进行"移动""放大&