夺命雷公狗ThinkPHP项目之----企业网站3之后台栏目页的搭建(百度编辑器的引入)

我们现在就开始搭建我们的后台栏目页的后台了:

首先创建一个CategoryController.class.php的控制器,让列表页和添加页面显示出来先:

然后就是开始动手修改我们的视图部分了:

我们这样即可跳转到指定的页面了,先来完成列表页的部分:

老规矩现引入css和js和图片,然后开始下一步的操作了,因为我们的后台模版处发现他不能自动折叠,如下所示:

然后就开始写列表页的模版文件了:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/css/main.css"/>
    <script type="text/javascript" src="__PUBLIC__/Admin/js/libs/modernizr.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/js/jq18m.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/js/hileft.js"></script>
</head>
<body>

<include file="Public/header" />

<div class="container clearfix">
    <include file="Public/left" />
    <!--/sidebar-->
    <div class="main-wrap">

        <div class="crumb-wrap">
            <div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin">首页</a><span class="crumb-step">&gt;</span><span class="crumb-name">作品管理</span></div>
        </div>
        <div class="search-wrap">
            <div class="search-content">
                <form action="/jscss/admin/design/index" method="post">
                    <table class="search-tab">
                        <tr>
                            <th width="120">选择分类:</th>
                            <td>
                                <select name="search-sort" id="">
                                    <option value="">全部</option>
                                    <option value="19">精品界面</option><option value="20">推荐界面</option>
                                </select>
                            </td>
                            <th width="70">关键字:</th>
                            <td><input class="common-text" placeholder="关键字" name="keywords" value="" id="" type="text"></td>
                            <td><input class="btn btn-primary btn2" name="sub" value="查询" type="submit"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="result-wrap">
            <form name="myform" id="myform" method="post">
                <div class="result-title">
                    <div class="result-list">
                        <a href="insert.html"><i class="icon-font"></i>新增作品</a>
                        <a id="batchDel" href="javascript:void(0)"><i class="icon-font"></i>批量删除</a>
                        <a id="updateOrd" href="javascript:void(0)"><i class="icon-font"></i>更新排序</a>
                    </div>
                </div>
                <div class="result-content">
                    <table class="result-tab" width="100%">
                        <tr>
                            <th class="tc" width="5%"><input class="allChoose" name="" type="checkbox"></th>
                            <th>栏目id</th>
                            <th>栏目中文名称</th>
                            <th>栏目英文名称</th>
                            <th>栏目图片</th>
                            <th>上级栏目</th>
                            <th>栏目类型</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td class="tc"><input name="id[]" value="59" type="checkbox"></td>
                            <td>id</td>
                            <td>59</td>
                            <td title="发哥经典"><a target="_blank" href="#" title="发哥经典">发哥经典</a> …
                            </td>
                            <td>0000</td>
                            <td>0</td>
                            <td>搜索</td>
                            <td>
                                <a class="link-update" href="#">修改</a>
                                <a class="link-del" href="#">删除</a>
                            </td>
                        </tr>

                    </table>
                    <div class="list-page"> 2 条 1/1 页</div>
                </div>
            </form>
        </div>
    </div>
    <!--/main-->
</div>
</body>
</html>

最终效果如下所示:

然后就开始写添加页的模版了:

写添加时候需要引入百度编辑器,下载地址:

http://ueditor.baidu.com/website/download.html

下载好后解压,然后将他存放到Public目录下:

然后就开始在add.html页面里面进行引入:

        <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Ueditor/ueditor.config.js"></script>

        <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Ueditor/ueditor.all.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
    UE.getEditor(‘content‘,{initialFrameWidth:890,initialFrameHeight:550});
    //initialFrameWidth: null 这样就是他自动设置大小
</script>

测试后发现真的出来了,不过有点丑,

那么我们动手将他修改下:

加了一个样式过后再来看看效果如何:

这样稍微比刚才强上那么一点点

时间: 2024-10-13 00:47:07

夺命雷公狗ThinkPHP项目之----企业网站3之后台栏目页的搭建(百度编辑器的引入)的相关文章

夺命雷公狗ThinkPHP项目之----企业网站14之文章修改页的完成

这个其实也是挺容易的,我们思路先将栏目页给遍历出来: 这里用了catTree的方法,因为我们要对遍历出来的数据进行排序的,然后来到前端进行完成列表: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" type="text/css"

夺命雷公狗ThinkPHP项目之----企业网站16之文章列表页的完善(关联查询)

我们栏目的所属栏目不能总是以数字来显示吧??这样的话,估计老板会让您直接卷铺盖滚蛋噢,嘻嘻... 所以我们需要对她进行关联查询,控制器代码如下所示: public function lists(){ //$mod = M("Article")->select(); //$this -> assign('mod',$mod); $mod = M('Article'); $totalRows = $mod->count(); //创建分页对象时,分页对象需要总记录数和分页

夺命雷公狗ThinkPHP项目之----企业网站1之快速搭建后台

我们还是老规矩照老方法,将框架里面多余的东西都干掉,然后在index.php里面将框架搭建起来 <?php //定义项目目录 define('APP_PATH','./WEB/'); //开启调试 define('APP_DEBUG',True); //包含thinkphp项目入口文件 require "Thinkphp/Thinkphp.php"; 然后进入WEB目录下,并复制一个Home然后改名为Admin 然后再Index控制器下进行操作 代码如下所示: <?php

夺命雷公狗ThinkPHP项目之----企业网站26之网站前台列表页的显示和完成分页功能

我们用大I接收到我们get过来的栏目页的id然后通过文章的ar_cateid 来判断是不是属于该栏目下的,如果文章表ar_cateid = 栏目表的cate_id 那么就可以选出我们要查找的信息, 然后再遍历到视图即可... <?php namespace Home\Controller; use Think\Controller; class ListsController extends CommonController { public function lists(){ //获取栏目的i

夺命雷公狗ThinkPHP项目之----企业网站28之网站前台左侧导航的实现

我们基于刚才在model层的找顶级分类的代码在进行修改即可: <?php namespace Home\Controller; use Think\Controller; class CommonController extends Controller { function __construct(){ //继承父类的构造方法,所以网站在执行的时候会先执行他 parent::__construct(); //头部二级分类的显示 开始 $mod = M("Category");

夺命雷公狗ThinkPHP项目之----企业网站4之数据库连接

我们众所周知,我们在开发的时候网站是需要连接上我们的数据库的,毕竟数据库是网站的最核心之一嘛,废话不多说直接开干.... 我们先找到:config.php文件对她进行修改,因为我们网站前后台都用到数据库,所以我们直接在yao\WEB\Common\Conf下找到config.php前后台共享的文件里面修改下数据库配置即可.. 代码如下所示: <?php return array( //'配置项'=>'配置值' //系统中允许访问的模块(前后台) 'MODULE_ALLOW_LIST' =>

夺命雷公狗ThinkPHP项目之----企业网站27之网站前台单页的完成(从百度编辑器里面取出文章数据)

我们的单页面里主要是为了可以取出文章分类表的栏目内容,废话先不说, 我们的实现要点: 1...获取get过来的栏目cate_id 2...然后用条件查询栏目表 <?php namespace Home\Controller; use Think\Controller; class PageController extends CommonController { public function page(){ $catid = I('cate_id'); $mod = D("Categor

夺命雷公狗ThinkPHP项目之----企业网站21之网站前台二级分类显示名称(TP自定义函数展示无限极分类)

我们实现网站二级分类的显示的时候,先要考虑的是直接取出顶级栏目,控制器代码如下所示: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { public function index(){ $mod = M("Category"); $where['cate_pid'] = '0'; //这样写可以达到一种防SQL注入的效果 $cate =

夺命雷公狗ThinkPHP项目之----企业网站20之网站前台头尾分离

我们的网站直接让他头尾进行分离即可: 然后在代码里面找到id 为header的这段代码: 然后将整个div的内容都给弄出来,然后在view里面创建一个Public的目录,然后在创建一个header.html的文件,将这段代码直接给放进去即可... 然后再会到我们首页的index.html页面下用tp为我们准备好的标签对她引入即可: 然后我们回到浏览器里面测试以下,即可发现测试已经成功了: