文章管理前端页面
把引入的多个布局抽成了公共代码
<%@ 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 content="width=device-width, initial-scale=1">
<!-- Main CSS-->
<%@ include file="/WEB-INF/views/common/topStatic.jsp" %>
<!-- 富文本引用文件 -->
<!-- 配置文件 -->
<script type="text/javascript" src="http://www.likecs.com/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="http://www.likecs.com/static/ueditor/ueditor.all.js"></script>
</head>
<body>
<!-- 导航条-->
<!-- Sidebar menu-->
<%@ include file="/WEB-INF/views/common/header.jsp" %>
<!-- 侧边栏 -->
<%@ include file="/WEB-INF/views/common/leftMenu.jsp" %>
<!-- 中间显示内容的 -->
<main>
<!-- 列表展示 -->
<div>
<div>
<!-- 删除模态框 -->
<div>
<div>
<div>
<div>
<button type="button" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
<h6>您确认要删除吗？</h6>
</div>
<div>
<button type="button" data-dismiss="modal">取消</button>
<a href="javascript:"
>确定</a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- 添加修改的模态框 -->
<div>
<div>
<div>
<div>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
<form action="/system/article/save" method="post">
<input type="hidden">
<div>
<label for="title">文章标题</label>
<div>
<input type="text">
</div>
</div>
<div>
<label for="typeId">文章类型</label>
<div>
<select>
<c:forEach items="${types}" var="t">
<option value="${t.id}">${t.name}</option>
</c:forEach>
</select>
</div>
</div>
<div>
<label for="enable">是否启用</label>
<div>
<div>
<label> <input
type="radio" checked="checked"
value="1">启用
</label>
</div>
<div>
<label> <input
type="radio" value="0">禁用
</label>
</div>
</div>
</div>
<div>
<label for="content">文章内容</label>
<div>
<!-- <textarea rows="4"
></textarea> -->
<!-- 富文本框 -->
<!-- 加载编辑器的容器 -->
<script 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>
<button type="button" data-dismiss="modal">取消</button>
<a href='javascript:void(0);'>确定</a>
</div>
</div>
</div>
</div>
<!-- 高级查询表单 -->
<form>
<div>
<label for="title">标题：</label>
<input type="text">
</div>
<div>
<label>文章类型：</label>
<select>
<!-- 封装在model里面,通过el表达式可以取到 -->
<option value="">请选择</option>
<c:forEach items="${types }" var="t">
<option value="${t.id }">${t.name }</option>
<!-- 这里是通过后台动态获得 -->
</c:forEach>
</select>
</div>
<div>
<label>是否启用：</label>
<select>
<option value="">请选择</option>
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</div>
<button type="button">查询</button>
</form>
</div>
</div>
<!-- 存放table列表 -->
<table></table>
</div>
</div>
</main>
<!-- Essential javascripts for application to work-->
<script src="http://www.likecs.com/static/system/js/jquery-3.3.1.min.js"></script>
<script src="http://www.likecs.com/static/system/js/bootstrap.min.js"></script>
<script src="http://www.likecs.com/static/system/js/main.js"></script>
<!-- The javascript plugin to display page loading on top-->
<script src="http://www.likecs.com/static/system/js/plugins/pace.min.js"></script>