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
3、下載 Easy UI http://www.jeasyui.net/download/jquery.html
下載後把 jquery-easyui-1.7.0 整個目錄拷貝入 myweb目錄，這時返回打開 IntelliJ IDEA，可見IDE中已有 jquery-easyui-1.7.0
4、IntelliJ IDEA web目錄下新建HTML 文件index
代碼如下：
<html contentType="text/html"; language="java" ;lang="en" >
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/demo.css">
<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">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/demo.css">
<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 ,即可
可在瀏覽器中見我們寫好的index.html 運行效果
到此我們基本完成了一個web應用構架，稍後我會繼續更新，完成 數據訪問頁面的建立....靜待
我們建立一個 main.asp的文件
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">
<link rel="stylesheet" type="text/css" href="../web/jquery-easyui-1.7.0/themes/icon.css">
<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 frameborder='0' 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;">當前用戶： <font color="red" >${currentUser.userName }</font>
<a href="" style="text-decoration: none; color:red;">退出</a>
</div>
</div>
<!-- 中間佈局 -->
<div region="center">
<div class="easyui-tabs" fit="true" border="false" 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編程 版權所有 ©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
/////////////////////////////////////////////////////////////////////////////////////////////////////////
<%@ 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>
<!-- 權限驗證 -->
<%
/* 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">
<link rel="stylesheet" type="text/css" href="../web/jquery-easyui-1.7.0/themes/icon.css">
<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();
}
}
%>
/* url="GradeSave"; */
}
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);//把用戶的選擇的數據塞入表格中
/* url="GradeSave?id="+row.id;*/
<% 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()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="javascript:openGradeModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteGrade()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">刪除</a>
</div>
<div> 機器名稱： <input type="text" name="jqmc" id="jqmc"/><a href="javascript:searchGrade()" 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()" class="easyui-linkbutton" iconCls="icon-ok" >確定</a>
<a href="javascript:closeGradeDialog()" 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()" class="easyui-linkbutton" iconCls="icon-ok" >確定</a>
<a href="javascript:closeGradeDialog()" class="easyui-linkbutton" iconCls="icon-cancel" >關閉</a>
</div><!-- 添加對話框 -->
</body>
</html>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
源代碼下載 鏈接: https://pan.baidu.com/s/1GnoXHCx8cX0kL0_fxI3jiw 提取碼: 332m
此種方式基本實現了數據的訪問，後續文章 實戰4 會介紹 另外一種方式，使用框架來把SQL語句和操作全部封裝爲類，建議用實戰4的方法。
未完待續.....
後續文章 實戰4 會介紹 另外一種方式，使用框架來把SQL語句和操作全部封裝爲類，建議用實戰4的方法。