1.pojo类
package com.sunyu.pojo; public class Employee { private Integer id; private String lastName; private String email; private Integer gender; public Employee(){} public Employee(Integer id, String lastName, String email, Integer gender) { this.id = id; this.lastName = lastName; this.email = email; this.gender = gender; } 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; } @Override public String toString() { return "Employee{" + "id=" + id + ", lastName='" + lastName + '\'' + ", email='" + email + '\'' + ", gender=" + gender + '}'; } }
2.DAO类(由于没有使用数据库,所以在dao类中添加了map集合储存数据)
package com.sunyu.DAO; import com.sunyu.pojo.Employee; import org.springframework.stereotype.Repository; import java.util.Collection; import java.util.HashMap; import java.util.Map; /** * Date:2022/7/8 * Author:ybc * Description: */ @Repository public class EmployeeDao { private static Map<Integer, Employee> employees = null; static{ employees = new HashMap<Integer, Employee>(); employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1)); employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1)); employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0)); employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0)); employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1)); } private static Integer initId = 1006; public void save(Employee employee){ if(employee.getId() == null){ employee.setId(initId++); } employees.put(employee.getId(), employee); } public Collection<Employee> getAll(){ return employees.values(); } public Employee get(Integer id){ return employees.get(id); } public void delete(Integer id){ employees.remove(id); } }
3.控制层(暂时不需要sevice层)
package com.sunyu.controller; import com.sunyu.DAO.EmployeeDao; import com.sunyu.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.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import java.util.Collection; @Controller public class EmpController { /** * 登录 */ @Autowired private EmployeeDao employeeDao; @RequestMapping(value = "/text", method = RequestMethod.GET) public String text(Model model) { Collection<Employee> all = employeeDao.getAll(); model.addAttribute("all", all); return "employee_list"; } /** * 跳转道添加页面 * * @return */ @RequestMapping("/to/add") public String toAdd() { return "employee_add"; } /** * 实现添加员工信息 * * @param employee * @return */ @RequestMapping(value = "/employee", method = RequestMethod.POST) public String addEmpInfor(Employee employee) { employeeDao.save(employee); return "redirect:/text"; } /** * 实现删除员工信息 */ @RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE) public String deleteEmpInfor(@PathVariable("id") Integer id) { employeeDao.delete(id); return "redirect:/text"; } /** * 修改员工信息 */ @RequestMapping(value = "/employee", method = RequestMethod.PUT) public String insert(Employee employee) { employeeDao.save(employee); return "redirect:/text"; } /** * 查询员工信息 */ @RequestMapping(value = "/employee/{id}",method = RequestMethod.GET) public String getEmpInfor(@PathVariable("id") Integer id,Model model){ Employee employee = employeeDao.get(id); model.addAttribute("employee",employee); return "employee_update"; } }
4.pom.xml文件
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>springmvcCRUD</artifactId> <version>1.0-SNAPSHOT</version> <properties> <maven.compiler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> </properties> <packaging>war</packaging> <dependencies> <!-- SpringMVC --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.1</version> </dependency> <!-- 日志 --> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.2.3</version> </dependency> <!-- ServletAPI --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <!-- Spring5和Thymeleaf整合包 --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>3.0.12.RELEASE</version> </dependency> <dependency> <groupId>org.jetbrains</groupId> <artifactId>annotations</artifactId> <version>RELEASE</version> <scope>compile</scope> </dependency> </dependencies> </project>
5.web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <!--设置spring编码过滤器--> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter> <filter-name>HiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class> </filter> <filter-mapping> <filter-name>HiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>SpringMVC</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
6.springmvc.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <context:component-scan base-package="com.sunyu"></context:component-scan> <!-- 配置Thymeleaf视图解析器 --> <bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> <property name="order" value="1"/> <property name="characterEncoding" value="UTF-8"/> <property name="templateEngine"> <bean class="org.thymeleaf.spring5.SpringTemplateEngine"> <property name="templateResolver"> <bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver"> <!-- 视图前缀 --> <property name="prefix" value="/WEB-INF/templates/"/> <!-- 视图后缀 --> <property name="suffix" value=".html"/> <property name="templateMode" value="HTML5"/> <property name="characterEncoding" value="UTF-8" /> </bean> </property> </bean> </property> </bean> <mvc:default-servlet-handler /> <!--开启mvc的注解驱动--> <mvc:annotation-driven /> <!-- <mvc:view-controller path="/" view-name="login"></mvc:view-controller>--> <mvc:view-controller path="/" view-name="index"></mvc:view-controller> </beans>
7.前端
(1)实现添加功能
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>add employee</title> <link rel="stylesheet" th:href="@{/static/css/index_work.css}"> </head> <body> <form th:action="@{/employee}" method="post"> <table> <tr> <th colspan="2">add employee</th> </tr> <tr> <td>lastName</td> <td> <input type="text" name="lastName"> </td> </tr> <tr> <td>email</td> <td> <input type="text" name="email"> </td> </tr> <tr> <td>gender</td> <td> <input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="0">female </td> </tr> <tr> <td colspan="2"> <input type="submit" value="add"> </td> </tr> </table> </form> </body> </html>
(2)实现修改与查询功能
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>update employee</title> <link rel="stylesheet" th:href="@{/static/css/index_work.css}"> </head> <body> <form th:action="@{/employee}" method="post"> <input type="hidden" name="_method" value="put"> <input type="hidden" name="id" th:value="${employee.id}"> <table> <tr> <th colspan="2">update employee</th> </tr> <tr> <td>lastName</td> <td> <input type="text" name="lastName" th:value="${employee.lastName}"> </td> </tr> <tr> <td>email</td> <td> <input type="text" name="email" th:value="${employee.email}"> </td> </tr> <tr> <td>gender</td> <td> <input type="radio" name="gender" value="1" th:field="${employee.gender}">male <input type="radio" name="gender" value="0" th:field="${employee.gender}">female </td> </tr> <tr> <td colspan="2"> <input type="submit" value="update"> </td> </tr> </table> </form> </body> </html>
(3)列表
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>employee list</title> <link rel="stylesheet" th:href="@{/static/css/index_work.css}"> </head> <body> <div id="app"> <table> <tr> <th colspan="5">employee list</th> </tr> <tr> <th>id</th> <th>lastName</th> <th>email</th> <th>gender</th> <th>options(<a th:href="@{/to/add}">add</a>)</th> </tr> <tr th:each="employee : ${all}"> <td th:text="${employee.id}"></td> <td th:text="${employee.lastName}"></td> <td th:text="${employee.email}"></td> <td th:text="${employee.gender}"></td> <td> <a @click="deleteEmployee()" th:href="@{'/employee/'+${employee.id}}">delete</a> <a th:href="@{'/employee/'+${employee.id}}">update</a> </td> </tr> </table> <form method="post"> <input type="hidden" name="_method" value="delete"> </form> </div> <script type="text/javascript" th:src="@{/static/js/vue.js}"></script> <script type="text/javascript"> var vue = new Vue({ el:"#app", methods:{ deleteEmployee(){ //获取form表单 var form = document.getElementsByTagName("form")[0]; //将超链接的href属性值赋值给form表单的action属性 //event.target表示当前触发事件的标签 form.action = event.target.href; //表单提交 form.submit(); //阻止超链接的默认行为 event.preventDefault(); } } }); </script> </body> </html>
(4)跳转页面(稍后更新为登录)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎来到员工信息管理系统</title> </head> <body> <a th:href="@{/text}">跳转</a> </body> </html>
(5)css,javascrip等等文件
链接:https://pan.baidu.com/s/1npITDYYNffD9Yghi-3ni7A
提取码:8pr2