前言：大學(xué)學(xué)習(xí)的時候，課堂上老師教的總是和我們實際操作的完全脫離。特別是計算機專業(yè)的學(xué)生，在剛開始使用一個新的軟件時，完完全全就是哪哪都不懂，只能硬著頭皮在各種搜索引擎上來回切換。甚至很多問題我們連搜索的頭緒都沒有，不知道該從哪里搜。作為一個深受此般迫害的學(xué)生，為了讓后來的同學(xué)們少走彎路，我決定盡可能詳細地把自己摸索很多才了解到的知識，記錄下來。
軟件：MyEclipse(2014版，版本不同無所謂，操作大同小異）
項目類型：JavaWeb
項目內(nèi)容：一個Html頁面、一個Servlet文件
項目功能：在Html頁面實現(xiàn)輸入用戶名和密碼的功能，跳轉(zhuǎn)到sevlet頁面，顯示剛剛輸入的 用戶名
如圖：在用戶名和密碼輸入內(nèi)容后，點擊登錄跳轉(zhuǎn)到下一個頁面
這個圖片里面的驗證碼、下拉框什么的可以忽略，我們只做用戶名和密碼，因為不涉及連接到數(shù)據(jù)庫，我們的密碼是隨便輸入的。
項目基礎(chǔ)：本文是建立在軟件、環(huán)境都安裝好的基礎(chǔ)上，tomcat如果沒有部署好，需要先參考其他文章將這些準備工作完成。
下面我們來開始創(chuàng)建項目
Step1:創(chuàng)建一個JavaWeb項目
打開MyEclipse，點擊左上角的File，選擇new，再選擇Web Project,出現(xiàn)下面的界面
我們是新手，接下來直接點擊Finish就好了。
下面是我的項目里的文件，有不一樣的地方無所謂，我們繼續(xù)向下走
Step2:新建一個Html文件
右鍵點擊WebRoot，選擇new ，選擇Html,出現(xiàn)如圖
然后點擊finish,生成文件如圖：
注意這里是源代碼
<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="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>
我們開始編寫我們的登錄頁面內(nèi)容：可以直接把下面代碼復(fù)制到你的login.html里面，仔細看注釋
<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<meta charset="utf-8"> <!加上這一句，防止中文亂碼>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!我們的主要內(nèi)容都是在body標簽里面>
<div style="text-align:center;"> <!讓文本居中>
<form action="/Demo01/LoginServlet" method="POST">
<!form是表單標簽，這里填的是要運行的servlet文件的路徑名：/項目名/servlet名>
<!這一句的作用是，在點擊登錄按鈕后，我們?yōu)g覽器會訪問/Demo01/LoginServlet，就實現(xiàn)了跳轉(zhuǎn)到servlet頁面>
<!提交方式是 post>
用戶： <input type="text" name="name"><br>
<!name="name"語句作用是，你的輸入內(nèi)容是一個字符串，這個字符串變量名是name，serlvt就可以通過name獲取到輸入的用戶名>
密碼： <input type="passward" name="psaaward"><br>
<input type="submit" value="登錄">
</form>
</div>
</body>
</html>
接下來是很重要的一步，不能忽略：我們要在web.xml文件中配置一些基本信息：展開 WEB-INF文件夾，如果你沒有web.xml文件夾，那么右擊你的項目，選擇MyEclipse，再找到Generate Deployment Descriptor Stub，這時你的web.xml就會出現(xiàn)在你的WEB-INF文件夾里
我們雙擊web.xml，出現(xiàn)如圖：
進入到這個頁面
我們把<welcome-file>index.html</welcome-file>改成<welcome-file>login.html</welcome-file>,就是改成我們自己創(chuàng)建的html頁面名。改動之后不要忘記Ctrl+S保存文件。等下我們創(chuàng)建servlet時，還要用到web.xml文件，建議查一下web.xml文件的作用，它的功能有很多。
Step3:創(chuàng)建一個Servlet文件
右擊項目名下的src文件夾
選擇new ,選擇 servlet,如圖
然后點擊 next ,然后finish即可；先不著急實現(xiàn)servlet，我們?nèi)eb.xml文件里配置servlet的路徑。我們發(fā)現(xiàn)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>
這是創(chuàng)建我們servlet時，系統(tǒng)給我們設(shè)置的servlet基本信息。我們把<url-pattern>/servlet/LoginServlet</url-pattern>改為<url-pattern>/LoginServlet</url-pattern>，就是刪掉url pattern里的 /servlet;這個地方也是我試了很多次才找到的一個修改方式，此時我們web.xml里的文件應(yīng)該是這樣
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns: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:實現(xiàn)LoginServlet
現(xiàn)在，到servlet頁面里。我們主要在doPost()方法里，實現(xiàn)代碼；這是默認的servlet源碼
package com.demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public LoginServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
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
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, 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
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, 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
*/
public void init() throws ServletException {
// Put your code here
}
}
這是修改后的代碼：對于不需要修改的方法我們不用去管它，代碼的功能看下面的注釋
package com.demo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public LoginServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
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
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, 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
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//設(shè)置響應(yīng)頁面的編碼格式為 utf-8
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");//設(shè)置響應(yīng)頁面的格式為html
String name=null;
name=request.getParameter("name");//獲取html中表單post過來的名為“name”的數(shù)據(jù)
if(name==null) name="";
PrintWriter out = response.getWriter();//創(chuàng)建輸出的對象
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
*/
public void init() throws ServletException {
// Put your code here
}
}
Step4:運行項目
我們在代碼區(qū)下方欄目中選擇 Servers
(如果你的頁面布局和我的不一樣，直接網(wǎng)上搜，可以把Serves調(diào)出來，另外，有什么不一樣的地方，一定要善于利用搜索引擎），然后右鍵點擊MyEclipse Tomcat 7（我們tomcat的版本可能不一樣，這個沒關(guān)系），選擇 Add Deployment… ，出現(xiàn)如下頁面
我們的項目就已經(jīng)和服務(wù)器鏈接上了；接下來就是訪問了。訪問方式不止一種。
第一種，我們直接在 MyEclipse Tomcat 7的下面找到我們的項目，右鍵點擊，選擇 Open in Browser
出現(xiàn)下面這個頁面，這是軟件自帶的瀏覽器，我們可以用自己電腦下載的瀏覽器訪問
第二種
直接在瀏覽器中輸入文章來源：http://www.zghlxwxcb.cn/news/detail-741497.html
localhost:8080/Demo01/
這里的8080是tomcat默認端口號，Demo01是我們的項目名
訪問以后出現(xiàn)如下頁面
輸入用戶名，和隨機一個密碼，就跳轉(zhuǎn)到我們的Servlet頁面了
至此，我們的第一個簡單項目完結(jié)散花了~。
具體的步驟會因為版本不同，操作不太一樣，這時候我們一定要多搜索。還是那句話，多利用搜索引擎，讀各種文章，不要害怕浪費時間。萬事開頭難，堅持下去，就會慢慢變好的！
最后，希望篇文章能幫助到你。文章來源地址http://www.zghlxwxcb.cn/news/detail-741497.html
到了這里，關(guān)于詳細地講解使用MyEclipse創(chuàng)建一個簡單的html與servlet交互的JavaWeb項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
