目录
十一、实现对内容的富文本编辑(换行、图片颜色等等样式)
(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()
④进行字符串拼接时,如果使用双引号当做开始结束符号,字符内部的双引号要写成单引号