实战
首页配置:
-
注意点,所有页面的静态资源都需要使用thymeleaf接管。使用@符号来配置
<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
Url:@{ }
<link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.css}" />
登陆页面:
首页:
页面国际化:
- 我们需要配置i18n文件,用于中英文的相互切换
-
我们如果需要在项目中进行自动切换,我们需要自定义一个组件LocaleResolver
package com.na.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; public class MyLocaleResolver implements LocaleResolver { //解析请求 @Override public Locale resolveLocale(HttpServletRequest httpServletRequest) { String language = httpServletRequest.getParameter("l"); //System.out.println("Dubug===>"+language); Locale locale = Locale.getDefault();//如果没有就使用默认的 //如果请求到链接携带了国际化的参数,就需要判断 if(!StringUtils.isEmpty(language)){ //zh_Ch String[] split = language.split("_"); //国家,地区 locale = new Locale(split[0],split[1]); } return locale; } @Override public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) { } }
-
记得将自己写的组件配置到spring容器中 @Bean
@Configuration public class MyMvcConfig implements WebMvcConfigurer { // @Override // public void addViewControllers(ViewControllerRegistry registry) { // registry.addViewController("/").setViewName("index"); // registry.addViewController("/index.html").setViewName("index"); // } @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("pages-signin"); registry.addViewController("/pages-signin.html").setViewName("pages-signin"); registry.addViewController("/main.html").setViewName("index"); } //这样自定义的国际化组件就生效了! @Bean public LocaleResolver localeResolver(){ return new MyLocaleResolver(); }
- #{ }
登录+拦截器
- 拦截器
package com.na.config;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginHandlerInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//登陆成功之后,应该有用户的sessoin;
Object loginUser = request.getSession().getAttribute("loginUser");
//拦截器
if (loginUser==null){//没有登陆成功
request.setAttribute("msg","没有权限,请先登录");
request.getRequestDispatcher("/pages-signin.html").forward(request,response);
return false;
}else{
return true;
}
}
}
- 注入到Bean
package com.na.config;
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;
import java.util.Locale;
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
// @Override
// public void addViewControllers(ViewControllerRegistry registry) {
// registry.addViewController("/").setViewName("index");
// registry.addViewController("/index.html").setViewName("index");
// }
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("pages-signin");
registry.addViewController("/pages-signin.html").setViewName("pages-signin");
registry.addViewController("/main.html").setViewName("index");
}
//这样自定义的国际化组件就生效了!
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginHandlerInterceptor())
.addPathPatterns("/*")
.excludePathPatterns("/pages-signin.html","/","/user/login","///css/*","///js/*","/images/*");
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEaCwEbF-1643095827550)(C:\Users\22724\AppData\Roaming\Typora\typora-user-images\image-20211220162344489.png)]
修改登录用户名
<span class="name">[[${session.loginUser}]]</span>
GRUD(增删改查)
继承沉余代码
-
提取公共页面
-
sidebar:为自命名
-
tables-basic:为继承的页面
<nav id="menu" class="nav-main" role="navigation" th:fragment="sidebar">
<div th:insert="~{tables-basic::sidebar}"></div>
...
- 如果要传递参数,可以直接使用 ()传参,接收判断即可!
即:重复部分
controller层
package com.na.controller;
import com.na.dao.EmployeeDao;
import com.na.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Collection;
@Controller
//Controller 正确的是调用service层,这边为了快速测试,所以调用的是Dao层
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/index";
}
}
继承页面
tables-basic(父页面)
index(子页面)
继承效果:
继承部分:
<!--侧边栏-->
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation" th:fragment="sidebar">
<ul class="nav nav-main">
<li>
<a href="emp/index.html">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="mailbox-folder.html">
<span class="pull-right label label-primary">182</span>
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>Mailbox</span>
</a>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-copy" aria-hidden="true"></i>
<span>Pages</span>
</a>
<ul class="nav nav-children">
<li>
<a href="pages-signup.html">
Sign Up
</a>
</li>
<li>
<a href="../pages-signin.html">
Sign In
</a>
</li>
<li>
<a href="pages-recover-password.html">
Recover Password
</a>
</li>
<li>
<a href="pages-lock-screen.html">
Locked Screen
</a>
</li>
<li>
<a href="pages-user-profile.html">
User Profile
</a>
</li>
<li>
<a href="pages-session-timeout.html">
Session Timeout
</a>
</li>
<li>
<a href="pages-calendar.html">
Calendar
</a>
</li>
<li>
<a href="pages-timeline.html">
Timeline
</a>
</li>
<li>
<a href="pages-media-gallery.html">
Media Gallery
</a>
</li>
<li>
<a href="pages-invoice.html">
Invoice
</a>
</li>
<li>
<a href="pages-blank.html">
Blank Page
</a>
</li>
<li>
<a href="pages-404.html">
404
</a>
</li>
<li>
<a href="pages-500.html">
500
</a>
</li>
<li>
<a href="pages-log-viewer.html">
Log Viewer
</a>
</li>
<li>
<a href="pages-search-results.html">
Search Results
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-tasks" aria-hidden="true"></i>
<span>UI Elements</span>
</a>
<ul class="nav nav-children">
<li>
<a href="ui-elements-typography.html">
Typography
</a>
</li>
<li>
<a href="ui-elements-icons.html">
Icons
</a>
</li>
<li>
<a href="ui-elements-tabs.html">
Tabs
</a>
</li>
<li>
<a href="ui-elements-panels.html">
Panels
</a>
</li>
<li>
<a href="ui-elements-widgets.html">
Widgets
</a>
</li>
<li>
<a href="ui-elements-portlets.html">
Portlets
</a>
</li>
<li>
<a href="ui-elements-buttons.html">
Buttons
</a>
</li>
<li>
<a href="ui-elements-alerts.html">
Alerts
</a>
</li>
<li>
<a href="ui-elements-notifications.html">
Notifications
</a>
</li>
<li>
<a href="ui-elements-modals.html">
Modals
</a>
</li>
<li>
<a href="ui-elements-lightbox.html">
Lightbox
</a>
</li>
<li>
<a href="ui-elements-progressbars.html">
Progress Bars
</a>
</li>
<li>
<a href="ui-elements-sliders.html">
Sliders
</a>
</li>
<li>
<a href="ui-elements-carousels.html">
Carousels
</a>
</li>
<li>
<a href="ui-elements-accordions.html">
Accordions
</a>
</li>
<li>
<a href="ui-elements-nestable.html">
Nestable
</a>
</li>
<li>
<a href="ui-elements-tree-view.html">
Tree View
</a>
</li>
<li>
<a href="ui-elements-grid-system.html">
Grid System
</a>
</li>
<li>
<a href="ui-elements-charts.html">
Charts
</a>
</li>
<li>
<a href="ui-elements-animations.html">
Animations
</a>
</li>
<li>
<a href="ui-elements-extra.html">
Extra
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-list-alt" aria-hidden="true"></i>
<span>Forms</span>
</a>
<ul class="nav nav-children">
<li>
<a href="forms-basic.html">
Basic
</a>
</li>
<li>
<a href="forms-advanced.html">
Advanced
</a>
</li>
<li>
<a href="forms-validation.html">
Validation
</a>
</li>
<li>
<a href="forms-layouts.html">
Layouts
</a>
</li>
<li>
<a href="forms-wizard.html">
Wizard
</a>
</li>
<li>
<a href="forms-code-editor.html">
Code Editor
</a>
</li>
</ul>
</li>
<li class="nav-parent nav-expanded nav-active">
<a>
<i class="fa fa-table" aria-hidden="true"></i>
<span>管理</span>
</a>
<ul class="nav nav-children">
<li class="nav-active">
<a th:href="@{/emps}">
员工管理
</a>
</li>
<li>
<a href="tables-advanced.html">
Advanced
</a>
</li>
<li>
<a href="tables-responsive.html">
Responsive
</a>
</li>
<li>
<a href="tables-editable.html">
Editable
</a>
</li>
<li>
<a href="tables-ajax.html">
Ajax
</a>
</li>
<li>
<a href="tables-pricing.html">
Pricing
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>Maps</span>
</a>
<ul class="nav nav-children">
<li>
<a href="maps-google-maps.html">
Basic
</a>
</li>
<li>
<a href="maps-google-maps-builder.html">
Map Builder
</a>
</li>
<li>
<a href="maps-vector.html">
Vector
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-columns" aria-hidden="true"></i>
<span>Layouts</span>
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-default.html">
Default
</a>
</li>
<li>
<a href="layouts-boxed.html">
Boxed
</a>
</li>
<li>
<a href="layouts-menu-collapsed.html">
Menu Collapsed
</a>
</li>
<li>
<a href="layouts-scroll.html">
Scroll
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-align-left" aria-hidden="true"></i>
<span>Menu Levels</span>
</a>
<ul class="nav nav-children">
<li>
<a>First Level</a>
</li>
<li class="nav-parent">
<a>Second Level</a>
<ul class="nav nav-children">
<li class="nav-parent">
<a>Third Level</a>
<ul class="nav nav-children">
<li>
<a>Third Level Link #1</a>
</li>
<li>
<a>Third Level Link #2</a>
</li>
</ul>
</li>
<li>
<a>Second Level Link #1</a>
</li>
<li>
<a>Second Level Link #2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="" target="_blank">
<i class="fa fa-external-link" aria-hidden="true"></i>
<span>Front-End <em class="not-included">(Not Included)</em></span>
</a>
</li>
</ul>
</nav>
<hr class="separator" />
<div class="sidebar-widget widget-tasks">
<div class="widget-header">
<h6>Projects</h6>
<div class="widget-toggle">+</div>
</div>
<div class="widget-content">
<ul class="list-unstyled m-none">
<li><a href="#">Porto HTML5 Template</a></li>
<li><a href="#">Tucson Template</a></li>
<li><a href="#">Porto Admin</a></li>
</ul>
</div>
</div>
<hr class="separator" />
<div class="sidebar-widget widget-stats">
<div class="widget-header">
<h6>Company Stats</h6>
<div class="widget-toggle">+</div>
</div>
<div class="widget-content">
<ul>
<li>
<span class="stats-title">Stat 1</span>
<span class="stats-complete">85%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
<span class="sr-only">85% Complete</span>
</div>
</div>
</li>
<li>
<span class="stats-title">Stat 2</span>
<span class="stats-complete">70%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
<span class="sr-only">70% Complete</span>
</div>
</div>
</li>
<li>
<span class="stats-title">Stat 3</span>
<span class="stats-complete">2%</span>
<div class="progress">
<div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
<span class="sr-only">2% Complete</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>