2. 技术博客
  3. 考研倒计时小系统(前后端交互)

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

tech2025-05-30  4

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

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" %> <html> <head> <title>考研倒计时</title> <!--引用的一些样式--> <link rel="stylesheet" href="css/elementUi.css" type="text/css"/> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/base.css" type="text/css"/> <link rel="stylesheet" href="css/main.css" type="text/css"/> <link rel="shortcut icon" href="images/foodie.ico"/> <!--引用的vue 和elementui组建库--> <script src="js/vue.js"></script> <script src="js/elementUi.js"></script> <script src="js/jquery.min.js"></script> <!--这是样式--> </head> <body> <div id="one" align="center"> <el-row><font color="red" size="100px">考研倒计时</font></el-row> <img src="images/dmeo.jpg" height="205" width="318"> <form> <font color="#00bfff" size="100px">考研日期:</font> <el-date-picker name="kaoyantime" id="kaoyantime" v-model="kaoyantime" type="date" placeholder="选择日期"> </el-date-picker> <br> <button type="submit" @click="confirmdays">确定</button> <br> <el-row><font color="red" size="100px">你考研剩余${sessionScope.endsdays}天</font></el-row> <br/> </form> </div> </body> <script> new Vue({ el:"#one", data:{ days:'5', kaoyantime:null, }, methods:{ confirmdays:function () { /*这个可以拿到当前获取的值 通过id获取*/ var kao = $("#kaoyantime").val(); $.ajax({ url: 'http://localhost:8080'+'/CountUP_war_exploded/demo', type: "get", data:{"kaoyantime":kao}, }); } }, }); </script> </html>

知识点讲解 :

主要就是一个日期选择器, 然后点击提交按钮,触发一个点击事件 ,这个事件中执行的函数就是发送AJAX请求

2.AJAX将用户输入的数据发送给后端

ajax就是专门用来将前端页面获取的数据通过一个URL路径发给后后端代码,后端那里早就准备好了这个路径,用来接收这个数据

代码 :

confirmdays:function () { /*这个可以拿到当前获取的值 通过id获取*/ var kao = $("#kaoyantime").val(); $.ajax({ url: 'http://localhost:8080'+'/CountUP_war_exploded/demo', type: "get", data:{"kaoyantime":kao}, }); } 这是主要就是获取这个用户输入的值 ,可以用$("组件id名称").val 然后定义一个变量用来接收 $.ajax里面就是一些键值对 ,url是你后端接收里面要发送数据的路径入口 我这里是写死的数据,http://localhost:8080是我的IP地址+端口号 /CountUP_war_exploded是我的项目名称, /demo是我后端接收这个参数的入口 , 注意这个路径要带/ 不写会报错 ,type是你通过什么类型发送 , data是你要发送的数据 ,async 不写默认为true ,我比较懒,默认我还写干嘛 !

3.后端接收ajax发送的数据

我们可以利用一些框架来进行接收这些数据,但是我这里使用的是比较古老的技术servlet来接收数据 我们只需要利用那边这个注解 ,name可以不写,就是个标记 ,urlPatterns就是路径, 就像你家的门牌号一样,通过这个可以找到你 @WebServlet(name = "OneServlet",urlPatterns ="/demo") 剩下的就是一个方法 ,给你一个日期类型 ,你给我返回一个整数 实现思路 : 就是先通过request.getParameter("kaoyantime"); 通过组件Name获取ajax发送过来的那个数据, 然后呢我们利用new Date 获取当前的日期, 然后我们利用getTime()这个方法把日期转化为毫秒值 这样两个数字就可相减了, 我们会得到这两个时间的插值 然后我们除以换算单位 ,这样我们就得到了剩余的天数

代码 :

package com.itheima; import javax.jms.Session; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import javax.swing.*; import java.io.IOException; import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.Map; import java.util.Set; /** * @Author Zhang Shuai * @Date 2020/9/2 22:24 * @Version 1.0 */ @WebServlet(name = "OneServlet",urlPatterns ="/demo") public class OneServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String kaoyantime = request.getParameter("kaoyantime"); System.out.println(kaoyantime); Date twotime=new Date(); DateFormat df = new SimpleDateFormat("yyyy-MM-dd"); try { twotime = df.parse(kaoyantime); System.out.println("这是将要考研的日期"+twotime); } catch (ParseException e) { e.printStackTrace(); } Date onetime = new Date(); long starttime = onetime.getTime(); long endtime = twotime.getTime(); long milliSecond = endtime - starttime; long endsdays = milliSecond / (24 * 3600 * 1000); System.out.println("这是当前的日期"+onetime); System.out.println("考研剩余的天数"+endsdays); ArrayList<Long> DEMO = new ArrayList<Long>(); DEMO.add(endsdays); HttpSession session = request.getSession(); session.setAttribute("endsdays", endsdays); /*请求转发到这个页面中去*/ request.getRequestDispatcher("index.jsp").forward(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } }

4.后端数据显示到前段页面中

首先我们把刚才这个long类型的整数存到一个list集合中,然后我们把它存到session域中,然后我们给他请求转发到这个页面本身 然后我们通过el表达式获取这个session中存储的数据 ${sessionScope.endsdays} endsdays是你往session域中存数据的键名称 ;

5、代码下载地址

我已经将代码上传到了我的Github中,需要的可以下载

https://github.com/zhagnshuai19951021/My-Project.git

目录下的CountUP.zip

最新回复(0)