首先構思專案
這裡推薦一下progress思維導圖
當然習慣了紙張的我!
是的沒看錯就是一個這樣的
--查閱資料 求助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就不展示了自己隨心所欲就行
下一次為資料庫層的相關