cms_文章管理

時間 2021-01-31

標籤 javascript css html 前端 java mysql jquery web ajax spring 欄目 CMS 简体版

原文原文鏈接

文章管理javascript

文章管理前端頁面css

把引入的多個佈局抽成了公共代碼html

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title>CMS系統歡迎您</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<%@ include file="/WEB-INF/views/common/topStatic.jsp" %>



<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>

<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>

</head>
<body class="app sidebar-mini">


<%@ include file="/WEB-INF/views/common/header.jsp" %>

<%@ include file="/WEB-INF/views/common/leftMenu.jsp" %>

<main class="app-content">

<div class="row app-title">
<div class="col-md-12">


<div class="modal fade" id="delModal">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 style="color: red">您確認要刪除嗎？</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href="javascript:" id="delModelButton"
class="btn btn-success">肯定</a>
</div>
</div>

</div>

</div>


<div class="modal fade bs-example-modal-lg" id="saveModel">
<div class="modal-dialog modal-lg">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/system/article/save" method="post" class="form-horizontal" id="saveForm">
<input type="hidden" name="id" id="id">
<div class="form-group row">
<label for="title" class="control-label col-md-3">文章標題</label>
<div class="col-md-9">
<input class="form-control" type="text" name="title">
</div>
</div>
<div class="form-group row">
<label for="typeId" class="control-label col-md-3">文章類型</label>
<div class="col-md-9">
<select name="typeId" class="form-control">
<c:forEach items="${types}" var="t">
<option value="${t.id}">${t.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group row">
<label for="enable" class="control-label col-md-3">是否啓用</label>
<div class="col-md-9">
<div class="form-check">
<label class="form-check-label"> <input
class="form-check-input" type="radio" checked="checked"
id="enable" name="enable" value="1">啓用
</label>
</div>
<div class="form-check">
<label class="form-check-label"> <input
class="form-check-input" type="radio" name="enable" value="0">禁用
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="content" class="control-label col-md-3">文章內容</label>
<div class="col-md-9">



<script id="container" name="content" type="text/plain">
這裏寫你的初始化內容
</script>
<script type="text/javascript">
var ue = UE.getEditor('container', {
/* 富文本框使用的工具欄 toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
], */
autoHeightEnabled: true,
autoFloatEnabled: true
});

/* 避免工具欄會被富文本會工具彈窗被擋住 */
var ue = UE.getEditor('container',{
initialFrameHeight: '200', /* 自定義富文本的高度 */
zIndex: 8888 //設置彈出框的層級及結構
});

/*
這是上傳圖片的修改
拷貝static\ueditor\jsp\lib中的jar包，而後放入webapp\WEB-INF\lib
再引入項目，否則單圖上傳不成功webapp\static\ueditor\jsp\config.json"imagePathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
上傳保存路徑,能夠自定義保存路徑和文件名格式
*/

</script>

</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href='javascript:void(0);' id="saveButton" class="btn btn-success">肯定</a>
</div>
</div>
</div>
</div>


<form id="queryForm" class="form-inline">
<div class="form-group">
<label for="title">標題：</label>
<input type="text" class="form-control" name="title" id="title">
</div>
<div class="form-group" style="margin-left: 20px">
<label>文章類型：</label>
<select name="typeId" class="form-control" id="typeId">

<option value="">請選擇</option>
<c:forEach items="${types }" var="t">
<option value="${t.id }">${t.name }</option>

</c:forEach>
</select>
</div>
<div class="form-group" style="margin-left: 20px">
<label>是否啓用：</label>
<select name="enable" class="form-control" id="enable">
<option value="">請選擇</option>
<option value="1">啓用</option>
<option value="0">禁用</option>
</select>
</div>
<button type="button" id="queryButton" class="btn btn-success" style="margin-left: 20px">查詢</button>
</form>
</div>
</div>


<table id='table-demo-ajaxPageCode'></table>

</div>
</div>
</main>

<script src="/static/system/js/jquery-3.3.1.min.js"></script>
<script src="/static/system/js/bootstrap.min.js"></script>
<script src="/static/system/js/main.js"></script>

<script src="/static/system/js/plugins/pace.min.js"></script> 前端

<%@ include file="/WEB-INF/views/common/bottomStatic.jsp" %>

<script type="text/javascript" src="/static/system/js/article/article.js"></script>
</body>
</html>java

抽出去的佈局mysql

bottomStatic.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<script src="/static/system/js/jquery-3.3.1.min.js"></script>
<script src="/static/system/js/popper.min.js"></script>
<script src="/static/system/js/bootstrap.min.js"></script>
<script src="/static/system/js/main.js"></script>

<script src="/static/system/js/plugins/pace.min.js"></script>

<script type="text/javascript" src="/static/system/js/plugins/chart.js"></script>
<script src="/static/system/js/jquery.jdirk.js"></script>
<script src="/static/system/js/jquery-form.js"></script>
<script src="/static/system/js/form-setForm.js"></script>jquery

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<header class="app-header">
<a class="app-header__logo" href="index.html">源碼時代</a> <a
class="app-sidebar__toggle" href="#" data-toggle="sidebar"
aria-label="Hide Sidebar"></a>

<ul class="app-nav">

<li class="dropdown"><a class="app-nav__item" href="#"
data-toggle="dropdown" aria-label="Open Profile Menu"> <i
class="fa fa-user fa-lg"></i></a>
<ul class="dropdown-menu settings-menu dropdown-menu-right">
<li><a class="dropdown-item" href="/system/logout">
<i class="fa fa-sign-out fa-lg"></i> 退出
</a></li>
</ul></li>
</ul>
</header>web

leftMenu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
<div class="app-sidebar__user">
<img class="app-sidebar__user-avatar" width="48px" height="48px"
src="/upload/1610442774664.jpg" alt="User Image">
<div>
<p class="app-sidebar__user-name">${user.nickName}</p>
</div>
</div>
<ul class="app-menu">
<li><a class="app-menu__item" href="/system/article/index">
<i class="app-menu__icon fa fa-dashboard"></i> <span
class="app-menu__label">文章管理</span>
</a></li>
<li><a class="app-menu__item" href="/system/slide/index">
<i class="app-menu__icon fa fa-dashboard"></i> <span
class="app-menu__label">輪播管理</span>
</a></li>
<li><a class="app-menu__item" href="/system/faq/index">
<i class="app-menu__icon fa fa-dashboard"></i> <span
class="app-menu__label">常見問題管理</span>
</a></li>
<li><a class="app-menu__item" href="/system/feedbacks/index">
<i class="app-menu__icon fa fa-dashboard"></i> <span
class="app-menu__label">好評如潮管理</span>
</a></li>
</ul>
</aside>ajax

topStatic.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<link rel="stylesheet" type="text/css"
href="/static/system/css/main.css">

<link rel="stylesheet" type="text/css"
href="/static/system/css/font-awesome.min.css">

<link rel="stylesheet" href="/static/system/gridmanager/css/gm.css">

<script type="text/javascript" src="/static/system/gridmanager/js/gm.js"></script>spring

引入增刪改查操做的js

$(function(){//頁面加載事件

//高級查詢
$('#queryButton').on('click',function(){
//經過GridManager的setQuery將表單的數據傳遞到後臺【會將分頁的數據傳遞過去】
//這個方法發送的請求就是指定的GridManager的請求：/system/article/list
//手動：不方便維護
//var title = $("#title").val();
//自動：先導入jquery.jdirk.js ，而後引入【在jquery下引入】，而後調用方法
var jsonForm = $("#queryForm").serializeObject();
GridManager.setQuery('demo-ajaxPageCode',jsonForm);
});

//刪除功能 -- 事件委託
$("#table-demo-ajaxPageCode").on('click','a[data-id]',function(){
//獲取被刪對象的id值
var id = $(this).data('id');
//彈出刪除模態框 -- 複製模態框
$("#delModal").modal("show");
//清除全部的事件
$("#delModalButton").off();
//綁定單擊事件
$("#delModelButton").on('click',function(){
$.ajax({
type: "POST", //請求方式
url: "/system/article/del", //請求地址
data: "id=" + id, //請求參數
dataType: "json", //指定服務器返回的數據類型，若是是字符串就不用寫，若是是對象和集合就必須寫，它會自動轉成json對象，方便使用
success: function(msg){ //回調函數
if(msg.success){//刪除成功
//1.關閉模態框
$("#delModal").modal("hide");
//2.刷新頁面,參數是GridManager的名稱
GridManager.refreshGrid('demo-ajaxPageCode');
}else{//刪除失敗
//1.關閉模態框
$("#delModal").modal("hide");
//2.提示
alert(msg.msg);
}
}
});
});
});

//點擊添加按鈕彈出模態框
$("#table-demo-ajaxPageCode").on('click','#add',function(){
//操做：清空表單，由於添加和修改使用的是同一個模態框，添加數據以後點擊取消，再點擊添加或修改仍是之前的數據，全部須要清空

$("#saveForm").get(0).reset();
//操做：清空表單時不會清除隱藏域id，這樣在添加和修改時要出問題
$("#saveForm #id").val("");
/*添加清空富文本*/
var ue = UE.getEditor('container');
ue.ready(function() {
ue.setContent('');
});
//顯示模態框
$("#saveModel").modal("show");
$("#saveButton").off();
$("#saveButton").on('click',function(){
//將表單中的數據【表單項必須有name屬性值】以ajax異步的方式進行提交 //請求就是表單中action的屬性值
$("#saveForm").ajaxSubmit({
success:function(msg){
//1.關閉模態框
$("#saveModel").modal("hide");
if(msg.success){
//2.刷新頁面,參數是GridManager的名稱
GridManager.refreshGrid('demo-ajaxPageCode');
}else{//操做失敗
alert(msg.msg);
}
}
});
});
});

//點擊修改按鈕彈出模態框
$("#table-demo-ajaxPageCode").on('click','a[data-obj]',function(){
//操做：清空表單，由於添加和修改使用的是同一個模態框，添加數據以後點擊取消，再點擊添加或修改仍是之前的數據，全部須要清空
/* 操做：清空表單時不會清除隱藏域id，這樣在添加和修改時要出問題
$("#saveForm #id").val(""); */
$("#saveForm").get(0).reset();
//1.獲取到回顯的數據
var jsonObj = $(this).data('obj'); //json對象
console.debug(jsonObj)
//2.設置到模態框的表單中
$("#saveForm").setForm(jsonObj); //作回顯
/*修改按鈕富文本編輯回顯數據*/
/*添加清空富文本*/
var ue = UE.getEditor('container');
ue.ready(function() {
ue.setContent(jsonObj.content);
});

$("#saveModel").modal("show");
//點擊添加和修改模態框的【肯定】按鈕綁定單擊事件
$("#saveButton").on('click',function(){
//將表單中的數據【表單項必須有name屬性值】以ajax異步的方式進行提交 //請求就是表單中action的屬性值
$("#saveForm").ajaxSubmit({
success:function(msg){
//1.關閉模態框
$("#saveModal").modal("hide");
if(msg.success){
//2.刷新頁面,參數是GridManager的名稱
GridManager.refreshGrid('demo-ajaxPageCode');
}else{//操做失敗
//2.提示
alert(msg.msg);
}
}
});
});
});

});

前端控制器交給的頁面控制的

package cn.itsource.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.itsource.domain.Article;
import cn.itsource.domain.ArticleType;
import cn.itsource.query.IArticleQuery;
import cn.itsource.service.IArtService;
import cn.itsource.service.IArticleTypeService;
import cn.itsource.util.AjaxResult;
import cn.itsource.util.PageBase;

/**
* @Title: Articlecontroller.java
* @Package:cn.itsource.controller
* @Description:(文章管理)
* @author:lon
* @date:2021年1月15日
* @version:V1.0
*/
@Controller
@RequestMapping("/system")
public class Articlecontroller {
@Autowired
private IArtService service;
@Autowired
private IArticleTypeService TypeService;
@RequestMapping("/article/list")
@ResponseBody
public PageBase<Article> list(IArticleQuery ArticleQuery){
return service.findall(ArticleQuery);
}
/*文章查詢高級查詢回顯*/
@RequestMapping("/article/index")
public String index(Model model){
System.out.println("uu");
List<ArticleType> types = TypeService.findAll();
model.addAttribute("types", types);
return "article/article";
}

@RequestMapping("/article/del")
@ResponseBody
public AjaxResult delete(Long id){
System.out.println("1");
try {
System.out.println("2");
service.delete(id);
return new AjaxResult(true, "");
} catch (Exception e) {
System.out.println("3");
return new AjaxResult(false, "小老弟你不行呀");
}
}

@RequestMapping("/article/save")
@ResponseBody
public AjaxResult save(Article article,HttpServletRequest req){
System.out.println("保存方法");
try {
System.out.println("後臺來了");
service.save(article,req);
return new AjaxResult(true,"");
} catch (Exception e) {
return new AjaxResult(false, "操做失敗");
}
}
@RequestMapping("/index")
public String index(){
return "index";
}
}

接收參數用的實體類

package cn.itsource.query;

import cn.itsource.util.BaseQuery;

public class ArticleQuery extends BaseQuery{
private String title;
private Long typeId;
private Boolean enable;
@Override
public String toString() {
return "ArticleQuery [title=" + title + ", typeId=" + typeId + ", enable=" + enable + "]";
}
public ArticleQuery(String title, Long typeId, Boolean enable) {
super();
this.title = title;
this.typeId = typeId;
this.enable = enable;
}
public ArticleQuery() {
super();
// TODO Auto-generated constructor stub
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public Long getTypeId() {
return typeId;
}
public void setTypeId(Long typeId) {
this.typeId = typeId;
}
public Boolean getEnable() {
return enable;
}
public void setEnable(Boolean enable) {
this.enable = enable;
}
}

分頁實現都會繼承該類接收gridmanger提交的參數

package cn.itsource.util;

/**
* @Title: BaseQuery.java
* @Package:cn.itsource.util
* @Description:(做用:分頁查詢的工具類,分頁查詢都須要繼承該類方便實現分頁參數的接收和傳遞 )
* @author:long
* @date:2021年1月15日
* @version:V1.0
*/
public class BaseQuery{
private Integer localPage=0;
private Integer pageSize=0;
public Integer getBegin(){
return (localPage-1)*pageSize;
}

public Integer getLocalPage() {
return localPage;
}
public void setLocalPage(Integer localPage) {
this.localPage = localPage;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
@Override
public String toString() {
return "BaseQuery [localPage=" + localPage + ", pageSize=" + pageSize + "]";
}
}

文章管理頁面處理器調用的方法

package cn.itsource.service;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import cn.itsource.domain.Article;
import cn.itsource.query.IArticleQuery;
import cn.itsource.util.PageBase;

public interface IArtService {
PageBase<Article> findall(IArticleQuery query);
void del(Long id,HttpServletRequest req);
Map<String, List<Article>> findArticle();
void save(Article article,HttpServletRequest req);
void delete(Long id);
Article updateClick(String url);
}

文章管理頁面處理器調用的抽象類的實現

package cn.itsource.service.impl;

import java.io.File;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.itsource.domain.Article;
import cn.itsource.domain.ArticleType;
import cn.itsource.mapper.Articlemapper;
import cn.itsource.mapper.Artictypelemapper;
import cn.itsource.query.IArticleQuery;
import cn.itsource.service.IArtService;
import cn.itsource.util.Constant;
import cn.itsource.util.FreeMarkerUtil;
import cn.itsource.util.PageBase;
@Service
public class ArtServiceimpl implements IArtService{

@Autowired
private Articlemapper mapper;
@Autowired
private Artictypelemapper typemapper;

/*查詢*/
@Override
public PageBase<Article> findall(IArticleQuery query) {
/*查詢文章總數量: 根據高級查詢拿三個條件來決定*/
Integer totalsCount = mapper.findTotalCount(query);
/*按照分頁條件查數據：高級查詢三條件加入進來*/
List<Article> list = mapper.findAll(query);
/*給每個article對象的type屬性賦值*/
for (Article article : list) {
Long id = article.getTypeId();
ArticleType type = typemapper.findbyid(id);
//System.out.println(type);
article.setType(type);
}
PageBase<Article> li = new PageBase<>(list, totalsCount);

return li;
}

/*刪除*/
@Override
public void delete(Long id) {
System.out.println("文章管理執行了刪除操做");
mapper.delete(id);
}

/*前臺文章分欄查詢*/
@Override
public Map<String, List<Article>> findArticle() {
Map<String, List<Article>> map= new HashMap<>();
/*查詢技術文章*/
List<Article> technologys = mapper.findArticleByCode(Constant.TECHNOLOGY);
/*查詢行業新聞*/
List<Article> industrys = mapper.findArticleByCode(Constant.INDUSTRY);
/*查詢學科諮詢*/
List<Article> subjects = mapper.findArticleByCode(Constant.SUBJECT);
map.put("technologys", technologys);
map.put("industrys", industrys);
map.put("subjects", subjects);
return map;
}

/*添加*/
@Override
public void save(Article article, HttpServletRequest req) {
String realPath = req.getServletContext().getRealPath("/static/template");
File file = new File(realPath);
if(!file.exists()){//若是文件夾不存在，就建立文件夾
file.mkdirs();
}
String url = FreeMarkerUtil.createFile(realPath, "article.ftl", article, ".html");
article.setUrl("/static/template/"+url);
if(article.getId()!=null){
Article oldArticle = mapper.findById(article.getId());//獲得了數據庫中舊的那條數據
String oldUrl = oldArticle.getUrl();// /static/template/1605176075312.html
//F:/workspace/PojOneSpace/Day47_cms03/src/main/webapp+
String real = req.getServletContext().getRealPath("/");
new File(real,oldUrl).delete();//刪除舊的文件
mapper.update(article);
}else{
mapper.add(article);
}
}

/*刪除*/
@Override
public void del(Long id, HttpServletRequest req) {
Article article = mapper.findOne(id);
mapper.del(id);
String realPath = req.getServletContext().getRealPath("/");
new File(realPath, article.getUrl()).delete();

}

/*點擊次數處理*/
@Override
public Article updateClick(String oldurl) {
System.out.println(oldurl);
String url="/static/template/"+oldurl;
Article article = mapper.findByURL(url);
article.setClickCount(article.getClickCount()+1);
/*把數據庫的點擊數也要修改而且回顯*/
mapper.update(article);
System.out.println(article);
return article;
}
}

文章管理實現類會調用的mapper

package cn.itsource.mapper;

import java.util.List;

import cn.itsource.domain.Article;
import cn.itsource.query.IArticleQuery;

public interface Articlemapper {
List<Article> findAll(IArticleQuery query);
Integer findTotalCount(IArticleQuery query);
void delete(Long id);
List<Article> findArticleByCode(String constant);
void add(Article article);
void update(Article article);
Article findOne(Long id);
void del(Long id);
Article findById(Long id);
Article findByURL(String url);
}

文章管理mapper映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="cn.itsource.mapper.Articlemapper">

<update id="update" parameterType="Article">
update t_article set url=#{url},clickCount=#{clickCount},title=#{title},typeId=#{typeId},enable=#{enable},content=#{content},createDate=#{createDate} where id=#{id}
</update>


<insert id="add" parameterType="Article">
insert into t_article (title,typeId,enable,url,content,createDate)
values (#{title},#{typeId},#{enable},#{url},#{content},#{createDate})
</insert>

<delete id="delete">
delete from t_article where id=#{id}
</delete>

<select id="findTotalCount" resultType="int" parameterType="ArticleQuery">
select count(id) from t_article
<include refid="query"></include>
</select>


<select id="findAll" resultType="Article" parameterType="ArticleQuery">
select * from t_article
<include refid="query"></include>
limit #{begin},#{pageSize}
</select>
<sql id="query">
<where>
<if test="typeId != null">
and typeId = #{typeId}
</if>
<if test="enable != null">
and enable = #{enable}
</if>

<if test="title != null and '' != title.trim()">

and title like concat('%',trim(#{title}),'%')
</if>
</where>
</sql>

<select id="findByURL" resultType="article">
select * from t_Article where url=#{url}
</select>


<select id="findArticleByCode" resultType="article">
SELECT * FROM t_article t1
INNER JOIN t_article_type t2 on t1.typeId=t2.id
WHERE t1.`enable`=1 and t2.code=#{constant}
ORDER BY t1.createDate desc
LIMIT 0,8
</select>

<select id="findById" parameterType="long" resultType="article">
select * from t_article where id = #{id}
</select>

<select id="findOne" parameterType="long" resultType="article">
select * from t_article where id = #{id}
</select>
</mapper>