JFinal Web开发学习(九)后台添加前台显示博客

2024-08-24 02:18
文章标签 学习 显示 开发 web 博客 后台 前台 jfinal

本文主要是介绍JFinal Web开发学习(九)后台添加前台显示博客，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码：
https://code.csdn.net/u012995856/jfinaltest/tree/master
效果：
发博客：
这里写图片描述
这里写图片描述
显示博客：
这里写图片描述
后台：使用hui-admin，文章编辑器是百度开源的ueditor
前台：使用layui前端框架
1.写控制器BlogController
controller包中

package cn.pangpython.controller;import com.jfinal.core.Controller;import cn.pangpython.model.Blog;
import cn.pangpython.utils.DateUtils;/*** @author pangPython*  博客模块控制器**/
public class BlogController extends Controller{//访问URL：/blog/public void index(){}//访问URL：/blog/adminAddBlog//后台添加博客文章public void adminAddBlog(){Blog blog = getModel(Blog.class);blog.setTitle(getPara("blog.title"));blog.setAuthor(getPara("blog.author"));blog.setContent(getPara("blog.content"));blog.setCreateDate(DateUtils.getNowTime());blog.setUpdateDate(DateUtils.getNowTime());if(blog.save()){renderText("添加成功！");}else{renderText("添加失败！");}}// 访问URL：/blog/article/1//前台根据传入id显示博客页面public void article(){//获取博客idint blog_id = getParaToInt(0);//查询实例化blog对象Blog blog = Blog.dao.findById(blog_id);//设置模板携带参数setAttr("blog", blog);//渲染模板render("article.html");}}

2.写后台html模板
后台发布文章页面
WebRoot/admin/article-add.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="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]-->
<!--/meta 作为公共模版分离出去--><title>新增文章 - 资讯管理 - H-ui.admin v2.3</title></head>
<body>
<article class="page-container"><form class="form form-horizontal" id="form-article-add" action="/blog/adminAddBlog" 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" value="" placeholder="" id="blog.title" name="blog.title"></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="" 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;"></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="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/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.min.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.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> 
<!--/_footer /作为公共模版分离出去--><!--请在下方写此页面业务相关的脚本--><script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.config.js"></script> 
<script type="text/javascript" src="lib/ueditor/1.4.3/ueditor.all.min.js"> </script> 
<script type="text/javascript" src="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>

前台显示博客页面
WebRoot/blog/article.html

<!doctype html>
<html>
<head><meta charset="utf-8"><title>${blog.title?if_exists}</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
</head>
<body><ul class="layui-nav"><li class="layui-nav-item"><a href="">Logo</a></li><li class="layui-nav-item "><a href="">首页</a></li><li class="layui-nav-item layui-this"><a href="">博客</a></li><li class="layui-nav-item"><a href="">关于我们</a></li>
</ul><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"><legend>BLOG</legend>
</fieldset><br>
<div class="layui-main"><fieldset class="layui-elem-field"><legend>${blog.title?if_exists}</legend>作者： ${blog.author?if_exists}&nbsp;&nbsp;创建时间：${blog.create_date?if_exists}&nbsp;&nbsp;更新时间：${blog.update_date?if_exists}<hr><blockquote class="layui-elem-quote">${blog.content?if_exists}</blockquote></fieldset></div><script src="/static/layui/layui.js"></script><script>
//配置自己的js加载路径
layui.config({base:'/static/js/modules/'}).use('index');</script></body>
</html>

3.配置路由
routers包中
FrontRouters.java
config方法中添加

add("/blog",BlogController.class);

4.简单测试
添加文章：
localhost/admin/index
博客管理->文章管理->添加资讯
注：此处添加文章的方法未做权限控制

查看文章：
localhost/blog/article/1
注：此处article后边是博客id,根据自己添加的博客的id进行查看，此处未做异常处理，试图访问不存在的id后台会报错.

这篇关于JFinal Web开发学习(九)后台添加前台显示博客的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

基于Qt开发一个简单的OFD阅读器

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要
阅读更多...
Linux使用nohup命令在后台运行脚本

Linux使用nohup命令在后台运行脚本

《Linux使用nohup命令在后台运行脚本》在Linux或类Unix系统中,后台运行脚本是一项非常实用的技能,尤其适用于需要长时间运行的任务或服务,本文我们来看看如何使用nohup命令在后台... 目录nohup 命令简介基本用法输出重定向& 符号的作用后台进程的特点注意事项实际应用场景长时间运行的任务服
阅读更多...
手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》：本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven，显示如下页面输入项目名称，选择
阅读更多...
电脑显示hdmi无信号怎么办? 电脑显示器无信号的终极解决指南

电脑显示hdmi无信号怎么办? 电脑显示器无信号的终极解决指南

《电脑显示hdmi无信号怎么办?电脑显示器无信号的终极解决指南》HDMI无信号的问题却让人头疼不已，遇到这种情况该怎么办？针对这种情况，我们可以采取一系列步骤来逐一排查并解决问题，以下是详细的方法... 无论你是试图为笔记本电脑设置多个显示器还是使用外部显示器，都可能会弹出“无HDMI信号”错误。此消息可能
阅读更多...
在 VSCode 中配置 C++ 开发环境的详细教程

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode（VSCode）中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境：详细教程1. 什么是 VSCode？2. 安装 VSCo
阅读更多...
C#图表开发之Chart详解

C#图表开发之Chart详解

《C#图表开发之Chart详解》C#中的Chart控件用于开发图表功能,具有Series和ChartArea两个重要属性,Series属性是SeriesCollection类型,包含多个Series对... 目录OverviChina编程ewSeries类总结OverviewC#中，开发图表功能的控件是Char
阅读更多...
鸿蒙开发搭建flutter适配的开发环境

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE
阅读更多...
Python开发围棋游戏的实例代码（实现全部功能）

Python开发围棋游戏的实例代码（实现全部功能）

《Python开发围棋游戏的实例代码（实现全部功能）》围棋是一种古老而复杂的策略棋类游戏,起源于中国,已有超过2500年的历史,本文介绍了如何用Python开发一个简单的围棋游戏,实例代码涵盖了游戏的... 目录1. 围棋游戏概述1.1 游戏规则1.2 游戏设计思路2. 环境准备3. 创建棋盘3.1 棋盘类
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2