注意:本文章只用作学习交流,文中的内容禁止用作商业用途,或者其他非法用途。如有任何问题请私信联系我!!!
目录
一、为什么要写这个程序
二、效果图
三、分析
四、项目结构
五、实现
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.后端成语接龙的处理
开始想着用有关成语的
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);
}
}
这里我经过测试,携带内容访问目标网址拿到的直接就是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>
六、总结
以上就是我们
成语接龙
程序的所有内容。具体讲解了这个程序的实现思路,总体来说还是比较简单。在此过程中使用了一点爬虫
相关的内容,但很简单,想要了解Jsoup
相关内容的读者,可以查找相关的内容来进行学习。
最后希望大家多多关注^_^,你们的关注是我不断前进的动力!!!
感谢感谢~~~🙏🙏🙏
再次声明:本文章只用作学习交流,文中的内容禁止用作商业用途,或者其他非法用途。如有任何问题请私信联系我!!!