关键词查询-前后端交互

1.配置文件 pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.11</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>springboot-demo1</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>springboot-demo1</name>
	<description>springboot-demo1</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>com.hankcs</groupId>
			<artifactId>hanlp</artifactId>
			<version>portable-1.8.4</version>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

配置 application.properties文件

root = Users/star/Documents/hanlp
#自己定义端口号
server.port=8082

2.前端工程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词提取</title>
    <style>
        .keyword{
            width: 1000px;
            margin: auto;
        }
        .keyword h4{
            text-align: center;
            margin: 40px auto;
        }
        .keyword p{
            text-align: center;
        }
        .keyword .text{
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .keyword .text textarea{
            height: 400px;
        }
        .keyword .word{
            flex: 1;
        }
        .keyword .word div{
            height: 400px;
            border: 1px solid hotpink;
        }
        .keyword form{
            display: flex;
        }
    </style>
</head>
<body>
<div class="keyword">
    <h4>提取文本的关键词</h4>
    <p>说明：输入任意文本，提取关键词</p>
    <form action="" method="post">
        <div class="text">
            <label>文本</label>
            <textarea name="text"></textarea>
        </div>
        <button>提取关键词</button>
        <div class="word">
            <label>提取后的关键词</label>
            <div></div>
        </div>
    </form>
</div>
</body>
</html>
<script>
    /**
     *  onsubmit只能在表单中使用，表示是当点击提交表单时触发事件
     *  @return true：允许提交表单；false：不允许提交表单；
     */

    document.querySelector('.keyword form').onsubmit = function () {
        //自己对手提交数据 需要使用ajax
        var request = new XMLHttpRequest()
        //1.建立连接
        request.open('POST','/keyword')
        //1.2设置请求头
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        //2.发送请求

        //console.log(new FormData(this));
        var text = document.querySelector('.keyword form textarea').value
        request.send("text=" + text)//使用url的格式:a=1&b=2
        //3.等待返回数据并且自己处理数据
        request.onreadystatechange = function (){
            //1-4:接收到返回数据并且处理完了
            if(request.readyState === 4){
                document.querySelector('.keyword form .word div').innerHTML=request.responseText//后端返回的数据自动存储到这个变量中
            }
        }
        return false
    }

</script>

3.后端

package com.example.springbootdemo1.contorller;

import com.hankcs.hanlp.HanLP;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
@RestController
class KeywordController {
    @PostMapping("/keyword")
    public List <String> keyword(@RequestParam("text") String text) {
        List<String> stringList = HanLP.extractKeyword(text, 10);
        return stringList;
    }
}

注意:这个只是课上的小练习，只是体验一下前后端的交互流程。

关键词查询-前后端交互

猜你喜欢