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。

相关文章

Java学习手册之Filter和Listener使用方法

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》：本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter（过滤器）1. Filter 的工作原理2. Filter 的配置与使用二、Listen
阅读更多...
Go语言开发实现查询IP信息的MCP服务器

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服
阅读更多...
使用Python构建一个Hexo博客发布工具

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2