吉林省工程建设标准网站,php 英文商城网站建设,新的网络营销方法,免费营销软件网站1. 加法计算器
需求#xff1a;输入两个整数#xff0c;计算和
约定前后端交互接口#xff1a;
在开发项目前#xff0c;根据需求先约定好前后端交互接口#xff0c;双方按照接口文档进行开发#xff0c;接口文档一旦写好#xff0c;尽量不要轻易改变#xff0c;如果…1. 加法计算器
需求输入两个整数计算和
约定前后端交互接口
在开发项目前根据需求先约定好前后端交互接口双方按照接口文档进行开发接口文档一旦写好尽量不要轻易改变如果要修改必须通知另一方知晓
接口定义
请求路径calc/add
请求方式GET/POST
接口描述计算两个整数相加
请求参数
参数名num1 类型Integer 是否必须是 备注参与计算的第一个数
参数名num2 类型Integer 是否必须是 备注参与计算的第二个数
响应数据
Content-Typetext/html
响应内容计算结果是num1num2)
后端代码
RestController
RequestMapping(/calc)
public class CalcController {RequestMapping(/add)public String add(Integer num1, Integer num2) {Integer sum num1 num2;return 计算结果是 sum;}
} 前端代码
这里我们放在static内
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCalc/title
/head
bodyform actioncalc/addh1计算器/h1数字1input typetext namenum1br/数字2input typetext namenum2br/input typesubmit value计算结果
/form
/body
/html
注意: name属性决定url中的Key 2. 用户登录
接口定义
1.登录接口
请求路径user/login
请求方式POST
接口描述校验用户名密码是否正确
请求参数
参数1参数名userName 类型String 是否必须是 备注用户名
参数2参数名password 类型String 是否必须是 备注密码
响应数据
Content-Typetext/html
响应内容
true登录成功
false登录失败
2. 查询登录用户接口
请求路径/user/getUserName
请求方式GET/POST
接口描述查询当前登录的用户
请求参数无 响应数据Content-Typetext/html
响应内容用户名
后端代码
RestController
RequestMapping(/user)
public class LoginController {RequestMapping(/login)public Boolean login(String userName, String password, HttpSession session) {//储存当前用户的Sessionsession.setAttribute(name, userName);return Ting-666.equals(userName) 666777.equals(password);}RequestMapping(/getUserName)public String getUserName(SessionAttribute(name) String name){return name;}
}
前端代码
login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlelogin/title
/head
bodyh1用户登录/h1用户名input typetext nameuserName iduserNamebr/密码input typepassword namepassword idpasswordbr/input typebutton value登录 onclicklogin()script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscriptfunction login() {//使用ajax发送请求$.ajax({url:/user/login,type:post,data:{userName:$(#userName).val(),password:$(#password).val()},//HTTP 响应成功success:function(result) {if(result) {location.href /getUserName.html;}else{alert(用户名或密码错误);}}});}/script
/body
/html
注意Jquery不能使用本地的
getUserName.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body登录人span idloginUser/spanscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$.ajax({url:/user/getUserName,type:get,success:function(UserName){$(#loginUser).text(UserName);}})/script
/body
/html
3. 留言板
需求实现一个留言板把A对B说的话添加到留言版上
1. 发布留言
接口定义
请求路径/message/publish
请求方法post
请求参数
参数1参数名from 类型String 是否必须是 备注A
参数2参数名to 类型String 是否必须是 备注B
参数1参数名say 类型String 是否必须是 备注说的内容
返回值true/false 备注成功/失败
2. 展示已有的留言
接口定义
请求路径/message/getMessage
请求方法get
请求参数无
返回值返回一个list
后端代码
package com.example.j20240313springmvc;import lombok.Data;/*** 存储一次留言*/
Data
public class Message {private String from;private String to;private String say;
}
//Data 是lombok中的一个注解可以在编译时自动生成get,settoString 等方法
RestController
RequestMapping(/message)
public class MessageController {ListMessage messages new ArrayList();public Boolean publish(Message message) {if(!StringUtils.hasLength(message.getFrom())||!StringUtils.hasLength(message.getTo())||!StringUtils.hasLength(message.getSay())) {return false;}messages.add(message);return true;}public ListMessage getMessages() {return messages;}
}
前端代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title留言板/titlestyle.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
/headbody
div classcontainerh1留言板/h1p classgrey输入后点击提交, 会将信息显示下方空白处/pdiv classrowspan谁:/span input typetext name idfrom/divdiv classrowspan对谁:/span input typetext name idto/divdiv classrowspan说什么:/span input typetext name idsay/divinput typebutton value提交 idsubmit onclicksubmit()!-- divA 对 B 说: hello/div --
/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script
script$.ajax({url:/message/getMessages,type:get,success:function(messages) {for(var message of messages) {var divE divmessage.from 对 message.to 说: message.say/div;$(.container).append(divE);}}});function submit(){var from $(#from).val();var to $(#to).val();var say $(#say).val();$.ajax({url:/message/publish,type:post,data:{from:$(#from).val(),to:$(#to).val(),say:$(#say).val()},success:function(result) {if(result) {//2. 构造节点var divE divfrom 对 to 说: say/div;//3. 把节点添加到页面上$(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();}else{$(#from).val();$(#to).val();$(#say).val();alert(非法输入);}}});}/script
/body/html
