一个简单的web项目，网站文章管理（三）

最新推荐文章于 2023-04-21 13:47:10 发布

琪琪的饭团子

最新推荐文章于 2023-04-21 13:47:10 发布

阅读量532

点赞数

分类专栏：写的一些简单的项目文章标签：前端 ui jquery

本文链接：https://blog.csdn.net/YiLuoFc/article/details/104332056

版权

写的一些简单的项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上次已经完成了后端的业务逻辑，现在开始完成前端的部分。

前端我是基于H-ui.Admin框架在自己的需要上修改了一点；在这里说一下，H-ui.Admin有两个版本，我用的是H-ui.Admin.page这个是没有标签页模式的。下载地址：http://www.h-ui.net/H-ui.admin.shtml。

这里顺便再提一下，我的前端页面使用的都是html页面，所以在配置springMVC视图解析器的时候一定要配置html页面的，很多网上的教程都是使用jsp页面，在配置上也没有提到两个配置的不同；我在上一篇配置中有提到这个，在配置中我也把2个配置都写上了（注释掉了jsp页面的视图解析器）。

一、导入H-ui到工程中

在这里插入图片描述

其中lib文件夹是框架包含的各个组件，如果有用不上的可以删除简化；
static文件夹中是H-ui的js和css文件；Ps.static下js文件夹是我自己重写和整理的关于页面展示的一些js，后面到具体页面的时候会提到；
views文件夹中的是具体的前端视图了，因为springMVC的跳转问题我还没研究明白，所以我把index页面在视图文件夹中也放了一个，方便跳转回首页的操作；

二、index页面

（一）页面html代码

<!DOCTYPE html>
<html lang="cn">
<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>
    <![endif]-->
    <link href="static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
    <link href="static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/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>后台登录 - H-ui.admin.page v3.0</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value="" />
<div class="header"></div>
<div class="loginWraper">
    <div id="loginform" class="loginBox">
        <form class="form form-horizontal" action="login" method="post">
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
                <div class="formControls col-xs-8">
                    <input id="username" name="username" type="text" placeholder="账户" class="input-text size-L">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
                <div class="formControls col-xs-8">
                    <input id="password" name="password" type="password" placeholder="密码" class="input-text size-L">
                </div>
            </div>

            <div class="row cl">
                <div class="formControls col-xs-8 col-xs-offset-3">
                    <input name="" type="submit" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    <input name="" type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
                </div>
            </div>
        </form>
    </div>
</div>
<div class="footer">Copyright  by H-ui.admin.page.v3.0</div>

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script><!--这一条必须在其他所有引入的js之前-->
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
</body>
</html>

因为本项目所有关于页面的操作都是基于jQuery的，所以每个页面中引入jQuery的标签必须在其他所有引入js文件的前面，否则就可能出现操作失败等问题；
虽然前端框架开源，但因H-ui的版权要求，请在使用的时候，不要删除footer中的版权信息；
最后请注意修改页面的字符编码。

（二）登陆请求对应的controller

在这里插入图片描述

在form标签中的action属性后写上请求路径，同时在controller中的RequestMapping注解后也使用同一个路径；
同时把登陆的用户名和密码写入session，用于拦截器验证用户是否登陆，防止非法跳转。
验证通过后，跳转至数据处理页面，若没有通过验证，则重定向会登陆页面。

三、操作页面

（一）具体操作页面展示

由于三个操作页面高度相似，html页面代码就不重复贴出来了；
效果图如下

(二)页面相关代码

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" />
    <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>
    <![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.8/iconfont.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>文章列表 - 文章管理</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<!--_header-->
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid cl">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="">某某教育文章管理系统</a>
            <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="">H-ui</a>
            <span class="logo navbar-slogan f-l mr-10 hidden-xs">v2.0</span>
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
            <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                <ul class="cl">
                    <li id="user_mark">管理员</li>
                    <li class="dropDown dropDown_hover">
                        <a href="#" class="dropDown_A" id="login_username">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
                    </li>
                    <li id="Hui-msg">
                        <a href="loginout" title="退出">
                            <i class="Hui-iconfont" style="font-size:18px">&#xe644;</i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!--/_header-->

<!--_menu-->
<aside class="Hui-aside">
    <div class="menu_dropdown bk_2">
        <dl id="menu-article">
            <dt>
                <i class="Hui-iconfont">&#xe616;</i> 文章管理
                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
            </dt>
            <dd style="display: block;">
                <ul id="articlewei-ul">
                    <!--对应JS根据用户mark动态加载按钮-->
                </ul>
            </dd>
        </dl>
    </div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<!--/_menu-->

<section class="Hui-article-box">
    <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="Hui-article">
        <article class="cl pd-20">
            <div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l">
                    <a class="btn btn-danger radius" data-title="添加文章" onclick="article_add('添加文章','toarticleadd')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加文章</a>
                    <!--onclick="article_add('添加文章','toarticleadd')" href="javascript:;"--><!--href="toarticleadd"-->
                </span>
                <span class="r">共有数据：<strong id="article_total">54</strong> 条</span>
            </div>
            <div class="mt-20">
                <div class="dataTables_wrapper no-footer">
                    <table class="table table-border table-bordered table-bg table-hover table-sort" id="article_table">
                        <thead>
                        <tr class="text-c">
                            <th width="25" class="sorting_disabled" rowspan="1" colspan="1" aria-label style="width: 25px;">
                                <input type="checkbox" name="" value="">
                            </th>
                            <th width="80" class="sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="descending" aria-label="ID: 升序排列" style="width: 80px;">ID</th>
                            <th width="200">标题</th>
                            <th width="80">分类</th>
                            <th width="80">热度</th>
                            <th>内容摘要</th>
                            <th width="120">更新时间</th>
                            <th width="75">关键字</th>
                            <th width="80">作者</th>
                            <th width="60">发布状态</th>
                            <th width="120">操作</th>
                        </tr>
                        </thead>
                        <tbody id="article_tbody">

                        </tbody>
                    </table>
                    <div id="article_pageinfo" class="dataTables_info" role="status" aria-live="polite"></div>
                    <div class="dataTables_paginate paging_simple_numbers" id="article_paginate">
                        <a class="paginate_button previous" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0" id="article_previous">上一页</a>
                        <span id="article_nav">
                            <a class="paginate_button current" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a>
                        </span>
                        <a class="paginate_button next" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0" id="article_next">下一页</a>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>

<!--_footer-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.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.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.page.js"></script>
<!--_footer -->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/static/js/articlewei-list.js"></script>
<script type="text/javascript" src="/static/js/article.js"></script>
<script type="text/javascript">
    //关于页面获取数据的总方法
    $(function(){
        toPage(1);
    });


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

页面JS代码

let i;

//关于页面获取数据的总方法
function toPage(page){
    $.ajax({
        url:'/articleWeis',
        data:'page='+page,
        type:'GET',
        success:function(result){
            inset_username(result);
            inset_user_mark(result);
            draw_table(result);
            insert_article_total(result);
            inset_page_info(result);
            inset_nav(result);
            bind_click(result);
            article_wei_global(result);
        }
    });
}

//设置一个全局变量
function article_wei_global(result){
    i = result;
}

/*添加未审核文章*/
function article_add(title,url){
    var endPage = $("#change_end").text();

    layer.open({
        type: 2,
        title: title,
        area: ['80%','100%'],
        content: url,
        end:function () {
            toPage(endPage);
        }
    });
}

/*编辑文章*/
function article_edit(obj){
    let id = $(obj).attr('article-id');

    layer.open({
        type: 2,
        title: "编辑未审核文章",
        area:['80%','100%'],
        content:"toArticleUpdate",
        success: function(layero, index){
            /*$.ajax({
                url:"/setWidToCookie",
                data:"id="+id,
                type:"GET"
            });*/
            let body = layer.getChildFrame('body', index);
            let iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
            /*console.log(body.html()) //得到iframe页的body内容*/
            iframeWin.show_data(id);
        },
        end:function () {
          let j = i.jsonData.PageInfo.pageNum;
          toPage(j);
        }
    });
}

//填入用户名的方法
function inset_username(result) {
    let loginUserName = result.jsonData.username;
    $("#login_username").text(loginUserName);
}

//填入用户级别的方法,根据用户级别修改页面的显示和隐藏属性
function inset_user_mark(result) {
    let userMark = result.jsonData.usermark;

    //创建需要展示的标签
    let articleWei = $("<li></li>").addClass('current').append('<a href="toarticlewei" title="未审核文章管理">未审核文章列表</a>');
    let articleFa = $("<li></li>").append('<a href="toarticlefa" title="待发布文章管理">待发布文章列表</a>');
    let article = $("<li></li>").append('<a href="toarticle" title="已发布文章管理">已发布文章列表</a>');

    if (userMark === 1){
        $("#user_mark").text("超级管理员");
        $("#articlewei-ul").empty();
        $("#articlewei-ul").append(articleWei).append(articleFa).append(article);
    }else{
        $("#user_mark").text("普通用户");
        $("#articlewei-ul").empty();
        $("#articlewei-ul").append(articleWei);
    }
}

//填入总文章数的方法
function insert_article_total(result) {
    let articleTotal = result.jsonData.PageInfo.total;
    $("#article_total").text(articleTotal);
}

//创建文章数量消息显示
function inset_page_info(result) {
    let start = result.jsonData.PageInfo.startRow;
    let end = result.jsonData.PageInfo.endRow;
    let pages = result.jsonData.PageInfo.pages;
    $("#article_pageinfo").empty();
    $("#article_pageinfo").prepend('显示'+start+'条到'+'<span id="change_end">'+end+'</span>条，共'+'<span id="change_total">'+pages+'</span>'+'页');

}

//创建导航条
function inset_nav(result) {
    $("#article_nav").empty();

    $.each(result.jsonData.PageInfo.navigatepageNums,function (index,item) {
        let pageNums = $("<td></td>").addClass('paginate_button').append(item);
        if (result.jsonData.PageInfo.pageNum === item){
            pageNums.addClass('current');
        }else {
            pageNums.click(function () {
                toPage(item);
            });
        }
        $("#article_nav").append(pageNums);
    });
}

//导航条首尾页按钮绑定单击事件
function bind_click(result) {
    if(result.jsonData.PageInfo.hasPreviousPage === false){
        $("#article_previous").addClass('disabled');
    }else {
        $("#article_previous").click(function(){
            toPage(/*result.jsonData.PageInfo.pageNum - */1);
        });
    }

    if(result.jsonData.PageInfo.hasNextPage === false){
        $("#article_next").addClass('disabled');
    }else{
        $("#article_next").click(function(){
            toPage(result.jsonData.PageInfo.pages);
        });
    }

    $("#article_previous").text("首页");
    $("#article_next").text("末页");
}

//创建表格
function draw_table(result) {
    $("#article_tbody").empty();

    let articles = result.jsonData.PageInfo.list;

    //通过判断用户标签，生成对应权限的表格（当标签为1时生成管理员表格，当标签不为1时生成普通用户表格）
    if(result.jsonData.usermark === 1){
        $.each(articles,function(index,item) {

            //表格显示元素
            let articleCheckbox = $("<td></td>").append('<input type="checkbox" value="" name="">');
            let articleId = $("<td></td>").addClass('sorting_1').append(item.wid);
            let articleTitle = $("<td></td>").append(item.wtitle);
            let articleTypeid = $("<td></td>").append(item.wtypeid);
            let articleHotid = $("<td></td>").append(item.whotid);
            let articleDescription = $("<td></td>").addClass('article-content').append(item.wdescription);
            let articleDate = $("<td></td>").append(item.wdate);
            let articleKeywords = $("<td></td>").append(item.wkeywords);
            let articleZuozhe = $("<td></td>").append(item.wzuozhe);
            let articleState  = $("<td></td>").addClass('td-status').append('<span class="label label-danger radius">未审核</span>');

            /*表格中操作按钮*/
            //审核按钮
            let btn_1 = $("<a></a>").click(function () {
                article_shenhe(this);
            }).attr('article-id',item.wid).attr('style','text-decoration:none').attr('title','审核').append('<i class="Hui-iconfont">&#xe60c;</i>')
            //编辑按钮
            let btn_2 = $("<a></a>").addClass('ml-5').click(function () {
                article_edit(this);
            }).attr('article-id',item.wid).attr("style","text-decoration:none").attr('title',"编辑").append('<i class="Hui-iconfont">&#xe6df;</i>')
            //删除按钮
            let btn_3 = $("<a></a>").addClass('ml-5').click(function () {
                articleWei_del(this);
            }).attr('article-id',item.wid).attr('style','text-decoration:none').attr('title','删除').append('<i class="Hui-iconfont">&#xe6e2;</i>')

            let articleCaozuo  = $("<td></td>").addClass('f-14 td-manage').append(btn_1).append(btn_2).append(btn_3);

            $("<tr></tr>").addClass('text-c').append(articleCheckbox).append(articleId).append(articleTitle)
                .append(articleTypeid).append(articleHotid).append(articleDescription).append(articleDate)
                .append(articleKeywords).append(articleZuozhe).append(articleState).append(articleCaozuo)
                .appendTo("#article_tbody");
        });
    }else {
        $.each(articles,function(index,item) {

            //表格显示元素
            let articleCheckbox = $("<td></td>").append('<input type="checkbox" value="" name="">');
            let articleId = $("<td></td>").addClass('sorting_1').append(item.wid);
            let articleTitle = $("<td></td>").append(item.wtitle);
            let articleTypeid = $("<td></td>").append(item.wtypeid);
            let articleHotid = $("<td></td>").append(item.whotid);
            let articleDescription = $("<td></td>").addClass('article-content').append(item.wdescription);
            let articleDate = $("<td></td>").append(item.wdate);
            let articleKeywords = $("<td></td>").append(item.wkeywords);
            let articleZuozhe = $("<td></td>").append(item.wzuozhe);
            let articleState  = $("<td></td>").addClass('td-status').append('<span class="label label-danger radius">未审核</span>');

            /*表格中操作按钮*/
            //编辑按钮
            let btn_2 = $("<a></a>").addClass('ml-5').click(function () {
                article_edit(this);
            }).attr('article-id',item.wid).attr("style","text-decoration:none").attr('title',"编辑").append('<i class="Hui-iconfont">&#xe6df;</i>')
            //删除按钮
            let btn_3 = $("<a></a>").addClass('ml-5').click(function () {
                articleWei_del(this);
            }).attr('article-id',item.wid).attr('style','text-decoration:none').attr('title','删除').append('<i class="Hui-iconfont">&#xe6e2;</i>')

            let articleCaozuo  = $("<td></td>").addClass('f-14 td-manage').append(btn_2).append(btn_3);

            $("<tr></tr>").addClass('text-c').append(articleCheckbox).append(articleId).append(articleTitle)
                .append(articleTypeid).append(articleHotid).append(articleDescription).append(articleDate)
                .append(articleKeywords).append(articleZuozhe).append(articleState).append(articleCaozuo)
                .appendTo("#article_tbody");
        });
    }
}

对文章进行具体操作的JS代码

    /*文章-操作方法*/

    /*删除已发布文章*/
    function article_del(obj) {
        let id = $(obj).attr('article-id');
        let total1 = $("#article_total").text();
        let end = $("#change_end").text();

        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: '/articles/' + id,
                type: 'DELETE',
                dataType: 'json',
                success: function () {
                    $(obj).parents('tr').remove();
                    //toPage(page);
                    $("#article_total").text(total1 - 1);
                    $("#change_end").text(end - 1);
                    /*$("#change_total").text(total1-1);*/
                    layer.msg('已删除!', {icon: 1, time: 1500});
                },
                error: function (data) {
                    console.log(data.msg);
                }
            });
        });
    }

    /*删除未发布文章*/
    function articleFa_del(obj) {
        let id = $(obj).attr('article-id');
        let total1 = $("#article_total").text();
        let end = $("#change_end").text();

        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: '/articlefas/' + id,
                type: 'DELETE',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents('tr').remove();
                    //toPage(page);
                    $("#article_total").text(total1 - 1);
                    $("#change_end").text(end - 1);
                    /*$("#change_total").text(total1-1);*/
                    layer.msg('已删除!', {icon: 1, time: 1500});
                },
                error: function (data) {
                    console.log(data.msg);
                }
            });
        });
    }

    /*删除未审核文章*/
    function articleWei_del(obj) {
        let id = $(obj).attr('article-id');
        let total1 = $("#article_total").text();
        let end = $("#change_end").text();

        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: '/articleWeis/' + id,
                type: 'DELETE',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents('tr').remove();
                    //toPage(page);
                    $("#article_total").text(total1 - 1);
                    $("#change_end").text(end - 1);
                    /*$("#change_total").text(total1-1);*/
                    layer.msg('已删除!', {icon: 1, time: 1500});
                },
                error: function (data) {
                    console.log(data.msg);
                }
            });
        });
    }

    /*审核*/
    function article_shenhe(obj){
        let id = $(obj).attr('article-id');

        layer.confirm('审核文章？', {
                btn: ['通过','取消'],
                shade: false,
                closeBtn: 0
            },
        function() {
            $.ajax({
                url: '/shenhe',
                data: 'wid=' + id,
                type: 'POST',
                dataType: 'json',
                success: function (result) {
                    var info = result.jsonData.infomation;
                    var i = result.code;

                    if (i == 100) {
                        $(obj).parents('tr').remove();
                        layer.msg(info, {icon: 6, time: 1000});
                    } else {
                        layer.msg(info, {icon: 6, time: 1000});
                    }

                }
            });
        })
    }

    /*下架*/
    function article_stop(obj){
        let id = $(obj).attr('article-id');

        layer.confirm('下架文章？', {
                btn: ['下架','取消'],
                shade: false,
                closeBtn: 0
            },
        function() {
            $.ajax({
                url: '/xiajia',
                data: 'id=' + id,
                type: 'POST',
                dataType: 'json',
                success: function (result) {
                    var info = result.jsonData.infomation;
                    var i = result.code;

                    if (i == 100) {
                        $(obj).parents('tr').remove();
                        layer.msg(info, {icon: 6, time: 1000});
                    } else {
                        layer.msg(info, {icon: 6, time: 1000});
                    }

                }
            });
        })
    }

    /*发布*/
    function article_start(obj){
        let id = $(obj).attr('article-id');

        layer.confirm('确认要发布吗？',function(index){

            $.ajax({
                url: '/fabu',
                data: 'fid=' + id,
                type: 'POST',
                dataType: 'json',
                success: function (result) {
                    var info = result.jsonData.infomation;
                    var i = result.code;

                    if(i == 100){
                        $(obj).parents('tr').remove();
                        layer.msg(info,{icon: 6,time:1000});
                    }else {
                        layer.msg(info,{icon: 6,time:1000});
                    }
                }
            });
        });
    }

Ps:特别说明：
这个小工程是我4年前写的，受限于我当时的眼界和技术，所有页面的table加载和权限判断展示都是我手写JS代码实现的，效果比较粗糙。我尽可能多的添加了注释，如果还有看不懂或不理解的可以加我QQ或给我写邮件。

（三）后端相关代码

此处只写出Controller层代码，Service和Dao层代码在本系列二中已经贴出来了

package com.luofc.article.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.luofc.article.bean.ArticleFa;
import com.luofc.article.bean.ArticleWei;
import com.luofc.article.bean.ReturnMsg;
import com.luofc.article.bean.User;
import com.luofc.article.service.ArticleFaService;
import com.luofc.article.service.ArticleWeiService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;
import java.util.List;

/**
 * @author:luoFc
 * @date:2019/10/23-21:58
 * @emal:523232622@qq.com
 * @Description:(操作未审核文章增删改查的控制类)
 */

@Controller
public class ArticleWeiController {

    @Autowired
    ArticleWeiService articleWeiService;

    @Autowired
    ArticleFa articleFa;

    @Autowired
    ArticleFaService articleFaService;

    @Autowired
    HttpSession session;

    /**
     * 	保存未审核文章的方法
     */
    @RequestMapping(value = "/articleWeis",method = RequestMethod.POST)
    @ResponseBody
    public ReturnMsg saveArticleWei(ArticleWei articleWei){

        boolean a = articleWeiService.addArticleWei(articleWei);

        if (a){
            return ReturnMsg.success().addMsg("infomation","文章保存成功！");
        }
        return ReturnMsg.faild().addMsg("infomation","文章保存失败！");
    }

    /**
     * 	审核文章的方法
     */
    @RequestMapping(value = "/shenhe",method = RequestMethod.POST)
    @ResponseBody
    public ReturnMsg examineArticleWei(@RequestParam(value="wid")Integer wid){

        //通过id查询到要处理的未审核的文章
        ArticleWei articleWei = articleWeiService.getArticleWeiById(wid);

        //从articleWei对象中取出数据，放入articleFa对象中
        articleFa.setFtypeid(articleWei.getWtypeid());
        articleFa.setFhotid(articleWei.getWhotid());
        articleFa.setFtitle(articleWei.getWtitle());
        articleFa.setFcontent(articleWei.getWcontent());
        articleFa.setFdescription(articleWei.getWdescription());
        articleFa.setFimages(articleWei.getWimages());
        articleFa.setFdate(articleWei.getWdate());
        articleFa.setFkeywords(articleWei.getWkeywords());
        articleFa.setFzhaiyao(articleWei.getWzhaiyao());
        articleFa.setFzuozhe(articleWei.getWzuozhe());

        //把数据写入数据库
        boolean a = articleFaService.addArticleFa(articleFa);

        //当数据写入到待发布文章数据库中成功时，才会删除旧的数据，否则审核失败！
        if (a){

            //把通过审核的文章从未审核数据库删除
            boolean b = articleWeiService.deleteArticleWeiById(wid);

            return ReturnMsg.success().addMsg("infomation","审核成功!");
        }
        return ReturnMsg.faild().addMsg("infomation","审核失败!");
    }

    /**
     *  根据ID删除未审核文章
     */
    @RequestMapping(value = "/articleWeis/{id}",method = RequestMethod.DELETE)
    @ResponseBody
    public ReturnMsg deleteArticleById(@PathVariable("id") Integer id){
        boolean a = articleWeiService.deleteArticleWeiById(id);
        if (a){
            return ReturnMsg.success();
        }
        return ReturnMsg.faild();
    }

    /**
     *  根据ID修改未审核文章
     */
    @RequestMapping(value = "/updateWei",method = RequestMethod.POST)
    @ResponseBody
    public ReturnMsg updateArticleById(ArticleWei articleWei){
        boolean a = articleWeiService.updateArticleWeiById(articleWei);
        if (a){
            return ReturnMsg.success().addMsg("infomation","修改成功");
        }
        return ReturnMsg.faild().addMsg("infomation","修改失败");
    }

    /**
     * 	加载未审核文章页面时分页查询的方法
     */
    @RequestMapping(value = "/articleWeis",method = RequestMethod.GET)
    @ResponseBody   //通过该注解，把返回的数据自动转为Json类型
    public ReturnMsg findAllArticle(@RequestParam(value="page",defaultValue="1")Integer page) {

        User user =(User)session.getAttribute("loginUser");
        String name = user.getName();
        Integer usermark = user.getMark();

        //查询前调用调用PageHelper中的startPage方法
        PageHelper.startPage(page, 5);

        if (usermark == 1){

            //查询所有未审核的文章
            List<ArticleWei> articleWeis = articleWeiService.getAllArticleWeis();

            //使用pageInfo封装查询后的结果
            PageInfo pages = new PageInfo(articleWeis,5);

            //添加需要的数据后返回给页面
            return ReturnMsg.success().addMsg("username",name)
                    .addMsg("usermark",usermark).addMsg("PageInfo", pages);
        }

        //通过用户名查询未审核文章
        List<ArticleWei> articleWeis = articleWeiService.getArticleWeisByZuozhew(name);

        //使用pageInfo封装查询后的结果
        PageInfo pages = new PageInfo(articleWeis,5);

        //添加需要的数据后返回给页面
        return ReturnMsg.success().addMsg("username",name)
                .addMsg("usermark",usermark).addMsg("PageInfo", pages);
    }

    /**
     *  根据ID查询未审核文章
     */
    @RequestMapping(value = "/articleWei",method = RequestMethod.GET)
    @ResponseBody
    public ReturnMsg getArticleById(@RequestParam(value="id") String id){
        Integer wid = Integer.valueOf(id);
        ArticleWei articleWei = articleWeiService.getArticleWeiById(wid);
        return ReturnMsg.success().addMsg("articleWei",articleWei);
    }
}

四、结束

到这里本项目就基本结束了，由于该项目年代久远，涉及到的技术也都是多年以前的了。不过其中的JS代码虽然比较复杂，没有现在的VUE和React那么方便，但还是有一定的研究价值（毕竟现在的前端框架都是基于JavaScript写出来的）。有缘再见！

琪琪的饭团子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个简单的web项目，网站文章管理（三）

上次已经完成了后端的业务逻辑，现在开始完成前端的部分。前端我是基于H-ui.Admin框架在自己的需要上修改了一点；在这里说一下，H-ui.Admin有两个版本，我用的是H-ui.Admin.page这个是没有标签页模式的。下载地址：http://www.h-ui.net/H-ui.admin.shtml。这里顺便再提一下，我的前端页面使用的都是html页面，所以在配置springMVC视图解...
复制链接

扫一扫