首页在 WEB-INF/jsp目录下创建添加客户信息的页面addCustomer.jsp 和显示信息的页面 showCustomer.jsp

在 WEB-INF/jsp目录下创建添加客户信息的页面addCustomer.jsp 和显示信息的页面 showCustomer.jsp

时间: 2024-10-11 10:02:32 浏览: 32

在`WEB-INF/jsp`目录下，创建两个JSP页面用于处理前端交互：一个是用于添加客户信息的`addCustomer.jsp`，另一个是用于展示客户信息的`showCustomer.jsp`。这两个文件通常使用HTML、CSS和JavaScript进行界面设计，并通过`<form>`标签与后端控制器进行数据交换。 1. **addCustomer.jsp**： ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head>  <title>Add Customer</title> </head> <body> <h1>Add New Customer</h1> <form action="${pageContext.request.contextPath}/customers/add" method="post"> <input type="text" name="firstName" placeholder="First Name"> <input type="text" name="lastName" placeholder="Last Name">  <input type="submit" value="Add"> </form> </body> </html> ``` 在这个页面中，`action`属性指向了`CustomerController`的`addCustomer`方法，`method`设为"post"是因为这是向服务器发送数据的方式。 2. **showCustomer.jsp**： ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head>  <title>View Customers</title> </head> <body> <h1>View Customers</h1> <table>  <c:forEach items="${customers}" var="customer"> <tr> <td>${customer.firstName}</td> <td>${customer.lastName}</td> </tr> </c:forEach> </table> </body> </html> ``` 这个页面展示了已有的客户列表，其中`${customers}`通常是由后端控制器（例如`CustomerController`）提供的Model里的数据。

阅读全文