0
0

详细地讲解使用MyEclipse创建一个简单的html与servlet交互的JavaWeb项目

前言：大学学习的时候，课堂上老师教的总是和我们实际操作的完全脱离。特别是计算机专业的学生，在刚开始使用一个新的软件时，完完全全就是哪哪都不懂，只能硬着头皮在各种搜索引擎上来回切换。甚至很多问题我们连搜索的头绪都没有，不知道该从哪里搜。作为一个深受此般迫害的学生，为了让后来的同学们少走弯路，我决定尽可能详细地把自己摸索很多才了解到的知识，记录下来。

软件：MyEclipse(2014版，版本不同无所谓，操作大同小异）

项目类型：JavaWeb

项目内容：一个Html页面、一个Servlet文件

项目功能：在Html页面实现输入用户名和密码的功能，跳转到sevlet页面，显示刚刚输入的 用户名

如图：在用户名和密码输入内容后，点击登录跳转到下一个页面

在这里插入的的图片描述

这个图片里面的验证码、下拉框什么的可以忽略，我们只做用户名和密码，因为不涉及连接到数据库，我们的密码是随便输入的。

在这里插入图片描述

项目基础：本文是建立在软件、环境都安装好的基础上，tomcat如果没有部署好，需要先参考其他文章将这些准备工作完成。

下面我们来开始创建项目

Step1:创建一个JavaWeb项目

打开MyEclipse，点击左上角的File，选择new，再选择Web Project,出现下面的界面在这里插入图片描述
我们是新手，接下来直接点击Finish就好了。
下面是我的项目里的文件，有不一样的地方无所谓，我们继续向下走在这里插入图片描述

Step2:新建一个Html文件

右键点击WebRoot，选择new ，选择Html,出现如图在这里插入图片描述
然后点击finish,生成文件如图：
在这里插入图片描述

注意这里是源代码

<!DOCTYPEhtml><html><head><title>login.html</title><metaname="keywords"content="keyword1,keyword2,keyword3"><metaname="description"content="this is my page"><metaname="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body>
    This is my HTML page. <br></body></html>

我们开始编写我们的登录页面内容：可以直接把下面代码复制到你的login.html里面，仔细看注释

<!DOCTYPEhtml><html><head><title>login.html</title><metacharset="utf-8"><!加上这一句，防止中文乱码><metaname="keywords"content="keyword1,keyword2,keyword3"><metaname="description"content="this is my page"><metaname="content-type"content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body><!我们的主要内容都是在body标签里面><divstyle="text-align:center;"><!让文本居中><formaction="/Demo01/LoginServlet"method="POST"> 
            <!form是表单标签，这里填的是要运行的servlet文件的路径名：/项目名/servlet名>
            <!这一句的作用是，在点击登录按钮后，我们浏览器会访问/Demo01/LoginServlet，就实现了跳转到servlet页面>
            <!提交方式是post>
            用户：    <inputtype="text"name="name"><br>
            <!name="name"语句作用是，你的输入内容是一个字符串，这个字符串变量名是name，serlvt就可以通过name获取到输入的用户名>
                密码：    <inputtype="passward"name="psaaward"><br><inputtype="submit"value="登录"></form></div></body></html>

接下来是很重要的一步，不能忽略：我们要在web.xml文件中配置一些基本信息：展开 WEB-INF文件夹，如果你没有web.xml文件夹，那么右击你的项目，选择MyEclipse，再找到Generate Deployment Descriptor Stub，这时你的web.xml就会出现在你的WEB-INF文件夹里
我们双击web.xml，出现如图：在这里插入图片描述
进入到这个页面在这里插入图片描述
我们把

<welcome-file>index.html</welcome-file>

改成

<welcome-file>login.html</welcome-file>

,就是改成我们自己创建的html页面名。改动之后不要忘记Ctrl+S保存文件。等下我们创建servlet时，还要用到web.xml文件，建议查一下web.xml文件的作用，它的功能有很多。

Step3:创建一个Servlet文件

右击项目名下的src文件夹在这里插入图片描述
选择new ,选择 servlet,如图
在这里插入图片描述
然后点击 next ,然后finish即可；先不着急实现servlet，我们去web.xml文件里配置servlet的路径。我们发现web.xml文件里多了这些代码

<servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>LoginServlet</servlet-name><servlet-class>com.demo.LoginServlet</servlet-class></servlet><servlet-mapping><servlet-name>LoginServlet</servlet-name><url-pattern>/servlet/LoginServlet</url-pattern></servlet-mapping>

这是创建我们servlet时，系统给我们设置的servlet基本信息。我们把

<url-pattern>/servlet/LoginServlet</url-pattern>

改为

<url-pattern>/LoginServlet</url-pattern>

，就是删掉url pattern里的 /servlet;这个地方也是我试了很多次才找到的一个修改方式，此时我们web.xml里的文件应该是这样

<?xml version="1.0" encoding="UTF-8"?><web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><display-name>Demo01</display-name><servlet><description>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>LoginServlet</servlet-name><servlet-class>com.demo.LoginServlet</servlet-class></servlet><servlet-mapping><servlet-name>LoginServlet</servlet-name><url-pattern>/LoginServlet</url-pattern></servlet-mapping><welcome-file-list><welcome-file>login.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file><welcome-file>default.jsp</welcome-file></welcome-file-list></web-app>

Step4:实现LoginServlet

现在，到servlet页面里。我们主要在doPost()方法里，实现代码；这是默认的servlet源码

packagecom.demo;importjava.io.IOException;importjava.io.PrintWriter;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;publicclassLoginServletextendsHttpServlet{/**
     * Constructor of the object.
     */publicLoginServlet(){super();}/**
     * Destruction of the servlet. <br>
     */publicvoiddestroy(){super.destroy();// Just puts "destroy" string in log// Put your code here}/**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */publicvoiddoGet(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{

        response.setContentType("text/html");PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");
        out.print("    This is ");
        out.print(this.getClass());
        out.println(", using the GET method");
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();}/**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */publicvoiddoPost(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{

        response.setContentType("text/html");PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");
        out.print("    This is ");
        out.print(this.getClass());
        out.println(", using the POST method");
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();}/**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */publicvoidinit()throwsServletException{// Put your code here}}

这是修改后的代码：对于不需要修改的方法我们不用去管它，代码的功能看下面的注释

packagecom.demo;importjava.io.IOException;importjava.io.PrintWriter;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;publicclassLoginServletextendsHttpServlet{/**
     * Constructor of the object.
     */publicLoginServlet(){super();}/**
     * Destruction of the servlet. <br>
     */publicvoiddestroy(){super.destroy();// Just puts "destroy" string in log// Put your code here}/**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */publicvoiddoGet(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{

        response.setContentType("text/html");PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");
        out.print("    This is ");
        out.print(this.getClass());
        out.println(", using the GET method");
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();}/**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */publicvoiddoPost(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{
        
        request.setCharacterEncoding("utf-8");//设置响应页面的编码格式为 utf-8
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");//设置响应页面的格式为htmlString name=null;
        name=request.getParameter("name");//获取html中表单post过来的名为“name”的数据if(name==null) name="";PrintWriter out = response.getWriter();//创建输出的对象
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");
        out.print("    This is ");
        out.print(this.getClass());
        out.println(", using the POST method");
        
        out.println("<br>");//换行；
        out.println("你好！你的用户名是：");
        out.println(name);
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();}/**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */publicvoidinit()throwsServletException{// Put your code here}}

Step4:运行项目

我们在代码区下方栏目中选择 Servers
在这里插入图片描述

(如果你的页面布局和我的不一样，直接网上搜，可以把Serves调出来，另外，有什么不一样的地方，一定要善于利用搜索引擎），然后右键点击MyEclipse Tomcat 7（我们tomcat的版本可能不一样，这个没关系），选择 Add Deployment… ，出现如下页面在这里插入图片描述
我们的项目就已经和服务器链接上了；接下来就是访问了。访问方式不止一种。
第一种，我们直接在 MyEclipse Tomcat 7的下面找到我们的项目，右键点击，选择 Open in Browser在这里插入图片描述
出现下面这个页面，这是软件自带的浏览器，我们可以用自己电脑下载的浏览器访问在这里插入图片描述
第二种
直接在浏览器中输入

localhost:8080/Demo01/

这里的8080是tomcat默认端口号，Demo01是我们的项目名
访问以后出现如下页面
在这里插入图片描述
输入用户名，和随机一个密码，就跳转到我们的Servlet页面了
在这里插入图片描述
至此，我们的第一个简单项目完结散花了~。
具体的步骤会因为版本不同，操作不太一样，这时候我们一定要多搜索。还是那句话，多利用搜索引擎，读各种文章，不要害怕浪费时间。万事开头难，坚持下去，就会慢慢变好的！
最后，希望篇文章能帮助到你。

标签： servlet myeclipse html
本文转载自: https://blog.csdn.net/m0_63252914/article/details/129622279
版权归原作者 前路漫漫亦灿灿上岸 所有， 如有侵权，请联系我们删除。
登录后发布评论

“详细地讲解使用MyEclipse创建一个简单的html与servlet交互的JavaWeb项目”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航