1、首页实现
1.1、访问index1.2、给index.html引入thymeleaf 2、页面国际化
2.1、统一properties编码2.2、编写i18n国际化资源文件2.3、配置国际化资源文件名称2.4、首页获取显示国际化2.5、配置国际化组件实现中英文切换
2.5.1、添加中英文切换标签链接2.5.2、自定义地区解析器组件 4、登录功能实现
【注意： url泄露信息】【注意：拦截无权限访问】 5、登录拦截器
1、存session信息2、自定义HandlerInterceptor接口的preHandle方法3、在配置类中注入bean 6、展示员工信息
1、实现Customers视图跳转2、提取页面公共部分3、点击高亮处理4、显示员工信息 7、增加员工
1、list页面增加 添加员工 按钮2、创建添加员工页面add3、add页面添加员工请求 8、修改员工信息
1、list页面编辑按钮，添加请求2、创建编辑员工页面edit3、edit页面编辑完成提交请求
【注意：修改时隐藏提交id】 4、删除员工信息
【注意：restFul风格的thymeleaf请求风格】 9、 404页面定制10、注销 *** 作
1、首页实现 1.1、访问index由于template包下的静态文件不能直接访问，所以需要间接访问到；需要进行视图跳转；
在主程序统计目录下新建config包用来存放自己的配置类在其中建立自己的配置类MyMvcConfig用来增加自己的视图跳转
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index.html").setViewName("index");
}
}
要先要导入thymeleaf依赖后，启动才有效！
启动主程序后访问测试，访问localhost:8080/或localhost:8080/index.html
显然，此时前端html代码有问题，一些静态资源没有成功引入。
1.2、给index.html引入thymeleaf上述测试可以看到页面有图片没有加载出来，且没有css和js的样式，这就是因为我们html页面中静态资源引入的语法出了问题，在SpringBoot中，推荐使用Thymeleaf作为模板引擎，我们将其中的语法改为Thymeleaf，所有页面的静态资源都需要使用其接管
注意所有html都需要引入Thymeleaf命名空间
xmlns:th="http://www.thymeleaf.org"
然后修改所有的页面静态资源的引入，使用@{…}链接表达式
在此访问，正确显示页面：
2、页面国际化 2.1、统一properties编码在IDEA中统一设置properties的编码为UTF-8
2.2、编写i18n国际化资源文件
在resources目录下新建一个i18n包，其中放置国际化相关的配置
其中新建三个配置文件，用来配置语言：
login.properties: 无语言配置时生效；
login_en_US.properties:英文生效；
login_zh_CN.properties:中文生效；
命名方式是下划线的组合： 文件名_语言_国家.properties
以此命名方式，IDEA会帮助我们识别这是个国际化配置，自动绑定在一起转换如下的模式：
绑定在一起后，我们想要添加更多的语言配置，只需要在大的资源包右键添加到该绑定文件即可
此时只需要输入区域名即可创建成功，比如：en_US，就会自动识别为美国：
然后打开英文或是中文语言的properties文件，点击Resources Bundle进入可视化编辑页面
进入到可视化编辑页面后
- 点击+添加属性：首先创建一个login.tip代表首页中的提示（自定义起名login.XXX)
- 然后对提示分别做三种情况的语言配置，三个对应的输入框输入即可
类似配置tip提示，我们在配置更多的信息
然后打开三个配置文件查看其中的文本内容，可以看到已经做好了全部的配置
login.properties(默认)
login.btn=登录 login.password=密码 login.remember=记住我 login.tip=请登录 login.username=用户名
login_en_US.properties(英文)
login.btn=login login.password=password login.remember=remember me login.tip=Please sign in login.username=username
login_zh_CN.properties(中文)
login.btn=登录 login.password=密码 login.remember=记住我 login.tip=请登录 login.username=用户名2.3、配置国际化资源文件名称
在Spring程序中，国际化主要是通过ResourceBundleMessageSource这个类来实现的
Springboot通过MessageSourceAutoConfiguration为我们自动配置好管理国际化资源文件的组件
先来看看这个类
@Configuration(proxyBeanMethods = false)
@ConditionalOnMissingBean(name = AbstractApplicationContext.MESSAGE_SOURCE_BEAN_NAME, search = SearchStrategy.CURRENT)
@AutoConfigureOrder(Ordered.HIGHEST_PRECEDENCE)
@Conditional(ResourceBundleCondition.class)
@EnableConfigurationProperties
public class MessageSourceAutoConfiguration {
private static final Resource[] NO_RESOURCES = {};
@Bean
@ConfigurationProperties(prefix = "spring.messages")
public MessageSourceProperties messageSourceProperties() {
return new MessageSourceProperties();
}
@Bean
public MessageSource messageSource(MessageSourceProperties properties) {
...
}
}
主要了解一下messageSource()这个方法
可以看到，此方法的参数为messageSourceProperties对象，来分析一下这个类：
public class MessageSourceProperties {
private String basename = "messages";
private Charset encoding = StandardCharsets.UTF_8;
意思是：
如果你不在springboot配置文件中指定以.分隔开的国际化资源文件名称的话他默认会去类路径下找messages.propertiese作为国际化资源文件
因为我们自定义了国际化资源文件，因此我们需要在springboot配置文件application.propreties中加入以下配置指定我们配置文件的名称
spring.message2.4、首页获取显示国际化
利用#{…}消息表达式，去首页index.html获取国际化的值
重启项目，访问首页，已经自动识别为中文
2.5、配置国际化组件实现中英文切换 2.5.1、添加中英文切换标签链接index.html中底部可以看到两个标签
中文 English
要通过这两个标签实现中英文切换，首先要在这两个标签上加跳转链接并带上响应参数
中文 English
因此我们需要自定义地区解析器MyLocaleResolver中，需要处理这个带参数的链接请求
2.5.2、自定义地区解析器组件LocaleResolver：地区解析器
在WebMvcAutoConfiguration中，找到**localeResolver()**方法
该方法作用是：获取LocaleResolver地区对象解析器：
如果用户配置了则使用用户配置的地区解析器如用户没有配置，就用默认的
@Override
@Bean
@ConditionalOnMissingBean(name = DispatcherServlet.LOCALE_RESOLVER_BEAN_NAME)
public LocaleResolver localeResolver() {
if (this.webProperties.getLocaleResolver() == WebProperties.LocaleResolver.FIXED) {
return new FixedLocaleResolver(this.webProperties.getLocale());
}
AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
localeResolver.setDefaultLocale(this.webProperties.getLocale());
return localeResolver;
}
因此我们要实现自定义的国际化资源生效，需要自己编写一个地区解析器，来继承LocleResolver接口，重写其方法即可。
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("_");//zh_CN(语言_地区)
locale = new Locale(split[0], split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
}
}
为了我们的区域化信息能够生效，我们需要配置一下这个组件！在我们的MyMvcConfig配置类下添加bean
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
...
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
}
我们重启项目，来访问一下，发现点击按钮可以实现切换！
4、登录功能实现当我们点击登录按钮时，会进入一个界面（dashboard页面）
1、首先在index.html的表单中更改提交地址/user/login, 并给名称和密码输入框添加name属性为了后面传参
2、编写控制层的controller
@Controller
public class LoginController {
@RequestMapping("/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("passwrod") String password,
Model model){
if("admin".equals(username) && "123123".equals(password)){
return "dashboard";
}else{
model.addAttribute("msg", "用户名或密码错误");
return "index";
}
}
}
3、在index.html首页中，添加一个标签来显示从controller返回的登录错误信息
重启，进行测试：
【注意： url泄露信息】此时登录功能实现完毕，但是现在有一个大问题，浏览器的url暴露了用户的用户名和密码，泄露了用户信息，此时我们需要编写一个映射！
我们在MyMvcConfig中加一句代码
registry.addViewController("/main.html").setViewName("dashboard");
也就是访问main.html页面就跳转到dashboard页面
然后修改LoginController，当登录成功后重定向到main.html页面，也就跳转到了dashboard页面
...
if("admin".equals(username) && "123123".equals(password)){
return "redirect:/main.html";
}else{
...
因为：
==原来是请求转发：==到dashboard，还是原来的请求，转发到dashboard页面
重定向后：是去请求mian.html，请求变了！
再次重新测试，输入正确的用户名和密码登录成功后，浏览器不在携带泄露信息。
【注意：拦截无权限访问】出现了新的问题，不论登不登陆，我们访问localhost:8080/main.html都会跳转到dashhoard页面，此时就需要拦截器了。
5、登录拦截器为了解决上述问题，我们需要自定义一个拦截器
在config目录下，新建一个登录拦截器类：LoginHandlerInterceptor
登录成功后，后台会得到我们的用户信息；如果没有登录，则不会有任何用户信息。我们通过这一点来用拦截器进行拦截：
将用户登录后的用户名信息放到session中，访问页面时首先判断session中有没有用户信息如果没有，拦截器进行拦截如果有，拦截器放行 1、存session信息
要先在LoginController中设计：用户登录成功后，存入用户信息到session中
@RequestMapping("/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model,
HttpSession session){
if("admin".equals(username) && "123123".equals(password)){
session.setAttribute("LoginUser", username);
return "redirect:/main.html";
}else{
model.addAttribute("msg", "用户名或密码错误");
return "index";
}
}
2、自定义HandlerInterceptor接口的preHandle方法
2、再在config目录中新建一个自定义的LoginHanderInterceptor 类（继承HandlerInterceptor接口）
public class LoginHanderInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession();
Object loginUser = session.getAttribute("LoginUser");
//session中有LoginUser信息，放行
if(loginUser != null){
return true;
}else{
//session中没有LoginUser信息，就拒绝放行，并在请求上下文中放入msg信息，index的p标签提取
，请求转发到index.html页面
request.setAttribute("msg", "权限不够，请先登录！");
request.getRequestDispatcher("/index.html").forward(request,response);
return false;
}
}
}
3、在配置类中注入bean
重写WebMvcConfigurer接口的addInterceptors方法
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginHanderInterceptor())
.addPathPatterns("
@RequestMapping("/emps")
public String list(Model model){
Collection allEmployee = employeeDao.getAllEmployee();
model.addAttribute(allEmployee);
return "emp/list";
}
3、修改list.html 和 dashboard.html中Customers链接请求路径
重启主程序，登录到大神board页面中，再点击Customer，成功跳转到/emps
【问题】
- 点击Customer后，此处链接应该成高亮状态，但是这里点击后还是普通的样式，高亮点还在dashboard上list.html和dashboard.html页面的侧边栏和顶部栏是相同的，可以抽出来，共用！
1、在templates目录下，新建common包（用来存放提取出来的公共部分）
2、dashboard.html和list.html中有公共部分代码（顶部栏、侧边栏部分）
所以将其公共代码取出，放入common目录下的新建html文件：common.html中
取出的标签中写上 : th:fragment="topbar" 、 th:fragment="sidepbar"
3、原代码中将提取部分删除掉，在原来你的地方插入common.html的代码
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）