SpringBoot项目前后端数据交互流程

面试被问到前后端数据如何交互的，以自己的项目为例，简单介绍一下。

1. 用户触发点击事件

<div>
    <div>
        <input type="button" value="创作数量排行榜" onclick="creationRanking('content')">
        <input type="button" value="诗词用词云图" onclick="cloudWorld('content')">

    </div>
    <div id="content" style="width: 800px ; height: 500px;">

    </div>
</div>

2. 去执行JS代码

function creationRanking(id) {
    $.get({
        url: "/analyze/creation/ranking",
        dataType: "json",
        method: "get",
        ...
        ...
        })
 }

URL是后端Controller层@getMapping注解对应的代码

@RestController
@RequestMapping(value = "/analyze")
public class AnalyzeController {
    
    @Autowired
    private AnalyzeService analyzeService;
    
    @GetMapping(value = "/creation/ranking")
    public Map<String, Integer> creationRanking() {
        return analyzeService.creationRankingAnalyze();
    }
    
    @GetMapping(value = "/cloud/words")
    public Map<String, Integer> cloudWords() {
        return analyzeService.cloudWords();
    }
}

3. 执行后端代码

public Map<String, Integer> creationRankingAnalyze() {
        Map<String, Integer> summary = new HashMap<>();
        analyzeDao.loadAll().stream().collect(Collectors.groupingBy(PoetryInfo::getAuthorName))
                .forEach((authorName, poetryInfoList) -> summary.put(authorName, poetryInfoList.size()));
        return summary;
    }