-
MVC案例分析
2026-08-12 22:17:22
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。MVC是一种模式,强制性的把应用程序的输入、处理和输出分开。下图所示模型、视图、控制器各自承担的任务。
视图:视图是用户看到并与之交互的界面。视图向用户显示相关的数据,并能接受用户的输入数据,但是它并不进行任何实际的业务处理。视图可以向模型查询业务状态,但不能改变模型。视图还能接受模型发出的数据更新时间,从而对用户界面进行同步更新。
模型:模型是应用程序的主体部分。模型标识业务数据和业务逻辑。就是业务流程/状态的处理以及业务规则的制定。一个模型能为多个视图提供数据。由于同一个模型可以被多个视图重用,所以提高了应用的课重用性。。业务流程的处理过程
对其它层来说是黑箱操作,模型接受视图请求的数据,并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。
控制器:控制器接受用户的输入并调用模型和视图去完成用户的需求。当Web用户单击Web页面中的提交按钮来发送html表单时,控制器接受请求并调用相应的模型组件去处理请求,然后调用相应的视图来显示模型返回的数据。
MVC处理过程:首先控制器接受用户的请求,并决定应该调用哪个模型来进行处理;然后模型根据用户请求进行相应的业务逻辑处理,并返回数据;最后控制器调用相应的视图来格式化模型返回的数据,并通过视图呈现给用户
MVC的适用范围:使用MVC需要精心的计划,由于它的内部原理比较复杂,所以需要花费一些时间去理解踏。将MVC运用到应用程序中,会带来额外的工作量,增加应用的复杂性,所以MVC不适合小型的应用程序。但对于开发存在大量的用户界面,并且业务逻辑复杂的大型应用程序,MVC将会使软件在健壮性、代码重用和结构方面上一个新的台阶。尽管在最初构建MVC框架时会花费一定的工作量,但从长远的角度来看,它会大大提法哦后期软件开发的效率
以最近写的一个系统的为例简述mvc的实现
View视图层:index.jsp model模型层:Studao的增删改查 controller控制器:servlet包下的所有文件
view层的index.jsp向控制器中相应的servlet传入数据,然后在控制器中选择model层Studao中的方法来对数据进行增删改查。
以增加数据为例:
view层:
index.jsp(js中触发事件下的offset为增加表单,offset1为修改表单,各自向控制器servlet传值,)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.SQLException"%>
<%@page import="com.util.*"%>
学生信息 <%
Statement stmt = null;
ResultSet rs = null;
Connection conn =null;
conn = DBUtil.getConn();
String SQL = "SELECT * FROM Student";
stmt = conn.createStatement();
rs = stmt.executeQuery(SQL);
%>
学号 姓名 专业 班级 操作 <% while(rs.next()){ %>
<%= rs.getString("num") %> <%= rs.getString("name") %> <%= rs.getString("zhuanye") %> <%= rs.getString("banji") %> <%} %>
<%DBUtil.close(rs,stmt, conn); %>
function shanchu(id){
if (confirm("确认要删除此条记录吗?")) {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "",//预期服务器返回的数据类型
url: "servlet/Deletestudent.do" ,//url
data: {'id':id},
success: function (result) {
alert("删除成功");
window.location.reload() //刷新页面
},
error : function() {
alert("删除异常!");
}
});
}
}
layui.use('layer', function(){ //独立版的layer无需执行这一句
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
var id=0;
var name1='';
var zhuanye1='';
var banji1='';
//触发事件
var active = {
offset: function(othis){
var type = othis.data('type')
,text = othis.text();
layer.open({
type: 1
,offset: type //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
,id: 'layerDemo'+type //防止重复弹出
,content: '
',btn: '添加信息'
,btnAlign: 'c' //按钮居中
,shade: 0 //不显示遮罩
,yes: function(){
//layer.closeAll();
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "",//预期服务器返回的数据类型
url: "servlet/Addstudent.do" ,//url
data: $('#form').serialize(),
success: function (result) {
alert("添加成功");
layer.closeAll();
window.location.reload() //刷新页面
},
error : function() {
alert("异常!");
}
});
}
});
},
offset1: function(othis){
var type = othis.data('type')
,text = othis.text();
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "servlet/Selectstudent.do" ,//url
data: {'id':id},
success: function (result) {
name1=result.name;
zhuanye1=result.zhuanye;
banji1=result.banji;
layer.open({
type: 1
,offset: type //具体配置参考:http://www.layui.com/doc/modules/layer.html#offset
,id: 'layerDemo'+type //防止重复弹出
,content: '
',btn: '修改信息'
,btnAlign: 'c' //按钮居中
,shade: 0 //不显示遮罩
,yes: function(){
//layer.closeAll();
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "",//预期服务器返回的数据类型
url: "servlet/Updatestudent.do" ,//url
data: $('#form').serialize(),
success: function (result) {
alert("修改成功");
layer.closeAll();
window.location.reload() //刷新页面
id=0
},
error : function() {
alert("修改异常!");
id=0
}
});
}
});
},
error : function() {
alert("异常!");
}
});
}
};
$('#layerDemo .layui-btn').on('click', function(){
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
$('#layerDemo1 .layui-btn').on('click', function(){
id=this.id
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位,且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
//表单取值
layui.$('#LAY-component-form-getval').on('click', function(){
var data = form.val('example');
alert(JSON.stringify(data));
});
});
});
控制器:
控制器收到view层传来的数据,然后调用model层中的方法来吧数据存储到数据库中。
Addstudent.java
package com.servlet;
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;
import com.dao.Studao;
public class Addstudent extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String id=request.getParameter("id");
String name=request.getParameter("name");
String zhuanye=request.getParameter("zhuanye");
String banji=request.getParameter("banji");
int id1=Integer.parseInt(id);
Studao dao=new Studao();
dao.add(id1, name, zhuanye, banji);
}
}
model层:
model层对数据库进行操作(连接数据库,增删改查等)
Studao.java
package com.dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.bean.Stu;
import com.util.DBUtil;
public class Studao {
public void add(int id,String name,String zhuanye,String banji) {
Connection conn =null;
Statement stmt =null;
String sql="insert into student (num,name,zhuanye,banji) values('"+id+"','"+name+"','"+zhuanye+"','"+banji+"')";
conn=DBUtil.getConn();
try {
stmt=conn.createStatement();
stmt.executeUpdate(sql);
DBUtil.close(stmt, conn);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void delete(int id) {
Connection conn =null;
Statement stmt =null;
String sql="delete from student where num='"+id+"'";
conn=DBUtil.getConn();
try {
stmt=conn.createStatement();
stmt.executeUpdate(sql);
DBUtil.close(stmt, conn);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void update(int id1, String name, String zhuanye, String banji) {
// TODO Auto-generated method stub
Connection conn =null;
Statement stmt =null;
String sql="update student set name='"+name+"',zhuanye='"+zhuanye+"',banji='"+banji+"' where num='"+id1+"'";
conn=DBUtil.getConn();
try {
stmt=conn.createStatement();
stmt.executeUpdate(sql);
DBUtil.close(stmt, conn);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public List
select(int id1) { // TODO Auto-generated method stub
Connection conn =null;
ResultSet rs = null;
Statement stmt =null;
String sql="select * from student where num='"+id1+"'";
conn=DBUtil.getConn();
List
list = new ArrayList (); try {
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while(rs.next()) {
Stu stu=new Stu();
stu.setId(id1);
stu.setName(rs.getString(2));
stu.setZhuanye(rs.getString(3));
stu.setBanji(rs.getString(4));
list.add(stu);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
}