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

转载请注明出处: 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协议,允许自由使用和修改代码...
这里,我是这样做的:

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安全浏览器极速模式 和 谷歌浏览器:






转载请注明出处: http://blog.csdn.net/iwanghang/article/details/60956569



欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android,请与我联系
联系方式

微信:iwanghang
QQ:413711276
邮箱:iwanghang@qq.com



觉得博文有用,请点赞,请评论,请关注,谢谢!~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值