SpringBoot开发单体应用（二）

Love The Way You Lie 2021-06-10 20:38 388阅读 0赞

## 页面国际化 ##

国际化，英文名叫internationalization，因为中间有18个字母，又叫i18n。  
我们平时工作或者开发一些网站时，尤其是国际网站，国际化是必须要做的事情。

> 准备工作

首先需要保证配置文件的编码格式是UTF-8，否则可能出现页面乱码的情况。选择`File->Settings`，搜索`File Encodings`进行设置。  
![配置文件编码格式设置][format_png]

> 测试使用

1、建立不同语言的配置文件。在resources目录下建立目录名称为i18n，添加`xxx.properties`国际化配置文件。使用`xxx_语言代号_国家代号.properties`的命名格式来添加不同语言的国际化配置文件。当我们添加了指定语言的国际化配置文件后，可以发现IDEA帮我们自动识别了，并帮我们生成了`Resource Bundle 'xxx'`目录。  
![国际化配置目录][format_png 1]  
![IDEA自动识别国际化配置文件][IDEA]  
我们再来编写一个英文的国际化配置文件。在国际化配置目录上右键选择`New->Add Properties Files to Resource Bundle`可以快速创建国际化配置文件。  
![快速创建国际化配置文件][format_png 2]

![国际化配置目录结构][format_png 3]  
点进其中一个国际化配置文件，点击下方的`Resource Bundle`，切换窗口之后点击上方的`+`号可以快速配置属性。  
![配置属性][format_png 4]  
最终配置完成的效果如下图所示。  
![配置完成的效果][format_png 5]  
如果是一整个完整的页面或者文档页的文章量十分大的时候，没有必要做这些细节化的国际化操作。

> Thymeleaf配置国际化

在前台页面配置这些国际化属性需要用到的表达式是Message Expressions，就是用`#{...}`这种格式来获取后台配置的国际化属性。  
![Message Expressions][]

> 让项目识别国际化配置

首先需要配置绑定国际化的映射路径：

#配置绑定国际化的login路径
    spring.messages.basename=i18n.login

配置完映射路径后，在前端使用Message Expressions去获取国际化配置属性时会有提示。  
![前端配置属性提示][format_png 6]  
把前端内容填写完毕后，重启项目，访问localhost:8080/，跳到登录页面如下图所示。登录页的文字会跟随着浏览器的语言环境而变化。  
![登录页][format_png 7]

原理：谷歌浏览器中右键`检查->NetWork`，查看localhost请求我们会发现，在`Request Headers`中`Accept-Language`参数的值为`zh_CN`，说明SpringBoot框架会根据浏览器请求中的语言来使用对应语言的国际化配置。  
![localhost请求信息][localhost]  
只不过，以上效果并不是最理想的，我们想要的理想效果是可以通过点击按钮或者链接实现语言的动态切换。

> 通过点击按钮实现语言动态切换

我们可以参考Dubbo官网，点击网站右上方的按钮可以切换中英文，仔细观察会发现中文和英文的请求地址是不一样的：  
中文：[http://dubbo.apache.org/zh-cn/][http_dubbo.apache.org_zh-cn]  
英文：[http://dubbo.apache.org/en-us/][http_dubbo.apache.org_en-us]  
也就是说，它是通过不同链接来实现国际化映射的。  
在Spring中，国际化对象是Locale。在SpringBoot中，框架帮我们自动注入了国际化的组件。相关源码如下：

@Bean 
    @ConditionalOnMissingBean 
    @ConditionalOnProperty(prefix = "spring.mvc", name = "locale") 
    public LocaleResolver 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; 
    }

在我们的接收请求解析中发现了一个重写的方法，源码如下：

@Override 
    public Locale resolveLocale(HttpServletRequest request) { 
    	Locale defaultLocale = getDefaultLocale(); 
    	// 从 request 中获得 Accept-Language 语言信息 
    	if (defaultLocale != null && request.getHeader("Accept-Language") == null) { 
    		return defaultLocale; 
    	}
    	// 得到请求中国际化的信息 
    	Locale requestLocale = request.getLocale(); 
    	List<Locale> supportedLocales = getSupportedLocales(); 
    	if (supportedLocales.isEmpty() || supportedLocales.contains(requestLocale)) { 
    		return requestLocale; 
    	}
    	Locale supportedLocale = findSupportedLocale(request, supportedLocales); 
    	if (supportedLocale != null) { 
    		return supportedLocale; 
    	}
    	return (defaultLocale != null ? defaultLocale : requestLocale); 
    }

通过分析以上源码，我们就可以知道怎么去自定义一个国际化请求解析器了。  
分析完源码之后，我们就可以开始实现我们想要的功能了：  
1、修改前端页面链接，访问后台请求并传递一个参数`l`，该参数表示当前需要切换的是哪种语言。

<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>

2、处理上述请求，我们可以去自定义一个国际化处理器来解析请求，获得传递参数并构造国际化对象。

//自定义国际化处理器
    public class MyLocaleResolver implements LocaleResolver {
        //实际上还是Java Web的基础操作
        @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 request, HttpServletResponse response, Locale locale) {
    
        }
    }

3、注册到Ioc容器中。

//注册我们的国际化组件
    //方法名（id）只能为localeResolver，因为SpringBoot会去扫描并识别
    @Bean
    public LocaleResolver localeResolver(){
      return new MyLocaleResolver();
    }

4、重启项目，点击测试即可。

## 登录实现 ##

1、修改登录表单。

2、编写处理请求。

//登录请求
    @PostMapping("/user/login")
    public String login(@RequestParam("username") String username,
    					@RequestParam("password") String password,
    					Model model, HttpSession session){
    	//从数据库中查找用户
    	SysUser user=sysUserMapper.getByUsernameAndPassword(username,password);
    	if(user!=null){
    		//登录成功，放入session
    		session.setAttribute("loginUser",username);
    		//转发和重定向
    		return "redirect:/main.html";
    
    	}
    	model.addAttribute("msg","用户名或密码错误！");
    	return "login";//返回登录页
    }

3、启动项目并测试。

> 拦截器实现

在实际网站中，用户在没有登录的情况下是不允许进入主页的，这就需要使用拦截器来对请求进行拦截了。  
1、编写自定义拦截器实现HandlerInterceptor接口。我们这里只在请求处理前进行拦截，因此只需要重写preHandle方法即可。

public class LoginInterceptor implements HandlerInterceptor {
        //false 拦截
        //true 放行
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
            String user= (String) request.getSession().getAttribute("loginUser");
            if(user==null){//未登录，不放行，并且跳转到登录页
                request.setAttribute("msg","未登录，请先登录！");
                request.getRequestDispatcher("/index.html").forward(request,response);//转发
                return false;
            }else{
                return true;
            }
        }
    }

2、注册拦截器。只需要在自定义Mvc配置类里面重写addInterceptors方法即可。

//注册拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
    	//拦截器需要放行第一次登录的请求，否则就永远无法登录成功
    	registry.addInterceptor(new LoginInterceptor())
    			.addPathPatterns("/**")
    			.excludePathPatterns("/index.html","/","index","/asserts/**","/user/login");
    }

3、启动项目进行测试。  
在前端页面可以使用`th:text=${session.xxx}`或者`[[${session.xxx}]]`来获取session的属性。  
![前端获取session属性][session]

## 员工列表实现 ##

> 员工列表页面跳转

1、前端提交请求。

2、后端处理请求。

//跳转到员工管理页面
    @GetMapping("/emps")
    public String list(Model model){
    	List<Employee> employees=employeeMapper.getEmployees();
    	model.addAttribute("emps",employees);
    	return "emp/list";
    }

> 抽取页面公共部分

跳转之后，页面存在公共部分，我们应该抽取成模板。我们可以把公共部分抽取到一个文件中，放在common目录下。  
![抽取页面公共部分][format_png 8]  
模板代码如下：

<!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" style="color:white" >[[${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="sidebar">
        <div class="sidebar-sticky">
            
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a th:class="${activeUrl=='main.html'?'nav-link active':'nav-link'}" th:href="@{/main.html}">首页</a>
                </li>
    
                <li class="nav-item">
                    
                    <a th:class="${activeUrl=='emps'?'nav-link active':'nav-link'}" th:href="@{/emps}">员工管理</a>
                </li>
    
            </ul>
        </div>
    </nav>

在其它页面中复用该模板：

<div th:replace="~{common/bar::topbar}"></div> 
    
    <div th:replace="~{common/bar::sidebar(activeUrl='emps')}"></div>

> 员工列表展示

1、修改前端页面样式。

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    	<h2>
    		
    		<a type="button" class="btn btn-success" th:href="@{/emp}"> 添加员工</a>
    	</h2>
    	<div class="table-responsive">
    		<table class="table table-striped table-sm">
    			<thead>
    				<tr>
    					<th>id</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.getId()}"></td>
    					<td>[[${emp.getLastName()}]]</td>
    					<td th:text="${emp.getEmail()}"></td>
    					<td th:text="${emp.getGender()==0?'女':'男'}"></td>
    					<td th:text="${emp.getEDepartment().getDepartmentName()}"></td>
    					<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
    					<td>
    						
    						<a th:href="@{/emp/}+${emp.id}" type="button" class="btn btn-sm btn-primary">编辑</a>
    						<a th:href="@{/delEmp/}+${emp.id}" type="button" class="btn btn-sm btn-danger">删除</a>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </main>

最终效果如下图所示。  
![员工管理页面最终效果][format_png 9]

## 添加员工实现 ##

1、新建一个添加员工页面。

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    	
    	
    	<form  th:action="@{/emp}" method="post">
    		<div class="form-group">
    			<label>LastName</label>
    			<input type="text" class="form-control" name="lastName" placeholder="wunian">
    		</div>
    		<div class="form-group">
    			<label>Email</label>
    			<input type="text" class="form-control" name="email" placeholder="1234567@qq.com">
    		</div>
    		<div class="form-group form-inline">
    			<label>Gender  </label>
    			<div class="form-check form-check-inline">
    				<input type="radio" name="gender" value="1">
    				<label>男</label>
    			</div>
    			<div class="form-check form-check-inline">
    				<input type="radio" name="gender" value="0">
    				<label>女</label>
    			</div>
    		</div>
    		<div class="form-group">
    			<label>Department</label>
    			<select class="form-control" name="department">
    				<option th:each="department:${departments}"
    						th:text="${department.getDepartmentName()}"
    						th:value="${department.getId()}"></option>
    			</select>
    		</div>
    		<div class="form-group">
    			<label>Birth</label>
    			<input type="text" class="form-control" name="birth" placeholder="2020-03-21">
    		</div>
    		<button type="submit" class="btn btn-primary">添加</button>
    	</form>
    </main>

2、后端处理请求。

//添加员工
    @PostMapping("/emp")
    public String addEmp(Employee employee){
    	//保存员工信息
    	employeeMapper.save(employee);
    	return "redirect:/emps";
    }

这里要特别注意提交时间的格式问题。我们需要在配置文件中配置前端页面的日期格式。

#前端提交的日期格式问题(和前端的日期格式对应即可)
    spring.mvc.date-format=yyyy-MM-dd

## 修改员工实现 ##

1、新建一个修改页面。

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    	
    	
    	<form  th:action="@{/updateEmp}" method="post">
    		
    		<input type="hidden" class="form-control" name="id" th:value="${employee.getId()}">
    		<div class="form-group">
    			<label>LastName</label>
    			<input type="text" class="form-control" name="lastName" th:value="${employee.getLastName()}">
    		</div>
    		<div class="form-group">
    			<label>Email</label>
    			<input type="text" class="form-control" name="email" th:value="${employee.getEmail()}">
    		</div>
    		<div class="form-group form-inline">
    			<label>Gender  </label>
    			<div class="form-check form-check-inline">
    				<input type="radio" name="gender" value="1"
    					th:checked="${employee.getGender()==1}">
    				<label>男</label>
    			</div>
    			<div class="form-check form-check-inline">
    				<input type="radio" name="gender" value="0"
    					th:checked="${employee.getGender()==0}">
    				<label>女</label>
    			</div>
    		</div>
    		<div class="form-group">
    			<label>Department</label>
    			
    			<select class="form-control" name="department">
    				
    				<option th:selected="${employee.getDepartment()==dept.getId()}"
    						th:each="dept:${departments}"
    						th:text="${dept.getDepartmentName()}"
    						th:value="${dept.getId()}"></option>
    			</select>
    		</div>
    		<div class="form-group">
    			<label>Birth</label>
    			<input type="text" class="form-control" name="birth" th:value="${#dates.format(employee.getBirth(),'yyyy-MM-dd')}">
    		</div>
    		<button type="submit" class="btn btn-primary">修改</button>
    	</form>
    </main>

2、跳转到修改页面（注意页面回显和设置id的隐藏域），后端处理跳转请求。

//跳转到员工修改页面
    @GetMapping("/emp/{id}")
    public String toUpdateEmp(@PathVariable("id")Integer id,Model model){
    	Employee employee = employeeMapper.get(id);
    	model.addAttribute("employee",employee);
    	//查询部门数据
    	List<Department> departments = departmentMapper.getDepartments();
    	model.addAttribute("departments",departments);
    	return "emp/update";
    }

3、后端处理修改请求。

//修改员工信息
    @PostMapping("/updateEmp")
    public String updateEmp(Employee employee){
      employeeMapper.update(employee);
      return "redirect:/emps";
    }

4、启动项目并测试。

## 删除员工和注销实现 ##

1、前端提交删除请求。

2、后端处理删除请求。

//删除员工信息
    @GetMapping("/delEmp/{id}")
    public String delEmp(@PathVariable("id")Integer id){
    	employeeMapper.delete(id);
    	return "redirect:/emps";
    }

3、前端提交注销请求。

4、后端处理注销请求。

//注销请求
    @GetMapping("/user/logout")
    public String logout(HttpSession session){
    	session.invalidate();
    	return "login";
    }

5、启动项目并测试。

> 基本的错误处理方式

当我们在网站上访问了一个错误的请求页面之后，一般会跳到一个错误处理页面。在SpringBoot中，我们只需要在templates目录下建立一个error目录，在里面放入对应的错误页面即可，错误页面的名称为对应的错误状态码，比如`4xx.html`或者5xx.html\`等。

> 上线网站的步骤

1、将项目打包到服务器上运行。打包命令：`mvn package`  
2、配置服务器数据库。  
3、运行项目。直接运行jar包，命令：`java -jar xxx.jar`或`nohup java -jar xxx.jar &`（后台运行）。  
4、开启Linux防火墙。  
5、如果使用的是阿里云服务器，还需要在阿里云上配置安全组规则，开放相应的端口。

## 错误处理机制 ##

错误处理的自动配置类是ErrorMvcAutoConfiguration，该类注册了如下几个bean：

*  DefaultErrorAttributes
 *  BasicErrorController
 *  ErrorPageCustomizer
 *  DefaultErrorViewResolver

错误处理的大致步骤：  
1、如果系统出现了如404、500错误，错误将被ErrorPageCustomizer进行处理，并跳转到/error请求进行处理。  
2、默认的发生错误，它会将请求转发到BasicErrorController控制器来处理请求。若是网页客户端请求就会返回页面，如果是api调用就会返回JSON数据。源码如下：

@RequestMapping(produces = MediaType.TEXT_HTML_VALUE)// 如果是网页请求就返回视图
    public ModelAndView errorHtml(HttpServletRequest request, HttpServletResponse response) {
    	HttpStatus status = getStatus(request);
    	Map<String, Object> model = Collections
    			.unmodifiableMap(getErrorAttributes(request, isIncludeStackTrace(request, MediaType.TEXT_HTML)));
    	response.setStatus(status.value());
    	// 错误的页面会被谁处理呢？
    	ModelAndView modelAndView = resolveErrorView(request, response, status, model);
    	return (modelAndView != null) ? modelAndView : new ModelAndView("error", model);
    }
    
    @RequestMapping // 其与的请求都会返回错误的状态
    public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
    	HttpStatus status = getStatus(request);
    	if (status == HttpStatus.NO_CONTENT) {
    		return new ResponseEntity<>(status);
    	}
    	Map<String, Object> body = getErrorAttributes(request, isIncludeStackTrace(request, MediaType.ALL));
    	return new ResponseEntity<>(body, status);
    	}
    }

[format_png]: /images/20210607/83168fb4f6a6452c8a89ac512d6d33aa.png
[format_png 1]: /images/20210607/47d2c73ae96f44639fb8a36582551356.png
[IDEA]: /images/20210607/a5b64bd962744159a3a5e04893cb741a.png
[format_png 2]: /images/20210607/7141db4bc3de49eea27061c773f505dc.png
[format_png 3]: /images/20210607/f06788dd96624d9eb68d67a856b08d64.png
[format_png 4]: /images/20210607/bc5d07b78a2a4edabb644741aca764bf.png
[format_png 5]: /images/20210607/f71c3ea436e64a009477ab4a18a34b0c.png
[Message Expressions]: /images/20210607/bb081313fedc4ee7b89bfb873637b209.png
[format_png 6]: /images/20210607/a9ac30627b2148f087dec390724e5dbf.png
[format_png 7]: /images/20210607/74124dd085334af1a864316933ed961d.png
[localhost]: /images/20210607/f43298741ad34e31bec6906b8e1b942f.png
[http_dubbo.apache.org_zh-cn]: http://dubbo.apache.org/zh-cn/
[http_dubbo.apache.org_en-us]: http://dubbo.apache.org/en-us/
[session]: /images/20210607/e9025ea7ade74c05bf800e5b7408a4d6.png
[format_png 8]: /images/20210607/0b34c55c410b40ee91e3822e81350049.png
[format_png 9]: /images/20210607/9bb77e6f20804ef99e2a4f30952e2964.png