司法网站建设运营情况/注册公司

司法网站建设运营情况,注册公司,温州网站建设推广,怎么在网上建网站啊目录 十一、实现对内容的富文本编辑(换行、图片颜色等等样式) (1)下载富文本编辑器,引入资源 (2)将原项目的内容部分替换为富文本编辑器 1、替换添加页面 2、替换修改页面(和添…

目录

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

(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,一经查实,立即删除!

相关文章

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

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

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

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

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,还可进一步简化…

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

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

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

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

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(…

关于kafka的一些知识总结

Kafka 1. 基本知识 1.1 前置知识 topic表示一个类型/业务的数据的组为方便扩展&#xff0c;提高吞吐率&#xff0c;一个topic分为多个partition。配合分区的设计&#xff0c;提出消费者组的概念&#xff0c;每个消费者并行消费&#xff0c;同时&#xff0c;一个分区的数据&a…

深入理解traceroute命令及其原理

traceroute 是一个网络诊断工具&#xff08;Windows上叫tracert&#xff09;&#xff0c;用于显示数据包从本地主机到远程主机经过的路由&#xff08;跳数&#xff09;。它可以帮助您了解数据包在网络中的传输路径&#xff0c;以及每跳的延迟情况。这对于网络故障排除、分析网络…

Spring 6: 3容器-Ioc

3、容器&#xff1a;IoC IoC 是 Inversion of Control 的简写&#xff0c;译为“控制反转”&#xff0c;它不是一门技术&#xff0c;而是一种设计思想&#xff0c;是一个重要的面向对象编程法则&#xff0c;能够指导我们如何设计出松耦合、更优良的程序。 Spring 通过 IoC 容…

git推送代码相关学习——(一)

推荐去阅读一下廖老师的git相关的教程https://liaoxuefeng.com/books/git/introduction/index.html 这个系列就来学习一下git操作。 第一步&#xff0c;新建项目 去github中新建一个项目&#xff0c;然后依据项目来进行本地的开发工作。 第二步&#xff0c;拉取项目 git c…

2025年渗透测试面试题总结-某深信服-深蓝攻防实验室(题目+回答)

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 深信服-深蓝攻防实验室 一、内网攻击核心思路&#xff08;2025版&#xff09; 1. 攻击阶段分层 2. 最…

JAVA学习*Object类

Object类 Object类是所有类的父类 类中有一些方法&#xff08;都需要掌握&#xff09; toString()方法 在学习类的对象的时候有介绍过了&#xff0c;当我们重新给此方法就会打印类与对象的信息 equals()方法 在Java中的比较&#xff0c; 如果左右两侧是基本类型变量&#…

gonet开源游戏服务器环境配置

1.mysql搭建 搜索mysql-server apt安装包名 sudo apt search mysql-server 安装mysql-server sudo apt-get install mysql-server 安装完成后会&#xff0c;启动mysql服务及创建系统服务 查看服务状态 systemctl status mysql.service 使用超级权限登陆mysql sudo mysql 授…

HarmonyOS NEXT(九) :图形渲染体系

HarmonyOS NEXT&#xff08;九&#xff09; &#xff1a;图形渲染体系 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 文章目录 HarmonyOS NEXT&#xff0…

微前端qiankun框架的使用

文章描述 随着工作时间的增加&#xff0c;发现公司的项目逐渐多了起来&#xff0c;有一个项目比较庞大&#xff0c;是需要集成多个子系统而形成的大项目。其中便是使用微前端的概念qiankun框架来集成其他多个子项目的。接下来&#xff0c;一起来看一下qiankun框架的具体使用方…

基于CVX优化器的储能电池调峰调频算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 原理概述 4.2 CVX工具箱概述 5.完整工程文件 1.课题概述 基于CVX优化器的储能电池调峰调频算法matlab仿真。CVX 是一种用于求解凸优化问题的强大工具。凸优化问题具有良好的数学性质&#xff0c;能…