网站首页怎么设计,加强学科网站建设,wordpress twenty,松山湖网站建设公司#x1f9f8;欢迎来到dream_ready的博客#xff0c;#x1f4dc;相信你对这篇博客也感兴趣o (ˉ▽ˉ#xff1b;) 用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证#xff08;带前后端源码#xff09;全方位全流程超详细教程 目录
项目前端页面展… 欢迎来到dream_ready的博客相信你对这篇博客也感兴趣o (ˉ▽ˉ) 用户登录前后端开发(一个简单完整的小项目)——SpringBoot与session验证带前后端源码全方位全流程超详细教程 目录
项目前端页面展示
首先定义前后端交互接口
然后创建一个SpringBoot项目
编写前端页面
编写后端代码 1、封装实体类 —— MessageInfo(单独创建一个.Java文件)
2、逻辑代码
方法publishMessage处理逻辑
方法getMessageInfo处理逻辑
后端项目代码中需要导入的包代码 项目前端页面展示 首先定义前后端交互接口 讲解 此项目注重前后端信息的交互舍去了登录的操作 提交留言 —— 点击提交后前端从输入框获取三个参数的值向后端发送这MessageInfo的三个参数的值后端接收后保存 查看所有留言 —— 前端发送无参的请求后端向前端返回一个List集合前端遍历集合将数据展示到前端页面上
然后创建一个SpringBoot项目
如何创建一个SpringBoot项目 —— 超详细教程
编写前端页面 在resource目录下的static目录下创建表白墙的html页面此处我将其命名为 messagewall.html
如图红框位置 表白墙页面(messagewall.html) !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/getMessageInfo,type: get,success:function (message){for(var m of message){// 2. 拼接节点的 htmlvar divE div m.from 对 m.to 说: m.message/div;//3. 把节点添加到页面上$(.container).append(divE);}}});function submit(){//1. 获取留言的内容var from $(#from).val();var to $(#to).val();var say $(#say).val();if (from || to || say ) {return;}// 发送请求$.ajax({url: /message/publish,type: post,data: {from: from,to: to,message: say},success: function(result){if(result){// 添加成功// 2. 拼接节点的 htmlvar divE divfrom 对 to 说: say/div;//3. 把节点添加到页面上$(.container).append(divE);//4. 清空输入框的值$(#from).val();$(#to).val();$(#say).val();}else{// 添加失败alert(留言发布成功)}}});}/script
/body/html
代码逻辑 从input输入框内获取fromtomessage三个参数向后端发送post请求并将参数发送过去后端接收参数并保存前端页面也将这段数据直接展示在页面上 每次刷新页面前端向后端发送get请求后端响应回封装成List集合的所有数据前端遍历集合并将其展示在前端页面上
编写后端代码 1、封装实体类 —— MessageInfo(单独创建一个.Java文件) 内部三个参数分别对应fromtomessage三个参数用来定义成集合中泛型对应的类型存放前端传来的数据 Data // 组合注解集成了Getter Setter ToString 等注解
public class MessageInfo {private String from;private String to;private String message;}
2、逻辑代码 创建Class文件我将其命名为MessageController.Java 以下是全部代码
RequestMapping(/message)
RestController
public class MessageController {private ListMessageInfo messageInfos new ArrayList();RequestMapping(/publish)public Boolean publishMessage(MessageInfo messageInfo){// 进行参数的校验if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getMessage())){return false;}// 添加留言messageInfos.add(messageInfo);return true;}RequestMapping(/getMessageInfo)public ListMessageInfo getMessageInfo(){return messageInfos;}
} private ListMessageInfo messageInfos new ArrayList();定义了一个存放MessageInfo类型的集合来存放表白墙内的数据 方法publishMessage处理逻辑 接收前端传来的数据自动将其封装为MessageInfo类型进行参数的校验判断三个参数是否有空若有空返回false(失败)若参数正确则添加留言往集合中添加messageInfo并返回true
方法getMessageInfo处理逻辑 向后端返回集合MessageInfo集合中存放所有的表白墙数据 后端项目代码中需要导入的包代码
可以手动导入我的也可以自己导入放在各自文件的最上面
MessageInfo.Java
import lombok.Data;
MessageController.Java
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;
