MVC= model 模型 + view视图 + controller 控制器
是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:
model;: entity实体类 和dao:接口实现类 (数据操作)
view:: jsp页面显示的
controller :servlet接收请求作出相应
MVC模式最早为Trygve Reenskaug提出,为施乐帕罗奥多研究中心(Xerox
PARC)的Smalltalk语言发明的一种软件设计模式。
MVC可对程序的后期维护和扩展提供了方便,并且使程序某些部分的重用提供了方便。而且MVC也使程序简化,更加直观。
注意: mvc不是只存在java中的 ,mvc 是一种设计模式(三层架构),B/s结构的软件几乎都采用了mvc的设计模式
mvc的功能在真正使用的时候一些功能是无法实现的 或者不需要的
MVC是所有程序遵循的开发模式,java中的操作在mvc中有一些无法实现
JavaWeb 的经历了JSP ModelOne 1.1、JSP ModelOne二代 1.2、JSP Model2三个时期。三层架构
JSP Model1 是javaweb早期的模型,他适合小型的Web项目 ,开发成本低 Model1第一代服务端里面只有jsp页面,所有操作都在jsp中完成 ,连访问数据库的API也在jsp页面中完成。
缺点是所有东西都在一起耦合度高,后期维护和扩展时非常麻烦。 目前开发中已经不用了 淘宝毕业设计中有不少这样写的
二代改进了javaBean jsp只负责页面显示和请求调度 javaBean负责业务逻辑
但是页面显示和控制器还是耦合在了jsp中
基本完成了完整的MVC结构
jsp:视图
servlet;控制层
javaBean:模型层
JSPModel2已经可以适合多人合作开发大型的Web项目 ,已经可以各司其职互不干涉, 有利于开发中的分工,有利于组件的重用。但是,Web项目的开发难度加大,同时对开发人员的技术要求也提高了。
三层架构:是javaweb提出,javaweb独有的
分:
表述层(Web层)、业务逻辑层(Business LOgic Service)、以及数据访问层(entity dao Date Access)
WEB层:包含JSP和Servlet等与WEB相关的内容;
业务层(service):业务层中不包含JavaWeb API,它只关心业务逻辑;
数据层:封装了对数据库的访问细节;
注意,在业务层中不能出现JavaWebAPI,例如request、response等。也就是说,业务层代码是可重用的,甚至可以应用到非Web环境中。业务层的每个方法可以理解成一个功能,例如转账业务方法。业务层依赖数据层,而Web层依赖业务层!
三层架构相对于model2不同点在多了一个service层 相当于吧JavaBean拆开了
在官网下载layui 解压复制上去
layui就是封装的方便操作前端样式的工具
学生表
1、通过工具类查询数据库内容
2、请求转发并携带数据过去
3、通过jstl的foreach 把内容查询出来
4、通过layui进行样式处理
@WebServlet("/student01/*")/*二级目录*/
public class StudentServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//模仿原码的请求分发的操作
/*做二级目录
* 获取二级目录
* 根据二级目录去做不同操作*/
String uri=req.getRequestURI();//取得请求的URL,但不包括请求之参数字符串,即servlet的HTTP地址。//crud/student01/findAll
System.out.println(uri);
String[] split = uri.split("/");//通过split工具 吧地址换成数组直接获取
System.out.println(split.length-1);
String s=split[split.length-1];
switch (s){
case "findAll":
findAll(req,resp);
break;
case "delStu":
delStu(req,resp);
break;
}
}
Istudent istudent=new StudentDao();
/**
* 1查询
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
List<Student> students=istudent.select();
req.setAttribute("stuobj",students);
req.getRequestDispatcher("/stu.jsp").forward(req,resp);
}
/**
* 2 删除
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void delStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.数组请求响应格式
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//2。获取id
String id=req.getParameter("id");
//删除
boolean b=istudent.delStuById(Integer.parseInt(id));
System.out.println(b);
//请求转发
//现在不需要请求转发 直接掉上面的方法就行
findAll(req,resp);
}}
注意:删除的改为了超链接
传递到后台的数据用超链接 或者 表单的 方式提交上去
参数从前台到后台的表现形式 要么追加到地址栏数据get,要么以数据快形式发送到后台post
3.新增
(1)我们想要一个表单,吧表单放在弹窗框
在引用layui的layer样式的模块
先引用layui 的layui.js<%–注意注意–%>
然后假载layui的layui的模块
4.修改
1、数据输出的时候有修改按钮
2、给修改按钮绑定事件
3、修改和新增共用一个弹出框表单后台需要判断是否是新增还是修改
根据id判断
可以在表单添加id框,如果是新增id框 没有值 如果是修改id框可以取到id值
4、点击修改按钮时要吧当前数据填充到表单中
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String requestURI = req.getRequestURI();
String[] split = requestURI.split("/");
String s=split[split.length-1];
switch (s){
case "findArr":
findArr(req,resp);
break;
case "delStu":
delStu(req,resp);
break;
case "addandupdate":
addandupdate(req,resp);
break;
}
}
IStu iStu=new IStuDao();
Student student=new Student();
protected void addandupdate(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String id = req.getParameter("ID");
if (id==null){
student.setStudentID(null);
}
if (id != null && !id .equals("")){
student.setStudentID(Integer.parseInt(id));
}
student.setStudentName(req.getParameter("username"));
student.setGender(req.getParameter("gender"));
student.setAge(Integer.parseInt(req.getParameter("Age")));
/*新增*/
if ("".equals(id)){
Integer a=iStu.insert(student);
}else {
Integer b=iStu.update(student);
}
findArr(req,resp);
}
<button class="layui-btn layui-btn-normal" id="btn">新增button>
<%--新增表--%>
<form class="layui-form" style="display:none;" action="student01/addandupdate" id="stuForm" >
<input id="ID" type="text" name="ID">
<div class="layui-form-item">
<label class="layui-form-label">输入姓名label>
<div class="layui-input-inline">
<input type="text" name="username" id="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">输入性别label>
<div class="layui-input-inline">
<input type="text" name="gender" id="gender" placeholder="请输入性别" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">输入年龄label>
<div class="layui-input-inline">
<input type="text" name="Age" id="Age" placeholder="输入年龄" autocomplete="off" class="layui-input">
div>
div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交button>
<button type="reset" class="layui-btn layui-btn-primary">重置button>
div>
div>
form>
script>
<script>
//设置弹窗
layui.use(['layer','jquery','form'], function(){
var layer = layui.layer;
var $=layui.jquery;
//添加按钮内容
btn.onclick=function (){
$("#stuForm")[0].reset();//清空表单里面的内容
layer.open({
type:1,
content:$('#stuForm'),
title:['成员信息','font-size"25px'],
anim:4,
skin:'layui-layer-moly'
});
}
/*点击的时候应该也获得*/
$(" table").on('click','.update',function (){
$("#stuForm")[0].reset();
layer.open({
type:1,层级
content:$('#stuForm'),//弹出跳转的地方
title:['成员信息','font-size"25px'],//标题 可以加样式
anim:4,
skin:'layui-layer-moly'
});
//获取这个按钮下的所有值 形成一个数组
var trArr=$(this).parent().parent().children();
.//吧这些值通过下标来判断
$("#ID").val(trArr[0].innerHTML);
$("#username").val(trArr[1].innerHTML);
$("#gender").val(trArr[2].innerHTML);
$("#Age").val(trArr[3].innerHTML);
})
});
script>
注意仔细看layui的内容