前后端+数据库的项目实战：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()

④进行字符串拼接时，如果使用双引号当做开始结束符号，字符内部的双引号要写成单引号