javaweb--MVC和增删改查

MVC和增删改查

1、MVC

1.1、什么是MVC

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

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

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

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页面中完成。
缺点是所有东西都在一起耦合度高，后期维护和扩展时非常麻烦。 目前开发中已经不用了   淘宝毕业设计中有不少这样写的

1.3.3、JSP Model1 第二代

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

1.3.4、JspModel2

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

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

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拆开了

导入layui

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

web增删改查 基础1.0版本

学生表

查

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

增加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>

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