读取数据库内容，并在页面渲染

一、题目

在本地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>

第一个小目标_简易的前端页面

在启动文件的同级目录下建一个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;
}
```