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

作者：閲历_323_882 | 来源：互联网 | 2023-09-06 05:00

代码：https:code.csdn.netu012995856jfinaltesttreemaster效果：发博客：显示博客：后台：使用hui-admin

代码：
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(){
            //获取博客id
            int 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



<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=" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="/favicon.ico" >
<LINK rel="Shortcut Icon" href="/favicon.ico" />

<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" />



<title>新增文章 - 资讯管理 - H-ui.admin v2.3title>

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">  取消  button>
            div>
        div>
    form>
article>


<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> 




<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 = $(
 ''" class="item">' +
 '
'+
 '' + file.name + '
' +
 '等待上传...
'+
 '
'
 ),
 $img = $li.find('img');
 $list.append( $li );

 // 创建缩略图
 // 如果为非图片文件，可以不用调用此方法。
 // thumbnailWidth x thumbnailHeight 为 100 x 100
 uploader.makeThumb( file, function( error, src ) {
 if ( error ) {
 $img.replaceWith('不能预览');
 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 = $('
').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


<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=">
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
head>
<body>

<ul class="layui-nav">
  <li class="layui-nav-item"><a href="">Logoa>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>BLOGlegend>
fieldset>

<br>
<div class="layui-main">

<fieldset class="layui-elem-field">
  <legend>${blog.title?if_exists}legend>
 作者： ${blog.author?if_exists}  创建时间：${blog.create_date?if_exists}  更新时间：${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后台会报错.

推荐阅读

char
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
char
gcdexgcd斐蜀定理的求解方法及应用

本文介绍了求解gcdexgcd斐蜀定理的迭代法和递归法，并解释了exgcd的概念和应用。exgcd是指对于不完全为0的非负整数a和b，gcd(a,b)表示a和b的最大公约数，必然存在整数对x和y，使得gcd(a,b)=ax+by。此外，本文还给出了相应的代码示例。 ... [详细]

蜡笔小新 2023-12-14 17:48:30
python
Python3中选择文件对话框的格式打开和保存图片

本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数，可以方便地选择要打开或保存的图片文件，并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]

蜡笔小新 2023-12-14 17:46:55
char
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
char
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
python
开发笔记:加密&json&StringIO模块&BytesIO模块

篇首语：本文由编程笔记#小编为大家整理，主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识，希望对你有一定的参考价值。一、加密加密 ... [详细]

蜡笔小新 2023-12-14 15:18:35
get
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
char
eclipse学习（第三章：ssh中的Hibernate）——11.Hibernate的缓存（2级缓存，get和load）

本文介绍了eclipse学习中的第三章内容，主要讲解了ssh中的Hibernate的缓存，包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ... [详细]

蜡笔小新 2023-12-14 00:31:35
char
[大整数乘法] java代码实现

本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]

蜡笔小新 2023-12-13 11:21:32
blob
Android 7自学笔记总结、移动架构视频、安卓面试真题、项目实战源码讲义

本文介绍了Android 7的学习笔记总结，包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容，并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同，否则会出现问题。 ... [详细]

蜡笔小新 2023-12-13 10:06:58
get
开发笔记:Java是如何读取和写入浏览器Cookies的

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Java是如何读取和写入浏览器Cookies的相关的知识，希望对你有一定的参考价值。首先我 ... [详细]

蜡笔小新 2023-12-12 20:18:02
python
树莓派语音控制的配置方法和步骤

本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助，文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行，然后使用Eoman的控制方法，即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]

蜡笔小新 2023-12-12 03:02:49
version
iOS超签签名服务器搭建及其优劣势

本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]

蜡笔小新 2023-12-11 20:23:23
get
Linux重启网络命令实例及关机和重启示例教程

本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

蜡笔小新 2023-12-14 15:52:52
python
Python爬虫中使用正则表达式的方法和注意事项

本文介绍了在Python爬虫中使用正则表达式的方法和注意事项。首先解释了爬虫的四个主要步骤，并强调了正则表达式在数据处理中的重要性。然后详细介绍了正则表达式的概念和用法，包括检索、替换和过滤文本的功能。同时提到了re模块是Python内置的用于处理正则表达式的模块，并给出了使用正则表达式时需要注意的特殊字符转义和原始字符串的用法。通过本文的学习，读者可以掌握在Python爬虫中使用正则表达式的技巧和方法。 ... [详细]

蜡笔小新 2023-12-12 11:51:07

閲历_323_882

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章