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

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="data:images/dmeo.jpg" height="205" width="318"><form><font color="#00bfff" size="100px">考研日期:</font><el-date-pickername="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

考研倒计时小系统(前后端交互)相关推荐

微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序前后端交互__完整的登录注册
简介微信小程序连接后端,后端的代码放的位置随便,后端运行之后,微信小程序模拟器会自动匹配微信小程序官方文档给出的发起 HTTPS 网络请求的示例代码为 wx.request({url: 'exam ...
在线食物卡路里计算器html源码,卡路里计算器微信小程序前后端交互
SSM框架在Controller中添加一个 @RequestMapping(value="/getjson",method={RequestMethod.GET}) @Respo ...
微信小程序前后端数据交互
目录一微信小程序发送请求二后端接口接受小程序请求并返回数据三最后的效果图先简单说一下我写的这个危险小程序前后端交互的业务,主要是两个数据:supplyCount和wantBuyCount ...
小程序服务器搭建前后端交互,微信小程序：request前后端交互路由跳转存储数据到本地和获取小程序登入授权...
一 request前后端交互基本样式 wx.request({ url:'test.php', //仅为示例,并非真实的接口地址 data: { x:'', y:''}, header: {'con ...
【小项目】Axios 实现前后端交互
Axios 实现前后端交互文章目录 Axios 实现前后端交互一.数据库二.前端三.后端 1.StudentServiceImpl.java 2.StudentController.java ...
服务器版博客系统、前后端交互1
一.准备工作 1). 创建 maven 项目 2). 引入依赖 servlet,jackson,mysql <dependencies><!-- https://mvnreposit ...
微信小程序【网易云音乐实战】（第二篇轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染）
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题一.轮播图二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标三.滚动条 sc ...
【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
第 4-7 课:前后端交互之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...

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

1、整体实现思路

2、技术选型

3、踩坑点

4、涉及的技术

5、代码下载地址

考研倒计时小系统(前后端交互)相关推荐

最新文章

热门文章