web应用技术作业01

1.在VS Code新建Maven Web项目 + Copilot生成JSP + 部署运行

1.利用Copilot生成九九乘法表JSP文件

2.右键demo------在集成终端器打开------在终端执行mvn clean package------出现target文件------点击VS Code左侧「Servers」图标（安装Community Server Connectors插件后显示），右键点击已配置的Tomcat 9服务器 →「Add Deployment」，选择jsp文件打开------右键点击Tomcat 9服务器 →「Start Server」，启动Tomcat------打开浏览器，输入地址：

http://localhost:8080/demo/nine2.jsp------若浏览器显示Copilot生成的九九乘法表，说明VS Code+Maven+Copilot部署运行成功

3.运行完成后，右键点击Tomcat服务器 →「Stop Server」，关闭Tomcat

2.编写注册页面，并输出用户输入的信息。

已有代码zhuce.jsp：

复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户注册</title>
    <style>
      form {
        width: 380px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fafafa;
      }
      .item {
        margin: 10px 0;
      }
      label {
        display: inline-block;
        width: 80px;
      }
      input[type="text"],
      input[type="password"],
      input[type="number"] {
        padding: 5px;
        width: 200px;
      }
      button {
        padding: 6px 20px;
        margin-left: 80px;
      }
      .options {
        display: inline-block;
      }
      .options label {
        width: auto;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align: center">用户注册表单</h1>
    <%-- 表单提交到zhuceCkeck.jsp，提交方式为post --%>
 
    <form action="zhuceCkeck.jsp" method="post">
      <div class="item">
        <label>姓名：</label>
        <input type="text" name="name" required /> <%-- required表示必填 --%>
      </div>
      <div class="item">
        <label>密码：</label>
        <input type="password" name="password" required />
      </div>
      <div class="item">
        <label>性别：</label>
        <span class="options">
          <label
            ><input type="radio" name="gender" value="男" required /> 男</label
          >
          <label><input type="radio" name="gender" value="女" /> 女</label>
        </span>
      </div>
      <div class="item">
        <label>年龄：</label>
        <input type="number" name="age" min="1" max="120" required />
      </div>
      <div class="item">
        <label>爱好：</label>
        <span class="options">
          <label
            ><input type="checkbox" name="hobby" value="篮球" /> 篮球</label
          >
          <label
            ><input type="checkbox" name="hobby" value="音乐" /> 音乐</label
          >
          <label
            ><input type="checkbox" name="hobby" value="阅读" /> 阅读</label
          >
          <label
            ><input type="checkbox" name="hobby" value="旅行" /> 旅行</label
          >
        </span>
      </div>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

zhuceCkeck:

复制代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page
import="java.util.Arrays" %>
<html>
  <head>
    <title>注册结果</title>
    <style>
      body {
        text-align: center;
        margin-top: 50px;
      }
      .result {
        display: inline-block;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <h1>注册信息提交成功！</h1>
    <div class="result">
      <%-- 解决post提交中文乱码问题 --%> <%
      request.setCharacterEncoding("UTF-8"); String name =
      request.getParameter("name"); String password =
      request.getParameter("password"); String gender =
      request.getParameter("gender"); String age = request.getParameter("age");
      String[] hobbies = request.getParameterValues("hobby"); String hobbyText =
      (hobbies != null && hobbies.length > 0) ?
      Arrays.toString(hobbies).replace("[", "").replace("]", "") : "未选择"; %>
      <%-- 获取表单提交的数据 --%>
      <p>姓名：<%= name %></p>
      <p>密码：<%= password %></p>
      <p>性别：<%= gender %></p>
      <p>年龄：<%= age %> 岁</p>
      <p>爱好：<%= hobbyText %></p>
      <%-- 跳转回表单页面 --%>
      <a href="zhuce.jsp">返回重新提交</a>
    </div>
  </body>
</html>

跟上面一样的步骤