JFinal Web开发学习(十一)编辑已发布文章
来源：互联网 发布：java面向对象的4大特征 编辑：程序博客网 时间：2024/04/29 23:33
JFinal Web开发学习(十一)编辑已发布文章
代码：
https://code.csdn.net/u012995856/jfinaltest/tree/master
h-ui-admin使用iframe布局，左右两栏，点击左边链接，右边iframe中加载对应的页面.
点击博客列表中的标题，
/admin/blogedit/blog_id右侧iframe会加载对应id的博客内容 
显示到blog-edit.html中,正文部分使用百度开源的编辑器UEditor.
article-list.html
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta http-equiv="Cache-Control" content="no-siteapp" /><!--[if lt IE 9]><script type="text/javascript" src="lib/html5.js"></script><script type="text/javascript" src="lib/respond.min.js"></script><script type="text/javascript" src="lib/PIE_IE678.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" /><link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" /><link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.7/iconfont.css" /><link rel="stylesheet" type="text/css" href="lib/icheck/icheck.css" /><link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" /><link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" /><!--[if IE 6]><script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script><script>DD_belatedPNG.fix('*');</script><![endif]--><title>资讯列表</title></head><body><nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 资讯管理 <span class="c-gray en">></span> 资讯列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav><div class="page-container"> <div class="text-c"> <span class="select-box inline"> <select name="" class="select"> <option value="0">全部分类</option> <option value="1">分类一</option> <option value="2">分类二</option> </select> </span> 日期范围： <input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}'})" id="logmin" class="input-text Wdate" style="width:120px;"> - <input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d'})" id="logmax" class="input-text Wdate" style="width:120px;"> <input type="text" name="" id="" placeholder=" 资讯名称" style="width:250px" class="input-text"> <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 搜资讯</button> </div> <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont"></i> 批量删除</a> <a class="btn btn-primary radius" data-title="添加资讯" _href="article-add.html" onclick="Hui_admin_tab(this)" href="javascript:;"><i class="Hui-iconfont"></i> 添加资讯</a></span> <span class="r">共有数据：<strong>54</strong> 条</span> </div> <div class="mt-20"> <table class="table table-border table-bordered table-bg table-hover table-sort"> <thead> <tr class="text-c"> <th width="25"><input type="checkbox" name="" value=""></th> <th width="80">ID</th> <th>标题</th> <th width="80">分类</th> <th width="80">作者</th> <th width="120">发布时间</th> <th width="75">更新时间</th> <th width="60">发布状态</th> <th width="120">操作</th> </tr> </thead> <tbody> <#list bloglist as x> <tr class="text-c"> <td><input type="checkbox" value="" name=""></td> <td>${x.id}</td> <td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit('查看','blogedit/${x.id?if_exists}')" title="查看">${x.title}</u></td> <td>行业动态</td> <td>${x.author}</td> <td>${x.create_date}</td> <td>${x.update_date}</td> <td class="td-status"><span class="label label-success radius">已发布</span></td> <td class="f-14 td-manage"><a style="text-decoration:none" onClick="article_stop(this,'10001')" href="javascript:;" title="下架"><i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_edit('资讯编辑','/admin/blogedit/${x.id}','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont"></i></a></td> </tr> </#list> </tbody> </table> </div></div><script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="lib/layer/2.1/layer.js"></script> <script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script> <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> <script type="text/javascript" src="static/h-ui/js/H-ui.js"></script> <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script><script type="text/javascript">$('.table-sort').dataTable({ "aaSorting": [[ 1, "desc" ]],//默认第几个排序 "bStateSave": true,//状态保存 "aoColumnDefs": [ //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示 {"orderable":false,"aTargets":[0,8]}// 不参与排序的列 ]});/*资讯-添加*/function article_add(title,url,w,h){ var index = layer.open({ type: 2, title: title, content: url }); layer.full(index);}/*资讯-编辑*/function article_edit(title,url,w,h){ var index = layer.open({ type: 2, title: title, content: url }); layer.full(index);}/*资讯-删除*/function article_del(obj,id){ layer.confirm('确认要删除吗？',function(index){ $(obj).parents("tr").remove(); layer.msg('已删除!',1); });}/*资讯-审核*/function article_shenhe(obj,id){ layer.confirm('审核文章？', { btn: ['通过','不通过','取消'], shade: false, closeBtn: 0 }, function(){ $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_start(this,id)" href="javascript:;" title="申请上线">申请上线</a>'); $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>'); $(obj).remove(); layer.msg('已发布', {icon:6,time:1000}); }, function(){ $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="article_shenqing(this,id)" href="javascript:;" title="申请上线">申请上线</a>'); $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">未通过</span>'); $(obj).remove(); layer.msg('未通过', {icon:5,time:1000}); }); }/*资讯-下架*/function article_stop(obj,id){ layer.confirm('确认要下架吗？',function(index){ $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont"></i></a>'); $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>'); $(obj).remove(); layer.msg('已下架!',{icon: 5,time:1000}); });}/*资讯-发布*/function article_start(obj,id){ layer.confirm('确认要发布吗？',function(index){ $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="article_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont"></i></a>'); $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>'); $(obj).remove(); layer.msg('已发布!',{icon: 6,time:1000}); });}/*资讯-申请上线*/function article_shenqing(obj,id){ $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>'); $(obj).parents("tr").find(".td-manage").html(""); layer.msg('已提交申请，耐心等待审核!', {icon: 1,time:2000});}</script> </body></html>blog-edit.html
<!--_meta 作为公共模版分离出去--><!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta http-equiv="Cache-Control" content="no-siteapp" /><LINK rel="Bookmark" href="/favicon.ico" ><LINK rel="Shortcut Icon" href="/favicon.ico" /><!--[if lt IE 9]><script type="text/javascript" src="lib/html5.js"></script><script type="text/javascript" src="lib/respond.min.js"></script><script type="text/javascript" src="lib/PIE_IE678.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" /><link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" /><link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.7/iconfont.css" /><link rel="stylesheet" type="text/css" href="/admin/lib/icheck/icheck.css" /><link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" /><link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" /><!--[if IE 6]><script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script><script>DD_belatedPNG.fix('*');</script><![endif]--><!--/meta 作为公共模版分离出去--></head><body><article class="page-container"> <form class="form form-horizontal" id="form-article-add" action="/blog/update/${blog.id?if_exists}" method="POST"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题：</label> <div class="formControls col-xs-8 col-sm-9"> <input type="text" class="input-text" id="blog.title" name="blog.title" value="${blog.title?if_exists}"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2">作者：</label> <div class="formControls col-xs-8 col-sm-9"> <input type="text" class="input-text" value="${blog.author?if_exists}" placeholder="" id="blog.author" name="blog.author"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2">文章内容：</label> <div class="formControls col-xs-8 col-sm-9"> <script id="editor" name="blog.content" type="text/plain" style="width:100%;height:400px;" >${blog.content?if_exists}</script> </div> </div> <div class="row cl"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2"> <button onClick="article_save();" class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont"></i> 发布</button> <button onClick="removeIframe();" class="btn btn-default radius" type="button"> 取消 </button> </div> </div> </form></article><!--_footer 作为公共模版分离出去--><script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="/admin/lib/layer/2.1/layer.js"></script> <script type="text/javascript" src="/admin/lib/icheck/jquery.icheck.min.js"></script> <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.min.js"></script> <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.min.js"></script> <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.js"></script> <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer /作为公共模版分离出去--><!--请在下方写此页面业务相关的脚本--><script type="text/javascript" src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script> <script type="text/javascript" src="/admin/lib/ueditor/1.4.3/ueditor.config.js"></script> <script type="text/javascript" src="/admin/lib/ueditor/1.4.3/ueditor.all.min.js"> </script> <script type="text/javascript" src="/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script><script type="text/javascript">$(function(){ $('.skin-minimal input').iCheck({ checkboxClass: 'icheckbox-blue', radioClass: 'iradio-blue', increaseArea: '20%' }); $list = $("#fileList"), $btn = $("#btn-star"), state = "pending", uploader; var uploader = WebUploader.create({ auto: true, swf: 'lib/webuploader/0.1.5/Uploader.swf', // 文件接收服务端。 server: 'fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="item">' + '<div class="pic-box"><img></div>'+ '<div class="info">' + file.name + '</div>' + '<p class="state">等待上传...</p>'+ '</div>' ), $img = $li.find('img'); $list.append( $li ); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress-box .sr-only'); // 避免重复创建 if ( !$percent.length ) { $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only'); } $li.find(".state").text("上传中"); $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传"); }); // 文件上传失败，显示上传出错。 uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错"); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress-box').fadeOut(); }); uploader.on('all', function (type) { if (type === 'startUpload') { state = 'uploading'; } else if (type === 'stopUpload') { state = 'paused'; } else if (type === 'uploadFinished') { state = 'done'; } if (state === 'uploading') { $btn.text('暂停上传'); } else { $btn.text('开始上传'); } }); $btn.on('click', function () { if (state === 'uploading') { uploader.stop(); } else { uploader.upload(); } });});var ue = UE.getEditor('editor',{ }); </script><!--/请在上方写此页面业务相关的脚本--></body></html>AdminController.java
package cn.pangpython.controller;import com.jfinal.core.Controller;import cn.pangpython.model.Blog;/** * @author pangPython * @功能 后台控制器 */public class AdminController extends Controller { public void index(){ } //后台显示文章 public void articles(){ setAttr("bloglist", Blog.dao.getAll()); render("article-list.html"); } //后台编辑博客 public void blogedit(){ setAttr("blog", Blog.dao.findById(getParaToInt(0))); render("blog-edit.html"); }} 0 0
- JFinal Web开发学习(十一)编辑已发布文章
- JFinal Web开发学习(一)开启HelloWorld
- JFinal Web开发学习(二)目录、架构、package设计
- JFinal Web开发学习(三)前后台路由设计
- JFinal Web开发学习(四)数据库连接与自动生成model
- JFinal Web开发学习(五)注册界面和后端验证
- JFinal Web开发学习(九)后台添加前台显示博客
- JFinal Web开发学习(十)前后台显示博客列表
- Jfinal 开发学习
- 极速Web开发框架JFinal
- 用JFinal进行web开发
- JFinal开发web项目出现问题小记
- java极速web开发框架jfinal
- jfinal +beetl集成开发web全集
- JFinal Web开发学习(六)验证码验证和注册细节
- JFinal Web开发学习(七)使用layUI美化的登录功能
- JFinal Web开发学习(八)后台集成H-ui-admin前端框架
- JFinal Web开发学习(九)首页layui重新构建目录以及首页
- MTK收购VIA IP后的CDMA开发
- JS获取项目路径详解
- 玩转Google开源C++单元测试框架Google Test系列(gtest)之一 - 初识gtest
- mvc 封装框架之关于 .haccess 文件（一）
- LeetCode3. Longest Substring Without Repeating Characters
- JFinal Web开发学习(十一)编辑已发布文章
- C语言 贪吃蛇
- MFC操作EXCEL例子
- 计算机视觉的比较有用的项目project, visual object tracking & human action recognition.
- 【Unity】(代码分析)Unity创建并保存XML
- JAVA redis 常用函数
- Teleport Pro使用教程
- Socket及时通信
- 傅里叶变换终极解释（精校版）
