转载请注明出处:
http://blog.csdn.net/iwanghang/article/details/60956569
觉得博文有用,请点赞,请评论,请关注,谢谢!~
左侧 把
转载请注明出处: 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
沈阳或周边城市公司有意开发Android,请与我联系
联系方式
微信:iwanghang
QQ:413711276
邮箱:iwanghang@qq.com
觉得博文有用,请点赞,请评论,请关注,谢谢!~