# TESTKBS **Repository Path**: hm1024/testkbs ## Basic Information - **Project Name**: TESTKBS - **Description**: Javaweb的一个设计 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-04-01 - **Last Updated**: 2022-06-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 零、技术效应知识库系统的设计与实现 --- ### 介绍 Javaweb的一个设计，技术效应知识库系统。这是我写的一个小项目。拿出来给大家分享下，当时都是自己摸索出来，自己写出来的，东西比较简单，但也是自己投入精力写出来的东西，往大佬轻喷。😳😊 > 当时也不太会，Java只会一个基础，都是网上找教程一点点跟着学，写出来的。✊💪 > **注：** 技术效应知识库其实就是一个==信息管理系统==，不用管什么是技术效应，这个就是个应用背景，底层的实现方法都是一样的。 ### 环境需求 1. Java的jdk为： jdk-13.0.2 2. 编译环境为： ①Eclipse 2019 ②MySql 8.0 ③Tomcat 8.5 3. 导入的jar包： ①commons-fileupload-1.4.jar ②commons-io-2.5.jar ③mysql-connector-java-8.0.19.jar ④taglibs-standard-impl-1.2.5.jar ⑤taglibs-standard-spec-1.2.5.jar ### 私货 当时参考的网站：[菜鸟教程](https://www.runoob.com/) 上面的很基础，也很实用，适合初学者。 再推荐一个B站up写的编程教程网站：[Road 2 Coding](https://www.r2coding.com/#/) 内容很丰富。 再推荐几个B站的up（点击即可跳转）： 1. [CodeSheep](https://space.bilibili.com/384068749?spm_id_from=333.788.b_765f7570696e666f.1)：Road 2 Coding这个网站就是他写的。👍 2. [技术胖](https://space.bilibili.com/165659472/?spm_id_from=333.999.0.0)：搞了很多免费的编程课程，很不错。太良心了😭 3. [稚晖君](https://space.bilibili.com/20259914/?spm_id_from=333.999.0.0)：膜拜大佬，感受下凑数的感觉。懂的越多，才知道稚辉君有多强大。🧎‍♂️🧎🧎‍♀️👍 4. [017_凌十七](https://space.bilibili.com/400313065/?spm_id_from=333.999.0.0)：我是来人间凑数的。🙋‍ # 一、基本介绍 --- - 技术效应就是指由技术所产生的一种特定的科学现象。 - 技术效应知识库系统可以提供功能、技术效应以及案例三者之间的数据的存储功能，方便用户通过功能来查找实现功能的技术效应及效应所对应的案例，从而帮助用户进行创新设计。 ## 1、使用到的技术、工具 **技术：** - **Bootstrap 框架：** 弹性框架，也美观，好用。 - **JSP：** 数据交互。 - **Servlet：** 数据交互。 - **MySQL：** 数据库，存储数据。 **工具：** - **VS Code：** 写web界面的时候可以实时预览，看到自己写出来的效果。 - **Eclipse（IDEA也挺好）：** 开发工具都可，之前学习用的Eclipse就直接用了。 - **Tomcat：** Web应用服务器，用它来开发和调试JSP 程序。 - **Navicat：** 方便的管理数据库。 ## 2、系统功能图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6b95be61ad6f42558b420847bb30fe87.png) ## 3、数据库表设计 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e124c8657875499aa622f8adcaf1d369.png) # 二、系统界面设计 --- 所有界面都写了中英文两种 ## 1、首页 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8bbac4aafc8644ee8315f5cf458209d3.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/15a88d2fd2b445478527cfaf05cd01e8.png) ## 2、现象对应效应的展示界面 在**首页搜索选择按钮下的现象表中点击现象**或者**索引项**便可跳转到该现象对应的效应展示界面（下图以现象“测量温度”为例）。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f214631e2c1343b59a24e6105c40d1be.png) 该部分的关键代码是： ```html <%@ page import="Display_Method.DisplayQuery" %> <% request.setCharacterEncoding("UTF-8"); %> ``` ``可以在JSP中声明一个JavaBean，scope指出了bean的作用域，第一行代码的作用是指出数据该传向哪个Java类，setProperty会将keyWord的值传递入数据处理的Java类DisplayQuery，getProperty会接收DisplayQuery类中的返回内容，从而使展示界面良好显示。后续各个表格的展示也是使用了这种方法与数据库进行交互。 ## 3、表的展示界面 提供数据库中的整张表的展示，使用户可以直观的看到整张表的内容。![在这里插入图片描述](https://img-blog.csdnimg.cn/9a419e148eed46d080a10d750a016be4.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/22d99c834c92467aac58198066ab6808.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/0763dc7f67ca4b1eababba6e464780b0.png) ## 4、搜索结果展示界面 下图以模糊搜索“位移”为例 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4e97293bde92470980bdd74e466e1f84.png) ## 5、管理员界面展示 可以从首页、展示界面以及搜索结果展示界面的管理员登录入口进入 - 管理管理员信息🧑‍💻 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b829697b5a5c41b8acaef4113a3f4b5a.png) - 管理现象表👩‍💻 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c740566e1e234e209c3cd0acacc700ab.png) - 管理效应表👨‍💻 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2bc23d79559a48748db6a1beac1c4c76.png) - 管理效应详情表🧑‍💻 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7c993d62a0d346fc914457bfc52b7c7a.png) - 管理案例表👨‍💻 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d2d7285226b74b16bbff14c68fe08ddb.png) ## 6、管理员登录界面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b7a81d02dc4c45d98489b8ac334c9394.png) ```html <%-- 管理员模态框 --%> ``` ## 7、新用户使用指南 一个系统刚开始总得有个新手教程吧，我就在首页放了个弹窗按钮，弹出一个用户指南。用轮播的形式，放入了很多张使用说明。（中英文都有） ![在这里插入图片描述](https://img-blog.csdnimg.cn/e68f649ac178493ab203ad7fdf796626.png) ```html <%-- 新手教程模态框 --%> ``` # 三、功能设计 --- ## 1、搜索功能 - 搜索功能的不同主要体现在查数据库表时候使用的sql语句。 - 设计了三种搜索方式：**模糊搜索、精确搜索、案例搜索**。 - 展示界面的搜索均为同时搜索现象和效应模糊搜索。管理员界面中的搜索功能均为搜索当前表中内容，输入搜索内容即可即时搜索。 - 除管理员界面的搜索外，其余搜索功能均使用传递JDBC形式连接数据库，通过传递SQL语句进入数据库搜索。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/58a079e1a6e14b048034f84eef55cc54.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/fefaf9b5967846cbb3d1bcf66be2ca19.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/bdb287e4b05d47e485f5ce8d0c5f6d19.png) 此处使用的关键代码： 1. 加载驱动 ```java public KeyWordQuery() { queryResult = new StringBuffer(); try { Class.forName("com.mysql.cj.jdbc.Driver"); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } } ``` 2. 使用getString()方法获取传入该类的关键字，使用setString()方法将传入该类的关键字设定为给定String的值。 ```java 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(); } } ``` 3. 使用返回值类型为StringBuffer的getQueryResult()函数返回前端界面需要接收的返回内容。 ```java public StringBuffer getQueryResult() { String condition = null; condition = "Select * From kbs"; //此处双引号内的字符串为搜索的SQL语句 StringBuffer str = f(condition); //这里的f()函数为与数据库交互的函数 return str; //此处返回与数据库交互得到的内容 } ``` 4. 使用返回值类型为StringBuffer的f()函数返回从数据库接收的返回内容等。使用try，catch捕获并抛出异常，使用try内的前三句连接数据库，第四句将SQL语句传入数据库，使用append()将括号内内容返回前端界面。使用rs.next()获取返回值的下一项，rs.getString()获取数据库返回的数据。con.close()关闭数据库连接。下面代码以首页表格为例。 ```java 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("
"); //双引号内内容返回页面 str.append("
"); str.append(""); str.append(""); str.append(""); str.append(""); str.append(""); str.append(""); while(rs.next()) { str.append(""); str.append(""); str.append(""); str.append(""); } str.append(""); str.append("
" + "现象"); str.append("" + "索引项 F"); str.append("
" + rs.getString(2) + "" + rs.getString(3) + "
"); str.append("
"); str.append("
"); con.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return str; } ``` 5. 管理员界面的搜索功能使用的是JavaScript方法实现搜索。 ```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、管理员登录功能 ![在这里插入图片描述](https://img-blog.csdnimg.cn/914fe0a14537487395413e0f49fe10ec.png) ## 3、数据管理功能 都以==增加==功能为例，别的功能模块实现方式类似。 ### 3.1 管理员管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/17709031f8da498f8168e7d6acd0f298.png) ```html <%-- 增删改三个功能按钮的页面代码 --%>
``` ```html <%-- 增加管理员的页面代码 --%>
``` ### 3.2 现象表管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/325069551c574c1da7602944ddf8a1ef.png) ```html
``` ### 3.3 效应表管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1677fda7787b49ac9afa24a5f6bb7e6e.png) ```html
``` ### 3.4 效应详情表管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/651485da1d1f406184aa3b9fe41b0dbb.png) ```html
PS:在添加效应详情时请使用HTML标签等对文本进行分段、加粗等操作。
``` ### 3.5 案例表管理 ![在这里插入图片描述](https://img-blog.csdnimg.cn/cac35f7c397542749508bb2553cec3d2.png) ```html <%-- 案例表不一样的地方就是要上传图像 --%>
PS:图像上传时将图像重命名为：“索引项.后缀”方便管理。如：E1.jpg。添加图像路径格式如：“../Images/E1.jpg”
```