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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/73205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

脚本语言 Lua

概念 Lua由标准C编写而成&#xff0c;几乎在所有操作系统和平台上都可以编译、运行。Lua脚本可以很容易地被C/C 代码调用&#xff0c;也可以反过来调用C/C的函数&#xff0c;这使得Lua在应用程序中可以被广泛应用。Lua并没有提供强大的库&#xff0c;它是不适合作为开发独立应…

【数据分享】2000—2024年我国乡镇的逐月归一化植被指数(NDVI)数据(Shp/Excel格式)

之前我们分享过2000—2024年我国省市县三级逐月归一化植被指数&#xff08;NDVI&#xff09;数据&#xff0c;该数据是基于NASA定期发布的MOD13A3数据集中的月度NDVI栅格数据&#xff08;可查看之前的文章获悉详情&#xff09;计算得出。很多小伙伴拿到数据后反馈是否可以处理出…

【负载均衡系列】HAProxy

HAProxy(High Availability Proxy)是一款高性能的 ​TCP/HTTP 负载均衡器,专注于提供高可用性、灵活性和可靠性。以下是关于HAProxy的详细解析,涵盖其工作原理、工作机制、工作模式等核心方面: 一、HAProxy 工作原理 HAProxy的核心职责是将客户端请求高效、可靠地分发到后…

轻松迁移 Elasticsearch 数据:如何将自建索引导出并导入到另一个实例

概述 在日常的 Elasticsearch 运维和数据管理中&#xff0c;数据迁移是一个常见的需求。无论是为了备份、升级&#xff0c;还是将数据从一个集群迁移到另一个集群&#xff0c;导出和导入索引数据都是至关重要的操作。本文将详细介绍如何将自建 Elasticsearch 实例中的索引数据…

JVM 类加载器之间的层次关系,以及类加载的委托机制

JVM 类加载器之间存在一种层次关系&#xff0c;通常被称为双亲委派模型 (Parent Delegation Model)。这种层次关系和委托机制是 Java 类加载机制的核心&#xff0c;对于保证 Java 程序的安全性和避免类冲突至关重要。 1. 类加载器的层次关系: JVM 中的类加载器&#xff08;Cl…

基于 Vue 3 的PDF和Excel导出

以下是基于 Vue 3 Composition API 的完整实现&#xff0c;包括 PDF 和 Excel 导出。 一、PDF 导出 (Vue 3) 安装依赖 在项目中安装相关库&#xff1a; npm install html2canvas jspdf Vue 3 代码实现 <template><div><div ref"pdfContent" cla…

【Jupyter】notebook无法显示tqdm进度条

错误描述 from tqdm.notebook import tqdm 用的时候报错&#xff1a; Error displaying widget解决方式 # 先装nodejs conda install -c conda-forge nodejs20# 重装ipywidgets pip uninstall ipywidgets pip install ipywidgets jupyter labextension install jupyter-wid…

ubuntu20如何升级nginx到最新版本(其它版本大概率也可以)

前言&#xff1a; Nginx非常常用&#xff0c;所以在网络安全方面备受“关注”。其漏洞非常多&#xff0c;要经常保持软件更新版本才能更好的保证安全。但是Ubuntu官网适配nginx非常慢&#xff0c;所以nginx官方也会推出针对主流Linux操作系统的包管理工具安装方式。 步骤&…

word插入Mathtype公式居中和自动更新

word插入公式自动更新 前提&#xff1a;安装Mathtype 1.word中查看页的宽度 出现如下 2.设置样式 出现这个窗口 给样式随便起个名字 3.修改样式 3.1 设置两个制表位 第二个 3.2 修改公式字体 如下所示 4. 修改公式格式 4.1在word中打开 Mathtype 4.2 修改公式的格式 变成…

如何从后端实现页面跳转?

例&#xff1a;请求转发 例&#xff1a;重定向 例&#xff1a;区别&#xff1a;携带参数的后端跳转 例&#xff1a;是否可以访问外部资源 请求转发&#xff1a;客户端发起一个请求到服务端&#xff0c;服务端把这个请求转发至其他地方 重定向&#xff1a;客户端发起一个请求…

APIJSON快速入门

作者 版本 时间 内容 备注 Allen V1.0.0 2021/08/19 初稿完成 AllenV1.0.1 2021/08/22 添加常见问题 1.流程说明 一个接口的开发,比如Java用SpringBoot,Mybatis来开发一般来说就像下面这个流程 部署上这个项目后,流程变成了这样 如果使用 apijson-framework,还可进一步简化…

STM32八股【3】------RAM和片上FLASH

1、RAM和FLASH构成 1.RAM ┌──────────────────────────┐ │ 栈区 (Stack) │ ← 从RAM顶端向下扩展&#xff08;存储局部变量、函数调用信息&#xff09; │--------------------------│ │ 堆区 (Heap) │ ← …

基于springboot的星之语明星周边产品销售网站(050)

摘要 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个专门适应洗衣店业务新的交流形式的网站。本文介绍了星之语明星周边产品销售网站的开发全过程。通过分析企业对于星之语明星周边产品销售网站的需求&#xff0c;创建了一…

Android Launcher3 HotSeat文件夹创建禁止方案全解析

一、技术背景与实现原理 在Android 13 Launcher3定制开发中&#xff0c;需屏蔽HotSeat区域的文件夹创建功能。该功能涉及的核心事件处理流程如下&#xff1a; 复制 [拖拽事件] -> [Workspace.onDrop()] -> [CellLayout.performReorder()]└─> [createUserFolderIf…

从零到一开发一款 DeepSeek 聊天机器人

AI聊天机器人 目标设计方案系统架构技术选型功能模块 实现代码环境配置安装依赖 核心代码API 请求函数主循环函数 功能扩展1. 情感分析2. 多语言支持3. 上下文记忆4. 用户身份识别 总结附录 目标 开发一个智能聊天机器人&#xff0c;旨在为用户提供自然、流畅的对话体验。通过…

OpenCV-Contrib常用扩展模块

‌一、高频使用模块‌ ‌aruco 模块‌ ‌功能‌&#xff1a;用于生成与检测二维码&#xff08;如 ArUco Marker、AprilTag&#xff09;&#xff0c;支持增强现实&#xff08;AR&#xff09;中的物体定位与姿态估计‌。‌典型应用‌&#xff1a;AR 应用中的场景锚定、机器人导航…

pfsense部署三(snort各版块使用)

在上篇文章上我们已经进行了snort的基础配置了&#xff0c;接下来需要进行snort的具体配置&#xff0c;其中包括各板块的设置&#xff0c;例&#xff1a;白名单&#xff0c;警报&#xff0c;规则设置等 规则库配置 点击 service > snort > Global Settings ,在code值…

汽车制造MES

一、整体生产工序 整车的车间主要分为4个部分&#xff1a;冲压、焊装、涂装、总装、整车入库 系统架构 二、车间概括 1.冲压车间 2.焊装车间 3.涂装车间 4.总装车间 1.整车装配的部件都要可追溯、数据实时性要求高、涉及分装与总装的协调、物流配送的协调、质量批处理的协调、…

python接口自动化pytest+request+allure

自己自学接口自动化过程遇到的问题及解决方法记录 首先是一个简单的请求 import requests#这是一个简单是get请求 def test_get():geturl https://so.csdn.net/api/v1/relevant-search?querypycharm%E5%AE%89%E8%A3%85requests%E5%BA%93&platformpcgetr requests.get(…

CompletableFuture的使用

CompletableFuture 是 Java 8 引入的异步编程工具&#xff0c;通过链式调用和非阻塞操作简化多线程任务编排。 创建异步任务 1.带返回值的任务 CompletableFuture<String> future CompletableFuture.supplyAsync(() -> "Hello");2. ​无返回值的任务 使…