Spring boot模拟数据库开发
准备工作
-
把准备的后台模板准备好,地址:
-
链接:https://pan.baidu.com/s/13mNCQ18_nl6DHpxfKl4ZFw
提取码:love -
导所需要的依赖
<!--thymleaf引擎导入--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!--官方导入--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--lombok导入--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency>
- 然后把网页模板都导入到templates文件夹下
2.把静态资源导入到static文件夹下
3.模拟数据库操作
-
pojo层创建
@Data @AllArgsConstructor @NoArgsConstructor //部门表 public class Development { private Integer id; private String developmentName; } @Data @NoArgsConstructor //员工表 public class Employee { private Integer id; private String lastName; private String email; private Integer gender; private Development development; private Date birth; public Employee(Integer id, String lastName, String email, Integer gender, Development development) { this.id = id; this.lastName = lastName; this.email = email; this.gender = gender; this.development = development; this.birth=new Date(); } }
-
dao层创建
@Repository public class DevelopmentDao { //模拟数据库管理数据 public static Map<Integer,Development> developments=null; static { developments=new HashMap<Integer, Development>(); developments.put(101,(new Development(101,"教育部"))); developments.put(102,(new Development(102,"人事部"))); developments.put(103,(new Development(103,"运营部"))); developments.put(104,(new Development(104,"技术部"))); developments.put(105,(new Development(105,"后勤部"))); } //获取部门表的所有信息 public Collection<Development> getDevelopmentAll(){ return developments.values(); } //通过获取id获得部门的信息 public Development getDevelopmentById(Integer id){ return developments.get(id); } }
@Repository public class EmployeeDao { //模拟数据管理员工表 public static Map<Integer, Employee> employees=null; static { employees=new HashMap<Integer, Employee>(); employees.put(1001,new Employee(1001,"Aa","A1157627585@qq.com",0,new Development(101,"教育部"))); employees.put(1002,new Employee(1002,"Bb","B1157627585@qq.com",1,new Development(102,"人事部"))); employees.put(1003,new Employee(1003,"Cc","C1157627585@qq.com",0,new Development(103,"运营部"))); employees.put(1004,new Employee(1004,"Dd","D1157627585@qq.com",1,new Development(104,"技术部"))); employees.put(1005,new Employee(1005,"Ee","E1157627585@qq.com",0,new Development(105,"后勤部"))); } //获得所有员工的信息 public Collection<Employee> getEmployeeAll(){ return employees.values(); } //根据id获取员工的信息 public Employee getEmployeeById(Integer id){ return employees.get(id); } //主键自增 public static Integer initEmployeeid=1006; //增加一个员工 public void addEmployee(Employee employee){ //如果添加的员工id为空 if (employee.getId()==null){ //那么就自动+1 employee.setId(initEmployeeid++); } //把所添加的信息添加到数据库中 employees.put(employee.getId(),employee); } //根据id删除一个员工 public void deleteEmployee(Integer id){ employees.remove(id); } }
首页实现
-
扩展首页的mvc配置
//添加一个视图控制器,来控制跳转的方式 @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("login"); registry.addViewController("/index.html").setViewName("login"); registry.addViewController("/main.html").setViewName("index"); }
-
需要关闭thymleaf引擎的缓存机制
#关闭thymleaf缓存机制 spring.thymeleaf.cache=false
-
网页表头需要添加thymleaf的命名空间
xmlns:th="http://www.thymeleaf.org"
-
需要把网页改成thymleaf格式
<!-- Bootstrap core CSS --> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/css/signin.css}" rel="stylesheet">
所有页面的静态资源都需要使用thymleaf接管,
其他也都是需要改,在线的连接不需要改
国际化
- 首先需要修改File Encodings
- 创建i18n文件夹,并且创建login.properties
-
把网页修改成国际化
<form class="form-signin" th:action="@{/user/login}"> <img class="mb-4" th:src="@{/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> <p style="color: red;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p> <label class="sr-only">[[#{login.username}]]</label> <input name="username" type="text" class="form-control" th:placeholder="#{login.username}" required="" autofocus=""> <label class="sr-only">[[#{login.password}]]</label> <input name="password" type="password" class="form-control" 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" >[[#{login.btn}]]</button> <p class="mt-5 mb-3 text-muted">© 2017-2018</p> <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> </form>
th:text:#{}来配置国际化信息
-
自定义一个组件
LocaleResolver
来控制语言的国际化//解析请求 @Override public Locale resolveLocale(HttpServletRequest request) { //获取语言的请求 String language = request.getParameter("l"); Locale locale = Locale.getDefault();//如果没有所选的语言就是默认的 //如果获取的链接携带了国际化的参数 //如果选择的语言不为空 if(!StringUtils.isEmpty(language)){ //zh_CN String[] split = language.split("_"); //国家,地区 locale = new Locale(split[0], split[1]); } return locale; }
-
然后将自定义组件配置到spring容器中,也就是
@Bean
//这个是为了实现国际化 public LocaleResolver localResolver(){ return new MyLocalResolver(); }
登录功能实现
因为数据库是伪造的,所以登录的时候无论什么都能登录进去
-
写一个登录的控制器
LoginController
@Controller public class LoginController { @RequestMapping("/user/login") public String login(@RequestParam("username")String username, @RequestParam("password")String pwd, Model model, HttpSession session) { System.out.println("debug==>"+username); if (!StringUtils.isEmpty(username)&&"123456".equals(pwd)) { session.setAttribute("loginUser", username); return "redirect:/main.html"; } else { model.addAttribute("msg", "密码或者用户名输入错误,请重新登录!"); return "login"; } } }
-
由于没有提示,所以需要在前端加一个标签来提示
<!--如果msg显示为空,就会提示为空--> <p style="color: red;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
展示登录页面
登录拦截器
-
创建一个拦截器方法
LoginHandlerInterceptor
,为了拦截那些没有登录就进入主界面的操作public class LoginHandlerInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //登录成功后,应该有用户的session Object loginUser = request.getSession().getAttribute("loginUser"); if (loginUser==null){//没有登录 request.setAttribute("msg","没有权限,请先登录"); request.getRequestDispatcher("/index.html").forward(request,response); return false; }else { return true; } } }
-
把
LoginHandlerInterceptor
配置到spring容器中,@Bean
.//添加一个拦截器,为了拦截那些没有登录就进入主界面的操作 @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**") .excludePathPatterns("/","/index.html","/user/login","css/**","fonts/**","images/**","js/**","lib/**"); }
-
展示登录页面
展示员工列表
-
把所有多余的代码都写到一个网页中
commons.html
<!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="top"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${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="${active=='dashboard.html'?'nav-link active':'nav-link'}" th:href="@{/dashboard.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" stroke-linecap="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> 首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a th:class="${active=='dashboard.html'?'nav-link active':'nav-link'}" th:href="@{/dashboard.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" stroke-linecap="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> 首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path> <polyline points="13 2 13 9 20 9"></polyline> </svg> Orders </a> </li> <li class="nav-item"> <a th:class="${active=='list1.html'?'nav-link active':'nav-link'}" th:href="@{/users}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> 用户管理 </a> </li> <li class="nav-item"> <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"> <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path> </svg> 员工管理 </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="14"></line> </svg> Reports </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"> <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon> <polyline points="2 17 12 22 22 17"></polyline> <polyline points="2 12 12 17 22 12"></polyline> </svg> Integrations </a> </li> </ul> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <span>Saved reports</span> <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> </a> </h6> <ul class="nav flex-column mb-2"> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Current month </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Last quarter </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Social engagement </a> </li> <li class="nav-item"> <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> Year-end sale </a> </li> </ul> </div> </nav> </html>
-
根据
th:fragment="sidebar"
和th:replace="~{commons/commons::top}"
来实现网页的嵌入<!--顶部栏--> <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="top"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${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> <div th:replace="~{commons/commons::top}"></div>
-
创建员工控制器,来实现展示功能
EmployeeController
public class EmployeeController { @Autowired EmployeeDao employeeDao; @Autowired DevelopmentDao developmentDao; @RequestMapping("/emps") public String listAll(Model model){ List<Employee> employees = employeeDao.queryEmployeeList(); for (Employee employee : employees) { System.out.println("employee==>"+employee); } model.addAttribute("emps",employees); return "/emp/list"; } }
-
根据
th:class="${active=='dashboard.html'?'nav-link active':'nav-link'}"
来实现标识高亮 -
把所有的参数配置到所对应的网页中
list.html
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <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>development</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()==0?'女':'男'}"></td> <td th:text="${emp.getEDevelopment().developmentName}"></td> <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}"></td> <td> <a class="btn btn-sm btn-primary">编辑</a> <a class="btn btn-sm btn-danger">删除</a> </td> </tr> </tbody> </table> </div> </main>
-
这样的话,展示员工列表的功能就实现了
增加员工实现
-
添加
增加员工功能
@GetMapping("/emp") public String AddtoPage(Model model){ //查询所有员工的信息 List<Employee> employees = employeeDao.queryEmployeeList(); model.addAttribute("employees",employees); //查询所有部门的信息 List<Development> developments = developmentDao.getDevelopments(); model.addAttribute("developments",developments); return "/emp/add"; } @PostMapping("/emp") public String Addemp(Employee employee){ //添加的操作 System.out.println("Addemp==>" + employee); employeeDao.addEmplyee(employee);//调用底层业务来保存员工信息 return "redirect:/emps"; }
-
创建一个
add.html
<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="张彦彬"> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" placeholder="1157627585@qq.com"> </div> <div class="form-group"> <label>Gender</label><br> <label class="radio-inline"> <input type="radio" name="gender" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" value="0"> 女 </label> </div> <div class="form-group"> <label>Development</label> <select class="form-control" name="development"> <!--/*@thymesVar id="getDevelopmentName" type="com.zyb.pojo.Development"*/--> <option th:each="development:${developments}" th:text="${development.getDevelopmentName()}" th:value="${development.getId()}">1</option> </select> </div> <div class="form-group"> <label>Birth</label> <input type="text" name="birth" class="form-control" placeholder="时间"> </div> <button type="submit" class="btn btn-outline-success">添加</button> </form> </main>
-
增加员工展示
修改员工信息
-
添加
修改员工信息
功能@GetMapping("/updateEmp/{id}") public String toUpdateEmp(@PathVariable("id") Integer id, Model model){ Employee employeeById = employeeDao.queryEmployeeById(id); System.out.println(employeeById); model.addAttribute("emp",employeeById); Collection<Development> developments = developmentDao.getDevelopments(); model.addAttribute("developments",developments); return "emp/update"; } @PostMapping("/updateEmp") public String updateEmp(Employee employee){ System.out.println("update==>" + employee); employeeDao.updateEmplyee(employee); return "redirect:/emps"; }
-
创建一个
update.html
<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" th:value="${emp.getId()}" name="id"> <div class="form-group"> <label>LastName</label> <input th:value="${emp.getLastName()}" type="text" class="form-control" name="lastName" placeholder="张彦彬"> </div> <div class="form-group"> <label>Email</label> <input th:value="${emp.getEmail()}" type="email" name="email" class="form-control" placeholder="1157627585@qq.com"> </div> <div class="form-group"> <label>Gender</label><br> <label class="radio-inline"> <input type="radio" th:checked="${emp.getGender()==1}" name="gender" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" th:checked="${emp.getGender()==0}" name="gender" value="0"> 女 </label> </div> <div class="form-group"> <label>Development</label> <select class="form-control" name="development"> <option th:selected="${development.getId()==emp.getDevelopment()}" th:each="development:${developments}" th:text="${development.getDevelopmentName()}" th:value="${development.getId()}">1</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')}" placeholder="时间"> </div> <button type="submit" class="btn btn-outline-success">修改</button> </form> </main>
-
修改页面展示
删除及404处理
-
添加
删除
功能@RequestMapping("/delete/{id}") public String Deleteemp(@PathVariable("id") Integer id){ employeeDao.deleteEmplyee(id); return "redirect:/emps"; }
-
404处理页面只要放入到/templates/error文件夹下面,然后spring就会自动识别,如果跳转的页面不存在,就会自动跳转至此。
好了,一个springboot模拟数据库开发的网站就到此结束了,如果有什么不对的地方,请及时说出,我也会即使改正的。