服装网站设计理念,做网站的感想与收获,知名门户网站,西数网站助手学习目的#xff1a; 1、理解前后端交互过程 2、学习接口传参#xff0c;数据返回以及页面展示 1、准备工作
创建SpringBoot项目#xff0c;引入Spring Web依赖#xff0c;添加前端页面到项目中。
前端代码#xff1a; login.html !DOCTYPE html
html lang 1、理解前后端交互过程 2、学习接口传参数据返回以及页面展示 1、准备工作
创建SpringBoot项目引入Spring Web依赖添加前端页面到项目中。
前端代码 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() {}/script
/body/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/script
/body/html
2、约定前后端交互接口
需求分析
对于后端来说不涉及前端页面展示的设计只需要实现两个功能 登录页面通过获取账号和密码校验输入的账号密码是否正确并反馈给前端 首页告知前端当前登录用户。如果当前已有用户登录则返回登录的账号没有则返回空 1、校验接口
接口定义 请求路径/user/login 接口描述校验账号密码是否正确 请求参数 响应数据 Content-Typetext/html 响应内容true 账号密码验证成功 / false 账号密码验证失败 2、查询用户登录接口
接口定义 请求路径/user/getLoginUser 接口描述查询当前登录的用户 请求参数 无 响应数据 Content-Typetext/html 响应内容zhangsan 返回当前登录的用户 3、实现服务端代码
1、校验接口
写法一
import jakarta.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;RestController()
RequestMapping(/user)
public class LoginController {RequestMapping(value /login)public Boolean login(String userName, String password, HttpSession session) {//账号或密码为空if(userName null || password null) {return false;}//校验账号密码是否正确//因为没有引进数据库所以这边先采用硬编码把它写死if(zhangsan.equals(userName) 123456.equals(password)) {//账号密码校验成功存储到session中session.setAttribute(username, userName);return true;}return false;}
}
写法二
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;RestController()
RequestMapping(/user)
public class LoginController {RequestMapping(value /login)public Boolean login(String userName, String password, HttpSession session) {//写法二//校验账号密码是否为空if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}//校验账户密码是否正确if (!zhangsan.equals(userName) || !123456.equals(password)) {return false;}session.setAttribute(userName, userName);return true;}
} StringUtils.hasLength() 是Spring提供的一个工具方法判断字符串是否有值 字符串为 null 或 时返回 false其他情况返回 true 2、查询用户登录接口
import jakarta.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;RestController()
RequestMapping(/user)
public class LoginController {RequestMapping(/getLoginUser)public String getLoginUser(HttpSession session) {//从session中获取用户登录信息String userName (String) session.getAttribute(username);//如果用户已经登录session不为空则直接返回用户信息if (userName ! null) {return userName;}return ;}
}4、调整前端页面代码
1、调整登录页面login.html 对于前端而言当点击登录按钮时需要把用户登录的信息传递到后端进行校验后端校验成功则跳转到首页 index.html后端校验失败则弹出警告 scriptfunction login() {$.ajax({url: /user/login,data: {userName: $(#userName).val(),password: $(password).val()},success: function (result) {if (result) {//返回结果为true 页面跳转location.href index.html;} else {//返回结果为false 报警告alert(账号或密码错误);}}});}/script
2、调整首页代码 调整首行代码只需显示当前登录用户即可当前登录用户需要从后端获取并显示到前端 script$.ajax({type: get,url: /user/getLoginUser,success: function (result) {$(#loginUser).text(result);}});/script
5、运行测试 session存储在内存中只要服务器没重启即使多次刷新仍可以显示登录人信息~
