建議從未看過的人從第三篇博文開始看：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.由於相關涉及的代碼太多了，我就放入一些我認爲容易出差錯的）
最後結束完這篇博文，我的博客後臺系統就更完啦！撒花~~
有需求的人可以進行下載，得說明的是我上傳的是個人博客後臺系統，前臺系統因爲我做的不夠完善，所以沒有上傳QAQ