当前位置：首页 > article >正文

前后端+数据库的项目实战：hbu迎新网-较复杂（下）javaweb

article 2026/2/26 10:26:42

十一、实现对内容的富文本编辑（换行、图片颜色等等样式）

（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()

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

前后端+数据库的项目实战：hbu迎新网-较复杂（下）javaweb

目录十一、实现对内容的富文本编辑（换行、图片颜色等等样式） （1）下载富文本编辑器，引入资源 （2）将原项目的内容部分替换为富文本编辑器 1、替换添加页面 2、替换修改页面（和添…...

编程日记 2026/2/16 11:38:08

Java-模块二-2

整数类型 byte：在 Java 中占用8位（1字节），因此它的取值范围是从 -128 到 127。这是最小的整数类型，适合用于节省空间的情况。 short：这种类型的大小是16位（2字节），允许的…...

编程日记 2026/2/11 6:58:52

Redis、Memcached应用场景对比

环境 Redis官方网站： Redis - The Real-time Data Platform Redis社区版本下载地址：Install Redis | Docs Memcached官方网站：memcached - a distributed memory object caching system Memcached下载地址：memcached - a dis…...

编程日记 2026/2/15 3:15:42

【单片机通信技术应用——学习笔记三】液晶屏显示技术，取模软件的应用

一、液晶显示技术简介 1.RGB信号线 RGB是一种色彩模式，是工业界的一种颜色标准，是通过红（R）、绿（G）、蓝（B）三个颜色通道的变化，以及它们相互之间的叠加来得到各式各样的…...

编程日记 2026/2/19 12:49:37

MySQL颠覆版系列————MySQL新特性（开启数据库的新纪元）上篇

文章目录前言一、窗口函数（Window Functions）1.1 窗口函数概念1.2 常见的窗口函数二、公用表表达式（Common Table Expressions, CTEs）2.1 公用表表达式的概念2.2 常见的公用表表达式三、JSON增强3.1 JSON增强的概念3.2 常见的J…...

编程日记 2026/2/17 0:53:43

MySQL 调优：查询慢除了索引还能因为什么？

文章目录情况一：连接数过小情况二：Buffer Pool 太小 MySQL 查询慢除了索引还能因为什么？MySQL 查询慢，我们一般也会想到是因为索引，但除了索引还有哪些原因会导致数据库查询变慢呢？ 以下以 MySQL 中一条 S…...

编程日记 2026/2/18 4:33:02

Java实习生面试题(2025.3.23 be)

一、v-if与v-show的区别 v-show 和 v-if 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：v-if 会根据条件决定是否编译元素，而 v-show 则始终编译元素，只是通过改变 CSS 的 display 属性来控制显示与隐藏。二、mybatis-…...

编程日记 2026/2/15 5:33:51

如何在百度搜索上删除与自己名字相关的资料

个人信息的网络足迹如同一张无形的网，将我们与世界的每一个角落紧密相连。然而，当某些与自己名字相关的资料不再希望被公众轻易检索到时，如何在百度搜索中有效“隐身”，成为了一个亟待解决的问题。面对复杂多变的网络环境&#xf…...

编程日记 2026/2/14 10:39:04

【C语言】C语言使用随机数srand,rand

C语言使用随机数srand,rand 可直接编译使用： #include <stdio.h> #include <time.h> #include <stdlib.h> #include <unistd.h>/* c语言提供的跟随机数有关的函数:int rand(void);返回值:产生的随机数void srand(unsiqned int seed);参数…...

编程日记 2026/2/19 5:11:39

为容器指定固定IP地址

文章目录为容器指定固定IP地址可以通过以下步骤实现，适用于Docker环境：**方法一：使用Docker自定义桥接网络****方法二：Docker Compose配置****关键注意事项** 为容器指定固定IP地址可以通过以下步骤实现，适用于Docker…...

编程日记 2026/1/7 10:28:43

kube-score K8S Yaml静态代码分析工具详解

kube-score 是一款专注于 Kubernetes 配置文件的静态代码分析工具，旨在通过自动化检查帮助用户识别资源配置中的潜在问题，并遵循最佳实践以提升集群的安全性、稳定性和性能。以下是其核心功能、使用方法和应用场景的详细解析： 一、核心功能与…...

编程日记 2026/1/7 14:04:53

Spring Boot 整合 Elasticsearch 实践：从入门到上手

引言 Elasticsearch 是一个开源的分布式搜索引擎，广泛用于日志分析、搜索引擎、数据分析等场景。本文将带你通过一步步的教程，在 Spring Boot 项目中整合 Elasticsearch，轻松实现数据存储与查询。 1. 创建 Spring Boot 项目首先&#xff…...

编程日记 2025/9/12 7:36:32

使用外部事件检测接入 CDH 大数据管理平台告警

CDH 大数据管理平台 CDH（Cloudera Distribution Hadoop）是一个企业级的大数据平台，由 Cloudera 公司提供，它包含了 Apache Hadoop 生态系统中的多种开源组件，并对其进行了优化和集成，以支持大规模数据存储…...

编程日记 2026/2/21 17:02:33

RabbitMQ八股文

RabbitMQ RabbitMQ 核心概念与组件1. RabbitMQ 核心组件及其作用1.1 生产者（Producer）1.2 交换机（Exchange）1.3 队列（Queue）1.4 绑定（Binding）1.5 消费者（Consumer&#…...

编程日记 2026/2/14 8:55:49

MongoDB（五） - Studio 3T 下载与安装教程

文章目录前言一、Studio 3T 简介二、下载及安装1. 下载2. 安装三、使用Studio 3T连接MongoDB 前言本文旨在全面且深入地为你介绍 Studio 3T。从其丰富的功能特性、跨平台使用的便捷性，到详细的下载安装步骤，以及关键的连接 MongoDB 操作，…...

编程日记 2026/2/15 14:47:43

2025高频面试算法总结篇【链表堆栈队列】

文章目录直接刷题链接直达反转链表环形链表判断一个序列是否为合理的出栈顺序最长有效括号旋转链表复杂链表的复制约瑟夫环问题滑动窗口最大值直接刷题链接直达反转链表 206. 反转链表环形链表 141. 环形链表142. 环形链表 II 判断一个序列是否为合理的出栈顺序 946.…...

编程日记 2026/1/24 15:06:26

Java主流开发框架之请求响应常用注释

1.RestController 标记一个类为 REST 控制器，处理 HTTP 请求并直接返回数据（如 JSON/XML），而不是视图（如 HTML），一般是放在类的上边 RestController public class UserController {GetMapping…...

编程日记 2025/8/20 8:46:14

汽车制造MES

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

编程日记 2026/2/25 15:11:32

LeetCode 2643.一最多的行：模拟(更新答案)

【LetMeFly】2643.一最多的行：模拟(更新答案) 力扣题目链接：https://leetcode.cn/problems/row-with-maximum-ones/ 给你一个大小为 m x n 的二进制矩阵 mat ，请你找出包含最多 1 的行的下标（从 0 开始）以及这一行中…...

编程日记 2025/9/18 9:01:01

固定翼无人机姿态和自稳模式

固定翼无人机的‌姿态模式（Attitude/Angle Mode）‌和‌自稳模式（Stabilize Mode）‌是两种常见的飞行控制模式，它们在飞控系统介入程度、操作逻辑及适用场景上有显著区别。以下是两者的详细对比及使用指南： …...

编程日记 2025/12/20 1:42:30

K8S中若要挂载其他命名空间中的 Secret

在Kubernetes（k8s）里，若要挂载其他命名空间中的Secret，你可以通过创建一个 Secret 的 ServiceAccount 和 RoleBinding 来实现对其他命名空间 Secret 的访问，接着在 Pod 中挂载这个 Secret。下面是详细的步骤和示例代码…...

编程日记 2026/1/21 21:19:41

MissingReferenceException: The object of type ‘CanvasRenderer’ has been destroyed but you are still trying to access it. Your script should either check if it is null or you should not destroy the object. UnityEngine.UI.GraphicRaycaster.Raycast (UnityEng…...

编程日记 2025/12/25 18:10:26

十一、实现对内容的富文本编辑（换行、图片颜色等等样式）

（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_detail）和十五类似

（2）根据id 查找内容并显示