Web学习---001

一、环境配置

完成编程环境的安装和配置，成功运行hello world！ jdk ,tomcat,maven,vs code 配置环境详情见B站 vscode配置Tomcat及wust王老师blog 实操成功！ 实操过程中遇到的问题：

JDK路径错误 刚开始在VS Code里尝试运行项目时，系统直接报错，提示找不到JDK。我检查了系统的环境变量，发现并没有问题。后来仔细查看了VS Code的设置（Settings），发现插件里配置的JDK路径指向了一个错误的位置（可能是我之前卸载旧版本留下的路径）。 （这里注意 \\ 改成 / ）

解决：在VS Code的设置中，手动修正了JDK的正确安装路径。保存后，关于Java的报错消失了。

修正JDK路径后，我以为可以直接在网页看到效果，结果发现页面还是打不开。虽然VS Code连上了JDK，但我并没有真正启动服务器！Tomcat服务此时是关闭状态。 解决：我找到Tomcat安装目录下的 bin 文件夹，双击了 startup.bat 。看到黑色的命令行窗口弹出，且没有闪退，说明服务器成功启动并在监听8080端口了。（或者在VS插件下面的Tomcat旁边将stop双击改成start）

其他： 注意检验JDK时，输入的“java -version”java后面的空格不能缺少，否则报错。 注意配置变量时复制的变量值地址不要出错。

思考： 为什么要配置环境变量？

配置环境变量，就是给系统和编辑器指一条路，让它们知道这些工具安装在哪个文件夹里，否则它们根本无法启动和干活。

综上是配置环境变量，以下是实操部分。

二、课后练习与JSP代码初体验

1.九九乘法表 代码实现：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>JSP – Hello World</title>
</head>
<body>
输出九九乘法表
<br>
<%
for (int i = 1; i <= 9; i++) {
for (int j = 1; j <= i; j++) {
String str = j + "*" + i + "=" + j * i;
out.print(str + "&nbsp");
}
out.println("<br>");
}
%>
</body>
</html>

页面展示： 2.用户注册表 代码实现 1.1zhuce.jsp(表单界面)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册表单</title>
<style>
body { font–family: sans–serif; padding: 20px; }
.form–container { max–width: 400px; margin: 0 auto; }
.form–group { margin–bottom: 15px; }
label { display: block; margin–bottom: 5px; font–weight: bold; }
input[type="text"], input[type="password"] { width: 100%; padding: 8px; box–sizing: border–box; }
input[type="submit"] { padding: 10px 20px; background–color: #007BFF; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<div class="form-container">
<h2>用户注册表单</h2>
<!— 关键：form的action属性要指向处理页面的文件名 —>
<form action="zhuceCheck.jsp" method="post">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" name="username" required>
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="password" required>
</div>
<div class="form-group">
<label>性别:</label>
<input type="radio" id="male" name="gender" value="男" checked>
<label for="male" style="display:inline;">男</label>
<input type="radio" id="female" name="gender" value="女">
<label for="female" style="display:inline;">女</label>
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="text" id="age" name="age">
</div>
<div class="form-group">
<label>爱好:</label>
<input type="checkbox" id="hobby1" name="hobby" value="学习">
<label for="hobby1" style="display:inline;">学习</label>
<input type="checkbox" id="hobby2" name="hobby" value="音乐">
<label for="hobby2" style="display:inline;">音乐</label>
<input type="checkbox" id="hobby3" name="hobby" value="阅读">
<label for="hobby3" style="display:inline;">阅读</label>
<input type="checkbox" id="hobby4" name="hobby" value="运动">
<label for="hobby4" style="display:inline;">运动</label>
</div>
<input type="submit" value="提交">
</form>
</div>
</body>`1.2zhuceCheck.jsp（处理界面）

1.2zhuceCheck.jsp(处理页面)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 1. 设置请求的字符编码，防止中文乱码
request.setCharacterEncoding("UTF-8");

// 2. 获取表单提交的数据
String name = request.getParameter("username");
String password = request.getParameter("password");
String gender = request.getParameter("gender");
String age = request.getParameter("age");
String[] hobbies = request.getParameterValues("hobby"); // 爱好是多选的，所以用数组接收
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册信息提交成功！</title>
<style>
body { font–family: sans–serif; padding: 20px; }
.result–container { max–width: 400px; margin: 0 auto; }
</style>
</head>
<body>
<div class="result-container">
<h1>注册信息提交成功！</h1>
<hr>
<p><strong>姓名：</strong> <%= name %></p>
<p><strong>密码：</strong> <%= password %></p>
<p><strong>性别：</strong> <%= gender %></p>
<p><strong>年龄：</strong> <%= age %> 岁</p>
<p><strong>爱好：</strong>
<%
if (hobbies != null) {
for (int i = 0; i < hobbies.length; i++) {
out.print(hobbies[i]);
if (i < hobbies.length – 1) {
out.print(", "); // 在每个爱好之间加个逗号
}
}
} else {
out.print("未选择");
}
%>
</p>
<a href="zhuce.jsp">返回重新提交</a>
</div>
</body>
</html>

页面展示：

代码分析

新知识点： 1.<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> 设置请求的字符编码，防止中文乱码 2.request.getParameter() ：用于获取表单提交的数据，这是JSP处理用户输入的核心方法。 3.request.setCharacterEncoding(“UTF-8”) ：解决中文乱码问题，非常重要。 4.request.getParameterValues() ：用于获取复选框（checkbox）的多个值，返回一个数组。 5. <%= %> 表达式：用于在HTML中直接输出Java变量的值。

旧知识复用：HTML表单（ ）、输入框（ ）、CSS样式、以及Java的变量定义和循环。

理解： zhuce.jsp 负责收集数据， zhuceCheck.jsp 负责接收并展示数据，两者通过 form 的 action 属性连接，构成了一个完整的“请求-响应”流程。 （借助AI辅助生成代码框架，但进行了初步读代码，了解了JSP语法结构）