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

效果： 
发博客：

显示博客：

后台：使用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("../admin/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"></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 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>

前台显示博客页面 
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后台会报错.

参考原文：https://blog.csdn.net/u012995856/article/details/53457428

原文地址：https://www.cnblogs.com/wyhluckdog/p/10294762.html

时间： 2024-10-07 10:21:47

JFinal Web开发学习(九)后台添加前台显示博客的相关文章

JFinal Web开发学习(二)目录、架构、package设计

package分类 config是JFinal的项目配置 controller是控制器 handler可以设置全局处理器,例如判断用户请求中是否直接请求 FreeMarker的模板文件ftl或者html的后缀,重定向到404 interceptor拦截器,例如后台admin的每项操作拦截判断admin是否有权限或者是否已经登录 model.base用于JFinal的Generator生成器自动生成数据库映射基础模型类 model用于继承基础模型类的dao操作 routes用于设置单独路由配置,例

JFinal Web开发学习(一)开启HelloWorld

初次接触JFinal框架,接触过MVC思想,接触过Spring. JFinal官网: http://www.jfinal.com/ 之前很嫌弃JavaWeb开发,主要原因是繁琐的xml配置. 官方推荐工具是Eclipse For J2EE. 按照官方文档搭建起快速上手demo - 建立javaweb工程 - 放入jar包 - 修改web.xml - 写java文件 新建package cn.pangpython.config cn.pangpython.controller 在controlle

JFinal Web开发学习(四)数据库连接与自动生成model

1.新建数据库jfinal_test,user表 /* Navicat MySQL Data Transfer Source Server : . Source Server Version : 50547 Source Host : localhost:3306 Source Database : jfinal_test Target Server Type : MYSQL Target Server Version : 50547 File Encoding : 65001 Date: 20

JFinal Web开发学习(七)使用layUI美化的登录功能

效果: 验证码还是没有布局好.背景比较怀古. 1.写前端html login.jsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>

[python][django学习篇]后台admin用户编写博客文章

1 如果没有创建超级管理员账号,先要创建python manage.py createsuperuser 2 在admin后台注册模型 from django.contrib import admin from .models import Post, Category, Tag admin.site.register(Post) admin.site.register(Category) admin.site.register(Tag) 3 超级用户登录admin 后台 激活虚拟环境,运行开发

Django Web开发学习笔记（5）

第五部分 Model 层 创建一个app工程.app和project的区别引用DjangoBook的说法是: 一个project包含很多个Django app以及对它们的配置. 技术上,project的作用是提供配置文件,比方说哪里定义数据库连接信息, 安装的app列表, TEMPLATE_DIRS ,等等. 一个app是一套Django功能的集合,通常包括模型和视图,按Python的包结构的方式存在. 例如,Django本身内建有一些app,例如注释系统和自动管理界面. app的一个关键点是它

【web开发学习笔记】Structs2 Action学习笔记（三）action通配符的使用

action学习笔记3-有关于通配符的讨论 使用通配符,将配置量降到最低,不过,一定要遵守"约定优于配置"的原则. 一:前端htm <前端代码html> </head> <body> <a href="<%=context %>/actions/Studentadd">添加学生</a> <a href="<%=context %>/actions/Studentdel

Django Web开发学习笔记（4）

第四章 模板篇 上一章的内容,我们将HTML的代码和Python代码都混合在了在view.py的文件下.但是这样做的坏处无疑是明显的,引用DjangoBook的说法: 对页面设计进行的任何改变都必须对 Python 代码进行相应的修改. 站点设计的修改往往比底层 Python 代码的修改要频繁得多,因此如果可以在不进行 Python 代码修改的情况下变更设计,那将会方便得多. Python 代码编写和 HTML 设计是两项不同的工作,大多数专业的网站开发环境都将他们分配给不同的人员(甚至不同部门

【web开发学习笔记】Structs2 Action学习笔记（一）

1.org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter准备和执行 2. <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> url-pattern约定熟成只写/*,没必要写*.action 3. <