프런트 엔드 대화 형 계산기
Servlet 구성에 대한 이전 기사에 이어 제대로 구성하지 않은 경우 마지막 기사를 읽을 수 있습니다.
물론 Tomcat도 있어야합니다. 공식 웹 사이트로 이동하여 직접 다운로드 할 수 있습니다. (Tomcat은 액세스를 위해 로컬 리소스를 프런트 엔드에 업로드합니다.) 참고 : Tomcat의 경로를 알고 있어야하며 영어로되어 있어야합니다! ! ! !
첫 번째 단계 : 현재 프로젝트를 Tomcat에 바인딩합니다.
다음 단계는 OK입니다. 서두르지 말고 다음 작업을 먼저 수행하세요. 마지막 포인트, 그림을 그릴 때 문제가 있습니다! ! ! ! !
패키지 된 war 패키지를 선택하고 확인을 클릭하여 구성합니다.
2 단계 : html 파일을 생성하고 웹앱을 마우스 오른쪽 버튼으로 클릭하여 새 html 파일을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的计算器</title>
</head>
<body>
<form method="post" action="counter">
<div style="text-align:center">
<h1>计算器</h1>
<p><strong>数字:</strong><input type="number" id="n1" name="name1"></p>
<p><strong>数字:</strong><input type="number" id="n2" name="name2"></p>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
이 중 post는 매개 변수 전달 방법이고 counter는 서블릿이 적용한 인터페이스의 경로 이름입니다.
입력의 버튼은 더 이상 버튼이 아니라 제출입니다. 버튼은 프런트 엔드 상호 작용을 완료 할 수 없습니다.
3 단계 : web.xml 파일 구성
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1"
metadata-complete="true">
<!--用来注册servlet接口的实现类-->
<servlet>
<servlet-name>counter</servlet-name>
<servlet-class>CounterServlet</servlet-class>
</servlet>
<!--用来注册servlet的接口-->
<servlet-mapping>
<servlet-name>counter</servlet-name>
<url-pattern>/counter</url-pattern>
</servlet-mapping>
</web-app>
프런트 엔드는 루트 디렉토리에서 카운터를 찾은 다음 카운터로 servlet-name을 찾고 (원하는대로 가져 오되 위의 servlet-name과 일치하도록 유지) 마지막으로 백엔드 구현 클래스를 찾습니다. CounterServlet. url-pattern의 카운터 (슬래시를 추가해야 함)는 위의 작업의 매개 변수 이름과 동일해야합니다.
4 단계 : CounterServlet 클래스를 만듭니다.
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class CounterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
String num1=request.getParameter("name1");
String num2=request.getParameter("name2");
int end=Integer.parseInt(num1)+Integer.parseInt(num2);
PrintWriter writer = response.getWriter();
writer.println(String.format("<h1 style='color:red'>最终结果为:%d</h1>",end));
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
response.setCharacterEncoding ( "utf-8") :이 단계는 중국어 왜곡 문자를 방지하기위한 것이므로 반환 된 응답의 인코딩 형식을 설정해야합니다.
response.setContentType ( "text / html") : 표시 텍스트를 설정합니다. 이것은 html 프론트 엔드 페이지이므로 html입니다.
String num1 = request.getParameter ( "name1") : 백엔드 프로그램은 사용할 수 없으므로 여기에서 입력 태그의 id 속성이 아닌 name 속성을 사용해야합니다. id를 통해 프런트 엔드 정보를 얻습니다.
String.format ()은 소수를 유지할 때 반올림이 제공된다는 점을 제외하면 C 언어의 printf와 유사합니다.
모든 것이 완료되면 실행을 클릭합니다.
비교적 간단하며 멋진 스타일이 마음에 들면 직접 설정할 수 있습니다. (프런트 엔드 페이지)
제출을 클릭하면 다음 인터페이스로 변환됩니다. 백엔드에서 반환하는 계산 결과입니다.
프로그램이 실행 후 자동으로 다음 인터페이스로 점프하는 경우 :
두려워하지 마십시오! 성공적으로 실행하려면 http : // localhost : 8082 / web / 뒤에 html 파일 이름과 접미사의 전체 이름을 추가하기 만하면됩니다! ! ! !
상대적으로 낮습니다. 참아주세요.