登陆功能及拦截器实现

思路:

index.html中配置点击登陆后跳转的链接

image.png

定义一个Controller类

如果用户名和密码符合要求,保存key为loginUser的session,重定向到主页,如果不符合要求,显示用户名或密码错误,返回index.html页面

  1. @Controller
  2. public class LoginController {
  3. @RequestMapping("/user/login")
  4. public String login(@RequestParam("username") String username , @RequestParam("password") String password, Model model, HttpSession session){
  5. if(!StringUtils.isEmpty(username) && "123456".equals(password)){
  6. session.setAttribute("loginUser",username);
  7. return "redirect:/main.html";
  8. }else{
  9. model.addAttribute("msg","用户名或密码错误");
  10. return "index";
  11. }
  12. }
  13. }

配置拦截器

获取session,如果session为空,提示没有权限,登录失败,返回登录界面,如果不为空,拦截器放行,保存session 的目的是登陆成功后,下次可以直接访问主页

  1. public class LoginHandlerInterceptor implements HandlerInterceptor {
  2. @Override
  3. public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  4. //登陆成功后应该有用户的session
  5. Object loginUser = request.getSession().getAttribute("loginUser");
  6. if(loginUser==null){
  7. request.setAttribute("msg","没有权限,请先登陆");
  8. request.getRequestDispatcher("/index.html").forward(request,response);
  9. return false;
  10. }else{
  11. return true;
  12. }
  13. }
  14. }

拦截器装载进容器

image.png

首页功能实现

提取公共页面

image.png

顶部导航栏和侧边栏是不变的,所以我们可以把它们抽离成组件
使用th:fragment进行抽离
image.png
此时整个nav标签都被抽离成组件
image.png
在另一个页面中只需要通过th:replace或者th:insert这么一行代码就可以代替或者插入组件,实现代码的复用

commons.html

可以将所有公共分布都抽出来,放在commons.html文件中,其他页面只需要insert或者replace就行

点击高亮

image.png
实现点击处高亮
image.png
active使之高亮
所以采取给组件传值的方式来实现高亮,直接用()传参,接收判断既可
image.pngimage.pngimage.pngimage.pngimage.png
成功实现

CURD

列表循环展示

image.png
注意点:对性别的判断和日期的格式化

增改

增加与改相似
改需要注意的点有:

  • 日期格式化

image.pngimage.png

  • 隐藏域id

因为模拟数据库的id自增,并非使用sql语句进行修改,而是以向模拟数据库增加数据的方式实现修改,如果不使用隐藏域携带id,会变成增加记录,使用隐藏域携带id后,就是对原数据进行覆盖。
image.png

404页面处理

springboot中处理404很方便,只需要在templates文件夹中新建一个error文件夹,将404.html文件放进去,出现404时会自动跳转
image.png

注销登录

image.pngimage.png

如何搭建一个网站

image.png