后端管理
后端管理界面
- 创建一个弹性布局
样式位于index.css
由link
导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后端管理界面</title>
<link rel="stylesheet" href="index02/index02.css">
</head>
<body>
<!-- 弹性布局 -->
<div id="wrapper">
<div id="top">
top
</div>
<div id="main">
<div id="aside">
aside
</div>
<div id="article">
article
</div>
</div>
</div>
</body>
</html>
导入菜单栏
- 将以下代码放入
aside
中
<ul class="menu">
<li>
<a href="#"><i class="fa fa-home"></i>首页</a>
</li>
<li>
<a href="#"><i class="fa fa-user"></i>用户管理</a>
<ul class="submenu">
<li>
<a href="#">用户列表</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-user-o"></i>角色管理</a>
<ul class="submenu">
<li>
<a href="#">角色列表</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-bus"></i>权限管理</a>
<ul class="submenu">
<li>
<a href="#">权限列表</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>文章管理</a>
<ul class="submenu">
<li>
<a href="#">文章列表</a>
</li>
<li>
<a href="#">文章分类</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-user-o"></i>轮播图管理</a>
<ul class="submenu">
<li>
<a href="#">轮播图列表</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-file-zip-o"></i>新闻管理</a>
<ul class="submenu">
<li>
<a href="publishNews.html" target="content">发布新闻</a>
</li>
</ul>
</li>
</ul>
- 样式位于
sideBar
由link
导入 - 还需要引入
Jquery
和两个文件夹css
和font
<link rel="stylesheet" href="./index02/css/font-awesome.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
- 编辑
script
实现打开菜单和隐藏同级菜单
<script>
$(function(){
$(".menu>li a").click(function(){
$(this).next().toggle(300);
$(this).parent().siblings().children(".submenu").hide(300);
})
})
</script>
- 效果如下
在新闻管理
中的发布新闻
加入富文本编辑器
- 在
article
区域加入iframe
浮动窗口,用于装载富文本编辑器publishNews.html
<div id="article">
<!-- 浮动窗口 iframe在CSS中的作用是允许在网页中嵌入其他网页或内容,并提供了更灵活的页面布局和展示方式。-->
<iframe src="" frameborder="0" width="100%" height="100%" name="content"></iframe>
</div>
- 超链接指向
publishNews.html
- 效果如下
后端框架(SpringMVC
)融入管理界面
- 将后端管理界面的代码移动到
webapp
目录下
- 配置
Tomcat
编辑发布新闻
界面的内容保存
- 加入
WangEditor
- 配置
UploadController
需要注意upload
函数中的\\
可能需要改成/
package cn.edu.guet.controller;
import cn.edu.guet.bean.News;
import cn.edu.guet.mapper.NewsMapper;
import cn.edu.guet.mvc.annotation.Controller;
import cn.edu.guet.mvc.annotation.RequestMapping;
import cn.edu.guet.util.DBUtil;
import cn.edu.guet.util.WangEditor;
import com.google.gson.Gson;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.ibatis.session.SqlSession;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
@Controller
public class UploadController {
@RequestMapping("/upload")
public WangEditor upload(HttpServletRequest request, HttpServletResponse response) {
String dir = System.getProperty("user.dir");
dir = dir.substring(0, dir.lastIndexOf("\\"));
String uri = request.getRequestURI();
int index = uri.lastIndexOf("\\");
uri = uri.substring(index + 1);
Gson gson = new Gson();
String realPath = dir + "\\webapps\\upload";
System.out.println("实际路径:" + realPath);
// 检查输入请求是否为multipart表单数据。
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart == true) {
// 为该请求创建一个DiskFileItemFactory对象,通过它来解析请求。执行解析后,所有的表单项目都保存在一个List中。
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
e.printStackTrace();
}
Iterator<FileItem> itr = items.iterator();
// String filePath=System.getProperty("user.dir")+ File.separator;
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
// 检查当前项目是普通表单项目还是上传文件。
// 如果是普通表单项目,显示表单内容。
if (item.isFormField()) {
String fieldName = item.getFieldName();
String value = item.getString();
if (fieldName.equals("id")) {
} else if (fieldName.equals("title")) {
}
} else {// 如果是上传文件,显示文件名。
File fullFile = new File(item.getName());
File savedFile = new File(realPath + "\\", fullFile.getName());
try {
item.write(savedFile);
response.setContentType("application/json;utf-8");
PrintWriter out = response.getWriter();
String url = "http://localhost:8080/upload/" + fullFile.getName();
System.out.println("图片URL:" + url);
//把图片url存入数据库
String[] strs = {url};
WangEditor editor = new WangEditor(strs);
System.out.println(gson.toJson(editor));
out.print(gson.toJson(editor));
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
} else {
System.out.print("the enctype must be multipart/form-data");
}
return null;
}
@RequestMapping("/saveNews")
public void saveNews(HttpServletRequest request) {
try {
request.setCharacterEncoding("UTF-8");
String newsContent = request.getParameter("mytxtIntro");
System.out.println("富文本内容:" + newsContent);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
}
}
- 配置
publishNews.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/wangEditor.min.js"></script>
</head>
<body>
<form method="post" action="saveNews.do">
<div>
<br><br><br>
<div id="intro" class="TextContent"></div>
<textarea style="display: none" name="mytxtIntro" id="txtIntro"></textarea>
<input class="btn btn-primary" id="sub" type="submit" value="确认提交">
</div>
</form>
</body>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#intro');
// 获取隐藏控件<textarea>的id,用于显示内容,也方便后台获取内容
var $text1 = $('#txtIntro');
editor.config.onchange = function (html) {
$text1.val(html);
}
// 设置上传本地图片到服务器
editor.config.uploadImgServer = 'upload.do';
editor.create();
$text1.val(editor.txt.html());// 初始化 textarea 的值
</script>
</html>
- 效果
将要发布的内容存入数据库
- 新建表
news
- 对富文本内容
newsContent
进行处理
//读取富文本内容,存入数据库
News news=new News();
String newsTitle="";
//正则表达式
String rex="<h1\\s.*>(.*)</h1>|<h1>(.*)</h1>";
Matcher matcher= Pattern.compile(rex).matcher(newsContent);
while ((matcher.find())){
newsTitle=matcher.group(1);
}
System.out.println("新闻标题" + newsTitle);
news.setTitle(newsTitle);
newsContent=newsContent.replaceAll("<h1>.*<hr/>","");
System.out.println("去掉标题后的内容"+newsContent);
news.setContent(newsContent);
news.setCreateTime(new Date(System.currentTimeMillis()));
System.out.println("当前时间" + news.getCreateTime());
//获取链接进行插入操作
SqlSession sqlSession=DBUtil.getSqlSession();
NewsMapper newsMapper=sqlSession.getMapper(NewsMapper.class);
newsMapper.insert(news);
sqlSession.commit();