一、題目
-
在本地MySQL創建一個paper數據庫，創建表並插入語句（建表語句在最下面）。
-
針對上表，使用SpringBoot框架寫一個只接收一個參數的接口，實現功能：
- 傳入一個章節id，返回該章節的標題及其子章節的詳細內容（如：傳入章節id：4587，返回該id對應的章節標題“第1章 緒論”及1.1 、1.2 、1.3 三個子章節的標題和內容）。
-
前端使用Vue寫一個界面，在該頁面有一個輸入框和一個提交按鈕；輸入一個章節id點擊按鈕，展示該章節的內容（使用Axios向后端發一個請求，將返回的結果渲染在頁面上）。
-
寫一篇博客記錄過程，及時提交（可以記錄一下實現思路、使用了哪些關鍵技術、中間遇到了哪些困難、解決過程）。
用博客記錄自己解決一個問題的過程（建議試試使用Markdown風格文檔，使用Typora編輯器），可以參考這一篇：個人編程作業
- 建表語句
DROP TABLE IF EXISTS `edu_paper`; CREATE TABLE `edu_paper` ( `id` char(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '本段ID', `parent_id` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '父段落ID', `sort` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '排序', `title` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '標題', `content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL COMMENT '內容', `is_deleted` tinyint UNSIGNED NOT NULL DEFAULT 0 COMMENT '邏輯刪除 1（true）已刪除， 0（false）未刪除', `gmt_create` datetime NOT NULL COMMENT '創建時間', `gmt_modified` datetime NOT NULL COMMENT '更新時間', PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '論文' ROW_FORMAT = Dynamic; INSERT INTO `edu_paper` VALUES ('4587', '0', '0', '第1章 緒論', '/', 0, '2021-07-19 23:07:45', '2021-07-19 23:07:47'); INSERT INTO `edu_paper` VALUES ('4588', '0', '0', '第2章 技術背景介紹', '/', 0, '2021-07-19 23:11:34', '2021-07-19 23:11:36'); INSERT INTO `edu_paper` VALUES ('8888', '4587', '1', '1.1 研究背景', '“大數據”已經成為互聯網信息技術行業的流行詞匯，信息技術廣泛應用。大數據帶來的信息風暴正在變革我們的生活、工作和思維[1]。大數據的數據來源眾多，數據類型豐富，包括結構化和非結構化數據。但面對如此眾多的數據，如何通過一系列的分析與挖掘，解決各種各樣的難題，從數據中得到對我們有幫助的信息，需要通過長時間的研究才能得到答案。', 0, '2021-07-19 23:08:43', '2021-07-19 23:08:46'); INSERT INTO `edu_paper` VALUES ('8889', '4587', '2', '1.2 研究意義', '自然語言理解(在此指書面語言的計算機理解)也稱自然語言處理，它是計算語言學的分支，是人工智能研究中一個十分活躍的領域，自然語言理解從簡單的語言信息處理到理解篇章，會話，走向認知科學，經歷了二十年的發展歷程[2]。隨着高科技的迅速發展，其應用深入人們生活的各個方面[3]。對於本課題來說，使用自然處理技術對招聘文本進行分析的價值在於，一是對於大學生學習來說，這個模型可以幫助他們加強技術的學習；二是對於大學生就業，當面對海量招聘信息無法確定最合適自己的崗位時，這個模型可以根據自身所學的技術推薦合適的崗位；三是對於學院的學科建設，由於計算機技術每年變動較大，這個模型可以幫助老師調整教學計划，跟上社會的技術變動。', 0, '2021-07-19 23:09:24', '2021-07-19 23:09:26'); INSERT INTO `edu_paper` VALUES ('8890', '4587', '3', '1.3 研究內容', '本課題是基於NLP的招聘文本分析與挖掘，使用數據預處理、文本向量化、自然語言處理(NLP)、關聯分析等技術對招聘文本進行分析與挖掘。主要內容為：提取所需數據，去除“臟數據”，對數據進行分句分詞操作。進行文本向量化操作。利用K-Means聚類算法獲取技術名詞列表。', 0, '2021-07-19 23:10:39', '2021-07-19 23:10:42'); INSERT INTO `edu_paper` VALUES ('8891', '4588', '1', '2.1 Word2vec', 'Word2vec是Google在2013年提出的用於快速有效地訓練詞向量的模型[4]。通過將文本數據輸入到一個學習模型中，Word2vec輸出的詞向量可以表示為一大段文本，甚至整篇文章[5]。word2vec有連續詞袋模型(Continuous bag-of-words，CBOW)和Skip - Gram兩種模型。word2vec能夠將文本詞語轉化為向量空間中的向量,而向量的相似度可以表示文本語義的相似度[6]。Xxxxxxx', 0, '2021-07-19 23:12:22', '2021-07-19 23:12:25'); INSERT INTO `edu_paper` VALUES ('8892', '4588', '2', '2.2 K-Means聚類', 'K-Means算法是聚類算法中主要算法之一，它是一種基於划分的聚類算法[7]。K-Means算法因其在大型數據集聚類方面的效率而聞名[8]。', 0, '2021-07-19 23:13:26', '2021-07-19 23:13:29'); INSERT INTO `edu_paper` VALUES ('8893', '4588', '3', '2.3 關聯分析', '關聯規則是數據挖掘中一種重要的挖掘方法，可發現被研究對象與對研究對象有影響的各因素之間的關聯關系[9]。', 0, '2021-07-19 23:14:17', '2021-07-19 23:14:19'); SET FOREIGN_KEY_CHECKS = 1;
二、實現過程
-
實現思路
-
要先在配置文件中配置MySQL驅動(用yaml配置文件)。然后連接數據庫，建表。
spring: datasource: username: root password: admin url: jdbc:mysql://localhost:3306/paper?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8 driver-class-name: com.mysql.cj.jdbc.Driver -
建表成功，數據庫中存放論文的數據。
-
建一個簡易的前端頁面。
- 用戶在前端頁面上輸入章節id，點擊按鈕之后，前端接收id，輸入框中的信息能發送到后端。必須用
form標簽包圍，才能跳轉到/paragraph，執行ParagraphsController.java。
//這個文件是 search.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>SearchParagraph</title> <link rel="stylesheet" th:href="searchStyle.css"> </head> <body> <form th:action="@{/paragraphs}" class="box"> 請輸入章節ID：(如：4587)<br><br> <input type="text" name="id" th:placeholder="${msg1}"> //傳遞id的值 <button>查詢</button> <pre style="word-wrap: break-word;font-size: 23px" th:text="${para}" class="wordsBox"></pre> </form> </body> </html>
- 用戶在前端頁面上輸入章節id，點擊按鈕之后，前端接收id，輸入框中的信息能發送到后端。必須用
-
在啟動文件的同級目錄下建一個config/MyMvcConfig.java文件，用於地址訪問。(localhost:8080/search.html)會跳到search.html頁面。
@Controller @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/search.html").setViewName("search"); } } -
用Spring Boot將前后端連接，讓前端可以接收后端的數據，后端也可以接收前端的數據。
- 后端接收到前端的id，到數據庫中尋找id對應的數據(章節的標題及其子章節的內容)，並將數據返回給前端。
- 前端接收后端發送的數據，並顯示在頁面上。
@Controller public class ParagraphsController { @Autowired JdbcTemplate jdbcTemplate; //直接訪問這個地址，會直接啟動這個方法。 @GetMapping("/paragraphs") //接收name = "id"的值並賦給id。Model model用來將數據顯示在前端。 public String paragraphs(@RequestParam("id") String id, Model model) { if (!StringUtils.isEmpty(id)) { //章節id繼續顯示在輸入框中。 model.addAttribute("msg1", id); //獲取數據庫中所有數據 String sql = "select * from edu_paper"; List<Map<String, Object>> list = jdbcTemplate.queryForList(sql); List<String> stringList = new ArrayList<>(); //遍歷集合，找到id對應的章節。 for (Map<String, Object> map : list) { //找到id對應的章節 if (map.get("id").equals(id)) { stringList.add(map.get("title").toString()); } //找到對應章節后再找子章節（子章節的id一定比章節標題的id大） if (map.get("parent_id").equals(id)) { stringList.add(map.get("title").toString()); stringList.add(map.get("content").toString()); } } if (stringList.isEmpty()){ model.addAttribute("para","[無此id]"); return "search"; } //將收集到的段落添加到字符串中發送給前端，用<pre>標簽包圍，保證以字符串原格式顯示。 String string = ""; for (String str : stringList) { string += (str + "\n\n"); } //把值傳到前端頁面，並顯示在頁面上。 model.addAttribute("para", string); return "search"; }else { model.addAttribute("para","[id為空]"); return "search"; } } }
-
-
使用的關鍵技術
- MySQL數據庫。（安裝了MySQL服務，為了讓數據庫內容可視化，又安裝了Navicat(其實沒用到)，連接數據庫。）
- Spring Boot框架（Java工程師必備）
- 前端（html和css，做了一個簡易頁面）
-
遇到的困難
- 對Spring Boot是完全陌生的概念。
- 后端從數據庫中獲取到匹配的數據要發送給前端時，數據之間的回車被吃了，數據全部黏在一起，沒有分開。
-
解決過程
-
花了挺多時間去學，去理解了Spring Boot的一些知識，學會了前后端分開，並且能相互連接。以足夠完成《第一個小目標》。
-
用pre標簽可以顯示字符串的原格式，可以將字符串原封不動的輸出(包括\n) 。但是，pre標簽內的文字超出盒子也不會換行，所以要手動在css中設置pre的格式。
pre{ width: 1300px; /*height: 1300px;*/ word-wrap: break-word; white-space: pre-wrap; }
-
三、完成情況
完成的方法比較笨，能滿足基本功能，但如果數據庫太大，有可能會出現問題。
整個作業中用了MySQL、Spring Boot、前端。因為時間有點匆忙，沒有用到Vue和Axios。找時間學習並完善一下。
