springboot中的组件学习
注意springboot中的改变
- 首页配置:注意点,所有页面的静态资源都需要使用thymeleaf接管;@{}
- 页面国际化:
- 我们需要配置i18n文件
- 我们如果需要在项目中进行按钮切换,我们需要自定义一个组件LocalResolver
- 记得将自己写的组件配置到spring容器 @bean
- #{} 去除自定义的message
thymeleaf魔板引擎
首先静态资源在项目中的存储位置
在网页文件中,首先的引入thymeleaf的声明:
<html lang="en" xmlns:th=http://www.thymeleaf.org>
之后利用thymeleaf的语法对模板中的部分组件进行改写,并对应好静态资源路径,使用适合其语法。
thymeleaf语法总结:链接: thymeleaf语法总结.
如果遇到thymeleaf不起作用,可以试着清理浏览器缓存,也可以在application.properties中,定义关闭thymeleaf缓存并重启服务
#关闭魔板引擎缓存
spring.thymeleaf.cache=false
# 访问的资源路径前进行自动的拼接
server.servlet.context-path=/chaoxi
国际化
即根据需求,我们可以对网页中的语言进行切换。
首先,我们得对页面中得中文部分和英文部分,分别设置对应得properties,
针对需要更改得语言部分,进行对应得翻译。可以随意起名字。
根据springboot底层代码,有一个Localresolver的区域解析器,那么我们可以在自己的config文件中,继承他,并重写她的方法。
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
/**
*
* @create 2022-04-06 18:15
*/
//自定义自己的语言请求解析
public class MyLocaleResolver implements LocaleResolver {
//解析请求
@Override
public Locale resolveLocale(HttpServletRequest request) {
String language = request.getParameter("l");
Locale locale = Locale.getDefault(); //如果没有就使用默认的
//如果请求的链接带了国际化参数
if (!StringUtils.isEmpty(language)){
//zh_CN
String[] split = language.split("_");
//国家,地区
locale=new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
}
}
记住,我们自定义好解析器后,一定要将其注册并托管到springboot
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
//自定义的视图转发器
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index.html").setViewName("index");
}
//自定义国际化语言解析器
@Bean //******
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
}
网页中,需要带有语言选项的请求参数。通过后端解析,来随时切换语言。当然,我们还需要在application.properties中配置国际化配置,
登录功能的实现+拦截器
前端传递用户名和密码的时候需要用name标签进行传递
<input type="email" id="inputEmail" name="username" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
<input type="password" id="inputPassword" name="password" class="form-control" th:placeholder="#{login.password}" required="">
首先定义登录的路由(Controller),针对业务对传递的用户名和密码进行判断。当然这里的路由需要和网页中设置的action必须一致:
<form class="form-signin" th:action="@{/user/login}">
设置,登录后反馈的消息,展示在前端,注意thymeleaf的语法
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
import org.springframework.boot.autoconfigure.cassandra.CassandraProperties;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.thymeleaf.util.StringUtils;
import javax.servlet.http.HttpSession;
/**
* @author chaoxi
* @create 2022-04-06 20:13
*/
@Controller
public class loginController {
@RequestMapping("/user/login")
//@ResponseBody //这个注解的意思是将返回的字符串视为字符串,不在视为视图
public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session){
//之后就是验证的业务
//System.out.println(username);
if(!StringUtils.isEmpty(username) && "123456".equals(password)){
session.setAttribute("loginUser",username); //登录成功后,携带session信息去验证拦截器
return "redirect:/main.html"; //登录成功后,重定向
}else {
model.addAttribute("msg","用户名或者密码错误");
return "index";
}
}
}
为了避免在浏览器的url中暴露用户的用户名和密码,我们需要设置视图映射:
registry.addViewController("/main.html").setViewName("dashboard"); //地址映射,这样才可以避免url显示用户名和密码
拦截器设置(我们的业务需求是必须要用户登录才能访问我们的内部系统,那么再未登录前需要对请求进行检测)
自定义拦截器,需要继承HandlerInterceptor类,并重写三个方法。但是由于我们只需要在登陆前检测,所以只需要重写第一个方法。利用登陆后,用户的session进行判断
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @author chaoxi
* @create 2022-04-06 20:57
*/
public class LoginHandlerIntercepter implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//登录成功后,应该有用户的session
Object loginUser = request.getSession().getAttribute("loginUser");
if (loginUser==null){
request.setAttribute("msg","没有权限,请先登录"); //设置一个消息返回给前端
request.getRequestDispatcher("/index.html").forward(request,response); //将request重新定向到index.html,并携带请求
return false;
}else {
return true;
}
}
//这两个可以不用实现,因为我们要做的是在登录前的验证
// @Override
// public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
//
// }
//
// @Override
// public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
//
// }
}
重写完自定义的拦截器后,我们需要将其注册到WebMvcConfigurer中令其生效。静态资源其实也是通过request请求得到的,需要对其放行。
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;
/**
* @author chaoxi
* @create 2022-04-05 16:25
*/
@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"); //地址映射,这样才可以避免url显示用户名和密码
}
//自定义国际化语言解析器
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
//addPathPatterns匹配拦截的请求,excludePathPatterns排除一些请求
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginHandlerIntercepter()).
addPathPatterns("/**").excludePathPatterns("/index.html","/","/user/login","/css/*","/img/**","/js/**");
}
}
跳转页面后,显示用户名。
我们会对登录的用户利用session进行存储用户的信息,那么前端也可以通过调用session,进行数据回显。
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#dashboard.html">[[${session.loginUser}]]</a>
这样,登录后,跳转的页面中如果有需要显示用户名的地方,就可以直接显示出来。
员工页面展示
- 即我们需要从后台将数据查询出来,展示到对应的网页上面。
一个网页项目,必然存在着大量的重复的组件,我们可以将这些组件提取出来,单独放在一个文件中,让其余模板文件,直接引用,便可以大幅度减少代码量,也方便维护。比如上述页面,顶部和侧边栏都可以提取出来进行复用。这也是thymeleaf的功能。
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<!--头部导航栏-->
<!--顶部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#dashboard.html">[[${session.loginUser}]]</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" th:href="@{/user/logout}">注销</a>
</li>
</ul>
</nav>
<!--侧边栏-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="siderbar"> <!--将重复的侧边栏,定义标签。重复页面引用即可-->
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<!--thymeleaf可以利用这种三元运算符进行选择性激活属性-->
<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=