建议从未看过的人从第三篇博文开始看:https://blog.csdn.net/DaiYuMeng/article/details/104677362
如果你还不了解其数据传送的过程,请阅读:https://blog.csdn.net/DaiYuMeng/article/details/104698898
当初编辑博文模块是我耗时颇多的一个模块,称得上重点模块,就此与大家分享我遇到过的问题及解决方法=3=
一、界面
二、问题集锦
2.1 layui模拟select点击事件(二级联动)
(1)布局
(2)获取一级分类
(3)获取之前选中的分类
(4)设置一个定时器以模拟select点击的效果,同时默认选中上一次选择的分类
(5)调用form.on()方法,使得一级分类出现联动效果
(PS.③通过for循环动态为二级分类的select添加选项,少打了一个字...)
2.2 富文本编辑器自动格式转换渲染数据(如<b>你</b>,显示加粗的 你)
(1)获取后台传过来的数据
(2)初始化富文本编辑器,并利用其自带的ue.setContent()方法进行赋值
2.3标签栏自动选中默认值
(1)设置ajax的加载方式为非异步
(2)布局
(3)给select下拉框添加选项
(4)默认选中上一次选择的
三、代码
edit.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑博文</title>
<%
int article_id = (int) request.getAttribute("article_id");
String article_content = (String) request.getAttribute("article_content");
String article_desc = (String) request.getAttribute("article_desc");
String article_image = (String) request.getAttribute("article_image");
int article_isTop = (int) request.getAttribute("article_isTop");
String article_title = (String) request.getAttribute("article_title");
String category_name = (String) request.getAttribute("category_name");
int tag1 = (int) request.getAttribute("tag1");
int tag2 = (int) request.getAttribute("tag2");
int tag3 = (int) request.getAttribute("tag3");
String parent_name = (String) request.getAttribute("parent_name");
%>
<style type="text/css">
#box {
width: 1000px;
margin-left: auto;
margin-right: auto;
/*background-image: url(../css/image/18.gif); */
padding: 20px;
opacity: 0.8;
}
.layui-form-select dl {
z-index: 1999;
}
</style>
</head>
<body>
<div id="box">
<input value="<%=article_id%>" hidden="hidden" id="tid"> <input
value="<%=tag1%>" hidden="hidden" id="tag_1"> <input
value="<%=tag2%>" hidden="hidden" id="tag_2"> <input
value="<%=tag3%>" hidden="hidden" id="tag_3"> <input
value="<%=article_isTop%>" hidden="hidden" id="article_isTop">
<form class="layui-form" action="" enctype="multipart/form-data"
id="myform">
<h3
style="text-align: center; margin-bottom: 20px; text-shadow: 1px 1px 2px red;">编辑博文</h3>
<div class="layui-form-item">
<label class="layui-form-label">文章标题</label>
<div class="layui-input-block" style="width: 420px;">
<input type="text" name="title" required lay-verify="required"
placeholder="请输入标题" autocomplete="off" class="layui-input"
id="article_title" value=<%=article_title%>>
</div>
</div>
<div class="layui-form-item" style="z-index: 1999px;">
<label class="layui-form-label">文章分类</label>
<div class="layui-input-inline" style="width: 180px;">
<select name="first_category" lay-verify="required"
id="first_category" lay-filter="myFirstSelect">
<option value=""></option>
</select>
</div>
<div class="layui-input-inline" style="width: 180px;">
<select name="second_category" lay-verify="required"
id="second_category" lay-filter="mySecondSelect">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">置顶</label>
<div class="layui-input-block">
<input type="radio" name="isTop" value="是" title="是" id="isT">
<input type="radio" name="isTop" value="否" title="否" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<!-- 在这里放一个img标签 默认不显示 -->
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传封面图
</button>
<!-- style="display:none;" -->
<div style="height: 20px; width: 100%;"></div>
<img id="article_image" class="article_image"
src="<%=article_image%>"
style="margin-top: 20px; width: 135px; height: 180px;"></img>
</div>
</div>
<div style="display: none;">
<input type="hidden" name="article_title" id="content"
value="<%=article_content%>" />
</div>
<div class="layui-form-item">
<label class="layui-form-label">文章内容</label>
<div class="layui-input-block">
<div id="editor" name="article_content"
style="width: 900px; height: 400px;"></div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标签</label>
<div class="layui-input-inline" style="width: 150px;">
<select name="tag1" id="tag1" lay-verify="" lay-search>
</select>
</div>
<div class="layui-input-inline" style="width: 150px;">
<select name="tag2" id="tag2" lay-verify="" lay-search>
<option id="0">可不选</option>
</select>
</div>
<div class="layui-input-inline" style="width: 150px;">
<select name="tag3" id="tag3" lay-verify="" lay-search>
<option id="0">可不选</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">博文简介</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"
id="article_desc"></textarea>
</div>
</div>
<div class="layui-form-item" style="margin-top: 50px;">
<div class="layui-input-block">
<button class="layui-btn" type="button" lay-submit
lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary"
style="margin-left: 12%;">重置</button>
</div>
</div>
</form>
</div>
</body>
<script>
function getFirstCategory() {
$("#article_desc").val("<%=article_desc%>");
$.post("${ctx}/getFirstCategory", {}, function(result) {
with (result) {
for (var i = 0; i < data.length; i++) {
var option = "<option id="+data[i].category_id+">"
+ data[i].category_name + "</option>";
$("#first_category").append(option);
layui.form.render('select');
}
}
}, "json");
$.ajaxSetup({
cache : false
});
}
function getFirstTag() {
$.post("${ctx}/getFirstTag", {}, function(result) {
with (result) {
for (var i = 0; i < data.length; i++) {
var option = "<option id="+data[i].tag_id+">"
+ data[i].tag_name + "</option>";
$("#tag1").append(option);
$("#tag2").append(option);
$("#tag3").append(option);
layui.form.render('select');
}
}
}, "json");
$.ajaxSetup({
cache : false
});
}
function getSelectedCategory(){
setTimeout(function () {
$('select[name="first_category"]').next().find('.layui-anim').children('dd[lay-value="<%=parent_name%>"]').click();
$('select[name="second_category"]').next().find('.layui-anim').children('dd[lay-value="<%=category_name%>"]').click();
},500);
layui.form.render('select');
}
function getSelectedTag(){
//遍历 将某个置为选中状态
$('#tag1 option').each(function(){
if($(this).attr('id')==<%=tag1%>){
$(this).attr("selected",true);
}
});
$('#tag2 option').each(function(){
if($(this).attr('id')==<%=tag2%>){
$(this).attr("selected",true);
}
});
$('#tag3 option').each(function(){
if($(this).attr('id')==<%=tag3%>){
$(this).attr("selected",true);
}
});
layui.form.render('select');
}
//获取默认的状态
function getSelectedState(){
//alert(1);
var article_isTop =$("#article_isTop").val();
if(article_isTop!=0){
//alert(111111);
$("#isT").attr("checked",true);
layui.form.render();
}
}
layui.use('form', function() {
//就是这行代码 搞定了tag默认选中非要选择的
$.ajaxSettings.async = false;
//1.初始化form表单
var form = layui.form;
//2.初始化富文本编辑器
var ue = window.UE.getEditor('editor');
ue.ready(function(){
//alert($("#content").val());
ue.setContent('<%=article_content%>');
});
//3.获得一级分类
getFirstCategory();
//补充之获得一级标签(最少选择一个,最多选择三个)
getFirstTag();
getSelectedTag();
getSelectedCategory();
getSelectedState();
//4.获得二级分类
form.on('select(myFirstSelect)', function(data2) {
data2 = $("#first_category :selected").attr("id");
$.post("${ctx}/getSecondCatgegory", {
parent_id : data2
}, function(result) {
with (result) {
$("#second_category").html("");
for (var i = 0; i < data.length; i++) {
var option = "<option id="+data[i].category_id+">"
+ data[i].category_name + "</option>";
$("#second_category").append(option);
layui.form.render('select');
}
}
}, "json");
$.ajaxSetup({
cache : false
});
layui.form.render('select');
});
//监听提交
form.on('submit(formDemo)', function(data) {
var tag_id1 = $("#tag1 :selected").attr("id");
var tag_id2 = $("#tag2 :selected").attr("id");
var tag_id3 = $("#tag3 :selected").attr("id");
var category_id = $("#second_category :selected").attr("id");
var article_title = $("#article_title").val();
var article_desc = $("#article_desc").val();
var article_content = UE.getEditor('editor').getContent();
var article_image = $("#article_image").attr("src");
var article_isTop_name = $('input[name="isTop"]:checked').val();
var article_id = $('#tid').val();
var tag_1 = $('#tag_1').val();
var tag_2 = $('#tag_2').val();
var tag_3 = $('#tag_3').val();
if (article_isTop_name == '是') {
var article_isTop = 1;
} else {
var article_isTop = 0;
}
if (tag_id2 == tag_id3 && tag_id2 != 0) {
layer.msg("不能多次选择同一个标签哦!", {
icon : 2
});
return;
}
if (tag_id1 === tag_id2 || tag_id1 === tag_id3) {
layer.msg("不能多次选择同一个标签哦!", {
icon : 2
});
return;
}
if (article_image == "") {
layer.msg("一定要上传封面图哦!", {
icon : 2
});
return;
}
if (article_desc == "") {
layer.msg("博文简介不能为空哦!", {
icon : 2
});
return;
}
// 1.检查是否提交了必填项
$.post("${ctx}/editArticle",//后台地址
{
article_id : article_id,
article_title : article_title,
article_desc : article_desc,
article_content : article_content,
article_image : article_image,
article_isTop : article_isTop,
tag_id1 : tag_id1,
tag_id2 : tag_id2,
tag_id3 : tag_id3,
category_id : category_id,
tag_1 : tag_1,
tag_2 : tag_2,
tag_3 : tag_3
},//需要提交到后台的数据
function(result) {
if (result) {
alert("修改成功");
//添加成功
layer.msg("修改成功", {
icon : 1
});
//返回到上一个界面
/* window.parent.location.reload(); */
/* document.getElementById("myform").reset(); */
} else {
layer.msg("修改失败", {
icon : 2
});
}
},//回调函数
"json");
});
});
let UPLOAD_FILES;
layui.use('upload', function() {
var upload = layui.upload;
//提示用户上传图片不可以太大了
//执行实例
var uploadInst = upload.render({
elem : '#test1' //绑定元素
,
url : '${ctx}/upload' //上传接口
,
exts : 'jpg|png|jpeg' //可传输文件的后缀
,
accept : 'file' //video audio images
,
done : function(res) {
//上传完毕回调
if (res.code == 0) {
var returnPath = res.data.returnPath;
$("#article_image")
.attr(
"src",
"http://localhost:8080/MyBlog/upload/"
+ returnPath);
$("#article_image").attr("style",
"display:block;width:135px;height:180px;");
}
},
error : function() {
//请求异常回调
//比如生成一个“重新上传”的按钮
}
});
});
</script>
<script type="text/javascript" src="${ctx}/js/umedit/ueditor.config.js"></script>
<script type="text/javascript" src="${ctx}/js/umedit/ueditor.all.min.js"></script>
<script type="text/javascript"
src="${ctx}/js/umedit/lang/zh-cn/zh-cn.js"></script>
</html>
EditArticle.java
(其中设置一篇博文至多可以选择三个标签,至少选择一个标签)
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.ArticleDao;
import dao.ArticleDaoImpl;
import dao.Article_Tag_Dao;
import dao.Article_Tag_DaoImpl;
import pojo.Article;
/**
* Servlet implementation class EditArticle
*/
@WebServlet("/editArticle")
public class EditArticle extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public EditArticle() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("测试是否进入了editArticle的Servlet方法");
String result = "false";
PrintWriter writer = null;
try {
ArticleDao ad = new ArticleDaoImpl();
//获取当前时间的时间戳
Long article_createtime = System.currentTimeMillis();
String article_title = request.getParameter("article_title");
int article_id = Integer.parseInt(request.getParameter("article_id"));
int category_id = Integer.parseInt(request.getParameter("category_id"));
int article_isTop = Integer.parseInt(request.getParameter("article_isTop"));
String article_image = request.getParameter("article_image");
String article_desc = request.getParameter("article_desc");
String article_content = request.getParameter("article_content");
int article_likenum = 0;
int article_views = 0;
//标签
int tag_id1 = Integer.parseInt(request.getParameter("tag_id1"));
int tag_id2 = Integer.parseInt(request.getParameter("tag_id2"));
int tag_id3 = Integer.parseInt(request.getParameter("tag_id3"));
int tag_1 = Integer.parseInt(request.getParameter("tag_1"));
int tag_2 = Integer.parseInt(request.getParameter("tag_2"));
int tag_3 = Integer.parseInt(request.getParameter("tag_3"));
Article a = new Article();
a.setArticle_id(article_id);
a.setArticle_content(article_content);
a.setArticle_createtime(article_createtime);
a.setArticle_desc(article_desc);
a.setArticle_isTop(article_isTop);
a.setArticle_image(article_image);
a.setArticle_likenum(article_likenum);
a.setCategory_id(category_id);
a.setArticle_views(article_views);
a.setArticle_title(article_title);
boolean flag = ad.updateArticle(a);
if(flag) {
result="true";
//再执行一次dao方法 通过createtime查询id 返回id值
//再将articleId写到和标签相连的数据库中
Article_Tag_Dao atd = new Article_Tag_DaoImpl();
//如果第一个标签 发生了变化
if(tag_1!=tag_id1) {
boolean flag2 = atd.updateArticle_Tag(article_id, tag_id1);
System.out.println("第一个标签是否加入数据库成功???"+flag2);
}
if(tag_id2!=0&&tag_2!=0) {
boolean flag3 = atd.updateArticle_Tag(article_id, tag_id2);
System.out.println("第二个标签是否加入数据库成功???"+flag3);
}else if(tag_id2!=0&&tag_2==0) {
boolean flag3 = atd.insertArticle_Tag(article_id, tag_id2);
System.out.println("第二个标签是否加入数据库成功???"+flag3);
}else if(tag_id2==0&&tag_2!=0) {
boolean flag3 = atd.deleteArticle_Tag(article_id, tag_2);
System.out.println("第二个标签是否加入数据库成功???"+flag3);
}
if(tag_id3!=0&&tag_3!=0) {
boolean flag4 = atd.updateArticle_Tag(article_id, tag_id3);
System.out.println("第三个标签是否加入数据库成功???"+flag4);
}else if(tag_id3!=0&&tag_3==0){
boolean flag4 = atd.insertArticle_Tag(article_id, tag_id3);
System.out.println("第三个标签是否加入数据库成功???"+flag4);
}else if(tag_id3==0&&tag_3!=0) {
boolean flag4 = atd.deleteArticle_Tag(article_id, tag_3);
System.out.println("第三个标签是否加入数据库成功???"+flag4);
}
}
writer = response.getWriter();
writer.write(result);
}catch(Exception e) {
e.printStackTrace();
}finally {
writer.flush();
writer.close();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
(PS.由于相关涉及的代码太多了,我就放入一些我认为容易出差错的)
最后结束完这篇博文,我的博客后台系统就更完啦!撒花~~
有代码需求的人可以在我的csdn下载页面获得所有代码,得说明的是我上传的是个人博客后台系统,前台系统因为我做的不够完善,所以没有上传QAQ