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的方法。