目錄
十一、實現對內容的富文本編輯（換行、圖片顏色等等樣式）
（1）下載富文本編輯器，引入資源
（2）將原項目的內容部分替換為富文本編輯器
1、替換添加頁面
2、替換修改頁面（和添加一樣，多了一個回顯操作）?
十二、添加操作時的圖片上傳
（1）建立util包，然后創建SetSession服務器
（2）實現效果
?（3）將選擇的圖片上傳到數據庫
?（4）將選擇的圖片封面顯示到前端頁面
1、在add.html中添加一個隱藏域傳值
?2、從隱藏域中取值
3、傳到數據庫
?4、可以在后端數據庫的Imgurl中看到圖片的地址信息
5、ur顯示到前端，在content.js中修改路徑
（5）最終效果
十三、修改操作時的圖片上傳-和添加操作差不多?
（1）updata.html和添加的一樣，設置一個隱藏域+一個展示的div
?（2）最終效果
?十四、將數據庫信息顯示到main首頁
（1）將數據返回前端（以通知公告為例)
（2）將數據顯示追加到前端（以通知公告為例)
（3）最終
十五、點擊hub.html菜單欄跳轉到列表頁并展示對應內容
（1）獲取hub.html頁面的欄目id到列表頁
（2）根據id 查找內容并顯示
?（3）更改前端顯示的欄目為正確的欄目名稱
十六、點擊條目跳轉到詳情頁（hbu_detail） 和十五類似
?（1）綁定屬性
（2）根據id 查找 內容并顯示
（3）最后再修改一下面包線的內容?
十七、在列表頁跳轉到列表頁
（1）在hub_list.js中添加
十八、在列表頁跳轉到詳情頁hbu_detail
（1）給事件捆綁id
?（2）在hub_list.js中添加
（3）最終
十九、在詳情頁點擊跳轉其他頁面
（1）給所有點擊要跳轉的掛上class ='tolist'
?（2）最終實現各個頁面間的跳轉
二十、完成登錄頁面
（1）數據庫新建一個用戶表
（2）點擊登錄按鈕獲取輸入框的值
1、login.html頁面
2、js:?
3、后端服務器loginseverlet.java?
（3）最終效果
二十一、只是樣式上進行了一個合理的跳轉，現在實現必須經過登錄才能訪問hbu.html?---過濾器
（1）對所有資源過濾
（2）只對不該被直接訪問的資源過濾
1、服務器創建session 存狀態?
2、在過濾器中：?
總結：一些tips
前后端+數據庫的項目實戰：hbu迎新網-較復雜（上）-CSDN博客?-----上篇博客
十一、實現對內容的富文本編輯（換行、圖片顏色等等樣式）
（1）下載富文本編輯器，引入資源
UEditor Docs 官網說明文檔
下載此資源
將資源解壓后拖放到WebContent目錄下：
?修改報錯的兩個地方：
第一個文件設置編碼為utf-8【其余是注釋報錯這個不用管】
第二個文件報錯是因為
把lib目錄下的jar包全部復制到項目本身lib文件下
創建 demo.html 文件，填入下面的html代碼
<!DOCTYPE HTML>
<html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title>
</head><body><!-- 加載編輯器的容器 --><script id="container" name="content" type="text/plain">這里寫你的初始化內容</script><!-- 配置文件 --><script type="text/javascript" src="ueditor.config.js"></script><!-- 編輯器源碼文件 --><script type="text/javascript" src="ueditor.all.js"></script><!-- 實例化編輯器 --><script type="text/javascript">var ue = UE.getEditor('container');</script>
</body></html>因為我不是在utf8-jsp目錄下創建的，所有需要修改為
運行此文件
?????????上傳圖片時不能顯示是因為沒有設置路徑前綴：【項目名稱】其他配置項一樣 真正上傳的圖片存在了
E:\eclipse.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\HBU\ueditor\jsp\upload\image\20250221 先把圖片上傳到服務器下的某個文件夾下重命名
?工作原理大家可以自己上網搜索一下
（2）將原項目的內容部分替換為富文本編輯器
1、替換添加頁面
?add.html中找到需要放置編輯器的地方：
在外面的add,js文件中初始化
獲取content要從富文本編輯器中獲取
運行項目：
?
但是樣式一復雜了就添加失敗了？【因為添加到數據庫的content是用雙引號引用樣式的，我們需要把這些雙引號變成單引號再進行字符串的拼接，否則傳入后端的sql語句是有問題的】?
2、替換修改頁面（和添加一樣，多了一個回顯操作）?
回顯后為：
?
十二、添加操作時的圖片上傳
（1）建立util包，然后創建SetSession服務器
（2）實現效果
?（3）將選擇的圖片上傳到數據庫
add.js，像剛剛建立的SetSession發起請求
上傳的圖片會放在：
?-----至此：
?（4）將選擇的圖片封面顯示到前端頁面
1、在add.html中添加一個隱藏域傳值
?
2、從隱藏域中取值
3、傳到數據庫
?4、可以在后端數據庫的Imgurl中看到圖片的地址信息
5、ur顯示到前端，在content.js中修改路徑
（5）最終效果
十三、修改操作時的圖片上傳-和添加操作差不多?
（1）updata.html和添加的一樣，設置一個隱藏域+一個展示的div
js文件中，將圖片回顯【這里注意要給隱藏域設置值，才能顯示到前端】，圖片上傳【和add一樣】，獲取隱藏域的URL
后端文件接受imgrul參數
?（2）最終效果
圖片上傳操作需要這兩個jar包，但是因為在使用富文本編輯器的時候已經有了，所以上傳操作時就沒有導入了?
?十四、將數據庫信息顯示到main首頁
（1）將數據返回前端（以通知公告為例)
?
（2）將數據顯示追加到前端（以通知公告為例)
//裁剪 限制字數
var cut = function(str,len){if(str.length()>len){str = str.substring(0,len)+"..."}return str
}?
（3）最終
十五、點擊hub.html菜單欄跳轉到列表頁并展示對應內容
（1）獲取hub.html頁面的欄目id到列表頁
因為跨頁面了 ，所以這里用到了cookie?
hub_list.js中：
（2）根據id 查找內容并顯示
//裁剪 限制字數
var cut = function(str,len){if(str.length>len){str = str.substring(0,len)+"..."}return str
}
//獲取欄目id
var channelid = $.cookie("channelid").substring(1)//查找數據
$.ajax({url:"HbuServlet",type:"get",data:{channelid,},success:function(value){//console.log(value)var arr = value.data// 塞到hbu_list.html$(".hbu_list ul").empty()for(var i=0;i<arr.length;i++){$(".hbu_list ul").append("<li>"+"<a href='#' class='toDetail'>"+"<div class='left'>"+"<h3>"+cut(arr[i].title,30)+"</h3>"+"<p>"+cut(arr[i].desc,100)+"</p>"+"</div>"+"<div class='right'>"+"<span>"+arr[i].createtime.substring(0,10)+"</span>"+"</div>"+" </a>"+" </li>")}}
})?
?（3）更改前端顯示的欄目為正確的欄目名稱
sql:select * from channel where id=2
十六、點擊條目跳轉到詳情頁（hbu_detail） 和十五類似
因為跨頁面了 ，所以這里用到了cookie
?（1）綁定屬性
由于這些條目都是后來生成的（從數據庫中拿來的），所所以綁定屬性的時候不能在原來的html中
（2）根據id 查找 內容并顯示
顯示到頁面
（3）最后再修改一下面包線的內容?
十七、在列表頁跳轉到列表頁
（1）在hub_list.js中添加
//跳轉到列表頁
$(".tolist").click(function(){//存cookie,攜帶href屬性值$.cookie("channelid",$(this).attr("href"))//頁面跳轉location.href="hbu_list.html"
})
十八、在列表頁跳轉到詳情頁hbu_detail
（1）給事件捆綁id
?（2）在hub_list.js中添加
//跳轉到詳情頁hub_detail
$("body").on("click",".toDetail",function(){//存cookie,攜帶href屬性值$.cookie("contentid",$(this).attr("href"))//頁面跳轉location.href="hbu_detail.html"
})
（3）最終
十九、在詳情頁點擊跳轉其他頁面
（1）給所有點擊要跳轉的掛上class ='tolist'
在hbu_detail.js中添加.
//跳轉到列表頁
$(".tolist").click(function(){//存cookie,攜帶href屬性值$.cookie("channelid",$(this).attr("href"))//頁面跳轉location.href="hbu_list.html"
})?（2）最終實現各個頁面間的跳轉
二十、完成登錄頁面
（1）數據庫新建一個用戶表
需要的sql語句
（2）點擊登錄按鈕獲取輸入框的值
1、login.html頁面
?
2、js:?
3、后端服務器loginseverlet.java?
（3）最終效果
二十一、只是樣式上進行了一個合理的跳轉，現在實現必須經過登錄才能訪問hbu.html?---過濾器
知識點--過濾器：
新建一個filter過濾器
這里修改為
在doFilter里編寫代碼
運行hbu.html文件時：
且看不到頁面：但并不是報錯
（1）對所有資源過濾
過濾器先收到請求。
（2）只對不該被直接訪問的資源過濾
1、服務器創建session 存狀態?
2、在過濾器中：?
總結：一些tips
①后端代碼沒問題，修改之后運行為無效修改----------重新運行servers【一般創建新的servlet就要重啟】
②前端頁面修改后運行沒變化：清除瀏覽器數據之后再運行
③前端熟練使用alert和console測試是否修改成功；后端直接System.out.println()
④進行字符串拼接時，如果使用雙引號當做開始結束符號，字符內部的雙引號要寫成單引號
