Java web随手记，持续更新

@纯牛奶

已于 2023-08-29 09:22:27 修改

阅读量835

点赞数 2

分类专栏： JavaWeb 文章标签： java

于 2023-08-02 21:11:52 首次发布

本文链接：https://blog.csdn.net/weixin_45686922/article/details/132071621

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

表单提交数据：

Jsp传递news集合到后台，传递的是json字符串在servlet的接收方需要转成news集合。 所以我选则了传递user_id（这是字符串） 在掉数据库赋值给这个news集合

Jsp,或者前台页面接收数据在传递数据到后台。

使用表单提交：

这些都是必须的

把按钮单独拿出来写

当然也可以写隐藏文本框，用来接收不好传递数据。

富文本：

使用富文本需要导包

写好这几个就可以用了：

大致样子：

当我们自己在使用是，我们可以把他当成一个模块。

最后成品以测试

数据集合转换成json字符串：

//解决响应乱码和响应格式的位置

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

//把从数据库查询到数据集合转换成json字符串

//定义SysCalendarPlan类的集合

List<SysCalendarPlan> list=null;

try {

//查询数据库，把查询到的结果返还给list集合

list=new SysCalendarPlanDAO().findSysCalendarPlan();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

// 转换成json字符串数组 [{},{},{}]

/* StringBuffer是一个可以修改长度的字符串 */

StringBuffer sbf=new StringBuffer();

//添加外围[ 和 ,

sbf.append("[");

for (int i = 0; i < list.size(); i++) {

if(i!=0){

sbf.append(",");

}

、

//使用了 JSONObject 对象来将一个列表中的元素转换为 JSON 格式的字符串

JSONObject jsonObject=new JSONObject(list.get(i));

sbf.append(jsonObject.toString());

}

//添加外围]

sbf.append("]");

System.out.println("===result===="+sbf.toString());

response.getWriter().print(sbf.toString());

//作用是将 sbf.toString()中保存的字符串作为响应的内容发送给客户端

}

异步请求：

定义一个参数events接收异步请求传递结果callback(events1)：

events:function(start,end,timezone,callback){

/* 使用 $.get 方法向服务器发起异步请求接受四个参数 start,end,timezone,callback, 请求的 URL 是 "showplan.do"*/

$.get("showplan.do",function(msg){

/* //msg接收异步请求返回参数 */

var events1=[];/* //定义日历组件需要的数据类型 */

eval("plan="+msg);/* //作用是将 msg 中的字符串解析为一个对象，并将该对象赋值给变量 plan. 如果 msg 值为 "{id: 1, name: 'Plan 1'}"，那么拼接后的字符串就是 "plan={id: 1, name: 'Plan 1'}" */

for(var i=0;i<plan.length;i++){

events1.push({

id:plan[i].id,

time:plan[i].detailtime,

title:plan[i].title,

start:plan[i].beginDate,

end:plan[i].endDate,

color:plan[i].color,

planContent:plan[i].planContent

});

}

/* 最后，调用回调函数 callback，并将处理后的事件数组 events1 作为参数传递给 events */

/* 当异步请求成功并获取到计划数据后，通过调用 callback(events1) 将事件数据 events1 作为参数传递给回调函数。 */

callback(events1);

});

}

HTML：

圆角：border-radius: 25px;

border-radius：属性设置为10px 0 0 10px;，实现了左边框的圆角效果。这里的数值代表四个角的圆角半径，顺序依次是左上角、右上角、右下角和左下角。

这一行合并 <td colspan="2"></td>

这一列合并 <td rowspan="3"></td>

顶部10px：margin-top: 10px

左边10px：margin-left: 10px;

文本左对齐且距离左边35px：style="text-align: left;padding-left: 35px;"

将字体加粗：font-weight: bold;

将字体大小设置为23号：font-size: 23px

JSTL：

JSTL 核心标签库的主要目的是简化和增强 JSP 页面的开发。

主要运用在jsp页面上，遍历集合，遍历集合

引入 JSTL 的命名空间声明例如：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

为了使用<c:forEach>、<c:if> 等

<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>

提供了一些标签，用于格式化日期、数字等数据，并支持国际化。

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>

提供了一些内置函数，可以在 EL 表达式中使用，例如字符串操作、数学计算等。

（请求流转）数据传递：

常见的请求流转方式：

1.请求重定向（Redirect）

2.请求转发（Forward）

3.包含（Include）

4.AJAX请求

.转发（forward）和重定向（redirect）

请求转发Forward
1. Servlet转发(数据)：Servlet --->jsp

在Servlet页面：

常用的

request.setAttribute("user", "张郭亮");

HttpSession session=request.getSession();

session.setAttribute("user", "在吗？");

ServletContext application=request.getServletContext();

application.setAttribute("user", "--出去了");

request.getRequestDispatcher("1.jsp").forward(request,response);

Servlet 中使用不同作用域对象（request、session、application）设置属性。

其中的request、session、application作用域不同（也就是共享的范围）。

Request:只允许当前页面和指定页面（传递的页面比如当前和1.jsp页面共享uesr属性其值是”张郭亮”）共享当前传递的数据，生命周期仅限于当前请求处理过程，一旦请求处理结束，该属性将不再可用。

Session:用户整个会话期间，在多个请求和servlet之间共享，生命周期从用户会话开始，直到会话被终止或超时。它可以跨越多个请求，在同一个会话中共享数据。

Application：属性适用于整个应用程序范围内的共享数据，对应用程序的所有用户都可见。生命周期与整个 Web 应用程序保持一致，即从 Web 应用程序启动到关闭。它在应用程序的所有用户之间共享数据。

在1.jsp接受页面：

<body>

String name=(String)request.getAttribute("user");

String name1=(String)session.getAttribute("user");

String name2=(String)application.getAttribute("user");

out.print(name1);

out.print(name);

out.print(name2);

${user};

${requestScope.user}

${sessionScope.user}

${applicationScope.user}

</body>

request.getRequestDispatcher("1.jsp") 用于获取一个请求调度器，指定了转发目标为名为 "1.jsp" 的页面。
forward(request, response) 方法将当前请求和响应对象传递给目标资源进行进一步处理。在本例中，当前的请求对象是 request，响应对象是 response。

Le表达式不可以和jsp脚本混用

Eg：

这段代码使用了请求转发（Forward）方式将请求传递给名为"login.jsp"的JSP页面。

首先，request.setAttribute("erro", "用户名或者密码错误")将错误信息设置为请求属性，以便在后续的流转中传递和显示该错误信息。

然后，通过request.getRequestDispatcher("login.jsp")获取到名为"login.jsp"的JSP页面的RequestDispatcher对象。

最后，通过dispatcher.forward(request, response)实现了请求的转发。这意味着当前请求会被发送到"login.jsp"页面进行处理，并且响应结果会返回给客户端。

综上所述，这段代码使用请求转发的方式将请求从当前页面转发到名为"login.jsp"的JSP页面，以便在目标页面中进行进一步的处理和响应。

3.Jsp传递参数：

1.url传递参数

2.使用表单

<form action="#" method="post"> 

<input type="text" name="user_id" value="" />

<input type="password" name="user_pwd" value="" />

<input type="submit" value="登录" />

</form>

解释： action="#" #是提交目标地址

method="post" 用户点击提交按钮时，表单数据将被封装在HTTP请求的主体中，以 POST 方法发送到名为 "#" 的服务器端脚本进行处理。

input中的 type 属性用于指定输入字段的类型（常见的值：text文本、password密码输入会被隐藏、number接受数组输入、email电子邮件、tel电话号码、url网址、date日期、time时间、file文件上传、submit表单提交、reset重置、hidden隐藏字段

value默认值用于在输入字段中显示占位文本或预设值。

补充：placeholder="请输入用户名" 显示与背景一样的提示文本

3.使用隐藏字段

也是借助表单提交的<input type="submit"

4.使用会话

请求和响

请求和响应对象：HttpServletRequest和HttpServletResponse分别代表HTTP请求和响应。可以通过这两个对象获取请求参数、设置响应内容类型等.

// 设置请求编码为utf-8，解决请求乱码问题

// 设置响应内容类型及编码为text/html;charset=utf-8，解决响应乱码问题

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

1..获取请求参数

String currentPage = request.getParameter("currentPage");

2..设置响应内容类型:

response.setContentType("text/html;charset=utf-8");

JavaScript 语言输出：

var name = "Hello, World!";

console.log(name); // 输出到控制台

是 JavaScript 语言中的一条代码，用于将变量 name 的值输出到浏览器的控制台。然而，如果你在 Java 文件中使用这段代码，会导致语法错误。

document.write(name); // 在页面中动态写入内容

增强for循环：

for (元素类型元素变量 : 可迭代对象) {

// 循环体

}

Eg:

Ajax：异步请求

什么是异步请求

异步请求（Asynchronous request）指在发送请求时的同时不会阻塞代码执行的一种请求方式。在传统的同步请求中，发送请求后必须等待服务器响应返回后才能继续执行后续代码。而异步请求则不需要等待服务器响应，可以继续执行后续代码，当服务器响应返回进行相应的处理

干什么用

异步请求常用于网络通信、数据加载和与服务器进行交互的场景，如通过 AJAX 在网页上获取数据、向服务器发送表单数据、获取 API 数据等。使用异步请求可以提高用户体验，减少页面加载时间，并允许在后台执行耗时操作

有哪几种

常见的异步请求技术包括：

1.AJAX：使用 JavaScript 的 XMLHttpRequest 或 Fetch API 发送异步请求，并通过回调函数或 Promise 处理服务器响应。

2.WebSocket：在客户端与服务器之间建立持久的双向通信连接，实现实时数据传输。

3.Server-Sent Events（SSE）：在客户端与服务器之间建立单向连接，服务器可以主动推送数据到客户端。

4.使用特定的客户端库、框架或语言提供的异步请求功能，例如 jQuery 中的 AJAX 方法、Vue.js 中的 Axios，Node.js 中的 HTTP 模块等。

AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于在网页上进行异步通信的技术。它结合了 JavaScript、XML（现在更常用JSON）和HTTP请求来实现在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。

AJAX 的主要思想是使用 JavaScript 发送 HTTP 请求，并通过回调函数处理响应。这使得网页能够在后台与服务器进行数据交换，无需刷新整个页面，提供了更快速、流畅的用户体验。

创建对象var xhr=new XMLHttpRequest();
指定请求 xhr.open("get",url,true);//url是地址
注册回调函数

xhr.onreadystatechange = function() {

// readyState 状态为 4 表示请求已完成，status 状态为 200 表示请求成功

if (xhr.readyState === 4 && xhr.status === 200) {

// 从服务器返回的数据通过 responseText 属性获取

var response = xhr.responseText;

// 在此处可以对返回的数据进行处理

console.log(response);

}

};

发送请求xhr.send();

JSON：

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端之间的数据传输。它采用键值对的形式表示数据，易于人们阅读和编写，并且易于机器解析和生成。

JSON 数据结构简单明了，由以下几种基本类型组成：

对象（Object）：使用花括号 {} 表示，包含多个键值对，每个键值对由冒号 : 分隔。
数组（Array）：使用方括号 [] 表示，包含多个值，多个值之间用逗号 , 分隔。
字符串（String）：使用双引号 " 表示，表示文本数据。
数值（Number）：表示数字数据，可以是整数或浮点数。
布尔值（Boolean）：表示真或假。
空值（Null）：表示空。

实例:

{

"name": "John",

"age": 30,

"isStudent": true,

"hobbies": ["reading", "swimming", "coding"],

"address": {

"city": "New York",

"country": "USA"

"friends": [

{"name": "Alice", "age": 28},

{"name": "Bob", "age": 32}

"score": null

}

在这个示例中，有一个对象，包含多个键值对。其中，name、age、isStudent 是基本类型的键值对；hobbies 是一个数组，包含多个字符串元素；address 是一个嵌套的对象，包含了 city 和 country 两个键值对；friends 是一个嵌套的数组，包含了两个对象；score 是一个空值。

JSON 的简洁性和易读性使其成为跨平台数据交换的常用格式，广泛应用于 Web 开发、移动应用程序等领域。

JSON数据格式处理：

通过JSONObject类和StringBuilder类来构建JSON格式的数据。构建一个包含code、msg、count和data的JSON对象，并将其转化为字符串形式返回给前台

构建json数据

Json数据转字符串

输出json字符串

异步请求代码返回：

response.getWriter().print(result1);

7.25二级复选框

(10条消息) jQuery实现省、市二级联动_zgl懒羊羊的博客-CSDN博客

7.26 Layui

在class中的样式：

1.按钮：

class="layui-btn" 默认按钮：中等绿色

layui-btn-primary 白色

layui-btn-normal 蓝色

layui-btn-warm 黄色

layui-btn-danger 红色

layui-border-{green\red\blue........} 边框以及字体颜色

layui-btn-lg 大

layui-btn-sm 小

layui-btn-xs 迷你

layui-btn-radius 圆角

layui-border-green 边框以及字体颜色绿色

动画：

7.27 layui实现分表查询

绑定事件

<table class="layui-hide" id="demoTable" lay-filter="demoTable"></table>

<div id="pagebar"></div>

<button id="addBtn" class="layui-btn layui-btn-primary">添加记录</button>

7.28 layui实现文件上传

不同情境中触发弹窗提示信息:

自动触发：

按钮触发：

7.30 实现淘宝产品---展示部分

数据库存入数据，通过链接数据库查询对应商品。

数据库产品信息包含：产品名称，产品价格，产品简介，产品型号，产品图片地址。

Products（p_id,name,price,profile,model,image_address）

实现产品展示：名称价格简介图片按钮详情

第一步直接获取数据库产品信息：

产品Servlet 调用产品service的查询全部 service调用产品dao中的查询全部传递sql语句以及产品类到basedao，连接数据库最后返还查询到的list集合

开始的整个流程 servlet-->service-->dao-->service-->servlet-->输出页面

servlet-->service-->dao 这是数据请求

dao-->service-->servlet-->输出页面这是将请求到数据传递到前端

第二步输出得到list，取有用的数据：

展示：名称价格简介图片按钮详情

8.1 实现淘宝产品---登录，购物车部分

用戶： 账号ID 姓名年龄生日性别邮箱注册日期密码图片

User userid name age brithday sex postbox enroll pwd img

登录表单组件从layui选一个

从前台传递用户名密码，jsp页面传递参数有多种方式。

接受后链接数据库判断，返还的是list集合，判断list长度是否存在即可。

成功登录

购物车功能有产品信息 以及数量 且这个购物车信息在你登录后全局都存在（这样做可以确保在用户浏览网站的不同页面时，购物车中的商品信息始终保持一致。）

多种方法：

使用会话（Session）：在用户登录后，为其创建一个Session会话，并将购物车对象存储在会话中。会话是在用户的整个访问期间保持活动状态的，因此购物车对象可以在各个页面间共享和访问。

使用数据库：将购物车的内容存储在数据库中，并与用户关联。当用户登录后，可以从数据库中检索和更新购物车的信息。这样，无论用户在哪个页面，都可以通过查询数据库来获取购物车的内容。

使用缓存：使用缓存机制（如 Redis）将购物车的数据存储在内存中。当用户登录后，可以将购物车数据存储在缓存中，并使用唯一标识符与用户关联。这样，购物车数据可以在不同页面间进行读取和更新。

实现对购物车的操作：

要在会话中存储购物车信息，您可以使用会话（session）来实现全局的购物车功能。下面是一个基本的使用会话存储购物车信息的示例：

在用户登录后，将购物车数据存储在会话中：

Java:

// 获取当前会话对象

HttpSession session = request.getSession();

// 创建购物车对象

Cart cart = new Cart();

// 将购物车存储在会话中

session.setAttribute("cart", cart);

在不同页面中获取购物车信息：

Java：

// 获取当前会话对象

HttpSession session = request.getSession();

// 从会话中获取购物车对象

Cart cart = (Cart) session.getAttribute("cart");

// 可以访问购物车对象的属性和方法

List<Product> productList = cart.getProducts();

int quantity = cart.getQuantity();

在添加、删除或更新购物车商品时，更新购物车信息：

Java:

// 获取当前会话对象

HttpSession session = request.getSession();

// 从会话中获取购物车对象

Cart cart = (Cart) session.getAttribute("cart");

// 添加商品到购物车

cart.addProduct(product);

// 从购物车移除商品

cart.removeProduct(product);

// 更新购物车中商品的数量

cart.updateQuantity(product, newQuantity);

通过使用会话存储购物车信息，购物车数据将在用户登录后始终可用，并且在不同页面之间进行传递。请根据您的具体需求，在相应的位置使用会话对象来存储和访问购物车数据。

8.2 实现淘宝产品---事务控制

现在点击下单获取

订单信息（用户（用户id 姓名），商品（全部），数量，总钱数）物流id

Orders : u_id,u_name ,p_id,p_name,price,model,image, number ,allprice，wl_id

物流信息（商品编号物流id 下单时间进度）

Logistics p_id wl_id xdtime jd

8.3-8.13淘宝项目事项初期：

使用的是eclipse加mysql。

注意事项：链接数据库使用的是

8以上版本需要加cj

@纯牛奶

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Java web随手记，持续更新

表单提交数据：

富文本：

数据集合转换成json字符串：

异步请求：

HTML：

圆角：border-radius: 25px;

JSTL：

引入 JSTL 的命名空间声明 例如：

（请求流转）数据传递：

在Servlet页面：

在1.jsp接受页面：

3.Jsp传递参数：

请求和响

1..获取请求参数

2..设置响应内容类型:

JavaScript 语言输出：

增强for循环：

Ajax：异步请求

AJAX

JSON：

实例:

JSON数据格式处理：

异步请求代码返回：

7.25二级复选框

7.26 Layui

1.按钮：

7.27 layui实现分表查询

7.28 layui实现文件上传

不同情境中触发弹窗提示信息:

7.30 实现淘宝产品---展示部分

8.1 实现淘宝产品---登录，购物车部分

8.2 实现淘宝产品---事务控制

8.3-8.13淘宝项目事项初期：

引入 JSTL 的命名空间声明例如：