此处写的是我写的一个小项目。拿出来给大家分享下，当时都是自己摸索出来，自己写出来的，东西比较简单，但也是自己投入精力写出来的东西，往大佬轻喷。😳😊
当时也不太会，Java只会一个基础，都是网上找教程一点点跟着学，写出来的。✊💪
注： 技术效应知识库其实就是一个信息管理系统，不用管什么是技术效应，这个就是个应用背景，底层的实现方法都是一样的。
当时参考的网站：菜鸟教程 上面的很基础，也很实用，适合初学者。
再推荐一个B站up写的编程教程网站：Road 2 Coding 内容很丰富。
再推荐几个B站的up（点击即可跳转）：
- CodeSheep：Road 2 Coding这个网站就是他写的。👍
- 技术胖：搞了很多免费的编程课程，很不错。太良心了😭
- 稚晖君：膜拜大佬，感受下凑数的感觉。懂的越多，才知道稚辉君有多强大。🧎♂️🧎🧎♀️👍
- 017_凌十七：我是来人间凑数的。🙋
文章目录
一、基本介绍
- 技术效应就是指由技术所产生的一种特定的科学现象。
- 技术效应知识库系统可以提供功能、技术效应以及案例三者之间的数据的存储功能，方便用户通过功能来查找实现功能的技术效应及效应所对应的案例，从而帮助用户进行创新设计。
1、使用到的技术、工具
技术：
- Bootstrap 框架： 弹性框架，也美观，好用。
- JSP： 数据交互。
- Servlet： 数据交互。
- MySQL： 数据库，存储数据。
工具：
- VS Code： 写web界面的时候可以实时预览，看到自己写出来的效果。
- Eclipse（IDEA也挺好）： 开发工具都可，之前学习用的Eclipse就直接用了。
- Tomcat： Web应用服务器，用它来开发和调试JSP 程序。
- Navicat： 方便的管理数据库。
2、系统功能图
3、数据库表设计
二、系统界面设计
所有界面都写了中英文两种
1、首页
2、现象对应效应的展示界面
在首页搜索选择按钮下的现象表中点击现象或者索引项便可跳转到该现象对应的效应展示界面（下图以现象“测量温度”为例）。
该部分的关键代码是：
<%@ 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的作用域，第一行代码的作用是指出数据该传向哪个Java类，setProperty会将keyWord的值传递入数据处理的Java类DisplayQuery，getProperty会接收DisplayQuery类中的返回内容，从而使展示界面良好显示。后续各个表格的展示也是使用了这种方法与数据库进行交互。
3、表的展示界面
提供数据库中的整张表的展示，使用户可以直观的看到整张表的内容。
4、搜索结果展示界面
下图以模糊搜索“位移”为例
5、管理员界面展示
可以从首页、展示界面以及搜索结果展示界面的管理员登录入口进入
- 管理管理员信息🧑💻
- 管理现象表👩💻
- 管理效应表👨💻
- 管理效应详情表🧑💻
- 管理案例表👨💻
6、管理员登录界面
<%-- 管理员模态框 --%>
<div class="modal fade" id="AdminModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<%-- 管理员模态框头部 --%>
<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">
<%-- 管理员模态框主体 --%>
<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>
<%-- 管理员模态框底部 --%>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary" onclick="validateForm()">
登录
</button>
</div>
</form>
</div>
</div>
</div>
7、新用户使用指南
一个系统刚开始总得有个新手教程吧，我就在首页放了个弹窗按钮，弹出一个用户指南。用轮播的形式，放入了很多张使用说明。（中英文都有）
<%-- 新手教程模态框 --%>
<div class="modal fade" id="NewUserModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<%-- 新手教程模态框头部 --%>
<div class="modal-header">
<h5 class="modal-title">新用户使用指南</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<%-- 新手教程模态框主体 --%>
<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>
三、功能设计
1、搜索功能
- 搜索功能的不同主要体现在查数据库表时候使用的sql语句。
- 设计了三种搜索方式：模糊搜索、精确搜索、案例搜索。
- 展示界面的搜索均为同时搜索现象和效应模糊搜索。管理员界面中的搜索功能均为搜索当前表中内容，输入搜索内容即可即时搜索。
- 除管理员界面的搜索外，其余搜索功能均使用传递JDBC形式连接数据库，通过传递SQL语句进入数据库搜索。
此处使用的关键代码：
- 加载驱动
public KeyWordQuery() {
queryResult = new StringBuffer();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
- 使用getString()方法获取传入该类的关键字，使用setString()方法将传入该类的关键字设定为给定String的值。
public String getKeyWord() { //接收来自页面的关键字
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()函数返回前端界面需要接收的返回内容。
public StringBuffer getQueryResult() {
String condition = null;
condition = "Select * From kbs"; //此处双引号内的字符串为搜索的SQL语句
StringBuffer str = f(condition); //这里的f()函数为与数据库交互的函数
return str; //此处返回与数据库交互得到的内容
}
- 使用返回值类型为StringBuffer的f()函数返回从数据库接收的返回内容等。使用try，catch捕获并抛出异常，使用try内的前三句连接数据库，第四句将SQL语句传入数据库，使用append()将括号内内容返回前端界面。使用rs.next()获取返回值的下一项，rs.getString()获取数据库返回的数据。con.close()关闭数据库连接。下面代码以首页表格为例。
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\">"); //双引号内内容返回页面
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>" + "现象");
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方法实现搜索。
function row2() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput"); //使用ID名从页面获取关键字
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、管理员登录功能
3、数据管理功能
都以增加功能为例，别的功能模块实现方式类似。
3.1 管理员管理
<%-- 增删改三个功能按钮的页面代码 --%>
<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 现象表管理
<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">现象:  </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 效应表管理
<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">现象:  </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">效应:  </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 效应详情表管理
<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">效应:  </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">效应详情:  </label>
<textarea class="form-control col-md-10" id="description" name="description" rows="4"></textarea>
</div>
</form>
<h5 id="Note">PS:在添加效应详情时请使用HTML标签等对文本进行分段、加粗等操作。</h5>
</div>
3.5 案例表管理
<%-- 案例表不一样的地方就是要上传图像 --%>
<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">效应:  </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上，有需要的可以自取。🤪
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
