考研倒计时小系统(前后端交互)

首先展示一下效果
这个系统虽小 ,可是我个人觉得 , 几乎把最主要的技术都用到了 ,麻雀虽小,却五脏俱全 !

1、整体实现思路

首先写一个页面,用于输入将要考研的日期 ,然后点击确定,触发一个点击事件,我们将这个数据发送给后端,后端经过一系列的处理,返回一个整数(也就是剩余的天数),然后我们再将这个整数显示到页面中即可

上面的过程说白了
1.就是用户输入一个数据,
2.你将页面中用户输入的数据发送给后端
3.经过处理,返回给前端页面
所有的互联网的网站都是这样的一个实现思路

2、技术选型

1.用于输入数据 我这里使用的elementUI中日期选择组件
2.发送给后端 我们可以使用form表单 , 也可以使用AJAX把前端页面获取的数据发送给后端, 我这里使用的是AJAX,因为AJAX是异步的,回显的时候会很方便
3.后端的数据显示到前端页面中 我这里使用的el表达式 ,首先将处理的数据存到一个域中,然后使用el表达式给他取出来就行, 当然更可以使用一些框架 , 返回到页面中更简单 ; 图省事没有用
4.后端入口 我这里使用的是servlet ,其实可以使用spring ,springboot框架更好 , 后续我会对其进行优化,这里主要讲解这个实现的思路

3、踩坑点

浪费我最多时间的地方就是后端数据回显到前端页面 ,整整从下午下班到晚上11点半,实现不了效果令我痛苦不堪,
我刚上来是把数据存到request域中 ,然后我用el表达式到jsp页面中去取值 ,死活取不出来,我想是不是缺少jar包,查看了一下不太需要 , jstl需要jar包,
然后我又去网上找了一大堆的解决方案 ,全部屁用没有 ,
然后我偶然试了一下,我先在页面中往request域中存了一个常量 ,然后用el表达式很顺利就取出来了结果, 这说明是我往域中存数据出了问题,
然后我忽然想到这是request域的作用域问题 ,request一次请求就失效了
然后我立马试了一下session , 这个是一次会话才会失效, 然后还是不行,还是取不出来数据,我真的是要骂人了!
然后我把刚才那个整数先放到一个list集合中 ,然后存到session域中,
果然,神奇的事情发生了 ,终于结果回显出来了 !
苍天啊 ! 终于可以舒服的睡觉了 !

4、涉及的技术

1.前端页面

艺术字这些没什么技术含量 ,主要就是这个日期选择器, 我使用的elementUI提供的日期选择器组件,想要使用这些组件首先要在页面中进行引入,如果不太会写页面,可以看看之前的那篇实现增删改查小系统的文章

然后点击确定按钮,触发一个点击事件

代码 :

<%@ page contentType="text/html;charset=UTF-8" language="java"