门户网站简称,四川建设厅网站登录不上咋办,wordpress 加上index,在百度建免费网站吗#x1f9f8;注#xff1a;不要看我的文件多#xff0c;那是我的其他项目#xff0c;这个项目所用的文件我会全部用红框框起来#xff0c;没框的部分不用管#xff0c;前端两个文件#xff0c;后端一个文件 #x1f4dc; 目录
首先#xff0c;定义前后端交互接口
然… 注不要看我的文件多那是我的其他项目这个项目所用的文件我会全部用红框框起来没框的部分不用管前端两个文件后端一个文件 目录
首先定义前后端交互接口
然后创建一个SpringBoot项目
编写前端页面
登录(login.html)
主页(index.html)
编写后端代码
方法login处理逻辑
方法getUserInfo处理逻辑 首先定义前后端交互接口 讲解 登录接口路径可以较为随意的设定但参数必须有账号密码也就是username和password后端进行校验后返回校验成功还是校验失败也就是true和false 获取用户的登录信息不需要传任何参数只需要前端发送请求后后端将当前登录用户的名称返回即可
然后创建一个SpringBoot项目
如何创建一个SpringBoot项目——超详细教程
编写前端页面 在resource目录下的static目录下创建登录和主页的html页面此处我将其分别命名为 login.html和index.html
如图红框位置 登录(login.html) !DOCTYPE html
html langenheadmeta charsetUTF-8title登录页面/title
/headbody
h1用户登录/h1
用户名input nameuserName typetext iduserNamebr
密码input namepassword typepassword idpasswordbr
input typebutton value登录 onclicklogin()script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script
scriptfunction login() {console.log(登录);$.ajax({ // ajax 发送请求url: /user/login, // 请求路径type: post, // 请求类型data:{ // 传递的参数userName: $(#userName).val(),password: $(#password).val()},success:function(result){ // 如果响应成功了(有响应)则执行此回调函数 result 表示后端返回的结果if(result){location.href /index.html; // 页面跳转// location.assign();}else{alert(密码错误); // 弹框}}});}/script
/body/html
代码逻辑 从input输入框内获取username和password参数向后端发送post请求将参数发送过去后端进行校验如果后端响应为true则说明响应成功(账号密码正确)执行回调函数跳转页面到index.html (主页)
主页(index.html) !doctype html
html langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle用户登录首页/title
/headbody
登录人: span idloginUser/spanscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script
script// 页面加载时就去调用后端请求(立即执行)$.ajax({url: /user/getUserInfo,type: get,success:function (username){$(#loginUser).text(username); // text 表示往该选择器放值此处放username这个值}});
/script
/body/html
代码逻辑来到该页面立即向后端发送get请求获取用户名username并展示到该页面上
编写后端代码
创建Java文件我将其命名为userController 以下是全部代码
RequestMapping(/user)
RestController
public class UserController {RequestMapping(/login)public Boolean login(String userName, String password, HttpSession session){// 校验参数的合法性
// if(userName null || userName.length()0 || password null || password.length() 0){
// return false;
// }if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}// 进行用户名和密码的校验if(admin.equals(userName) admin.equals(password)){// 设置sessionsession.setAttribute(username,admin);return true;}return false;}RequestMapping(/getUserInfo)public String getUserInfo(HttpSession session){// 从Session获取登录用户String userName (String) session.getAttribute(username);return userName;}
}方法login处理逻辑 先校验参数合法性判断是否为空等然后进行用户名和密码的校验判断是否是正确的用户名和密码如果以上校验都通过则设置session存放username以便后续使用
方法getUserInfo处理逻辑 从session中获取username并返回给前端
