项目前端资源下载链接

https://wwa.lanzoui.com/iGD3xl6i5ni

项目源视频

https://www.bilibili.com/video/BV19K4y1L7MT/?p=45&spm_id_from=pageDriver&vd_source=c4ecde834521bad789baa9ee29af1f6c

登录功能

首先我们登录功能的网页是 login.html。

@Controller
public class IndexController {
//处理 / 和 /login请求，转发视图到login登录页面@GetMapping(value={"/","/login"})public String loginPage(){return "login";}//注意这里的请求方式是POST，只有通过表单提交才可以发送POST，直接拼接地址栏是GET，也就是上面的方法作处理@PostMapping("/login")public String main(User user, HttpSession session, Model model){//User对象封装登录表单发送的 userName和password参数的属性值if(!(StringUtils.isEmpty(user.getUserName()))&& "123456".equals(user.getPassword())){//把成功登录的用户保存起来session.setAttribute("loginUser",user);//登录成功重定向到main.htmlreturn "redirect:/main.html";}else{model.addAttribute("msg","账号密码错误！");return "login";//否则就继续回到登录页面}}@GetMapping("/main.html")//跳转页面public String mainPage(HttpSession session, Model model){//是否登录。拦截器，过滤器Object loginUser = session.getAttribute("loginUser");if(loginUser != null){//作用域里没有用户就直接回到login页面，不允许直接访问mainreturn "main";}else{model.addAttribute("msg","请重新登录！");return "login";//否则就继续回到登录页面}}
}    

loginPage()方法
该方法处理的请求方式是GET请求，处理 / 和 /login请求，直接返回到login页面

main()方法
main方法处理的请求是POST类型，此处所处理的/login是POST方式发送的请求，这么写的意义是地址栏直接拼接或刷新所发送的请求都是GET请求，而表单发送的请求才是POST请求，所以无须担心和GET处理的login所冲突，也只有表单发送的POST方式的/login请求才是真正登录请求，此处登录方法的形参有一个User类，该类有2个成员变量：userName和password，该对象直接封装表单提交过来的2个参数属性值；还有HttpSession对象，用session对象将得到的User对象共享到Session共享数据域中，用来作其他方法判断是否登录。
最后一个形参是Model，该model目前负责提示异常信息。
此处的return是重定向，这么做是因为，默认的return+逻辑视图所带来的视图处理效果是转发，而转发只会改变页面内容，地址栏并没有改变，如果地址栏依然是login，但页面已经是main或者index等页面时，此时用户如果刷新页面，则会再次发送POST表单请求的/login，我们应该避免重复请求登录和重复验证登录，我们让第一次登录判断成功后，直接重定向到main.html，这样做可以改变地址栏，此时就算是刷新也是main请求，不会重复登录请求。
如果不符合账号密码的要求，则继续回到登录页面。

mainPage()方法

该方法处理重定向 main.html请求
这里通过session获得了一个loginUser对象，判断该对象是否为空，如果不是空的就返回main视图，这是内部转发操作。如果没有就仍然返回到登录页面。

抽取公共页面

这个建议去看原视频跟着做吧。