Calculadora interactiva front-end
Antes de hacer esto, primero debes crear un proyecto de servlet. El blog ya lo ha presentado antes, así que comencemos directamente.
primer paso
- Cree un archivo html
aquí, preste atención para crearlo en el directorio de la aplicación web
el código se muestra a continuación
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的计算器</title>
</head>
<body>
<form method="get" action="calc">
<div style="text-align: center">
<h1>计算器</h1>
数字1:<input id="n1" name="number1" type="number" ><p></p>
数字2:<input id="n2" name="number2" type="number" ><p></p>
<input type="submit" value="提交">
</div>
</form>
</body>
</html>
Precauciones:
- Aquí todo el archivo html es un formulario
- El tipo de clave de envío es "enviar", ya no "botón", el botón no se puede conectar al backend
Segundo paso
- Cree un archivo .java y escriba el código de back-end. El
proceso de creación se ha mostrado antes, aquí está el código directamente
Operación directa de serpientes de cinco pasos
- Anule los métodos doGet y doPost y llame a get directamente en la publicación
- Establecer formato de codificación
- Establecer el tipo de devolución
- Reciba datos de front-end
- Devuelve el resultado al principio
Precauciones
- Al configurar el formato de codificación: no se distingue entre mayúsculas y minúsculas, tanto UTF-8 como utf-8 son posibles
- Hay cuatro tipos al configurar el tipo de retorno: texto / html, texto / css, aplicación / javascript, imagen / png
- Establezca el formato de codificación y el tipo de retorno antes de obtener el flujo de salida (getWriter ())
- Al recibir datos de front-end, se usa el nombre, no la identificación
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 calculator extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置编码格式
resp.setCharacterEncoding("utf-8");
//2.设置返回类型
resp.setContentType("text/html");
//3.接收前端数据
int num1=Integer.parseInt(req.getParameter("number1"));
int num2=Integer.parseInt(req.getParameter("number2"));
int total=num1+num2;
//4.给前端返回结果
PrintWriter printWriter=resp.getWriter();
printWriter.println(String.format("<h1>计算结果为:%d</h1>",total));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
tercer paso
- Configurar el enrutamiento (web.xml)
Las precauciones están todas en el código.
<?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>long</servlet-name>
<!-- 和写的java文件名必须一致(全包名)-->
<servlet-class>calculator</servlet-class>
</servlet>
<!-- 用来注册sverlet的接口-->
<servlet-mapping>
<!-- 和上面的name必须一致-->
<servlet-name>long</servlet-name>
<!--在Tomcat上部署时访问的url (最好全小写)-->
<url-pattern>/calc</url-pattern>
</servlet-mapping>
</web-app>
el cuarto paso
- Configurar Tomcat en idea
Seleccione el primer paquete de guerra y haga clic en Aceptar
Haga clic en Aceptar, y la configuración
como esta en la configuración fue exitosa
después de que se completó toda la operación, simplemente haga clic en Ejecutar para
esperar un momento, la siguiente interfaz abrirá un navegador
y luego agregará el nombre y el archivo html del sufijo en la url para acceder a
después de hacer clic en enviar, saltará a otra página
para que una interacción de front-end se haya realizado con éxito
Este es el envío de la página completa, y la parte de la función de envío de la página se actualizará en el futuro. ! !