使用工具
🚄
本次使用的工具:
1.IDEA社区版
2.Sevlet
3.MySQL
4.MySQL驱动
完成HTML代码
在写前后端交互的时候,首先我们肯定需要有我们的前端页面。现在我们的前端就默认HTML5。
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="add" method="get"> 账号:<input type="text" name="zh"><br> <input type="submit" value="添加"> </form> </body> </html>
我们也在上一篇HTNL入门的文章讲到过通过表发送数据到指定的程序。
我们能看见我们的action他是指定一个add地方,这个是我们所需要掌握的核心。待会我们会在Java中配置一个xml文件会用到这个add。
复习上次的内容:
表单 form
一般我们都会通过表单对从一个html到其他文件的跳转作用。
语法:
<form action="C:\Users\admin\Desktop\HTML\deom2.html" method="post"> 账号:<input type="text" name = "Nickname"> <br/> 密码:<input type="password" name = "pwd"><br/> <input type="submit" value = "提交" /> </form>
✨action:表示请求的文件地址。
✨method:表示请求的方法,一般有post,get。
web.xml的配置
web.xml这个可能有的小伙帮并不是很熟悉,首先我们先来介绍一下web.xml.
一般的web工程中都会用到web.xml,web.xml主要用来配置,可以方便的开发web工程。web.xml主要用来配置Filter、Listener、Servlet等。但是要说明的是web.xml并不是必须的,一个web工程可以没有web.xml文件。
一般情况下web.xml的加载过程是这样的:
如果对这个地方还不是很明白的话建议大家可以去手动的查一下,并且好好记录。
首先声明一下:IDEA社区版中因为没有web开发模块,所以这个web.xml文件需要自己去配置和导入。
<?xml version="1.0" encoding="utf-8" ?> <web-app xmlns:th="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0"> <servlet> <!-- servlet -name 记录和Java程序一样的名字--> <servlet-name>demo01</servlet-name> <!-- servlet -class 记录Java类的全部名称--> <servlet-class >dem0.demo01</servlet-class> <!--将demo包下的hello类命名为hello --> </servlet> <servlet-mapping> <servlet-name>demo01</servlet-name> <!-- url - pattern 记录前端页面表格发送的地址 !!:记住有个“/”--> <url-pattern>/add</url-pattern> </servlet-mapping> </web-app>
上面的代码直接拿去复制即即可,注释都在上面,只需要改一下参数即可。
补充一下servlet:
用来声明一个servlet的数据,主要有以下子元素:
指定servlet的名称
指定servlet的类名称
指定web站台中的某个JSP网页的完整路径
用来定义参数,可有多个init-param。在servlet类中通过getInitParamenter(String name)方法访问初始化参数
指定当Web应用启动时,装载Servlet的次序。当值为正数或零时:Servlet容器先加载数值小的servlet,再依次加载其他数值大的servlet。当值为负或未定义:Servlet容器将在Web客户首次访问这个servlet时加载它。
用来定义servlet所对应的URL,包含两个子元素
指定servlet所对应的URL
后端获取前端传递的数据
上述我们讲过了我们能通过前端的form表单把表单中的数据传递个后端,例如输入框,单选框,多选框,文本域,文件域等。
1.在后端能通过name相对应的属性来获取相对应的值。
2.能通过action提交数据的地址。
3.method表示提交的方式,大多数为get和post。
当我们提交了数据,然后数据会发送到服务器上面,并通过Tomcat来进行处理。当Tomcat得到请求后会通过Servlet来进行相对应的处理,最后通过后端的Java程序来得到前端所传输的数据。
最后我们打开我们的Java程序:
public class quest extends HttpServlet { @Override //这个地方的请求方式要和from表单上面写的一样的。 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8");//设置编码 String hello = req.getParameter("hello");//获取前端的数据 System.out.println(hello);
最后我们就能完成一次前端到后端的数据交互了。