关键词查询-前后端交互

妖狐艹你老母 2024-03-22 13:07 59阅读 0赞

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/> 
    	</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;
        }
    }

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