上次已经完成了后端的业务逻辑,现在开始完成前端的部分。
前端我是基于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"></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"></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=" 登 录 ">
<input name="" type="reset" class="btn btn-default radius size-L" value=" 取 消 ">
</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:;"></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"></i></a>
</li>
<li id="Hui-msg">
<a href="loginout" title="退出">
<i class="Hui-iconfont" style="font-size:18px"></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"></i> 文章管理
<i class="Hui-iconfont menu_dropdown-arrow"></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"></i> 首页
<span class="c-gray en">></span>
文章管理
<span class="c-gray en">></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"></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"></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"></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"></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"></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"></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"></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写出来的)。有缘再见!