JFinal Web开发学习(十一)编辑已发布文章

2024-08-24 02:18
文章标签 学习 开发 web 文章 发布 编辑 十一 jfinal

本文主要是介绍JFinal Web开发学习(十一)编辑已发布文章，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 资讯管理 <span class="c-gray en">&gt;</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">&#xe68f;</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">&#xe665;</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">&#xe6e2;</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">&#xe600;</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">&#xe6de;</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">&#xe6df;</i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</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">&#xe603;</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">&#xe6de;</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">&#xe632;</i> 发布</button><button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</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 100uploader.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");}}

这篇关于JFinal Web开发学习(十一)编辑已发布文章的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1101169。

相关文章

SpringBoot开发中十大常见陷阱深度解析与避坑指南

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错？是不是同时用了.properties和.yml？二、换个位置配置就失效？搞清楚加
阅读更多...
如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
如何使用Haporxy搭建Web群集

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.
阅读更多...
Python中对FFmpeg封装开发库FFmpy详解

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》：本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF
阅读更多...
基于Python开发Windows屏幕控制工具

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间
阅读更多...
Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
使用Python开发一个现代化屏幕取色器

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,：本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.
阅读更多...
Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2