Java-使用JSP+Servlet 制作成语接龙

艺术留白

已于 2022-11-04 10:52:58 修改

阅读量1.4k

点赞数 4

分类专栏： Java小程序文章标签： java html tomcat js jquery

于 2022-11-04 10:49:50 首次发布

本文链接：https://blog.csdn.net/qq_35947021/article/details/127680125

版权

Java小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

注意：本文章只用作学习交流，文中的内容禁止用作商业用途，或者其他非法用途。如有任何问题请私信联系我！！！

目录
一、为什么要写这个程序
 二、效果图
 三、分析
 四、项目结构
 五、实现
 1.前端的输入表单
 2.表单的事件控制
 3.后端接龙的处理
 六、总结

一、为什么要写这个程序

由于这学期学了一门叫组件技术的课程（也就是javaWeb），所以小实验需要做一个成语接龙。成语接龙这东西，乍一听好像挺简单（对有些大佬👍来说，哎就是很简单），奈何。。我很菜… 废话不多说，我们开始这个成语接龙程序的思路分析，在此之前晒出本程序最后的效果图🎇

二、效果图

成语接龙效果图

三、分析

原来想着这个程序是如此的简单，直接使用数据库，再加个输入判断，从数据库取出来展示，就行了啊。
但往往事与愿违。在做的过程中，发现了很多问题。同类的文章也都是差不多的思路:
使用数据库、特定成语的接龙（无法做到任意成语接龙）等；这些思路没啥大问题，但多多少少都有些弊病：

数据库中需要存储很多成语，而且还可能有重复的成语。
因为数据库庞大，查询展示的过程，非常缓慢。（当然也有应对此问题的方法，既然是“小程序”，那当然是越简单越好哇）。

我们这里采用的思路是：通过前端输入的成语去成语网站，或者使用成语相关的API接口，获取到数据，然后通过json返回到前端，前端解析展示返回的结果。

四、项目结构

项目结构

五、实现

1.前端的输入表单

我们为了前端的美化，这里使用了bootstrap5框架。它的引用方式有很多种，我们这里使用CDN引入。

<!--Bootstrap5 CDN方式引入-->
  <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

表单的输入框我们做了输入限制,只允许输入汉字。即：加入onkeyup属性，但没有加字数的判断，这个功能读者可以自己添加。下边是表单代码：

<body>
  <div class="container" style="margin-top: 200px;width: 500px;height: 500px">
    <div class="card m-auto  gap-3">
      <div class="card-body text-center">
        <h5 class="card-title">成语接龙</h5>
        <div id="subject" style="font-size: 20px;padding: 20px 0">
        </div>
        <input onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')" type="text" class="form-control" id="idiomText">
      </div>
      <div class="m-auto">
        <button id="submit" class="btn btn-primary">接龙</button>
      </div>
      <div id="result">
      </div>
    </div>
  </div>
  </body>

2.表单的事件控制

上边已经实现了我们的基本页面的显示，但还没有为其添加行为，也就是我们的页面都还不能实现前后端的交互。好！知道了我们需要干什么之后，就可以有的放矢🏹。
我们这里采用的方案是：使用Jquery这个js库和Ajax来实现前端请求的发送。

💡jquery的引入
我这里使用的是文件引入的方式,但为了极可能的做到简化，不让大家下载太多的文件。测试了一下CDN方式，发现也可以👏。

<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>

📝表单提交发送事件绑定

我们这里添加了表单内容非空判断，即：输入为空禁止提交。

在这里插入图片描述

Ajax请求也是使用Jquery的方式(因为原生js的Ajax很繁琐)。请求携带的参数就是输入框中的内容，前后端交互使用的数据格式是json。
这里最重要的是，Ajax的回调函数，回调函数会接收到后端的json字符串，然后动态的前端添加接龙后的结果。

 $("#submit").click(
   function () {
     if($("#idiomText").val().trim() == ""){
         alert("请输入！");
         return false;
     }
     $.post(
             "/idiom/idiomServlet",
             {
               idiom:$("#idiomText").val()
             },
             function (data) {
               var parseJSON = JSON.parse(data)
               $("ul").remove();
               var $ul = $("<ul class='list-group list-group-flush text-center'></ul>");
               for (var i = 0;i < parseJSON.data.hou.length;i++){
                 var $li = $("<li class='list-group-item btn'>" + parseJSON.data.hou[i]['name'] +  "</li>").attr("id",i+1);
                 $ul.append($li);
               }
               $("#result").append($ul);
               $("#subject").append($("<span class='badge bg-dark' style='padding-left: =20px'></span>").append($('#idiomText').val() + "->"));
               // 提交之后清空输入框
               $("#idiomText").val("");
             },
             "json"
     )
})

💡补充

为了提升体验，我们还添加了一段js代码。它的作用就是：点击返回接龙之后的结果列表中的一个成语，文本框就会获取到此成语。

在这里插入图片描述
这是相关js代码

 $("div[id='result']").click(
  function (e) {
       var id = document.getElementById(e.target.id);
       $("#idiomText").val(id.innerText);
     }
 )

到这里我们的前端所有工作就全部做完了，让我们趁热打铁🔨去完成后端的代码吧🎆！

3.后端成语接龙的处理

📥Jsoup1.15.3下载地址

开始想着用有关成语的API接口，但好像都要收费最后就放弃了。因为只是学习交流，所以后边就想着在现成网站上直接搜索结果，然后利用爬虫来获取页面的数据，用于我们的程序结果，然后将结果通过后端返回给前端。
我这里使用的Jsoup这个解析HTML的爬虫技术。Jsoup提供了很多相关API，可以使我们很容易的通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。

这里我们首先得在后端必须得获取到前端携带过来的输入框参数

String idiom = request.getParameter("idiom");

{
  idiom:$("#idiomText").val()
}

☝上边这两个参数名要保持一致，否则获取不到输入框中的内容

👇下边是后端完整代码

package com.jl;

import com.google.gson.Gson;
import org.jsoup.Jsoup;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class IdiomServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String idiom = request.getParameter("idiom");
        String body = Jsoup.connect("https://tool.ymacg.com/cms/tool/chengyu_process.html?words=" + idiom)
.ignoreContentType(true).execute().body();
        System.out.println("body=" + body);
        // 响应必须设置MIME类型，否则前端收到的内容会出现中文乱码
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(new Gson().toJson(body));
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

📥gson2.2.4下载地址

这里我经过测试，携带内容访问目标网址拿到的直接就是json字符串，所以我们这里只需要在后端使用Gson类库，将数据返回即可。

📕web.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>IdiomServlet</servlet-name>
        <servlet-class>com.jl.IdiomServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>IdiomServlet</servlet-name>
        <url-pattern>/idiomServlet</url-pattern>
    </servlet-mapping>
</web-app>