使用SpringBoot实现一个基本的小网站
准备工作
1、新建一个SpringBoot项目,构建web模块
2、导入pojo和dao层的类
pojo层
package com.star.pojo;
public class Department {
private Integer id;
private String departmentName;
public Department() {
}
public Department(int i, String string) {
this.id = i;
this.departmentName = string;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getDepartmentName() {
return departmentName;
}
public void setDepartmentName(String departmentName) {
this.departmentName = departmentName;
}
@Override
public String toString() {
return "Department [id=" + id + ", departmentName=" + departmentName + "]";
}
}
package com.star.pojo;
import java.util.Date;
public class Employee {
private Integer id;
private String lastName;
private String email;
//1 male, 0 female
private Integer gender;
private Department department;
private Date birth;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
public Date getBirth() {
return birth;
}
public void setBirth(Date birth) {
this.birth = birth;
}
public Employee(Integer id, String lastName, String email, Integer gender,
Department department) {
super();
this.id = id;
this.lastName = lastName;
this.email = email;
this.gender = gender;
this.department = department;
this.birth = new Date();
}
public Employee() {
}
@Override
public String toString() {
return "Employee{" +
"id=" + id +
", lastName='" + lastName + '\'' +
", email='" + email + '\'' +
", gender=" + gender +
", department=" + department +
", birth=" + birth +
'}';
}
}
dao层
package com.star.dao;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import com.star.pojo.Department;
import org.springframework.stereotype.Repository;
//模拟数据库
@Repository
public class DepartmentDao {
private static Map<Integer, Department> departments = null;
static{
departments = new HashMap<Integer, Department>();
departments.put(101, new Department(101, "D-AA"));
departments.put(102, new Department(102, "D-BB"));
departments.put(103, new Department(103, "D-CC"));
departments.put(104, new Department(104, "D-DD"));
departments.put(105, new Department(105, "D-EE"));
}
//获得全部部门信息
public Collection<Department> getDepartments(){
return departments.values();
}
//通过id获取部门信息
public Department getDepartment(Integer id){
return departments.get(id);
}
}
package com.star.dao;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import com.star.pojo.Department;
import com.star.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
//模拟数据库
@Repository
public class EmployeeDao {
private static Map<Integer, Employee> employees = null;
@Autowired
private DepartmentDao departmentDao;
static{
employees = new HashMap<Integer, Employee>();
employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
}
private static Integer initId = 1006;
//新增员工实现id自增
public void save(Employee employee){
if(employee.getId() == null){
employee.setId(initId++);
}
employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
employees.put(employee.getId(), employee);
}
//获得全部的员工
public Collection<Employee> getAll(){
return employees.values();
}
//通过id获取员工
public Employee get(Integer id){
return employees.get(id);
}
//通过id删除员工
public void delete(Integer id){
employees.remove(id);
}
}
3、导入静态资源(页面放在Temleate,资源放在static目录下)
链接:https://pan.baidu.com/s/1FH8gy0WlMQXED6inbquPzQ
提取码:77ck
4、所有的页面增加头文件 xmlns:th="http://www.thymeleaf.org"
5、所有的资源链接修改格式为thymeleaf语法:th:xxx="@{}"
6、可以增加一个配置类,配置我们的SpringMVC
//代表这是一个配置类
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
//通过配置类来设置试图跳转
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");//定制首页为index.html页面
registry.addViewController("/index.html").setViewName("index");
registry.addViewController("/main.html").setViewName("dashboard");
}
MVC配置原理:https://www.cnblogs.com/lmx-181028/p/12468903.html
7、我们可以设置项目的路径名,application.properties
# 配置自己的服务器路径 localhost:8080/star
service.servlet.context-path=/star
实现功能
1、国际化
可以看到再首页的下面有中英文转换
这就是国际化,我们来实现这个功能!
首先修改编码
在Rources下创建目录 i18n(国际化 internationalization 单词的缩写)
创建login.properties(默认语言)文件,再创建login_zh_CN.properties(中文)文件。可以看到会将两个文件合并在一个目录下!
添加login_en_US.properties(英文)文件
编写login.properties,使用可视化编写!
然后修改index.html代码,使用thymeleaf绑定
<form class="form-signin" th:action="@{user/login}">
<img class="mb-4" th: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">Username</label>
<input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required="" autofocus="">
<label class="sr-only">Password</label>
<input type="password" class="form-control" name="password" th:placeholder="#{login.password}" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me" th:text="#{login.properties}">
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">[[#{login.btn}]]</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>
启动项目测试:
接下来我们使用下面的链接来进行中英文切换!
首先我们进入国际化的源码;
进入WebMvcAutoConfiguration.java类,找到LocaleResolver方法;
分析,代码,可以看出,默认使用AcceptHeaderLocaleResolver类,查看源码:实现LocaleResolver接口!
重写方法!
所以我们可以写一个自己的国际化解析器,实现LocaleResolver接口!
参照AcceptHeaderLocaleResolver类重写方法的格式!
我们先在前端传入语言的参数,thymeleaf传参用()
<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>
这个链接的地址还是当前的页面,不过要传国际化参数。
编写自己的国际化解析器!
package com.star.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 MyLocalResolver implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest request) {
//获取请求语言中的语言参数
String language = request.getParameter("l");
Locale locale = Locale.getDefault();//如果没有使用默认值
//如果请求的链接携带了国际化的参数
if(!StringUtils.isEmpty(language)){
//zh_CN分割
String[] s = language.split("_");
//国家_地区
locale = new Locale(s[0], s[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
//无返回值,不用写代码
}
}
然后在配置类中注册bean,自定义的国际化组件就生效了
@Bean
public LocaleResolver localeResolver(){
return new MyLocalResolver();
}
重启项目测试:
功能实现成功!
2、增加登录和拦截的功能!
1、前端提交登录请求 (看表单)
<form class="form-signin" th:action="@{user/login}">
2、后端处理登录请求 (登录成功,跳转到主页,显示用户的名字,如果没有成功告诉用户:用户名或密码错误)
@Controller
public class userController {
//登录实现
@RequestMapping("/user/login")
public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session){
if(!StringUtils.isEmpty(username)&& "123456".equals(password)){
model.addAttribute("msg","");
session.setAttribute("loginUser",username);
//登陆成功
//登录重定向,避免一直提交
return "redirect:/main.html";
}else {
model.addAttribute("msg","登录失败,请重新登录");
return "index";
}
}
}
3、发现问题:没有登录也能进入主页
4、增加一个拦截器,判断用户是否登录
package com.star.interceptor;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
if(request.getSession().getAttribute("loginUser")==null){
request.setAttribute("msg","没有权限,请先登录!");
request.getRequestDispatcher("/index.html").forward(request,response);//转发到登录页面
return false;
}else{
return true;
}
}
}
配置类中注册拦截器
//注册拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
//选择要过滤和排除的请求
registry.addInterceptor(new LoginInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/","/index.html","/user/login")//排除登录的请求
.excludePathPatterns("/asserts/**");//排除静态资源的请求
}
将 登录失败,请重新登录 的参数传入前端页面
<!--判断是否有错误标签-->
<p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>
5、测试登录和拦截是否成功;
我们如果未登录,main.html请求就不能通过,并且转发到登录页面!
3、展示员工列表
我们将所有员工的信息查询并展示出来
编写controller类
package com.star.controller;
import com.star.dao.EmployeeDao;
import com.star.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
public class EmployeeController {
@Autowired //自动转配,或者在配置类中注册bean
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();//通过该方法查询所有的员工信息
model.addAttribute("emps",employees);
return "emp/list";//跳转至在templates下的emp目录下list.html页面
}
}
为了减少代码量,我们提取公共页面,在templates目录下创建commons目录,新建commons.html页面;
由于list页面和dashboard页面的顶部栏和侧边栏是相同的。所以我们抽取出来,放在commens.html页面中
在头部导航栏的标签中添加 th:fragment="topBar"
(使用thymeleaf语法)
在侧边导航栏的标签中添加 th:fragment="sideBar"
然后在两个页面的原位置添加如下代码:
<!--顶部导航栏 commons目录下的commons页面的topBar-->
<div th:replace="~{commons/commons::topBar}"></div>
<!--侧边栏-->
<div th:replace="~{commons/commons::sideBar}"></div>
我们需要选定某个页面,侧边拦中的该页面要变亮;
接下来实现这个功能
看公共页面中 首页 的代码中可以看到有active
我们可以使用thymeleaf语法来判断;
请求首页时传参数active='main.html'
在dashboard.html页面中修改代码
<!--侧边栏-->
<div th:replace="~{commons/commons::sideBar(active='main.html')}"></div>
请求员工管理即list页面时传参数active='list.html'
在list.html页面中修改代码
<!--侧边栏-->
<div th:replace="~{commons/commons::sideBar(active='list.html')}"></div>
修改公共页的代码
<!--修改侧边栏的首页代码-->
th:class="${active=='main.html'?'nav-link active':'nav-link'}"
<!--修改侧边栏员工管理代码-->
th:class="${active=='list.html'?'nav-link active':'nav-link'}"
测试:
接下来我们展示所有的员工信息
修改list.html页面中thead标签和tbody标签中的代码(使用thymeleaf语法)
<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 th:text="${emp.getLastName()}"></td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==1?'男':'女'}"></td>
<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-HH-dd HH:mm:ss')}"></td>
<td>
<a href="" class="btn btn-sm btn-success">编辑</a>
<a href="" class="btn btn-sm btn-danger">删除</a>
</td>
</tr>
</tbody>
测试:
OK!我们实现了展示所有员工信息的功能
4、实现增加员工的功能
在展示列表的上面添加一个增加员工的链接
<h2><a class="btn btn-lg btn-success" th:href="@{/toAdd}">添加员工</a></h2>
这里是get请求
我们编写controller类
@Autowired
DepartmentDao departmentDao;
@GetMapping("/toAdd")
public String add(Model model){
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);//页面传入departments
return "emp/add";
}
新建一个增加员工的页面add.html
代码框架和list一样,修改main标签的内容
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--增加一个表单 提交到/emp请求-->
<form th:action="@{/emp}" method="post">
<div class="form-group">
<label>lastName</label>
<input type="text" class="form-control" name="lastName" placeholder="lastName">
</div>
<div class="form-group">
<label>email</label>
<input type="email" class="form-control" name="email" placeholder="email">
</div>
<div class="radio">
<label>gender</label>
<br>
<label>
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="0">女
</label>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value=
</select>
</div>
<div class="form-group">
<label>birth</label>
<input type="text" name="birth" class="form-control" placeholder="birth">
</div>
<br>
<div class="form-group">
<button type="submit" class="btn btn-sm btn-success">添加</button>
</div>
</form>
</main>
表单使用post请求到emp,编写controller页面
@Autowired
EmployeeDao employeeDao;
@PostMapping("/emp")
public String addEmp(Employee employee){
employeeDao.save(employee);//使用save方法增加员工
return "redirect:/emps";//重定向到emps也就是list.hrml页面
}
测试功能:
注意:springBoot里面的时间默认格式为:yyyy/MM/dd 所以表单的时间的格式为2020/01/01;
OK!增加员工功能实现成功!
5、修改员工功能
编写修改的链接以及请求
<a th:href="@{/toUpdate/}+${emp.getId()}" class="btn btn-sm btn-success">编辑</a>
编写对应的controlelr类
@GetMapping("/toUpdate/{id}")
public String toUpdate(@PathVariable("id") int id, Model model){
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee);
return "emp/update";
}
编写修改页面update.html,也是一个表单,同样提交到emp请求,这里注意要加一个隐藏域显示id,这样id就不会自增从而修改成功!
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form th:action="@{/emp}" method="post">
<!--隐藏域-->
<input type="hidden" name="id" th:value="${emp.getId()}">
<div class="form-group">
<label>lastName</label>
<input type="text" class="form-control" name="lastName" th:value="${emp.getLastName()}" placeholder="lastName" >
</div>
<div class="form-group">
<label>email</label>
<input type="email" class="form-control" name="email" th:value="${emp.getEmail()}" placeholder="Email">
</div>
<div class="radio">
<label>gender</label>
<br>
<label>
<input th:checked="${emp.getGender()==1}" type="radio" name="gender" value="1">男
<input th:checked="${emp.getGender()==0}" type="radio" name="gender" value="0">女
</label>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:selected="${dept.getId()==emp.getDepartment().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" name="birth" class="form-control" th:value="${#dates.format(emp.getBirth(),'yyyy/MM/dd HH:mm:ss')}">
</div>
<br>
<div class="form-group">
<button type="submit" class="btn btn-sm btn-success">修改</button>
</div>
</form>
</main>
测试:
OK!修改功能成功!
6、删除员工页面
编写删除的链接以及请求
<a th:href="@{/delete/}+${emp.getId()}" class="btn btn-sm btn-danger">删除</a>
编写对应的controlelr类
@GetMapping("/delete/{id}")
public String delete(@PathVariable("id") int id){
employeeDao.delete(id);//根据id删除对应的员工
return "redirect:/emps";
}
测试功能:点击删除即可!