Vue +Springboot + MySQL制作搜索引擎（三）后端用 spring boot 连接数据库和前端接口设计

Vue +Springboot + MySQL制作搜索引擎（三）后端用 spring boot 连接数据库和前端接口设计

后端我用 IntelliJ IDEA 软件。

一. 创建项目

file-new-project

next

next

选择web-spring web，next
后面就是选择文件存储位置，这个按照个人喜好即可。最后finish

二. 项目设计

1.配置 POM 池

因为要连接数据库，所以要引入数据库的dependency。

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web-services</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

我把我整个 POM 池的 dependency 都粘过来，重点是 mysql 和 jpa 两个 dependency ，读者可以自行上网搜其他引入数据库的办法对比学习，其实都是一样的。。。

有的朋友引入时会报错，因为我刚加入的时候也报错，但每个人情况都不同，报什么错就在控制台看什么错，然后搜解决办法。这里一定要做到不报错了再进行下一步。

第二步，在 src/main/resources/application.properties 文件里配置数据库信息

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/baidu_search?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=admin
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto = none

插播：数据库命名如下

解释一下，第一行的 baidu_search 对应数据库的名字，二三行是自己数据库的账号密码，这个在下载数据库的时候预设好的，要记得，要是忘记了就很麻烦哦。（笔者忘记了，搞到最后卸载又下了一遍 mysql 哭哦！！）四五行不用管。

2.项目结构

读者需要自己新建好这几个文件夹和 JAVA 类。

说明：
SearchController用来写与前端通信的接口，里面return的内容就是送给前端的内容。
SearchDAO定义了对数据库搜索的语句
Receive用来接收来自前端的输出，做好映射
Search用来接收来自数据库的数据，做好映射

（1）Receive

package com.zyt.baidu_search.pojo;

public class Receive {
    // 接收来自前端的输出
    String searchContent;
    public String getSearchContent() {
        return searchContent;
    }
}

上一篇讲到 axios.post 像后端传递了一个参数，就是 searchContent 这个。后端用同样的名字接收前端来的数据，作为后端接受前端的接口。

（2）Search

// 用于映射数据库到后端，数据库：baidu_search，表名：items，映射过来叫：Search
package com.zyt.baidu_search.pojo;

import javax.persistence.*;

@Entity
@Table(name= "items")//数据库表名
public class Search {
    @Id//定义主键，该注解下面的属性即为主键
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name= "id")
    private int id;

    @Column(name="title")//定义表中的每一列，即每一个属性
    private String title;

    @Column(name="abstracts")
    private String abstracts;

    @Column(name="imgURL")
    private String imgURL;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getAbstracts() {
        return abstracts;
    }

    public void setAbstracts(String abstracts) {
        this.abstracts = abstracts;
    }

    public String getImgURL() {
        return imgURL;
    }

    public void setImgURL(String imgURL) {
        this.imgURL = imgURL;
    }
}

映射 mysql 里的列到后端实体中去。

这里没有给编译器配置 mysql 的话一般都会报错。很正常，因为找不到数据库嘛！
解决办法：
https://www.jianshu.com/p/159f88ba8a9d
https://www.cnblogs.com/wenqiangit/p/11326981.html
如果引入的数据库列上还有红色波浪线，就用这个办法：
进入file-settings，左边Editor-Inspections找到JPA，全部取消勾

apply，ok，搞定

（3）SearchDAO

package com.zyt.baidu_search.dao;
import com.zyt.baidu_search.pojo.Search;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;

import java.util.List;

public interface SearchDAO extends JpaRepository<Search,Integer>{

    // 添加功能，按照关键字查询title ，这里一定要把 * 用上不然出问题，猜想可能是和主键设置有关？
    //新建一个查询，名字叫findByTitle，查询语句是后面那句
    @Query(name="findByTitle",nativeQuery = true,value = "select * from items where title LIKE %:title%")  //items是数据库baidu_search下的表items，存网页搜索结果
    List<Search> findByTitle(@Param("title") String title); //引用title,对数据库进行查询
}

select * from items where title LIKE %:title%这一段是 sql 的查询语句，前后都加 % 就能根据关键词查询

（4）SearchController

package com.zyt.baidu_search.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.zyt.baidu_search.dao.SearchDAO;
import com.zyt.baidu_search.pojo.Search;
import com.zyt.baidu_search.pojo.Receive;

import java.util.List;

@Controller
public class SearchController {
    @Autowired SearchDAO searchDAO;

    @CrossOrigin
    @PostMapping(value = "api/result")   // 处理POST请求
    @ResponseBody  // 使返回结果被解析为json数据

    public List<Search> findByTitle(@RequestBody Receive requestSearch){

        String searchContent = requestSearch.getSearchContent();
//        System.out.println(searchContent);

        List<Search> tp = searchDAO.findByTitle(searchContent);
//        System.out.println(tp);


//        返回搜索到的匹配的JSON数组
        return tp;
    }
}

searchContent 是前端传给后端的搜索关键字，这个函数调用 SearchDAO 的 findByTitle 方法，在数据库中搜索符合条件的标题，然后把整个符合条件的词条数组返回给前端。即 tp 数组。

最后一步，不要看他小，但是很关键哦。配置后端接收前端信息的接口。
同样在 application.properties 文件里加一行：server.port=8443
完整的文件就是：

server.port=8443

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/baidu_search?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=admin
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto = none

如此一来，后端与前端、后端与数据库的接口就都写好啦。其实没配置数据库的朋友会看不明白怎么和 mysql 数据库相连的。不要紧，先把和前端的联系看懂，下一节把数据库配置写了，再回头看和后端的接口就恍然大悟了。