此處寫的是我寫的一個小項目梯澜。拿出來給大家分享下寞冯,當時都是自己摸索出來,自己寫出來的晚伙,東西比較簡單吮龄,但也是自己投入精力寫出來的東西,往大佬輕噴咆疗。????
當時也不太會螟蝙,Java只會一個基礎(chǔ),都是網(wǎng)上找教程一點點跟著學(xué)民傻,寫出來的胰默。???
注: 技術(shù)效應(yīng)知識庫其實就是一個==信息管理系統(tǒng)==,不用管什么是技術(shù)效應(yīng)漓踢,這個就是個應(yīng)用背景牵署,底層的實現(xiàn)方法都是一樣的。
當時參考的網(wǎng)站:菜鳥教程 上面的很基礎(chǔ)喧半,也很實用奴迅,適合初學(xué)者。
再推薦一個B站up寫的編程教程網(wǎng)站:Road 2 Coding 內(nèi)容很豐富挺据。
再推薦幾個B站的up(點擊即可跳轉(zhuǎn)):
- CodeSheep:Road 2 Coding這個網(wǎng)站就是他寫的取具。??
- 技術(shù)胖:搞了很多免費的編程課程,很不錯扁耐。太良心了??
- 稚暉君:膜拜大佬暇检,感受下湊數(shù)的感覺。懂的越多婉称,才知道稚輝君有多強大块仆。??♂?????♀???
- 017_凌十七:我是來人間湊數(shù)的构蹬。??
@[TOC]
一、基本介紹
- 技術(shù)效應(yīng)就是指由技術(shù)所產(chǎn)生的一種特定的科學(xué)現(xiàn)象悔据。
- 技術(shù)效應(yīng)知識庫系統(tǒng)可以提供功能庄敛、技術(shù)效應(yīng)以及案例三者之間的數(shù)據(jù)的存儲功能,方便用戶通過功能來查找實現(xiàn)功能的技術(shù)效應(yīng)及效應(yīng)所對應(yīng)的案例科汗,從而幫助用戶進行創(chuàng)新設(shè)計藻烤。
1、使用到的技術(shù)头滔、工具
技術(shù):
- Bootstrap 框架: 彈性框架隐绵,也美觀,好用拙毫。
- JSP: 數(shù)據(jù)交互依许。
- Servlet: 數(shù)據(jù)交互。
- MySQL: 數(shù)據(jù)庫缀蹄,存儲數(shù)據(jù)峭跳。
工具:
- VS Code: 寫web界面的時候可以實時預(yù)覽,看到自己寫出來的效果缺前。
- Eclipse(IDEA也挺好): 開發(fā)工具都可蛀醉,之前學(xué)習(xí)用的Eclipse就直接用了。
- Tomcat: Web應(yīng)用服務(wù)器衅码,用它來開發(fā)和調(diào)試JSP 程序拯刁。
- Navicat: 方便的管理數(shù)據(jù)庫。
2逝段、系統(tǒng)功能圖
[圖片上傳失敗...(image-d1f165-1649150051646)]
3垛玻、數(shù)據(jù)庫表設(shè)計
[圖片上傳失敗...(image-1107b5-1649150051646)]
二、系統(tǒng)界面設(shè)計
所有界面都寫了中英文兩種
1奶躯、首頁
[圖片上傳失敗...(image-156f93-1649150051646)]
[圖片上傳失敗...(image-d69b81-1649150051646)]
2帚桩、現(xiàn)象對應(yīng)效應(yīng)的展示界面
在首頁搜索選擇按鈕下的現(xiàn)象表中點擊現(xiàn)象或者索引項便可跳轉(zhuǎn)到該現(xiàn)象對應(yīng)的效應(yīng)展示界面(下圖以現(xiàn)象“測量溫度”為例)。
[圖片上傳失敗...(image-1bea75-1649150051646)]
該部分的關(guān)鍵代碼是:
<%@ page import="Display_Method.DisplayQuery" %>
<jsp:useBean id="database" class="Display_Method.DisplayQuery" scope="request" />
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:setProperty name="database" property="keyWord" param="keyWord" />
<jsp:getProperty name="database" property="queryResult" />
<jsp:useBean>
可以在JSP中聲明一個JavaBean嘹黔,scope指出了bean的作用域账嚎,第一行代碼的作用是指出數(shù)據(jù)該傳向哪個Java類,setProperty會將keyWord的值傳遞入數(shù)據(jù)處理的Java類DisplayQuery儡蔓,getProperty會接收DisplayQuery類中的返回內(nèi)容郭蕉,從而使展示界面良好顯示。后續(xù)各個表格的展示也是使用了這種方法與數(shù)據(jù)庫進行交互喂江。
3召锈、表的展示界面
提供數(shù)據(jù)庫中的整張表的展示,使用戶可以直觀的看到整張表的內(nèi)容开呐。[圖片上傳失敗...(image-75c095-1649150051646)]
[圖片上傳失敗...(image-20d836-1649150051647)]
[圖片上傳失敗...(image-d107b3-1649150051647)]
4烟勋、搜索結(jié)果展示界面
下圖以模糊搜索“位移”為例
[圖片上傳失敗...(image-30c443-1649150051647)]
5、管理員界面展示
可以從首頁筐付、展示界面以及搜索結(jié)果展示界面的管理員登錄入口進入
- 管理管理員信息????
[圖片上傳失敗...(image-4355d5-1649150051647)] - 管理現(xiàn)象表????
[圖片上傳失敗...(image-bc29f9-1649150051647)] - 管理效應(yīng)表????
[圖片上傳失敗...(image-7d91bd-1649150051647)] - 管理效應(yīng)詳情表????
[圖片上傳失敗...(image-61cbbd-1649150051647)] - 管理案例表????
[圖片上傳失敗...(image-5298d2-1649150051647)]
6卵惦、管理員登錄界面
[圖片上傳失敗...(image-df3e71-1649150051647)]
<%-- 管理員模態(tài)框 --%>
<div class="modal fade" id="AdminModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<%-- 管理員模態(tài)框頭部 --%>
<div class="modal-header">
<h5 class="modal-title">管理員登錄</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form name="Login" action="../Check/Checklogin.jsp" onsubmit="return validateForm()" method="post">
<%-- 管理員模態(tài)框主體 --%>
<div class="modal-body">
<label for="user">賬號:</label>
<input type="text" class="form-control" id="username" name="username" placeholder="請輸入賬號">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">
</div>
<%-- 管理員模態(tài)框底部 --%>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary" onclick="validateForm()">
登錄
</button>
</div>
</form>
</div>
</div>
</div>
7、新用戶使用指南
一個系統(tǒng)剛開始總得有個新手教程吧瓦戚,我就在首頁放了個彈窗按鈕沮尿,彈出一個用戶指南。用輪播的形式较解,放入了很多張使用說明畜疾。(中英文都有)
[圖片上傳失敗...(image-d631d8-1649150051647)]
<%-- 新手教程模態(tài)框 --%>
<div class="modal fade" id="NewUserModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<%-- 新手教程模態(tài)框頭部 --%>
<div class="modal-header">
<h5 class="modal-title">新用戶使用指南</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<%-- 新手教程模態(tài)框主體 --%>
<div class="modal-body">
<div id="demo" class="carousel slide" data-ride="carousel">
<%-- 指示符 --%>
<ul class="carousel-indicators" >
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<%-- 輪播圖片 --%>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images\首頁介紹.png">
</div>
<div class="carousel-item">
<img src="Images\主頁搜索.png">
</div>
<div class="carousel-item">
<img src="Images\展示界面介紹.png">
</div>
</div>
<%-- 左右切換按鈕 --%>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
</div>
三、功能設(shè)計
1印衔、搜索功能
- 搜索功能的不同主要體現(xiàn)在查數(shù)據(jù)庫表時候使用的sql語句啡捶。
- 設(shè)計了三種搜索方式:模糊搜索、精確搜索奸焙、案例搜索瞎暑。
- 展示界面的搜索均為同時搜索現(xiàn)象和效應(yīng)模糊搜索。管理員界面中的搜索功能均為搜索當前表中內(nèi)容与帆,輸入搜索內(nèi)容即可即時搜索了赌。
- 除管理員界面的搜索外,其余搜索功能均使用傳遞JDBC形式連接數(shù)據(jù)庫玄糟,通過傳遞SQL語句進入數(shù)據(jù)庫搜索勿她。
[圖片上傳失敗...(image-8e431b-1649150051647)]
[圖片上傳失敗...(image-b1ceef-1649150051647)]
[圖片上傳失敗...(image-e46f8d-1649150051647)]
此處使用的關(guān)鍵代碼:
- 加載驅(qū)動
public KeyWordQuery() {
queryResult = new StringBuffer();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
- 使用getString()方法獲取傳入該類的關(guān)鍵字,使用setString()方法將傳入該類的關(guān)鍵字設(shè)定為給定String的值阵翎。
public String getKeyWord() { //接收來自頁面的關(guān)鍵字
return keyWord;
}
public void setKeyWord(String keyWord) {
this.keyWord = keyWord;
try {
byte bb[] = keyWord.getBytes("ISO-8859-1");
keyWord = new String(bb,"GB2312");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
- 使用返回值類型為StringBuffer的getQueryResult()函數(shù)返回前端界面需要接收的返回內(nèi)容逢并。
public StringBuffer getQueryResult() {
String condition = null;
condition = "Select * From kbs"; //此處雙引號內(nèi)的字符串為搜索的SQL語句
StringBuffer str = f(condition); //這里的f()函數(shù)為與數(shù)據(jù)庫交互的函數(shù)
return str; //此處返回與數(shù)據(jù)庫交互得到的內(nèi)容
}
- 使用返回值類型為StringBuffer的f()函數(shù)返回從數(shù)據(jù)庫接收的返回內(nèi)容等。使用try郭卫,catch捕獲并拋出異常筒狠,使用try內(nèi)的前三句連接數(shù)據(jù)庫,第四句將SQL語句傳入數(shù)據(jù)庫箱沦,使用append()將括號內(nèi)內(nèi)容返回前端界面辩恼。使用rs.next()獲取返回值的下一項,rs.getString()獲取數(shù)據(jù)庫返回的數(shù)據(jù)谓形。con.close()關(guān)閉數(shù)據(jù)庫連接灶伊。下面代碼以首頁表格為例。
public StringBuffer f(String condition) {
StringBuffer str = new StringBuffer();
Connection con;
Statement st;
ResultSet rs;
try {
String url = "jdbc:mysql://localhost:3306/kbs?serverTimezone=UTC" ;
con = DriverManager.getConnection(url,"root","123456");//賬戶密碼
st = con.createStatement();
rs = st.executeQuery(condition);
str.append("<div class=\"container\">"); //雙引號內(nèi)內(nèi)容返回頁面
str.append("<div class=\"polaroid\">");
str.append("<table class=\"table table-hover table-bordered table-striped\">");
str.append("<thead class=\"thead-dark\">");
str.append("<tr>");
str.append("<th>" + "現(xiàn)象");
str.append("<th>" + "索引項 F");
str.append("</tr>");
str.append("</thead>");
str.append("<tbody>");
while(rs.next()) {
str.append("<tr>");
str.append("<td>" + rs.getString(2) + "</td>");
str.append("<td>" + rs.getString(3) + "</td>");
str.append("</tr>");
}
str.append("</tbody>");
str.append("</table>");
str.append("</div>");
str.append("</div>");
con.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return str;
}
- 管理員界面的搜索功能使用的是JavaScript方法實現(xiàn)搜索寒跳。
function row2() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput"); //使用ID名從頁面獲取關(guān)鍵字
filter = input.value.toUpperCase();
table = document.getElementById("ManagementTable"); //查找的表的ID
tr = table.getElementsByTagName("tr"); //此處標識為查找的是列
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1]; //此處的1為搜索的是第2列
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
2聘萨、管理員登錄功能
[圖片上傳失敗...(image-10747c-1649150051647)]
3、數(shù)據(jù)管理功能
都以==增加==功能為例童太,別的功能模塊實現(xiàn)方式類似米辐。
3.1 管理員管理
[圖片上傳失敗...(image-53bb5b-1649150051647)]
<%-- 增刪改三個功能按鈕的頁面代碼 --%>
<div class="container" id="DAOTable">
<div class="container" style="margin-top:30px;" id="DAO">
<div class="btn-group flex-container" id="DAObutton" >
<button type="button" class="btn btn-dark col-md-2" data-toggle="collapse" data-target="#Addemo">
<i class="fa fa-plus-square">  增加</i>
</button>
<button type="button" class="btn btn-dark col-md-2" data-toggle="collapse" data-target="#Deldemo">
<i class="fa fa-minus-square-o">  刪除</i>
</button>
<button type="button" class="btn btn-dark col-md-2" data-toggle="collapse" data-target="#Modifydemo">
<i class="fa fa-wrench">  修改</i>
</button>
</div>
<%-- 增加管理員的頁面代碼 --%>
<div id="Addemo" class="collapse">
<form class="form-inline form-group" id="Addgroup" name="Add" action="../Check/Admin_Add_Check.jsp" onsubmit="return Admin_Add_Check()" method="post">
<label for="username">賬號:  </label>
<input type="text" class="form-control col-md-2" id="username" name="username" style="margin-right:20px;">
<label for="password">密碼:  </label>
<input type="text" class="form-control col-md-2" id="password" name="password">
<button type="submit" class="btn btn-dark" style="margin-left:30px;" onclick="Admin_Add_Check()">
<i class="fa fa-floppy-o" style="font-size:18px"></i>  增加
</button>
</form>
</div>
3.2 現(xiàn)象表管理
[圖片上傳失敗...(image-2217c4-1649150051647)]
<div id="Addemo" class="collapse">
<form class="form-inline form-group" id="Addgroup" name="Add" action="../Check/Phe_Add_Check.jsp" onsubmit="return Phe_Add_Check()" method="post">
<label for="phenomenon">現(xiàn)象:  </label>
<input type="text" class="form-control col-md-2" id="phenomenon" name="phenomenon" style="margin-right:20px;">
<label for="indexf">索引項F:  </label>
<input type="text" class="form-control col-md-2" id="indexf" name="indexf" >
<button type="submit" class="btn btn-dark" style="margin-left:30px;" onclick="Phe_Add_Check()">
<i class="fa fa-floppy-o"></i>  增加
</button>
</form>
</div>
3.3 效應(yīng)表管理
[圖片上傳失敗...(image-972b19-1649150051647)]
<div id="Addemo" class="collapse">
<form id="Addgroup" name="Add" action="../Check/Effect_Add_Check.jsp" onsubmit="return Effect_Add_Check()" method="post">
<div class="form-inline form-group">
<label for="indexf">索引項F:  </label>
<input type="text" class="form-control col-md-2" id="indexf" name="indexf" style="margin-right:20px;">
<label for="phenomenon">現(xiàn)象:  </label>
<input type="text" class="form-control col-md-2" id="phenomenon" name="phenomenon" style="margin-right:20px;">
</div>
<div class="form-inline form-group">
<label for="indexe">索引項E:  </label>
<input type="text" class="form-control col-md-2" id="indexe" name="indexe" style="margin-right:20px;">
<label for="effect">效應(yīng):  </label>
<input type="text" class="form-control col-md-2" id="effect" name="effect">
<button type="submit" class="btn btn-dark" style="margin-left:45px;" onclick="Effect_Add_Check()">
<i class="fa fa-floppy-o"></i>  增加
</button>
</div>
</form>
</div>
3.4 效應(yīng)詳情表管理
[圖片上傳失敗...(image-600475-1649150051647)]
<div id="Addemo" class="collapse">
<form id="Addgroup" name="Add" action="../Check/Introduce_Add_Check.jsp" onsubmit="return Introduce_Add_Check()" method="post">
<div class="form-inline form-group">
<label for="indexe">索引項E:  </label>
<input type="text" class="form-control col-md-2" id="indexe" name="indexe" style="margin-right:20px;">
<label for="effect">效應(yīng):  </label>
<input type="text" class="form-control col-md-2" id="effect" name="effect" style="margin-right:20px;">
<button type="submit" class="btn btn-dark " style="margin-left:30px;" onclick="Introduce_Add_Check()">
<i class="fa fa-floppy-o"></i>  增加
</button>
</div>
<div class="form-group form-inline">
<label for="name">效應(yīng)詳情:  </label>
<textarea class="form-control col-md-10" id="description" name="description" rows="4"></textarea>
</div>
</form>
<h5 id="Note">PS:在添加效應(yīng)詳情時請使用HTML標簽等對文本進行分段胸完、加粗等操作。</h5>
</div>
3.5 案例表管理
[圖片上傳失敗...(image-74baf-1649150051647)]
<%-- 案例表不一樣的地方就是要上傳圖像 --%>
<div id="Addemo" class="collapse">
<form class="form-inline form-group" id="Addgroup" name="Add" action="../Check/Example_Add_Check.jsp" onsubmit="return Example_Add_Check()" method="post">
<label for="indexe">索引項E:  </label>
<input type="text" class="form-control col-md-1" id="indexe" name="indexe" style="margin-right:20px;">
<label for="effect">效應(yīng):  </label>
<input type="text" class="form-control col-md-2" id="effect" name="effect" style="margin-right:20px;">
<label for="example">案例:  </label>
<input type="text" class="form-control col-md-2" id="example" name="example" style="margin-right:20px;">
<label for="path">圖像路徑:  </label>
<input type="text" class="form-control col-md-2" id="path" name="path" value="../Images/">
<button type="submit" class="btn btn-dark" style="margin-left:30px;" onclick="Example_Add_Check()">
<i class="fa fa-floppy-o"></i>  增加
</button>
</form>
<form method="post" action="/TESTKBS/UploadServlet" enctype="multipart/form-data">
<div class="form-inline form-group" id="Addgroup">
<label for="uploadimage">圖像:  </label>
<input type="file" class="form-control col-md-6"id="uploadFile" name="uploadFile" style="margin-right:20px;">
<button type="submit" class="btn btn-dark" value="上傳" style="margin-left:30px;">
<i class="fa fa-cloud-upload"></i>  上傳
</button>
</div>
</form>
<h5 id="Note">PS:圖像上傳時將圖像重命名為:“<b>索引項.后綴</b>”方便管理翘贮。如:<b>E1.jpg</b>赊窥。添加圖像路徑格式如:“<b>../Images/E1.jpg</b>”</h5>
</div>
四、詳細代碼
項目放到了gitee上狸页,有需要的可以自取锨能。??