javaweb--MVC

2022-03-17 11:30:16

MVC和增删改查

1、MVC

1.1、什么是MVC

MVC= model 模型 + view视图 + controller 控制器

是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：
model；： entity实体类 和dao：接口实现类 （数据操作）
view：： jsp页面显示的
controller ：servlet接收请求作出相应

MVC模式最早为Trygve Reenskaug提出，为施乐帕罗奥多研究中心（Xerox
PARC）的Smalltalk语言发明的一种软件设计模式。

javaweb--MVC

1.2、MVC有什么用

MVC可对程序的后期维护和扩展提供了方便，并且使程序某些部分的重用提供了方便。而且MVC也使程序简化，更加直观。

注意： mvc不是只存在java中的 ，mvc 是一种设计模式（三层架构），B/s结构的软件几乎都采用了mvc的设计模式
mvc的功能在真正使用的时候一些功能是无法实现的 或者不需要的
MVC是所有程序遵循的开发模式，java中的操作在mvc中有一些无法实现

1.3、MVC的版本有哪些

1.3.1、版本

JavaWeb 的经历了JSP ModelOne 1.1、JSP ModelOne二代 1.2、JSP Model2三个时期。三层架构

1.3.2、第一代

JSP Model1 是javaweb早期的模型，他适合小型的Web项目 ，开发成本低 Model1第一代服务端里面只有jsp页面，所有操作都在jsp中完成 ，连访问数据库的API也在jsp页面中完成。
缺点是所有东西都在一起耦合度高，后期维护和扩展时非常麻烦。 目前开发中已经不用了   淘宝毕业设计中有不少这样写的

javaweb--MVC

1.3.3、JSP Model1 第二代

二代改进了javaBean   jsp只负责页面显示和请求调度 javaBean负责业务逻辑 
但是页面显示和控制器还是耦合在了jsp中

javaweb--MVC

1.3.4、JspModel2

基本完成了完整的MVC结构
jsp：视图
servlet；控制层
javaBean：模型层

JSPModel2已经可以适合多人合作开发大型的Web项目 ，已经可以各司其职互不干涉， 有利于开发中的分工，有利于组件的重用。但是，Web项目的开发难度加大，同时对开发人员的技术要求也提高了。
javaweb--MVC

1.4、model2过渡的三层架构

三层架构：是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拆开了

javaweb--MVC

导入layui

在官网下载layui 解压复制上去
layui就是封装的方便操作前端样式的工具

web增删改查 基础1.0版本

学生表

查

1、通过工具类查询数据库内容
2、请求转发并携带数据过去
3、通过jstl的foreach 把内容查询出来
4、通过layui进行样式处理
javaweb--MVC
javaweb--MVC

查询+删除

@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
javaweb--MVC

增加and修改

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>

javaweb--MVC

<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的内容

上一篇：Layui 之动态表格排序


下一篇：layui的数据表格时间格式自定义， layui.util.toDateString的使用