首先构思项目
这里推荐一下ProcessOn思维导图
当然习惯了纸张的我!
是的没看错就是一个这样的
--查阅资料 求助AI 睡觉吃饭琢磨 耗时一个月完成(哈哈纯不会学生)
不禁想到了当初的jdbc
对比一下:
现在的
当然使用到了模板 不过我想的太简单 模板一千多行 将自己的项目套进去 明白的人都知道要很坑的
没办法模板好看啊 改呗 大致三天改出来
言归正传
首先是登录页面(我本想先来数据库层的算了)
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>登录</title> <!-- Bootstrap core CSS --> <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/asserts/css/signin.css}" rel="stylesheet"> <style> .full-screen-video-wrapper { position: fixed; /* 使用fixed而不是absolute,以确保背景视频始终填充整个视口 */ top: 0; left: 0; width: 100%; /* 填充整个宽度 */ height: 100vh; /* 填充整个视口高度 */ z-index: -1; /* 设置一个负的z-index,以便内容可以显示在视频上方 */ overflow: hidden; } .form-signin { position: relative; /* 使用relative或static,确保表单定位相对于其正常位置 */ z-index: 1; /* 设置一个正的z-index,确保表单显示在视频上方 */ } </style> </head> <body class="text-center"> <div class="full-screen-video-wrapper"> <video th:src="@{/asserts/comics.mp4}" autoplay loop muted></video> </div> <div class=".form-signin"> <form class="form-signin" th:action="@{/user/login}" method="post"> <img class="mb-4" th:src="@{/asserts/svg/1.svg}" alt="" width="100" height="120"> <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1> <!--判断是否显示,使用if, ${}可以使用工具类,可以看thymeleaf的中文文档--> <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p> <label class="sr-only">Username</label> <input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required="" autofocus=""> <label class="sr-only">Password</label> <input type="password" class="form-control" name="password" th:placeholder="#{login.password}" required=""> <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button> <p class="mt-5 mb-3 text-muted">© 于2024.4.5日创作完成</p> <a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a> <a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a> </form> </div> </body> </html>
这是登陆页面 要对应实现的无非 controller判断是否正确
然后还有个中英文国际化切换
再加一个拦截器 对应要使用到mvc的知识
package com.fang.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpSession; @Controller public class LoginController { //@RequestMapping(value = "/user/login",method = RequestMethod.POST) @PostMapping("/user/login") public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session){ if (!StringUtils.isEmpty(username) && "123456".equals(password)){ //登录成功!将用户信息放入session session.setAttribute("loginUser",username); //登录成功!防止表单重复提交,我们重定向 return "redirect:/main.html"; }else { //登录失败!存放错误信息 model.addAttribute("msg","用户名密码错误"); return "index"; } } @GetMapping("/user/loginOut") public String loginOut(HttpSession session){ session.invalidate(); return "redirect:/index.html"; } }
中英文切换controller
package com.fang.component; import org.springframework.util.StringUtils; import org.springframework.web.servlet.LocaleResolver; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Locale; //可以在链接上携带区域信息 public class MyLocaleResolver implements LocaleResolver { //解析请求 @Override public Locale resolveLocale(HttpServletRequest request) { String language = request.getParameter("l"); Locale locale = Locale.getDefault(); // 如果没有获取到就使用系统默认的 //如果请求链接不为空 if (!StringUtils.isEmpty(language)){ //分割请求参数 String[] split = language.split("_"); //国家,地区 locale = new Locale(split[0],split[1]); } return locale; } @Override public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) { } }
springmvc的配置
package com.fang.config; import com.fang.component.LoginHandlerInterceptor; import com.fang.component.MyLocaleResolver; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.LocaleResolver; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; //应为类型要求为WebMvcConfigurer,所以我们实现其接口 //可以使用自定义类扩展MVC的功能 @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("index"); registry.addViewController("/index.html").setViewName("index"); registry.addViewController("/main.html").setViewName("dashboard"); } @Override public void addInterceptors(InterceptorRegistry registry) { //注册拦截器,及拦截请求和要剔除哪些请求! //我们还需要过滤静态资源文件,否则样式显示不出来 registry.addInterceptor(new LoginHandlerInterceptor()) .addPathPatterns("/**") .excludePathPatterns("/index.html","/","/user/login","/asserts/**"); } @Bean public LocaleResolver localeResolver(){ return new MyLocaleResolver(); } }
拦截器
package com.fang.component; import org.springframework.util.StringUtils; import org.springframework.web.servlet.LocaleResolver; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Locale; //可以在链接上携带区域信息 public class MyLocaleResolver implements LocaleResolver { //解析请求 @Override public Locale resolveLocale(HttpServletRequest request) { String language = request.getParameter("l"); Locale locale = Locale.getDefault(); // 如果没有获取到就使用系统默认的 //如果请求链接不为空 if (!StringUtils.isEmpty(language)){ //分割请求参数 String[] split = language.split("_"); //国家,地区 locale = new Locale(split[0],split[1]); } return locale; } @Override public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) { } }
中英文切换的properties就不展示了自己随心所欲就行
下一次为数据库层的相关
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器