当前位置: 首页 > news >正文

使用SpringMVC实现功能

目录

一、计算器

1、前端页面

2、服务器处理请求

3、效果

二、用户登陆系统

1、前端页面

(1)登陆页面

(2)欢迎页面

2、前端页面发送请求--服务器处理请求

3、效果

三、留言板

1、前端页面

2、前端页面发送请求

(1)获取之前的页面留言

(2)发送填写的留言

3、服务器处理请求

(1)针对获取之前留言的请求

(2)针对发送留言的请求

4、前端页面处理服务器的响应

(1)处理获取到全部留言的响应

(2)处理发表留言后的响应

5、效果


一、计算器

1、前端页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<form action="calc/sum" method="post"><h1>计算器</h1>数字1:<input name="num1" type="text"><br>数字2:<input name="num2" type="text"><br><input type="submit" value=" 点击相加 ">
</form>
</body></html>

发送的是form请求,请求路径为:calc/sum,请求方法为:post。

页面效果:

2、服务器处理请求

3、效果

二、用户登陆系统

1、前端页面

前端有两个页面:登录页面和欢迎页面。登陆成功可以跳转欢迎页面。

(1)登陆页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body>
<h1>用户登录</h1>
用户名:<input name="userName" type="text" id="userName"><br>
密码:<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function login() {}</script>
</body></html>
(2)欢迎页面
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>
登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script></script>
</body></html>

效果:

2、前端页面发送请求--服务器处理请求

在登陆页面发送json请求,url为login/check:,参数有:username和password,请求方法为post。

服务器处理上面请求:

登陆页面处理来着服务器的响应:

登陆成功跳转到欢迎页面:

欢迎页面发送json请求,url:"/login/index",请求方式:get,请求内容为空。

服务器处理上面请求:

欢迎页面处理来自服务器的响应:

3、效果

三、留言板

1、前端页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){}</script>
</body></html>

效果:

2、前端页面发送请求

在进入页面的时候,该页面希望获取到之前的页面留言;在填写完留言内容后,希望页面能显示出内容。虽然目前前端已经可以显示,但是浏览器刷新后就没了。

(1)获取之前的页面留言

请求类型:json,请求方式为get,请求数据为空,url:/message/getList

(2)发送填写的留言

请求类型:json,请求方式:post,请求数据:留言内容,url:/message/postList

3、服务器处理请求

定义留言对象

(1)针对获取之前留言的请求

(2)针对发送留言的请求

4、前端页面处理服务器的响应
(1)处理获取到全部留言的响应

(2)处理发表留言后的响应

5、效果

http://www.lryc.cn/news/296401.html

相关文章:

  • spring aop实现接口超时处理组件
  • c++设计模式之装饰器模式
  • WordPress如何实现随机显示一句话经典语录?怎么添加到评论框中?
  • 【退役之重学前端】vite, vue3, vue-router, vuex, ES6学习日记
  • [linux]-总线,设备,驱动,dts
  • python3实现gitlab备份文件上传腾讯云COS
  • 292.Nim游戏
  • Spring和Spring Boot的区别
  • 备战蓝桥杯---动态规划(理论基础)
  • FPGA_ip_pll
  • 【实验3】统计某电商网站买家收藏商品数量
  • 【Qt】Android上运行keeps stopping, Desktop上正常
  • 算法学习打卡day47|单调栈系列题目
  • Maven构建OSGI+HttpServer应用
  • chrome扩展插件常用文件及作用
  • PdfFactory Pro软件下载以及序列号注册码生成器
  • jsp康养小镇管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
  • Android 无操作之后定时退出
  • CMS 检测神器:CMSeek 保姆级教程(附链接)
  • oracle 启动命令以及ORA-01033问题处理、删除归档日志
  • 【大模型上下文长度扩展】MedGPT:解决遗忘 + 永久记忆 + 无限上下文
  • 谷歌seo搜索引擎优化有什么思路?
  • 腾讯云与IBM共同打造“高性能计算服务解决方案“
  • 【SparkML实践7】特征选择器FeatureSelector
  • LeetCode983. Minimum Cost For Tickets——动态规划
  • 百卓Smart管理平台 uploadfile.php 文件上传漏洞【CVE-2024-0939】
  • 项目中常用的一些数据库及缓存
  • MoE-LLaVA:具有高效缩放和多模态专业知识的大型视觉语言模型
  • 【Java】ArrayList和LinkedList的区别是什么
  • RabbitMQ-4.MQ的可靠性