1，默认访问首页
//使用WebMvcConfigurer可以来扩展SpringMVC的功能 @Configuration public class MyWebConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("login"); registry.addViewController("/login").setViewName("login"); registry.addViewController("/index").setViewName("login"); } }
2，国际化
- 编写国际化配置文件
- 使用ResourceBundleMessageSource管理国际化资源文件
- 在页面使用fmt:messagae取出国际化内容
步骤：
1）编写国际化配置文件，抽取页面需要显示的国际化信息
2）SpringBoot自动配置好了管理国际化资源文件的组件
@ConfigurationProperties(prefix = "spring.messages") public class MessageSourceAutoConfiguration { /** * Comma‐separated list of basenames (essentially a fully‐qualified classpath * location), each following the ResourceBundle convention with relaxed support for * slash based locations. If it doesn't contain a package qualifier (such as * "org.mypackage"), it will be resolved from the classpath root. */ private String basename = "messages"; //我们的配置文件可以直接放在类路径下叫messages.properties； @Bean public MessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); if (StringUtils.hasText(this.basename)) { //设置国际化资源文件的基础名（去掉语言国家代码的） messageSource.setBasenames(StringUtils.commaDelimitedListToStringArray( StringUtils.trimAllWhitespace(this.basename))); } if (this.encoding != null) { messageSource.setDefaultEncoding(this.encoding.name()); } messageSource.setFallbackToSystemLocale(this.fallbackToSystemLocale); messageSource.setCacheSeconds(this.cacheSeconds); messageSource.setAlwaysUseMessageFormat(this.alwaysUseMessageFormat); return messageSource; }
需要配置spring.messages.basename
spring.messages.basename=i18n.login
3）去页面获取国际化的值
处理properties文件中文乱码的问题。
<!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‐tofit= no"> <meta name="description" content=""> <meta name="author" content=""> <title>Signin Template for Bootstrap</title> <!‐‐ Bootstrap core CSS ‐‐> <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"> <!‐‐ Custom styles for this template ‐‐> <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet"> </head> <body class="text‐center"> <form class="form‐signin" action="dashboard.html"> <img class="mb‐4" th:src="@{/asserts/img/bootstrap‐solid.svg}" src="asserts/img/bootstrap‐solid.svg" alt="" width="72" height="72"> <h1 class="h3 mb‐3 font‐weight‐normal" th:text="#{login.tip}">Please sign in</h1> <label class="sr‐only" th:text="#{login.username}">Username</label> <input type="text" class="form‐control" placeholder="Username" th:placeholder="# {login.username}" required="" autofocus=""> <label class="sr‐only" th:text="#{login.password}">Password</label> <input type="password" class="form‐control" placeholder="Password" th:placeholder="#{login.password}" required=""> <div class="checkbox mb‐3"> <label> <input type="checkbox" value="remember‐me"/> [[#{login.remember}]] </label> </div> <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">© 2017‐2018</p> <a class="btn btn‐sm">中文</a> <a class="btn btn‐sm">English</a> </form> </body> </html>
效果：根据浏览器语言设置的信息切换国际化
原理：
国际化Locale（区域信息对象），LocaleResolver（获取区域信息对象）。默认的就是根据请求头带来的区域信息获取Locale进行国际化。
@Bean @ConditionalOnMissingBean @ConditionalOnProperty(prefix = "spring.mvc", name = "locale") public LocaleResolver localeResolver() { if (this.mvcProperties .getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) { return new FixedLocaleResolver(this.mvcProperties.getLocale()); } AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver(); localeResolver.setDefaultLocale(this.mvcProperties.getLocale()); return localeResolver; }
4）点击链接切换国际化
public class MyLocaleResolver implements LocaleResolver { @Override public Locale resolveLocale(HttpServletRequest httpServletRequest) { String l = httpServletRequest.getParameter("l"); Locale locale=Locale.getDefault(); if(!StringUtils.isEmpty(l)){ String[] s = l.split("_"); locale=new Locale(s[0],s[1]); } return locale; } @Override public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) { } }
将这个组件添加到容器中，MyWebConfig.java
@Bean public LocaleResolver localeResolver(){ return new MyLocaleResolver(); }
3，登陆
开发期间模板引擎页面修改以后，要实时生效。
禁用模板引擎的缓存
# 禁用缓存 spring.thymeleaf.cache=false
页面修改完成以后ctrl+f9，重新编译
后台处理登陆请求
@Controller public class LoginController { @PostMapping("/user/login") public String login(@RequestParam("username") String userName, @RequestParam("password") String password, Map<String,Object> map){ System.out.println("ok"); if("sa".equals(userName)&&"123456".equals(password)){
request.getSession().setAttribute("loginuser",userName); return "redirect:/main.html"; }else{ map.put("msg","用户名或密码错误"); return "login"; } } }
前端显示登陆失败信息
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
4，拦截器进行登陆检查
避免用户绕过登陆页面，直接访问主页面的路径。
//登录检查 public class LoginHanderInterceptor implements HandlerInterceptor { //目标方法执行之前 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { Object loginuser = request.getSession().getAttribute("loginuser"); if(loginuser==null){ //没有登陆返回到登陆页面 request.getRequestDispatcher("/index.html").forward(request,response); 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 { } }
注册拦截器
//注册拦截器 @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginHanderInterceptor()) .addPathPatterns("/**") //过滤登录请求和静态资源 .excludePathPatterns("/", "/login", "/index.html", "/user/login") .excludePathPatterns("/webjars/**") .excludePathPatterns("/asserts/**"); }
5，CRUD-员工列表
要求：
1.RestfulCRUD：CRUD满足Rest风格
URI：/资源名称/资源标识 Http请求方式区分对资源CRUD操作
2.请求架构
6，CRUD-员工列表
thymeleaf公共页面元素抽取
1、抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2、引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}：模板名::选择器 ~{templatename::fragmentname}:模板名::片段名 3、默认效果： insert的公共片段在div标签中 如果使用th:insert等属性进行引入，可以不用写~{}： 行内写法可以加上：[[~{}]];[(~{})]；
三种引入公共片段的th属性：
- th:insert：将公共片段整个插入到声明引入的元素中
- th:replace：将声明引入的元素替换为公共片段
- th:include：将被引入的片段的内容包含进这个标签中
<footer th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </footer> insert 引入方式 <div th:insert="footer :: copy"></div> 效果 <div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </div> replace 引入方式 <div th:replace="footer :: copy"></div> 效果 <footer> © 2011 The Good Thymes Virtual Grocery </footer> include 引入方式 <div th:include="footer :: copy"></div> 效果 <div> © 2011 The Good Thymes Virtual Grocery </div>
设置高亮，引入片段的时候传入参数
<nav class="col‐md‐2 d‐none d‐md‐block bg‐light sidebar" id="sidebar"> <div class="sidebar‐sticky"> <ul class="nav flex‐column"> <li class="nav‐item"> <a class="nav‐link active" th:class="${activeUri=='main.html'?'nav‐link active':'nav‐link'}" href="#" th:href="@{/main.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" strokelinecap=" round" stroke‐linejoin="round" class="feather feather‐home"> <path d="M3 9l9‐7 9 7v11a2 2 0 0 1‐2 2H5a2 2 0 0 1‐2‐2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> Dashboard <span class="sr‐only">(current)</span> </a> </li>
<!‐‐引入侧边栏;传入参数‐‐> <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
员工列表，绑定后台抓取的员工数据
<div class="table-responsive"> <table class="table table-striped table-sm"> <thead> <tr> <th>#</th> <th>lastName</th> <th>email</th> <th>gender</th> <th>department</th> <th>birth</th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="emp:${emps}"> <td th:text="${emp.id}"></td> <td>[[${emp.lastName}]]</td> <td th:text="${emp.email}"></td> <td th:text="${emp.gender}==0?'女':'男'"></td> <td th:text="${emp.department.departmentName}"></td> <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td> <td> <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a> <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button> </td> </tr> </tbody> </table> </div>
7，CRUD-添加员工
<form> <div class="form‐group"> <label>LastName</label> <input type="text" class="form‐control" placeholder="zhangsan"> </div> <div class="form‐group"> <label>Email</label> <input type="email" class="form‐control" placeholder="zhangsan@atguigu.com"> </div> <div class="form‐group"> <label>Gender</label><br/> <div class="form‐check form‐check‐inline"> <input class="form‐check‐input" type="radio" name="gender" value="1"> <label class="form‐check‐label">男</label> </div> <div class="form‐check form‐check‐inline"> <input class="form‐check‐input" type="radio" name="gender" value="0"> <label class="form‐check‐label">女</label> </div> </div> <div class="form‐group"> <label>department</label> <select class="form‐control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form‐group"> <label>Birth</label> <input type="text" class="form‐control" placeholder="zhangsan"> </div> <button type="submit" class="btn btn‐primary">添加</button> </form>
处理请求
//SpringMVC自动将表单中数据绑定到employee，只不过前端表单页面的name属性必须与Employee的属性名保持一致 @PostMapping("/emp") public String save(Employee employee){ System.out.println(employee); employeeDao.save(employee); return "redirect:/emps"; }
提交的数据格式不对：生日（日期类型）
2017-12-12；2017/12/12；2017.12.12；
日期的格式化：SpringMVC将页面提交的值需要转换为指定的类型。默认日期是按照/的格式。
在springboot的全局配置文件中，修改日期的默认格式。
spring.mvc.format.date=yyyy-MM-dd
8，员工修改
修改添加二合一表单
- SpringMVC中配置HiddenHttpMethodFilter，需要在全局配置文件里面启用
- 页面创建一个post表单
- 创建一个input项，name="_method"，值就是我们指定的请求方式。如：<input type="hidden" name="_method" value="put"/>
spring.mvc.hiddenmethod.filter.enabled=true //启用HiddenHttpMethodFilter
<!‐‐需要区分是员工修改还是添加；‐‐> <form th:action="@{/emp}" method="post"> <!‐‐发送put请求修改员工数据‐‐> <!‐‐ 1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的） 2、页面创建一个post表单 3、创建一个input项，name="_method";值就是我们指定的请求方式 ‐‐> <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/> <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"> <div class="form‐group"> <label>LastName</label> <input name="lastName" type="text" class="form‐control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}"> </div> <div class="form‐group"> <label>Email</label> <input name="email" type="email" class="form‐control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}"> </div> <div class="form‐group"> <label>Gender</label><br/> <div class="form‐check form‐check‐inline"> <input class="form‐check‐input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}"> <label class="form‐check‐label">男</label> </div> <div class="form‐check form‐check‐inline"> <input class="form‐check‐input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}"> <label class="form‐check‐label">男</label> </div> <div class="form‐check form‐check‐inline"> <input class="form‐check‐input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}"> <label class="form‐check‐label">女</label> </div> </div> <div class="form‐group"> <label>department</label> <!‐‐提交的是部门的id‐‐> <select class="form‐control" name="department.id"> <option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1 </option> </select> </div> <div class="form‐group"> <label>Birth</label> <input name="birth" type="text" class="form‐control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy‐MM‐dd HH:mm')}"> </div> <button type="submit" class="btn btn‐primary" th:text="${emp!=null}?'修改':'添加'">添加 </button> </form>
处理请求
@PutMapping("/emp")
public String updateEmployee(Employee employee){
employeeDao.save(employee);
return "redirect:/emps";
}
9，CRUD-员工删除
<tr th:each="emp:${emps}"> <td th:text="${emp.id}"></td> <td>[[${emp.lastName}]]</td> <td th:text="${emp.email}"></td> <td th:text="${emp.gender}==0?'女':'男'"></td> <td th:text="${emp.department.departmentName}"></td> <td th:text="${#dates.format(emp.birth, 'yyyy‐MM‐dd HH:mm')}"></td> <td> <a class="btn btn‐sm btn‐primary" th:href="@{/emp/}+${emp.id}">编辑</a> <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn‐sm btn‐danger deleteBtn">删除</button> </td> </tr> <form id="deleteEmpForm" method="post"> <input type="hidden" name="_method" value="delete"/> </form> <script> $(".deleteBtn").click(function(){ //删除当前员工的 $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit(); return false; }); </script>
处理请求
@DeleteMapping("/emp/{id}")
public String delEmployee(@PathVariable("id") Integer id){
System.out.println("delete method");
employeeDao.delete(id);
return "redirect:/emps";
}
posted on
浙公网安备 33010602011771号