前后端+数据库的项目实战：hbu迎新网-较复杂（下）javaweb
目录
十一、实现对内容的富文本编辑（换行、图片颜色等等样式）
（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()
④进行字符串拼接时，如果使用双引号当做开始结束符号，字符内部的双引号要写成单引号
