天天看點
傳回

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

看了網上不少文章，沒有一篇寫清楚，冒火得很，很想提武器火拼了，自己寫清楚，未完，稍後更新....

本節主要是讓讀者初步熟悉IDE和WEB應用的開發方法，後續文章 實戰4 會介紹 另外一種方式，使用架構來把SQL語句和操作全部封裝為類，建議實際建立項目時用實戰4的方法。

1、安裝apache-tomcat-9.0.35，下載下傳https://tomcat.apache.org/download-90.cgi   (下載下傳安裝包)

2、IntelliJ IDEA建立 項目->java EE->Web Application   ,取名為myweb

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

3、下載下傳 Easy UI     http://www.jeasyui.net/download/jquery.html

下載下傳後把 jquery-easyui-1.7.0 整個目錄拷貝入 myweb目錄，這時傳回打開 IntelliJ IDEA，可見IDE中已有 jquery-easyui-1.7.0

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

4、IntelliJ IDEA  web目錄下建立HTML 檔案index

代碼如下：

<html contentType="text/html"; language="java" ; >


<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/default/easyui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/demo.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

    <meta charset="UTF-8">
    <title>web資料通路平台</title>

    <style type="text/css">
        body {
            font-family: microsoft yahei;
        }
    </style>
</head>
<body class="easyui-layout">
<div region="north" style="height: 78px; background-color: #E0ECFF">
</div>
<div region="west" style="width: 200px" title="導航菜單" split="true">
</div>
<div data-options="region:'center'" style="background:#eee;">
</div>
<div region="south" style="height: 25px;padding: 5px" align="center">
</div>
</body>
</html>

/

其中這段代碼——

<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/default/easyui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/demo.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

<script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.min.js"></script>

<script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

為引用  jquery-easyui-1.7.0 的檔案，自己的檔案中拷如就可以了。

5、IntelliJ IDEA  web目錄下 index.html  檔案上點 右鍵 選 open in browse ,即可

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

可在浏覽器中見我們寫好的index.html  運作效果

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

到此我們基本完成了一個web應用構架，稍後我會繼續更新，完成  資料通路頁面的建立....靜待

我們建立一個 main.asp的檔案

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

main.asp的檔案

<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>web資料通路和JDBC 封裝 主界面</title>

    <!-- 權限驗證 -->
    <%
      /*  if(session.getAttribute("currentUser")==null){
              response.sendRedirect("index.jsp");
            return;
        }   */
    %>
    <!-- 引用的包 -->
    <link rel="stylesheet" type="text/css" href="../web/jquery-easyui-1.7.0/themes/default/easyui.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="../web/jquery-easyui-1.7.0/themes/icon.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
    <script type="text/javascript" src="../web/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="../web/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../web/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

        /* 重置操作
            function resetValue(){
            document.getElementById("userName").value="";
            document.getElementById("password").value="";
        }*/
        $(function(){
            // 資料,一級菜單
            var treeData=[{
                text:"web資料通路和JDBC資料封裝",
                children:[{
                    text:"資料通路",
                    attributes:{
                        url:"sjll.jsp"
                    }
                },{
                    text:"資料更新",
                    attributes:{
                        url:"studentManage.jsp"
                    }
                },{
                    text:"關于",
                    attributes:{
                        url:"about.jsp"
                    }
                }],
            }];

            // 執行個體化樹菜單
            $("#tree").tree({
                data:treeData,
                lines:true,//線
                //單擊事件
                onClick:function(node){
                    if(node.attributes){
                        openTab(node.text,node.attributes.url);
                    }
                }
            });

            // 新增Tab，單擊一級菜單時在右邊顯示
            function openTab(text,url){
                if($("#tabs").tabs('exists',text)){//防止重複點選事件
                    $("#tabs").tabs('select',text);
                }else{
                    var content="<iframe frame scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
                    $("#tabs").tabs('add',{
                        title:text,
                        closable:true,
                        content:content
                    });
                }
            }
        });
    </script>
</head>
<body class="easyui-layout">
<!-- 北邊布局 -->
<div region="north" style="height:80px; background-color: #E0EDFF;" >
    <div align="left" style="width:80%; float:left"><img src="images/main.jpg"></div>
    <div style="padding-top: 50px;padding-right: 20px;">目前使用者：&nbsp;<font color="red" >${currentUser.userName }</font>
        <a href="" target="_blank" rel="external nofollow"  style="text-decoration: none; color:red;">退出</a>
    </div>
</div>
<!-- 中間布局 -->
<div region="center">
    <div class="easyui-tabs" fit="true"  id="tabs">
        <div title="首頁">
            <div align="center" style="padding-top:100px;"><font color="red" size="10">歡迎使用</font></div>
        </div>
    </div>
</div>
<!-- 西邊布局 -->
<div region="west" style="width:150px;" title="導航菜單" split="true">
    <ul id="tree"></ul>
</div>
<!-- 南邊布局 -->
<%
    Calendar calendar=Calendar.getInstance();
    int year=calendar.get(Calendar.YEAR);
%>
<div region="south" style="height:25px" align="center">fxd程式設計 版權所有 &copy;2017-<%=year %> </a> 聯系郵箱：[email protected]</div>

</body>
</html>

資料通路頁面 sjll.asp

1、先在File->project structure->libraries  中點 + 号，引入mssql-jdbc-7.0.0.jre8.jar   ,MSSQLSERVER  JDBC包。

2、引入上篇文章中，我們自定義類  JdbcUtils.JdbcUtils 

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。
IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

/

<%@ page language="java" contentType="text/html; charset=UTF-8"

         pageEncoding="UTF-8"%>

<%@ page language="java" import="java.util.*" %>

<%@ page import="JdbcUtils.JdbcUtils"%>

<%@ page  import= "java.sql.*" %>

<%@ page import="javax.swing.table.DefaultTableModel" %>

<%@ page  import="java.sql.PreparedStatement" %>

<%@ page  import="java.sql.ResultSet" %>

<%@ page import="java.awt.*" %>

<%@ page import="java.awt.event.*" %>

<%@ page import="javax.swing.*" %>

<%@ page import="java.util.List" %>

<%@ page import=" java.util.Vector" %>

<%@ page import=" javax.swing.border.*" %>

<%@ page import=" javax.swing.table.DefaultTableModel" %>

<%@ page import=" javax.swing.JTable" %>

<%@ page import=" java.util.ArrayList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>web資料通路和JDBC封裝</title>

    <!-- 權限驗證 -->

    <%

    %>

    <!-- 引用的包 -->

    <link rel="stylesheet" type="text/css" href="../web/jquery-easyui-1.7.0/themes/default/easyui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

    <link rel="stylesheet" type="text/css" href="../web/jquery-easyui-1.7.0/themes/icon.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

    <script type="text/javascript" src="../web/jquery-easyui-1.7.0/jquery.min.js"></script>

    <script type="text/javascript" src="../web/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../web/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

        var url;

        function searchGrade(){

            $('#dg').datagrid('load',{

                jqmc:$('#s_jqmc').val()

            });

        }

        function deleteGrade()

        {

            var selectedRows=$("#dg").datagrid('getSelections');

            if(selectedRows.length==0){

                $.messager.alert("系統提示","請選擇要删除的資料！");

                return;

            }

           var row=selectedRows[0];

                    $("#dlg2").dialog("open").dialog("setTitle","删除資訊");

                    $("#fm2").form("load",row);//把使用者的選擇的資料塞入表格中

            <%

                            String  jqmc1;

                            request.setCharacterEncoding("UTF-8");

                            jqmc1= request.getParameter("jqmc");

                             Connection con4= null;

                             List para4=null;

                             boolean  f4;

                            //DefaultTableModel tableModel = (DefaultTableModel) DG.getModel();

                            //int selectedRowIndex = table1.getSelectedRow(); // 取得使用者所選單行

                            JdbcUtils JdbcUtils4=new JdbcUtils();

                            JdbcUtils4.JdbcUtils();

                            con4=JdbcUtils4.getConnection();

                         // 進行相關處理

                          String sql4 = "DELETE from info_jqmc WHERE jqmc=fanxd5";  //删除test表中某行

                        List param4 = new ArrayList();

                        param4.add(null);

                          try

                          {

                              f4=JdbcUtils4.updateByPreparedStatement(sql4, param4);

                              }

                            catch (Exception e3)

                             {

                            e3.printStackTrace();

                              }

            %>

        }

        function openGradeAddDialog(){

            $("#dlg").dialog("open").dialog("setTitle","添加資訊");

            <%

             Connection con5= null;

            PreparedStatement statement5 = null;

            ResultSet res5 = null;

            List parm5=null;

            boolean  f5;

            if(request.getMethod().equals("GET"));

            //out.print("GET");

            else{

                //out.print("POST");

                request.setCharacterEncoding("UTF-8");

                String t1 = request.getParameter("jqmc");

                String t2 = request.getParameter("jqip");

                JdbcUtils JdbcUtils5 =new JdbcUtils();

                JdbcUtils5.JdbcUtils();

                con5=JdbcUtils5.getConnection();

                String sql5="insert into info_jqmc values (?,?) ";

                List param5= new ArrayList();

                param5.add(t1);

                param5.add(t2);

                try

                {

                    f5=JdbcUtils5.updateByPreparedStatement(sql5, param5);

                }

                catch (Exception e5)

                {

                    e5.printStackTrace();

                }

            }

            %>

        }

        function openGradeModifyDialog(){

            var selectedRows=$("#dg").datagrid('getSelections');//擷取使用者選擇的集合

            if(selectedRows.length!=1){

                $.messager.alert("系統提示","請選擇一條要編輯的資料！");

                return;

            }

            var row=selectedRows[0];

            $("#dlg").dialog("open").dialog("setTitle","編輯資訊");

            $("#fm").form("load",row);//把使用者的選擇的資料塞入表格中

         <%   Connection con2= null;

            PreparedStatement statement2 = null;

            ResultSet res2 = null;

            List parm2=null;

            boolean  fl;

            if(request.getMethod().equals("GET"));

            //out.print("GET");

            else{

                //out.print("POST");

                request.setCharacterEncoding("UTF-8");

                String t1 = request.getParameter("jqmc");

                String t2 = request.getParameter("jqip");

                JdbcUtils JdbcUtils3 =new JdbcUtils();

                JdbcUtils3.JdbcUtils();

                con2=JdbcUtils3.getConnection();

                String sql2="UPDATE  info_jqmc SET jqmc=?,jqip=?  WHERE jqmc=?";

                List param2 = new ArrayList();

                param2.add(t1);

                param2.add(t2);

                param2.add(t1);

                try

                {

                    fl=JdbcUtils3.updateByPreparedStatement(sql2, param2);

                }

                catch (Exception e1)

                {

                    e1.printStackTrace();

                }

            }

            %>

            $("#dg").datagrid("reload");

        }

        function closeGradeDialog(){

            $("#dlg").dialog("close");

            reseValue();

        }

        function reseValue(){    //關閉對話框時置空操作

            $("#gradeName").val("");

            $("#college").val("");

            $("#major").val("");

            $("#beizhu").val("");

        }

        function saveGrade(){

            $("#fm").form("submit",{

                url:url,

                onSubmit:function(){

                    return $(this).form("validate");

                },

                success:function(result){

                    if(result.errorMsg){

                        $.messager.alert("系統提示",result.errorMsg);

                        return;

                    }else{

                        $.messager.alert("系統提示","儲存成功");

                        $("#dlg").dialog("close");

                        $("#dg").datagrid("reload");//添加成功重新整理頁面

                        reseValue();

                    }

                }

        });

        }

        function saveGrade2(){

            $("#fm2").form("submit",{

                url:url,

                onSubmit:function(){

                    return $(this).form("validate");

                },

                success:function(result){

                    if(result.errorMsg){

                        $.messager.alert("系統提示",result.errorMsg);

                        return;

                    }else{

                        $.messager.alert("系統提示","儲存成功");

                        $("#dlg2").dialog("close");

                        $("#dg").datagrid("reload");//添加成功重新整理頁面

                        reseValue();

                    }

                }

            });

        }

    </script>

</head>

<%

    Connection con1 = null;

    PreparedStatement statement = null;

    ResultSet res = null;

    List parm1=null;

    try {

        JdbcUtils JdbcUtils2 =new JdbcUtils();

        JdbcUtils2.JdbcUtils();

        con1=JdbcUtils2.getConnection();

        String sql;//查詢test表

        sql = "SELECT * FROM info_jqmc";

        res=JdbcUtils2.findMoreResult(sql,parm1);  //調用jdbc封裝類中  查詢函數

%>

<body style="margin:5px;">

<table id="dg" title="資訊" class="easyui-datagrid" fitColumns="true"

       pagination="true" data-options="singleSelect:true" rownumbers="true" url=" " fit="true" toolbar="#tb"><!-- fit="true"預設填充 -->

    <thead>

    <tr>

        <th field="jqmc" width="50" align="center">機器名稱</th>

        <th field="jqip"width="200" align="center">機器位址</th>

    </tr>

    </thead>

    <% while (res.next())

    {  %>

    <tr align="center">

        <td><% out.print(res.getString("jqmc"));%></td>

        <td><% out.print(res.getString("jqip"));%></td>

    </tr>

    <% } %>

</table>

<%

    } catch (Exception e1) {

        // TODO: handle exception

        e1.printStackTrace();

    }finally{

        try {

            if(res != null) res.close();

            if(statement != null) statement.close();

            if(con1 != null) con1.close();

        } catch (Exception e2) {

            // TODO: handle exception

            e2.printStackTrace();

        }

    }

%>

<div id="tb">

    <div>

        <a href="javascript:openGradeAddDialog()" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>

        <a href="javascript:openGradeModifyDialog()" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>

        <a href="javascript:deleteGrade()" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>

    </div>

    <div>&nbsp;機器名稱：&nbsp;<input type="text" name="jqmc" id="jqmc"/><a href="javascript:searchGrade()" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜尋</a></div>

</div>

<div id="dlg" class="easyui-dialog" style="width: 400px;height: 280px;padding: 10px 20px"

     closed="true" buttons="#dlg-buttons">

    <form id="fm" method="post">

        <table>

            <tr>

                <td>機器名稱：</td>

                <td><input type="text" name="jqmc" id="jqmc" class="easyui-validatebox" required="true"></td>

            </tr>

            <tr>

                <td>機器位址：</td>

                <td><input type="text" name="jqip" id="jqip" class="easyui-validatebox" required="true"></td>

            </tr>

        </table>

    </form>

</div>

<div id="dlg-buttons">

    <a href="javascript:saveGrade()" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-ok" >确定</a>

    <a href="javascript:closeGradeDialog()" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-cancel" >關閉</a>

</div><!-- 添加對話框 -->

<div id="dlg2" class="easyui-dialog" style="width: 400px;height: 280px;padding: 10px 20px"

     closed="true" buttons="#dlg2-buttons">

    <form id="fm2" method="post">

        <table>

            <tr>

                <td>機器名稱：</td>

                <td><input type="text" name="jqmc" id="jqmc" class="easyui-validatebox" required="true"></td>

            </tr>

        </table>

    </form>

</div>

<div id="dlg2-buttons">

    <a href="javascript:saveGrade2()" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-ok" >确定</a>

    <a href="javascript:closeGradeDialog()" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-cancel" >關閉</a>

</div><!-- 添加對話框 -->

</body>

</html>

///

源代碼下載下傳  連結: https://pan.baidu.com/s/1GnoXHCx8cX0kL0_fxI3jiw 提取碼: 332m 

此種方式基本實作了資料的通路，後續文章 實戰4 會介紹 另外一種方式，使用架構來把SQL語句和操作全部封裝為類，建議用實戰4的方法。

IntelliJ IDEA+ jquery Easyui+MSSQLSERVER 實戰3、建立web應用和JDBC封裝和資料通路。

未完待續.....

後續文章 實戰4 會介紹 另外一種方式，使用架構來把SQL語句和操作全部封裝為類，建議用實戰4的方法。

程式設計語言 資料庫 intellij idea Jquery EasyUI MS SqlServer 資料庫通路 java
上一篇: STM32CubeMX學習筆記——STM32H743通用定時器Github功能簡述STM32CubeMX配置代碼部分備注
下一篇: oracle遷移到mysql_從Oracle遷移到MySQL

繼續閱讀