Android程序员学PHP开发(37)-ThinkPHP5.0(9)后台引入模板分离及UEditor-phpStudy+Sublime

最新推荐文章于 2021-09-26 15:55:29 发布

iwanghang

最新推荐文章于 2021-09-26 15:55:29 发布

阅读量1k

点赞数 2

分类专栏： PHP Android程序员学PHP开发文章标签： php ThinkPHP Sublime TP5 blog

本文链接：https://blog.csdn.net/iwanghang/article/details/60956569

版权

PHP 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

Android程序员学PHP开发

40 篇文章 4 订阅

订阅专栏

转载请注明出处： http://blog.csdn.net/iwanghang/article/details/60956569
觉得博文有用，请点赞，请评论，请关注，谢谢！~

上一篇博文，我们完成了前台引入模板分离，而后台模板稍有区别。

截止到目前的项目源码：http://download.csdn.net/detail/iwanghang/9775235

我们来看一下：

1、controller 控制器：

/application/admin/controller/Index.php：

<?php
/**
 * 后台控制器
 */
namespace app\admin\controller;
use think\Controller;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch();
    }
}

/application/admin/controller/Cate.php

<?php
/**
 * 列表控制器
 * http://www.iwanghang.com/admin/cate/lst
 */
namespace app\admin\controller;
use think\Controller;
class Cate extends Controller
{
    // 列表
    public function lst()
    {
        return $this->fetch();
    }

    // 添加 ， 对应文件 /application/admin/view/Cate/add.html
        public function add()
    {
        return $this->fetch();
    }
}

2、view 视图：（代码比较多，这边就不贴了，我会把截止到目前的项目包上传：http://download.csdn.net/detail/iwanghang/9775235）

/application/admin/view/Index/index.html

/application/admin/view/Cate/lst.html

/application/admin/view/Cate/add.html

还有2个文件，后台分离出来的网站头部和左侧

/application/admin/view/Public/top.html

/application/admin/view/Public/left.html

3、这里同样需要输出替换：

头部把

<div class="topbar-wrap white">
    <div class="topbar-inner clearfix">
        <div class="topbar-logo-wrap clearfix">
            <h1 class="topbar-logo none"><a href="index.html" class="navbar-brand">后台管理</a></h1>
            <ul class="navbar-list clearfix">
                <li><a class="on" href="index.html">首页</a></li>
                <li><a href="#" target="_blank">网站首页</a></li>
            </ul>
        </div>
        <div class="top-info-wrap">
            <ul class="top-info-list clearfix">
                <li><a href="#">管理员</a></li>
                <li><a href="#">修改密码</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
    </div>
</div>

替换为：

{include file="Public/top" /}

左侧把

<div class="sidebar-wrap">
        <div class="sidebar-title">
            <h1>菜单</h1>
        </div>
        <div class="sidebar-content">
            <ul class="sidebar-list">
                <li>
                    <a href="#"><i class="icon-font"></i>常用操作</a>
                    <ul class="sub-menu">
                        <li><a href="design.html"><i class="icon-font"></i>作品管理</a></li>
                        <li><a href="design.html"><i class="icon-font"></i>博文管理</a></li>
                        <li><a href="design.html"><i class="icon-font"></i>分类管理</a></li>
                        <li><a href="design.html"><i class="icon-font"></i>留言管理</a></li>
                        <li><a href="design.html"><i class="icon-font"></i>评论管理</a></li>
                        <li><a href="design.html"><i class="icon-font"></i>友情链接</a></li>
                        <li><a href="design.html"><i class="icon-font"></i>广告管理</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="icon-font"></i>系统管理</a>
                    <ul class="sub-menu">
                        <li><a href="system.html"><i class="icon-font"></i>系统设置</a></li>
                        <li><a href="system.html"><i class="icon-font"></i>清理缓存</a></li>
                        <li><a href="system.html"><i class="icon-font"></i>数据备份</a></li>
                        <li><a href="system.html"><i class="icon-font"></i>数据还原</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

替换为：

{include file="Public/left" /}

到这里为止，后台模板就分离完成了。

----------------------------------------分割线------------------------------

我们开始在栏目添加页面，引入UEditor:

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

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

这里，我是这样做的：

1、准备资源文件：(所需要的资源文件，我也会单独上传：http://download.csdn.net/detail/iwanghang/9775309)

资源目录：\WWW\iwanghang\public\static\admin\js\libs

ueditor.all.min.js

ueditor.config.js

lang目录

themes目录

2、代码编写：

/application/admin/view/Cate/add.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/css/main.css"/>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/modernizr.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.config.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.all.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
{include file="Public/top" /}
<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="__PUBLIC__/admin">首页</a><span class="crumb-step">></span><a class="crumb-name" href="/admin/cate/lst">栏目管理</a><span class="crumb-step">></span><span>新增栏目</span></div>
        </div>
        <div class="result-wrap">
            <div class="result-content">
                <form action="/jscss/admin/design/add" method="post" id="myform" name="myform" enctype="multipart/form-data">
                    <table class="insert-tab" width="100%">
                        <tbody>
                        <!-- <tr> -->
                            <!-- <th width="120"><i class="require-red">*</i>栏目类型：</th> -->
                            <!-- <td> -->
                                <!-- <select name="type" id="catid" class="required"> -->
                                    <!-- <option value="">请选择</option> -->
                                    <!-- <option value="19">列表</option><option value="20">留言</option> -->
                                <!-- </select> -->
                            <!-- </td> -->
                        <!-- </tr> -->
                            <tr >
                                <th style="width: 10%;"><i class="require-red">*</i>栏目名称：</th>
                                <td>
                                    <input class="common-text required" id="title" name="catename" size="50" value="" type="text">
                                </td>
                            </tr>
                            <tr>
                                <th>栏目关键词：</th>
                                <td><input class="common-text" name="keywords" size="50" value="" type="text"></td>
                            </tr>
                            <tr>
                                <th><i class="require-red">*</i>栏目类型：</th>
                                <td><input name="type" value="1" type="checkbox"> 留言板</td>
                            </tr>
                            <tr>
                                <th>栏目描述：</th>
                                <td><textarea name="editor" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <th></th>
                                <td>
                                    <input class="btn btn-primary btn6 mr10" value="提交" type="submit">
                                    <input class="btn btn6" οnclick="history.go(-1)" value="返回" type="button">
                                </td>
                            </tr>
                        </tbody></table>
                </form>
            </div>
        </div>

    </div>
    <!--/main-->
</div>
　　<script type="text/javascript">
    　　//实例化编辑器
    　　//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    　　UE.getEditor('content',{initialFrameWidth:1000,initialFrameHeight:400,});
　　</script>
</body>
</html>

修改了3个地方：

(1) UEditor的js路径：

    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.config.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/ueditor.all.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/admin/js/libs/lang/zh-cn/zh-cn.js"></script>

(2) 需要引用UEditor的位置的id修改为content：

                          <tr>
                                <th>栏目描述：</th>
                                <td><textarea name="editor" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea>
                                </td>
                            </tr>

(3)实例化UEditor：

　　<script type="text/javascript">
    　　//实例化编辑器
    　　//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    　　UE.getEditor('content',{initialFrameWidth:1000,initialFrameHeight:400,});
　　</script>

最后，上2张效果图：分别是360安全浏览器极速模式和谷歌浏览器：