【示例】手把手教你构建一个简单的JavaWeb应用(会员注册唯一性检查,不带数据库)

Eclipse配置Tomcat

   首先在确保已经安装好Tomcat服务器后,打开eclipse配置Tomcat服务器(点开链接详解如何配置)

   服务器创建好之后可以双击下图指示的位置打开服务器设置

java审批流程 表设计 javaweb审核功能怎么做_数据库

  可以看到在红圈位置中,选择的是一个选项,就在当前的开发位置进行配置开发,Deploy path为wtpwebapps。所以我在当前文件夹下新建了名为wtpwebapps的文件夹,待会的项目就创建在此

java审批流程 表设计 javaweb审核功能怎么做_java审批流程 表设计_02

新建CheckUser项目

java审批流程 表设计 javaweb审核功能怎么做_java审批流程 表设计_03

  只需要填好项目名称就好其他的不用改变,注意选择路径为E:\eclipse-workspace\wtpwebapps

 

java审批流程 表设计 javaweb审核功能怎么做_java_04

  接下在Project Explorer就可以看到当前的文件结构,主要用用到的就是Java Resource, WebContent

java审批流程 表设计 javaweb审核功能怎么做_xml_05

  •   在Java Resource\src 下新建class文件填入代码,这里的代码就是服务器端处理代码
1 import java.io.*;
 2 import javax.servlet.*;
 3 import javax.servlet.http.*;
 4 public class CheckUser extends HttpServlet {//创建servlet
 5     public void destroy()
 6     {
 7         super.destroy();
 8     }
 9     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException
10     {
11         doPost(request,response);
12     }
13     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException
14     {
15         response.setContentType("text/html");
16         PrintWriter out=response.getWriter();
17         String[]  logined= {"bts","army","admin"};//当前已经注册过的会员
18         String loginName=request.getParameter("loginName");//从request请求中得到填入的会员名字
19         String responseContext="true";//初始化返回值为true
20         for( String s:logined)  if(loginName.equals(s)) responseContext="false"; //遍历已注册会员,如果名字已存在则设置返回值为false
21         out.println(responseContext);//向前端输出值
22         out.flush();
23         out.close();
24     }
25     public void init() throws ServletException{}
26 }



  • 接着开始编写index.html页面,主页页面保存在WebContent文件夹下,而不是WEB-INF
1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>检查用户唯一性</title>
 6 </head>
 7 <script language="javascript">
 8 var xmlHttp;
 9 function creatXMLHttpRequest()
10 {
11     if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
12     else if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}
13 }
14 function beginCheck()
15 {
16     var tempLoginName=document.all.loginName.value;
17     if(tempLoginName=="") {alert("please input the name"); return;}
18     creatXMLHttpRequest();
19 xmlHttp.onreadystatechange=processor;
20     
21     xmlHttp.open("GET","CheckUser?loginName="+tempLoginName);
22     xmlHttp.send(null);
23     
24 }
25 function processor()
26 {
27     var responseContext;
28     if(xmlHttp.readyState==4){
29         if(xmlHttp.status==200)
30             {
31                 responseContext=xmlHttp.responseText;
32                 if(responseContext=="true") alert("valid");
33                 else alert("invaild");
34             }
35     }
36 }
37 </script>
38 <body>
39     <form name="form1" action="CheckUser" method="post">
40     <input name="loginName" type="text" id="loginName">
41     <input type="button" name="checkLoginName" value="有效性检查" onclick="beginCheck()">
42     </form>
43 </body>
44 </html>



 

  • <url-pattern>/CheckUser</url-pattern>
1 <?xml version="1.0" encoding="UTF-8"?>
 2 
 3 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 4 
 5   <servlet>
 6       <servlet-name>CheckUser</servlet-name>
 7       <servlet-class>CheckUser</servlet-class>
 8   </servlet>
 9   <servlet-mapping>
10       <servlet-name>CheckUser</servlet-name>
11       <url-pattern>/CheckUser</url-pattern> 
12   </servlet-mapping>
13 
14 </web-app>



 

  

运行

java审批流程 表设计 javaweb审核功能怎么做_开发工具_06

选择刚刚配置好的服务器

java审批流程 表设计 javaweb审核功能怎么做_xml_07

点击finishi,马上页面就会跳转

java审批流程 表设计 javaweb审核功能怎么做_数据库_08

 

同时打开console可以看到刚刚server启动的详细情况

java审批流程 表设计 javaweb审核功能怎么做_java审批流程 表设计_09

 

 测试

可以直接就在eclipse里面看,也可以复制地址到浏览器,现在在输入框中填写名字

java审批流程 表设计 javaweb审核功能怎么做_java审批流程 表设计_10

然会就会发现只有点回车才会有用,单击按钮没有反应

java审批流程 表设计 javaweb审核功能怎么做_xml_11

这是因为之前在input设置的就是button 将他修改为submit即可<input type="submit" name="checkLoginName" value="有效性检查" οnclick="beginCheck()">

然后要解决并没有按照js写的alert而是直接输出后台的值的问题,查看代码发现xmlHttp.onreadystatexhanges=processor; 打错了修正为xmlHttp.onreadystatechange=processor;((+_+)?我也不知道为啥打错了)

接着运行

java审批流程 表设计 javaweb审核功能怎么做_xml_12

 

但是又发现点击确定后还会跳转到写了结果的页面,这是为什么呢???

上面代码已修改一直错误,这个问题还没有解决2019-03-07