【SpringMVC 框架(自学)】Day07(RESTFul案例-重点)--2022/4/17

六、RESTFul案例

1、准备工作

<!--配置pom环境-->
<!--打包方式添加为war包-->
    <packaging>war</packaging>

    <dependencies>
        <!--SpringMVC-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.2.9.RELEASE</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.15.RELEASE</version>
        </dependency>
    </dependencies>
//导入Pojo实体类
public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    private Integer gender;
    //Setter()、Getter()方法
    //有参、无参构造方法
}
//导入持久层EmployeeDao类

@Repository("employeeDao")
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);
    }
}
<!--配置编码过滤器
	(CharacterEncodingFilter)
-->

<!--配置DELETE、PUT请求的过滤器
	(HiddenHttpMethodFilter)
-->

<!--配置前端控制器(Dispatcher)
		配置前端控制器执行时间提前到服务器启动时load-on-startup
-->
<!--配置组件扫描器
	(component:scan)
-->

<!--配置Thymeleaf视图解析器-->

<!--mvc视图解析器(view-controller)
	注解驱动(annotation-driver)
-->

<!--开放静态资源访问
	(default-servlet-handler)
-->
//定义Controller层

@Controller
public class EmployeeController{
    //因为要调用Dao层的增删改查,所以要new一个对象
    @Autowired
    private EmployeeDao employeeDao;
}

2、定义首页

<mvc:view-controller path="/" view-name="index"><mvc:/view-controller>
    
<mvc:annotation-driver></mvc:annotation-driver>

业务处理

-- 功能 -- -- 跳转地址 -- -- 请求方式 --
/employee POST
/employee/ DELETE
根据id查 /employee/ GET
/employee PUT
/employee GET

3、查找所有员工(查)

//控制层
@RequestMapping(value = "/employee",method = RequestMethod.GET)
public String getAllEmployee(Model model){
    Collection<Employee> employeeList = employeeDao.getAll()
    model.addAttribute("employeeList",employeeList)
    return "employee_list";
}

想要从Dao层获取数据,就得用请求转发的方式来获取

<table>
	<tr>
    	<th colspan="5">Employee Info</th>
    </tr>
    <tr>
    	<th>id</th>
        <th>...</th>
        <th>opption(选项)</th>
    </tr>
    <tr th:each="employee : ${employeeList}">
    	<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 th:href="">delete</a>
            <a th:href="">update</a>
        </td>
    </tr>
</table>

向域中共享数据时,语法格式必须为:${}

如果页面需要Thymeleaf解析视图时,语法必须为:th:xxx="@{}"

在定义删除时,其格式原本为:/employee?id,当使用RESTFul风格时,格式为:/employee/id

如果想要让id对应当前的用户,那么应该让Thymeleaf解析路径为:/employee/{id}

所以要用字符拆分来实现---->th:xxx = "@{/employee/}+${employee.id}"


4、根据id删除员工(删)

思路:想要实现根据id删除员工,那么就要根据绑定员工id的a标签中,添加一个点击事件,这个事件又连接着form表单,且form表单的method方法为:delete,它的action是此a标签中的href连接

<table id="dataTable">
    ......
    <a @click="deleteEmployee" th:href = "@{/employee/}+${employee.id}">delete</a>
    <a th:href="">update</a>
    ......
</table>

<form id = "deleteForm" method = "POST">
    <input type="hidden" name = "_method" value = "delete">
</form>

<!--
	将a标签和form表单绑定 通过点击实现删除事件
 		1 、引入vue.js并重新打包
		2 、将超链接绑定form表单
-->
 <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
	var vue = new Vue({
        //定义数据源
        el:"#dataTable",
        //定义方法
        methods:{
            //定义点击事件deleteEmployee
			deleteForm:function(event){
                //获取表单
                var deleteForm = document.getElementById("deleteForm")
                //绑定点击事件
                deleteForm.action() = event.target.href
                //提交表单
                deleteForm.submit();
                //取消超链接的默认跳转行为
                event.preventDefault();
            }
   	 	}
    })
</script>
@RequestMapping(value = "/employee/{id}",method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id){
    employeeDao.delete(id);
    return "redirect:/employee";
}

5、添加员工(增)

<!--添加页面跳转-->
<a th:href="@{/toAdd}">add</a>

<!--配置mvc视图解析
	只是单纯的跳转,并没有业务逻辑,所以用视图解析
-->
<mvc:view-controller path="/toAdd" view-nmae="employee_add"></mvc:view-controller>

<form th:action="@{/employee}" method="post">
	lastName: <input type="text" name="lastName"><br>
    email: <input type="text" name="email"><br>
    gender: <input type="radio" name="gender" value="1"><input type="radio" name="gender" value="0"><br>
    <input type="submit" value="add">
</form>
//业务逻辑代码
@RequestMapping(value = "/
                employee",method = RequesMethod.POST)
public String addEmployee(Employee employee){
    employeeDao.save(employee)
    return "redirect:/employee"
}

6、修改员工(改)

<!--添加页面跳转
		并让页面数据根据当前的id回显	
-->
<a th:href="@{/employee/}+${employee.id}">update</a>
//业务逻辑代码,回显功能
@RequestMapping(value = "/employee/{id}",method = RequestMethod.GET)
public String getEmployeeById(@PathVariable("id") Integer id,Model model){
    Employee employee = employeeDao.get(id);
    model.addAttribute("employee",employee);
    return "employee_update";
}
<!--回显页面
	回显就需要用到:th:Value
	单选框的回显则是:th:field
	修改需要用到PUT
	根据id修改需要获取当前的id值
-->
<form th:action="@{/employee}" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="text " name="id" th:value="${employee.id}">
    lastName: <input type="text" name="lastName" th:value="${employee.lastName}"><br>
    email: <input type="text" name="email" th:value="${employee.email}"><br>
    gender: <input type="radio" name="gender" value="1" th:field="${employee.gender}"><input type="radio" name="gender" value="0" th:field="${employee.gender}"><br>
    <input type="submit" value="update">
</form>
//修改提交
@RequestMapping(value = "/employee",method = RequestMethod.PUT)
public String updateEmployee(Employee employee){
    employeeDao.save(employee);
    return "redirect:/employee"
}
posted @   VVS,冷漠的心  阅读(21)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?

囚鸟该如何超越今生?

点击右上角即可分享
微信分享提示