首先要讲到传统的JSP文件有什么弊端：
弊端太多了，直接在JSP上写Java代码。大公司的项目都有分前后端的。这样的话，前端的人怎么活？
在网页上写Java代码，如果修改起来很麻烦。文件小还好说，文件大就难了。
所以这里引出了MVC模式。即将一个用户的请求以及服务器的处理分离开，分成：Model【模型】、View【视图】、Controller【控制器】。接下来以“登录”作为例子，将一下每个层次的作用。
Model【模型】：模型层，控制页面跳转。如：login.jsp填写好了表单，然后跳转到check.jsp，Model【模型】就处理页面的跳转。
View【视图】：视图应该是很好理解的。有HTML和JSP【极其不推荐使用JSP】。
Controller【控制器】：在拿到了“登录”表单的数据后，总要去判断数据是否正确吧？处理数据的过程就属于Controller【控制器】。
做到MVC分离，就会将一个web应用变成可拆分的。
如果不借助MVC框架，可以使用HTML+Servlet+JavaBean实现MVC模式
HTML很常见，就不多讲了。
Servlet：
Servlet属于JSP的底层类，有doGet()、doPost()、构造函数三种主要的函数组成。很好理解，在表单提交的时候，我们需要为表单设置method方式，<from method="post"> 即会调用doPost()方法。如果是<from method="get"> 就会调用doGet()方法。
可是Servlet说到底还是Java类，怎么会相应用户发出的请求呢？
这里就需要讲到web.xml的作用了。web.xml可以用来注册Servlet，能通过请求路径调用doPost()或者doGet()方法，最后再通过HttpResponse【在JSP中是response】对象反馈响应结果给用户
在web.xml中配置Servlet
新建一个包，包名为：model。在该包下新建一个Servlet类，名为Login
web.xml：
<?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" id="WebApp_ID" version="3.0">
<servlet>
<!-- 一定要先设置servlet-name -->
<servlet-name>/model/Login</servlet-name>
<servlet-class>model.Login</servlet-class>
</servlet>
<servlet-mapping>
<!-- servlet-name与上一个的servlet-name一样 -->
<servlet-name>/model/Login</servlet-name>
<!-- 请求截取的路径，如果路径某 项目名/Login，就会调用model.Login类中的方法 -->
<url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>
这样Servlet已经配置完成了，接下来介绍一个JavaBean。用于处理逻辑。我们在前台拿到登录需要的账号与密码，总是要进行判断的吧？判断的逻辑就写在JavaBean中。JavaBean就是一个类。
新建一个包，包名为：model，在该包下新建一个类，类名为Login
登录需要用户名【username】和密码【password】。所以我们为Login.java类加上username和password属性，并自动生成get和set方法。并写了一个check()方法用于判断登录的用户名与密码是否相同。
package model;
public class Login {
String username;
String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int check() {
if (username.equals(password))
return 1;
return 0;
}
}
接着，我们写login.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单开发</title>
<script type="text/javascript">
function check() {
// 获取输入框的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 获取显示两个错误信息的标签
var check_username = document.getElementById("check_username");
var check_password = document.getElementById("check_password");
if (username.length == 0) {
check_username.innerHTML = "用户名不能为空";
return false;
}
if (password.length == 0) {
check_username.innerHTML = "";
check_password.innerHTML = "密码不能为空";
return false;
}
return true;
}
</script>
</head>
<body>
<div id="content" align="center">
<p align="center">登录界面</p>
<form action="Login" method="post">
<!-- onblur()函数作用：在元素失去焦点的时候调用 -->
用户名:<input type="text" id="username" name="username" onblur="check()">
<font id="check_username" color="red"></font> <br> 密码:<input
type="password" id="password" name="password" onblur="check()">
<font id="check_password" color="red"></font> <br> <input
type="submit" onclick="return check()" value="登录">
</form>
</div>
</body>
</html>
这里主要看，我们表单提交的地址为Login，也就是在web.xml中看看哪个Servlet会处理Login这个字符串。查看web.xml中会发现是/model/Login类会处理这次请求，再看表单的method是post还是get，如果是post就会调用doPost()方法。如果是get就会调用doGet()方法，所以这里会调用/model/Login类中的doPost()方法。
现在我们打开/controll/Login类，去编写doPost()方法：
package controll;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet("/Login")
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
public Login() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
// 得到login.html表单的值
String username = request.getParameter("username");
String password = request.getParameter("password");
// 新建控制器的对象
controller.Login login = new controller.Login();
login.setUsername(username);
login.setPassword(password);
// 处理username和password的匹配情况，将值返回给check
int check = login.check();
if(check == 1) {
out.println("账号与密码相同");
// 将username存入session
HttpSession session = request.getSession();
session.setAttribute("username", username);
// 跳转到main.html
response.sendRedirect("main.jsp");
}
else {
// 弹出警告窗
out.println("<script>alert('账号与密码不同')</script>");
// 跳转到login.html
out.println("<script>window.location='login.html';</script>");
}
}
}
看到如果账号与密码相同，会跳转到main.jsp。而且已经把username的值存入了session。那我们就新建main.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String username = (String)session.getAttribute("username");
out.print("欢迎您," + username);
%>
整个web效果如下：
用户名为root、密码为root输入后
用户名为roo，密码为root输入后
整个工程下载地址：点击下载
扫一扫
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
