首先构思项目
这里推荐一下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就不展示了自己随心所欲就行
下一次为数据库层的相关
浙公网安备 33010602011771号