jsp-jdbc的链接实现

最新推荐文章于 2024-03-24 19:24:14 发布

年华空泛

最新推荐文章于 2024-03-24 19:24:14 发布

阅读量156

点赞数

分类专栏：学习足迹

本文链接：https://blog.csdn.net/qq_51576943/article/details/111873698

版权

学习足迹专栏收录该内容

30 篇文章 0 订阅

订阅专栏

练习

登陆界面
列表页面
控制层页面
总结

登陆界面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/28
  Time: 10:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.2</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body class="index">
<!-- 顶部开始 -->
<div class="container">
    <div class="logo">
        <a href="./index.html">X-admin v2.2</a></div>
    <div class="left_open">
        <a><i title="展开左侧栏" class="iconfont">&#xe699;</i></a>
    </div>
    <ul class="layui-nav left fast-add" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">+新增</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd>
                    <a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">
                        <i class="iconfont">&#xe6a2;</i>弹出最大化</a></dd>
                <dd>
                    <a onclick="xadmin.open('弹出自动宽高','http://www.baidu.com')">
                        <i class="iconfont">&#xe6a8;</i>弹出自动宽高</a></dd>
                <dd>
                    <a onclick="xadmin.open('弹出指定宽高','http://www.baidu.com',500,300)">
                        <i class="iconfont">&#xe6a8;</i>弹出指定宽高</a></dd>
                <dd>
                    <a onclick="xadmin.add_tab('在tab打开','member-list.html')">
                        <i class="iconfont">&#xe6b8;</i>在tab打开</a></dd>
                <dd>
                    <a onclick="xadmin.add_tab('在tab打开刷新','member-del.html',true)">
                        <i class="iconfont">&#xe6b8;</i>在tab打开刷新</a></dd>
            </dl>
        </li>
    </ul>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">admin</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd>
                    <a onclick="xadmin.open('个人信息','http://www.baidu.com')">个人信息</a></dd>
                <dd>
                    <a onclick="xadmin.open('切换帐号','http://www.baidu.com')">切换帐号</a></dd>
                <dd>
                    <a href="./login.html">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item to-index">
            <a href="/">前台首页</a></li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
<div class="left-nav">
    <div id="side-nav">
        <ul id="nav">
            <li>
                <a onclick="xadmin.add_tab('会员列表','member-list.jsp')">
                    <i class="iconfont">&#xe6a7;</i>
                    <cite>会员列表</cite></a>
            </li>
        </ul>
    </div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
        <ul class="layui-tab-title">
            <li class="home">
                <i class="layui-icon">&#xe68e;</i>我的桌面</li></ul>
        <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
            <dl>
                <dd data-type="this">关闭当前</dd>
                <dd data-type="other">关闭其它</dd>
                <dd data-type="all">关闭全部</dd></dl>
        </div>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe src='./welcome.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
            </div>
        </div>
        <div id="tab_show"></div>
    </div>
</div>
<div class="page-content-bg"></div>
<style id="theme_style"></style>
<!-- 右侧主体结束 -->
<!-- 中部结束 -->
<script>//百度统计可去掉
var _hmt = _hmt || []; (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>

列表页面

<%@ page import="java.util.List" %>
<%@ page import="cn.alex.bean.Heros" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/28
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<%
    //先去获取session中的存储的结果
    Object obj = session.getAttribute("herosList");
    if(obj==null){
        //去控制层请求数据
        response.sendRedirect("control.jsp?option=query");
        return;
    }
    List<Heros> herosList = (List<Heros>)obj;
    //移除session中的数据，保持session中的数据每次都是最新的
    session.removeAttribute("herosList");
%>

<div class="x-nav">

    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','./member-add.jsp',600,400)"><i class="layui-icon"></i>添加</button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form">
                        <thead>


                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>联系方式</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <%
                            //遍历数组进行渲染
                            for(Heros heros : herosList){
                        %>
                        <tr>
                            <td><%=heros.getId()%></td>
                            <td><%=heros.getName()%></td>
                            <td><%=heros.getAge()%></td>
                            <td><%=heros.getSex()%></td>
                            <td><%=heros.getPhone()%></td>
                            <td class="td-manage">
                                <a title="编辑"  onclick="xadmin.open('编辑','member-edit.html',600,400)" href="javascript:;">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a title="删除" onclick="member_del(this,<%=heros.getId()%>)" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                        <%
                            }
                        %>

                    </table>
                </div>
                <div class="layui-card-body ">
                    <div class="page">
                        <div>
                            <a class="prev" href="">&lt;&lt;</a>
                            <a class="num" href="">1</a>
                            <span class="current">2</span>
                            <a class="num" href="">3</a>
                            <a class="num" href="">489</a>
                            <a class="next" href="">&gt;&gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function(data){

            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });

    /*用户-停用*/
    function member_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){

            if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

            }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
            location.href = "control.jsp?option=del&id="+id;
        });
    }



    function delAll (argument) {
        var ids = [];

        // 获取选中的id
        $('tbody input').each(function(index, el) {
            if($(this).prop('checked')){
                ids.push($(this).val())
            }
        });

        layer.confirm('确认要删除吗？'+ids.toString(),function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
</html>

控制层页面

<%@ page import="cn.alex.bean.Heros" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.Connection,java.sql.PreparedStatement,java.sql.ResultSet,java.sql.DriverManager,java.sql.SQLException" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/28
  Time: 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%

    //设置请求编码
    request.setCharacterEncoding("UTF-8");
    //获取当前操作类型
    String option = request.getParameter("option");
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    if("query".equals(option)){
        //创建集合对象用于包装查询出来的对象数据
        List<Heros> herosList = new ArrayList<>();
        try{
            //注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            //连接数据库
            String url = "jdbc:mysql:///alexwork?characterEncoding=UTF-8&serverTimezone=Asia/Shanghai";
            conn = DriverManager.getConnection(url,"root","ff123456");
            //预编译sql
            String sql = "select * from heros";
            ps = conn.prepareStatement(sql);
            //执行SQL
            rs = ps.executeQuery();
            //处理结果集
            while(rs.next()){
                //创建对象实例来接受数据。
                Heros heros = new Heros();
                heros.setId(rs.getInt(1));
                heros.setName(rs.getString(2));
                heros.setAge(rs.getInt(3));
                heros.setSex(rs.getString(4));
                heros.setPhone(rs.getString(5));
                //每当获取一个对象就添加一个
                herosList.add(heros);
            }
            //将数据存放到session作用域中，以方便其他页面进行使用
            session.setAttribute("herosList",herosList);
        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try{
                if(rs!=null){
                    rs.close();
                }
                if(ps!=null){
                    ps.close();
                }
                if(conn!=null){
                    conn.close();
                }
            }catch(SQLException e){
                e.printStackTrace();
            }
        }
        //保证上述代码执行完毕之后才会执行跳转
        response.sendRedirect("member-list.jsp");
    }else if("del".equals(option)){
        //获取传输的id值
        String id = request.getParameter("id");
        //创建集合对象用于包装查询出来的对象数据
        List<Heros> herosList = new ArrayList<>();
        try{
            //注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            //连接数据库
            String url = "jdbc:mysql:///alexwork?characterEncoding=UTF-8&serverTimezone=Asia/Shanghai";
            conn = DriverManager.getConnection(url,"root","ff123456");
            //预编译sql
            String sql = "delete from heros where id=?";
            ps = conn.prepareStatement(sql);
            ps.setInt(1,Integer.valueOf(id));
            //执行SQL
            ps.executeUpdate();


        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try{
                if(rs!=null){
                    rs.close();
                }
                if(ps!=null){
                    ps.close();
                }
                if(conn!=null){
                    conn.close();
                }
            }catch(SQLException e){
                e.printStackTrace();
            }
        }
        //保证上述代码执行完毕之后才会执行跳转
        response.sendRedirect("member-list.jsp");
    }

%>

总结

使用layui搭建一个登陆界面和列表界面，在控制层连接数据库获取MySQL数据库中的内容，将其在页面中展示。通过页面操作进行增删改查的操作。
思路：
1.在控制层中链接数据库
----1.1导入jar包
----1.2注册驱动
----1.3连接数据库获取Connection对象
----1.4定义和预编译sql语句进行操作
----1.5根据不同的功能得到不通的返回结果。
----1.6在数据库的工作完成之后一定要记得关闭流对象
2.在web项目jsp文件中使用<%%>来写java脚本，实现在同一页面的数据传递和获取，在此过程中需要注意愈发的格式和规范使用。
3.首先需要实现的是查询功能，这里的sql语句是固定的，不需要预编译，在我们执行我那sql语句进行查询得到的是一个结果子集，他的每一个元素是数据库中的一行数据，因此我们创建一个实体类来接受这行数据，每次便利一行即一个对象的全部内容后，将其设定为一个对象存入一个List<定义的实体类>集合中。
4.使用session对象进行数据上传，在整个结果子集便利完成之后，我们将这个子集就完整的传到了session中，使用request跳转到列表界面。
5.在列表界面获取session对象中的值，如果是第一次获取则为空，因此需要先进行判断，如果为空进行获取反之不进行获取。同时为了保证我们的表格中的内容永远是和数据库保持一致即实时刷新，需要在获取session中的内容后进行清空。从而使得每次刷新列表界面都是从数据库实时获取的内容。

年华空泛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp-jdbc的链接实现

练习登陆界面列表页面控制层页面总结登陆界面<%-- Created by IntelliJ IDEA. User: Administrator Date: 2020/12/28 Time: 10:48 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %&.
复制链接

扫一扫