JavaWeb基础知识-----Servlet

一、建立JavaWeb项目

开发工具，IDEA

二、配置Tomcat

IDEA中，一个web项目会对应一个Tomcat，每次创建一个项目都需要设置Tomcat

配置过程如下

一个简单的JavaWeb项目就搭建好了

Servlet的使用

添加servlet需要的jar包

创建一个Servlet

会自动帮你生成下面的类：

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

此时就可以运行项目了，只不过在打开的浏览器中什么都没有，因为默认访问的index.jsp页面中什么也没有写

使用Servlet实现简单的登录验证

一，index.jsp中代码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Servlet</title>
  </head>
  <body>
    <h1>Hello world！</h1>
    <form action="/loginServlet" method="GET">
      用户名：<input type="text" name = "userName"><br>
      密  码：<input type="password" name="password"><br>
      <input type="submit" value="登录">

    </form>
  </body>

</html>

运行项目，此时点击提交，就会跳转一个空白页面，因为什么都没有写

在刚才建立的LoginServlet中可以添加一个输出，在IDEA的控制台中就可以看到输出了

package com.review;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LoginServlet extends HttpServlet {
    //当有POST请求时，该函数会执行
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost........"); //控制台打印
    }
    //当有GET请求时，该函数会执行
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet........"); //控制台打印


    }
}

二：获取前端传入的值

在建立的LoginServlet中的添加如下代码

 //当有GET请求时，该函数会执行
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet........"); //控制台打印

        String userName = request.getParameter("userName");
        String password = request.getParameter("password");
        System.out.println(userName+"-->"+password);
        //form表单提交以及页面跳转
        if(password.equals("123456")){
            request.getRequestDispatcher("success.jsp").forward(request,response);
        }else{
            request.getRequestDispatcher("index.jsp").forward(request,response);
        }


    }

再次运行项目，输入内容，点击提交，后端就可以打印前端输入的值

同时再与index.jsp同级的目录下建立一个success.jsp的文件，如果你输入的密码为123456，页面就会跳转到success.jsp页面

三、使用form表单提交的问题

数据通过表单提交，会出现页面的跳转，

以登录为主：

成功：servlet跳转到登录成功页面

失败：servlet跳转到登录页面

存在的问题：

（1）点击提交，会出现页面的跳转

（2）登录页面上的内容丢失了

（3）前端和后端没有脱离，有关系

页面的跳转：是不是前端的问题，但是现在页面跳转有后端帮我做了，

如果是C/S：是移动端，有怎么实现页面的跳转呢。

怎么解决：

使用异步加载：ajax

前后端分离：后台只处理并返回数据，数据，数据，即可。

四、使用Ajax进行数据提交并跳转页面

使用

首先，前端虚引用JQuery包，目录结构如下

index.jsp代码如下


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Servlet</title>
  </head>
  <body>
    <h1>Hello world！</h1>
    <div>
      用户名：<input type="text" name = "userName" id="userName"><br>
      密  码：<input type="password" name="password" id="password"><br>
      <input type="button" value="提交" id="btn1">
    </div>
  </body>
  <script src="lib/jquery-1.9.1.min.js"></script>
  <script>
    $("#btn1").click(function () {
      var userName = $("#userName").val();
      var password = $("#password").val();
      $.ajax({
        url:"/loginServlet",
        method:"GET",
        data:{
          userName:userName,
          password:password
        },
        success:function (result) {
          if(result==="欢迎"+userName){
            location.href = "success.jsp";//页面跳转
          }
          else{
            alert(result);
          }
          },
          error:function (result) {
            console.log(result);
        }
      });
    });
  </script>
</html>

建立的Loginservlet代码如下

package com.review;

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 LoginServlet extends HttpServlet {
    //当有POST请求时，该函数会执行
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost........"); //控制台打印
    }
    //当有GET请求时，该函数会执行
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet........"); //控制台打印

        String userName = request.getParameter("userName");
        String password = request.getParameter("password");
        System.out.println(userName+"-->"+password);
     
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        if(password.equals("123456")){
            writer.print("欢迎"+userName);
        }
        else{
            writer.print("密码错误！");
        }
        writer.flush();
        writer.close();

    }
}

此时运行代码，就可以正常跳转和提示了

前端后端甩锅问题

在项目开发的过程中，可能会遇到以下问题

前端运行时，输入了数据，提交之后却没有结果返回

后端说我的代码没有问题，那么，到底如何判断是谁的问题

方法如下，首先看前端的数据到底有没有传入后端

以这次的代码为案例，在doGet方法出设置一个断点，前端输入数据后提交，会卡在断点处

此时就可以查看前端的数据到底有没有传入，方法如下

此处我的前端没有问题，数据都传入了，那么如何查看后端结果有没有返回呢？

方法如下，首先在前端浏览器中设置断点，然后点击提交，就可以看到后台返回的结果了，此处后端数据正确返回，所以可以进行页面跳转

总结

用以上方法可以很方便的区分到底是前端的问题还是后端的问题，可以让你更快的找到出现错误的地方

使用JSON

在上面的案例中，虽然可以看到项目执行的效果，倒是数据传输的格式还是非常不规范的

为了规范的传输数据的格式，可以使用JSON

这里使用到了阿里巴巴的一个控件FastJSON，它可以很好的帮助你使用JSON

下载地址如下官方下载地址

添加依赖

目录结构如下，web包下的lib是为jsp提供相关jar包的，而WEB-INF中的lib是为了class类提供相关工具jar包的

为什么不放到src目录下呢？你可以查看out文件夹，就知道原因了

此处可以看到你的类，因为项目没有刷新，所有fastjson.jar没有加载

添加依赖的方式如上面的案例一样，选择的是jar包

index.jsp修改如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Servlet</title>
  </head>
  <body>
    <h1>Hello world！</h1>
    <div>
      用户名：<input type="text" name = "userName" id="userName"><br>
      密  码：<input type="password" name="password" id="password"><br>
      <input type="button" value="提交" id="btn1">
    </div>
  </body>
  <script src="lib/jquery-1.9.1.min.js"></script>
  <script>
    $("#btn1").click(function () {
      var userName = $("#userName").val();
      var password = $("#password").val();
      $.ajax({
        url:"/loginServlet",
        method:"GET",
        data:{
          userName:userName,
          password:password
        },
        success:function (result) {
          result = result || "{}";
          var resultObj = JSON.parse(result);//将你传入的JSON字符串转成JSON对象
          var code = resultObj.code;
          if(code===0){
            var msg = resultObj.msg;
            alert(msg);
            location.href = "success.jsp";//页面跳转
          }
          else{
            var  msg = resultObj.msg;
            alert(msg);
          }
          },
          error:function (result) {
            console.log(result);
        }
      });
    });
  </script>
</html>

LoginServlet代码如下

package com.review;

import com.alibaba.fastjson.JSONObject;

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 LoginServlet extends HttpServlet {
    //当有POST请求时，该函数会执行
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost........"); //控制台打印
    }
    //当有GET请求时，该函数会执行
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet........"); //控制台打印

        String userName = request.getParameter("userName");
        String password = request.getParameter("password");
        System.out.println(userName+"-->"+password); 
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        JSONObject jsonObject = new JSONObject();
        if(password.equals("123456")){
            jsonObject.put("code",0);
            jsonObject.put("msg","密码正确");

            JSONObject user = new JSONObject();
            user.put("userName",userName);
            jsonObject.put("data",user);
        }
        else{
            jsonObject.put("code",1);
            jsonObject.put("msg","密码错误");
        }

        String result = jsonObject.toJSONString();
        writer.print(result);
        writer.flush();
        writer.close();

    }
}

此时可以运行项目，并进行相关提示