内包含案例，基于jsp+servlet的：MVC模式计算器；MVC模式登陆

第十一章 Servlet MVC模式

模型-视图-控制器（model-view-controller），简称MVC。MVC是一种先进的设计模式，它的核心思想是有效地组合“视图”、“模型”和“控制器”。掌握MVC模式对于设计合理的Web应用框架有着十分重要的意义。

MVC是一种通过三个不同部分构造一个软件或组件的理想办法：

  • l  模型（model）用于存储数据的对象
  • l  视图（view）向控制器提交所需数据、显示模型中的数据
  • l  控制器（controller）负责具体的业务逻辑操作，即控制器根据视图提出的要求对数据做出处理，将有关结果存储到模型中，并负责让模型和视图进行必要的交互，当模型中的数据变化时，让视图更新显示。

从面向对象的角度看，MVC结构可以使程序更具有对象化特性，也更容易维护和扩展。

在JSP技术中，“视图”、“模型”和“控制器”的具体实现如下：

l  模型   一个或多个Javabean对象，用于存储数据，Javabean主要提供简单的setXXX方法和getXXX方法，在这些方法中不涉及对数据的具体处理细节，以便增强模型的通用性。

l  视图   一个或多个JSP页面，其作用主要是向控制器提交必要的数据和为模型提供数据显示，JSP页面主要使用HTML标记和Javabean标记来显示数据。

l  控制器   一个或多个servlet对象，根据视图提交的要求进行数据处理操作，并将有关的结果存储到Javabean中，然后servlet使用重定向方式请求视图中的某个JSP页面更新显示，即让该JSP页面通过使用Javabean标记显示控制器存储在Javabean中的数据。

 

JSP开发web项目的两种模型（Model1/Model2)

Model1（JSP+JavaBeans模式）：

  • 使用JSP+JavaBeans将页面显示和业务逻辑处理分开
  • JSP实现页面显示，响应请求并将结果返回给客户
  • JavaBean对象保存数据和实现业务逻辑

优点：实现了页面显示与业务逻辑的分离

缺点：需要在JSP页面控制流程转向并且调用JavaBean代码；业务逻辑复杂时，JSP编写变得复杂

案例

Jsp+javaBeans模式简单计算器：

Calculator.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>calculator</title>

<script type="text/javascript">

    function checkForm(){

// 对需要校验字段 添加 id 属性

        var first = document.getElementById("first").value;

var second = document.getElementById("second").value;

var operator = document.getElementById("operator").value;

// 判断参数必须为数字

        if(isNaN(first) || isNaN(second)){ // isNaN is not a number

alert("输入参数 必须为数字！");

return false;

}

if(second==0 && operator == '/'){

alert("除数不能为0！");

return false;

}

}

</script>

</head>

<body>

<!-- 计算器页面 -->

<!-- 计算结果 -->

<jsp:useBean id="calculator" class="com.silvan.pojo.CalculatorDemo1" scope="page"></jsp:useBean>

<!-- 当用户提交form 自动封装 数据 -->

<jsp:setProperty property="*" name="calculator"/>

<h3>计算结果是 ：${calculator.firstNum } ${calculator.operator } ${calculator.secondNum } = ${calculator.result }</h3>

<hr/>

<!-- 计算form表单 -->

<h3>简单的计算器</h3>

<form action="/lesson11/calculator.jsp" method="post" onsubmit="checkForm();">

<table>

<tr>

<td>第一个参数</td>

<td>

<!-- 使用 setProperty * form输入项name 必须和 javabean类属性一致 -->

<input type="text" name="firstNum" id="first"/>

</td>

</tr>

<tr>

<td>运算符</td>

<td>

<select name="operator" id="operator">

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select>

</td>

</tr>

<tr>

<td>第二个参数</td>

<td>

<input type="text" name="secondNum" id="second" />

</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="计算"/>

</td>

</tr>

</table>

</form>

</body>

</html>

CalculatorDemo1.java

package com.silvan.pojo;

/**

* 計算類

* @author Administrator

*/

public class CalculatorDemo1 {

private String firstNum = "0"; // 参数一

private String secondNum = "0"; // 参数二

private String operator = "+"; // 运算符

private double result; // 运算结果

public String getFirstNum() {

return firstNum;

}

public void setFirstNum(String firstNum) {

this.firstNum = firstNum;

}

public String getSecondNum() {

return secondNum;

}

public void setSecondNum(String secondNum) {

this.secondNum = secondNum;

}

public String getOperator() {

return operator;

}

public void setOperator(String operator) {

this.operator = operator;

}

public double getResult() {

// 将运算逻辑写到这里

Double a = Double.parseDouble(firstNum);

Double b = Double.parseDouble(secondNum);

Double result = 0.0;

if (operator.equals("+")) {

result = a + b;

} else if (operator.equals("-")) {

result = a - b;

} else if (operator.equals("*")) {

result = a * b;

} else if (operator.equals("/")) {

result = a / b;

}

return result;

}

public void setResult(double result) {

this.result = result;

}

}

模型2（MVC模式也就是JSP+JavaBeans+servlet模式）

  • 将模型1中JSP嵌入的流程控制和部分逻辑处理代码提取至一个单独的角色：控制器
  • 模型2是MVC架构模式在WEB开发中的应用

案例1

JSP中的MVC模式计算器

视图层Calculator.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>calculator</title>

<script type="text/javascript">

    function checkForm(){

// 对需要校验字段 添加 id 属性

        var first = document.getElementById("first").value;

var second = document.getElementById("second").value;

var operator = document.getElementById("operator").value;

// 判断参数必须为数字

        if(isNaN(first) || isNaN(second)){ // isNaN is not a number

alert("输入参数 必须为数字！");

return false;

}

if(second==0 && operator == '/'){

alert("除数不能为0！");

return false;

}

}

</script>

</head>

<body>

<!-- 计算form表单 -->

<h3>简单的计算器</h3>

<form action="/lesson11/CalculatorServletDemo2" method="post" onsubmit="checkForm();">

<table>

<tr>

<td>第一个参数</td>

<td>

<!-- 使用 setProperty * form输入项name 必须和 javabean类属性一致 -->

<input type="text" name="firstNum" id="first"/>

</td>

</tr>

<tr>

<td>运算符</td>

<td>

<select name="operator" id="operator">

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select>

</td>

</tr>

<tr>

<td>第二个参数</td>

<td>

<input type="text" name="secondNum" id="second" />

</td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="计算"/>

</td>

</tr>

</table>

</form>

</body>

</html>

控制层CalculatorServletDemo2.java

package com.silvan.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.silvan.pojo.CalculatorDemo2;

public class CalculatorServletDemo2 extends HttpServlet {

/**

* Constructor of the object.

*/

public CalculatorServletDemo2() {

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 {

//取出计算值

double firstNum = Double.parseDouble(request.getParameter("firstNum"));

double secondNum = Double.parseDouble(request.getParameter("secondNum"));

String operator = request.getParameter("operator");

double result = 0;

//计算结果

if (operator.equals("+")) {

result = firstNum + secondNum;

} else if (operator.equals("-")) {

result = firstNum - secondNum;

} else if (operator.equals("*")) {

result = firstNum * secondNum;

} else if (operator.equals("/")) {

result = firstNum / secondNum;

}

//将数据存入bean中

CalculatorDemo2 dataBean = new CalculatorDemo2();

dataBean.setFirstNum(firstNum);

dataBean.setSecondNum(secondNum);

dataBean.setOperator(operator);

dataBean.setResult(result);

request.setAttribute("bean", dataBean);

//跳转到结果显示界面

request.getRequestDispatcher("/demo2/showResult.jsp").forward(request, response);

}

/**

* 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 {

doGet(request,  response);

}

/**

* Initialization of the servlet. <br>

*

* @throws ServletException if an error occurs

*/

public void init() throws ServletException {

// Put your code here

}

}

模型层CalculatorDemo2.java

package com.silvan.pojo;

public class CalculatorDemo2 {

private double firstNum; // 参数一

private double secondNum; // 参数二

private String operator; // 运算符

private double result; // 运算结果

public double getFirstNum() {

return firstNum;

}

public void setFirstNum(double firstNum) {

this.firstNum = firstNum;

}

public double getSecondNum() {

return secondNum;

}

public void setSecondNum(double secondNum) {

this.secondNum = secondNum;

}

public String getOperator() {

return operator;

}

public void setOperator(String operator) {

this.operator = operator;

}

public double getResult() {

return result;

}

public void setResult(double result) {

this.result = result;

}

}

视图层showResult.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>calculator</title>

</head>

<body>

<h3>运算结果</h3>

<jsp:useBean id="bean" type="com.silvan.pojo.CalculatorDemo2" scope="request"></jsp:useBean>

<jsp:getProperty property="firstNum" name="bean"/>

<jsp:getProperty property="operator" name="bean"/>

<jsp:getProperty property="secondNum" name="bean"/>

=

<jsp:getProperty property="result" name="bean"/>

</body>

</html>

案例2

MVC模式实现登录

Login.jsp

<body>

<h1>登陆表单</h1>

<h3 style="color:red;">${msg }</h3>

<form action="/login/LoginServlet" method="post">

<table>

<tr>

<td>用户名</td>

<td><input type="text" name="username" />

</td>

</tr>

<tr>

<td>密码</td>

<td><input type="password" name="password" />

</td>

</tr>

<tr>

<td colspan="2"><input type="submit" value="登陆" /></td>

</tr>

</table>

</form>

</body>

Web.xml

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>com.silvan.servlet.LoginServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

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

</servlet-mapping>

LoginServlet.java

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 解决编码问题

request.setCharacterEncoding("utf-8");

// 接收表单参数

String username = request.getParameter("username");

String password = request.getParameter("password");

// 将form 数据封装 javabean对象

User user = new User();

user.setUserName(username);

user.setPassWord(password);

// 传递数据javabean 给 处理javabean

// 使用模型完成对用户验证 去创建一个UserModel对象，调用对应的方法

UserService userService = new UserService();

if (userService.checkUser(user)) {

// 把用户名放入session,以备后用

request.getSession().setAttribute("username", username);

// 合法

// 转向，跳转方法效率不高

// response.sendRedirect("welcome.jsp");

// 因为sendRedirect方法效率不高，在公司常常使用转发方法

// getRequestDispatcher方法效率高，并且可以把request请求信息往下转发

request.getRequestDispatcher("/index.jsp").forward(request,

response);

} else {

// 不合法

request.setAttribute("msg", "用户名或密码错误！");

request.getRequestDispatcher("/Login.jsp").forward(request,

response);

}

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

User.java

public class User {

private String userName;

private String passWord;

get/set……

}

LoginService.java

/**

* 业务逻辑层，一般归类于模型层

* @author Administrator

*

*/

public class UserService {

// 验证用户是否存在

public boolean checkUser(User user) {

String driver = "oracle.jdbc.driver.OracleDriver";

String url = "jdbc:oracle:thin:@localhost:1521:XE";

String username = "zhou";

String password = "123456";

boolean flag = false;

Connection conn = null;

PreparedStatement pstmt = null;

ResultSet rs = null;

try {

//加载数据库连接驱动类

Class.forName(driver);

//获取数据库连接

conn = DriverManager.getConnection(url,username,password);

// 执行查询

String sql = "select * from USER1 where username='"

+ user.getUserName() + "'";

// 创建prepareStatement对象

pstmt = conn.prepareStatement(sql);

//得到查询结果

rs = pstmt.executeQuery();

System.out.println("sql=" + sql);

//处理查询结果

if (rs.next()) {

if (user.getPassWord().equals(rs.getString("pwd"))) {

// 登录成功

// 将得到的数据传给下一个页面

// 1，cookie 2,session 3 response.sendRedirect

flag = true;

}

}

} catch (Exception e) {

e.printStackTrace();

} finally {

//关闭数据库连接

try {

if (pstmt!=null){

pstmt.close();

}

if(conn!=null){

conn.close();

}

if(rs!=null){

rs.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

}

return flag;

}

}

Index.jsp

<body>

${username }登录成功！

</body>

最新文章

  1. document.compatMode
  2. 全栈开发必备的10款 Sublime Text 插件
  3. Reading With Purpose: A grand experiment
  4. angular.element函数
  5. 如何快速读懂大型C++程序代码
  6. docker es and es cluster
  7. CXF之一 基础理论介绍
  8. hdu3584 树状数组
  9. python参考手册 Read
  10. JS1 js获取dom元素方法
  11. 转载——CLR标量函数、表值函数和聚合函数(UDA)
  12. c++11介绍
  13. 20151214--JSTL
  14. 在将 varchar 值 &#39;2,7&#39; 转换成数据类型 int 时失败
  15. Log in Spring
  16. php error _report
  17. ubuntu无法进入桌面的修复
  18. Elasticsearch集成HanLP分词器-个人学习
  19. win-Linux文件脚本迁移过程中的问题 syntax error: unexpected end of file
  20. 随机森林(Random Forest)

热门文章

  1. 接口(interface) 可以 new（）吗???~
  2. js 阻止冒泡
  3. [HTML5] Semantics for accessibility
  4. 【Swift】学习笔记(六)——函数
  5. 初次使用Android Studio时的配置
  6. php中的self关键字和this关键字的区别和联系
  7. Session会在浏览器关闭后消失吗？
  8. IIS之虚拟目录学习
  9. canvas绘制饼型图
  10. zeromq-4.1.2在windows下的编译