学习day37

啊岳的学习

于 2023-07-04 17:09:22 发布

阅读量64

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/2301_76386566/article/details/131528741

版权

今天继续学习的是springMVC

RESTful

处理静态资源

即是跳转到的页面，他没有修饰，就是一堆数据，所以此时需要css样式来修饰

配置默认的servlet处理静态资源

当前工程的web.xml配置的前端控制器DispatcherServlet的url-pattern是/

tomcat的web.xml配置的DefaultServlet的url-pattern也是/

此时，浏览器发送的请求会优先被DispatcherServlet进行处理，但是DispatcherServlet无法处理静态资源

若配置了<mvc:default-servlet-handler>，此时浏览器发送的请求都会被DefaultServlet处理

若配置了<mvc:default-servlet-handler>和<mvc:annotation-driven>

浏览器发送的请求会先被DispatcherServlet处理，无法处理再交给DefaultSerclet处理

所以一般就是配置这两个资源

代码就不写了

添加功能

根据添加功能来说，首先是在列表上面再添加框下加入路径

employ_list下的options

  <th>options（<a th:href="@{/to/add}">add</a>）</th>

这里的/to/add是早已经说明了的跳转添加功能的路径。

然后设置添加功能的界面，这里的employee是添加功能

employee_add.html

<!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" name="add">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

添加功能方法

这里添加完成后，就需要跳转到列表页面来展示它的添加成功

所以就是用的重定向来实现

package com.atguigu.controller;

import com.atguigu.dao.EmployeeDao;
import com.atguigu.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;


/*
* 查询所有的员工信息-->/employee-->get
* 跳转到添加页面 -->/to/add-->get
* 新增员工信息-->/employee-->post
* 跳转到修改页面 -->/employee/1-->get
* 修改员工信息 -->/employee--put
* 删除员工信息 -->/employee/1-->delete
*
* */

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;

    @RequestMapping(value = "/employee",method = RequestMethod.GET)
    public String getAllEmployee(Model model){
        //根据employeeDao类中的方法，来获取员工信息
        Collection<Employee> allEmployee = employeeDao.getAll();
        //将所有的员工信息在请求域中共享
        model.addAttribute("allEmployee",allEmployee);
        //跳转到列表页面
        return "employee_list";

    }

    @RequestMapping(value = "/employee",method = RequestMethod.POST)
    public String addEmployee(Employee employee){
        //保存员工信息
        employeeDao.save(employee);
        //重定向到列表功能 /employee
        return "redirect:/employee";

    }


}

修改功能

首先是在列表页面进行一个修改

     <a th:href="@{'/employee/'+${employee.id}}">update</a>

这里超链接到employee下时，还加上了id。因为要修改数据的话，还是要根据id来进行一个修改，所以在后面加上了id，这里的获取id方法也是需要注意的

因为这里是分了两步，即先是获取，再是修改。所以它的控制器分成了两个

获取，这里是根据id来获取获取相应的数据，并将数据共享到请求域中，接下来就是一个跳转到修改页面

package com.atguigu.controller;

import com.atguigu.dao.EmployeeDao;
import com.atguigu.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;


/*
* 查询所有的员工信息-->/employee-->get
* 跳转到添加页面 -->/to/add-->get
* 新增员工信息-->/employee-->post
* 跳转到修改页面 -->/employee/1-->get
* 修改员工信息 -->/employee--put
* 删除员工信息 -->/employee/1-->delete
*
* */

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;

    @RequestMapping(value = "/employee",method = RequestMethod.GET)
    public String getAllEmployee(Model model){
        //根据employeeDao类中的方法，来获取员工信息
        Collection<Employee> allEmployee = employeeDao.getAll();
        //将所有的员工信息在请求域中共享
        model.addAttribute("allEmployee",allEmployee);
        //跳转到列表页面
        return "employee_list";

    }

    @RequestMapping(value = "/employee",method = RequestMethod.POST)
    public String addEmployee(Employee employee){
        //保存员工信息
        employeeDao.save(employee);
        //重定向到列表功能 /employee
        return "redirect:/employee";

    }

    @RequestMapping(value = "/employee/{id}",method = RequestMethod.GET)
    public String toUpdate(@PathVariable("id") Integer id,Model model){
        //根据id查询员工信息
        Employee employee = employeeDao.get(id);
        //将员工信息共享到请求域中
        model.addAttribute("employee",employee);
        //跳转到employee_update.html
        return "employee_update";
    }


}

修改，这里的修改和添加员工信息相似，先是修改，然后是重定向

package com.atguigu.controller;

import com.atguigu.dao.EmployeeDao;
import com.atguigu.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;


/*
* 查询所有的员工信息-->/employee-->get
* 跳转到添加页面 -->/to/add-->get
* 新增员工信息-->/employee-->post
* 跳转到修改页面 -->/employee/1-->get
* 修改员工信息 -->/employee--put
* 删除员工信息 -->/employee/1-->delete
*
* */

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;

    @RequestMapping(value = "/employee",method = RequestMethod.GET)
    public String getAllEmployee(Model model){
        //根据employeeDao类中的方法，来获取员工信息
        Collection<Employee> allEmployee = employeeDao.getAll();
        //将所有的员工信息在请求域中共享
        model.addAttribute("allEmployee",allEmployee);
        //跳转到列表页面
        return "employee_list";

    }

    @RequestMapping(value = "/employee",method = RequestMethod.POST)
    public String addEmployee(Employee employee){
        //保存员工信息
        employeeDao.save(employee);
        //重定向到列表功能 /employee
        return "redirect:/employee";

    }

    @RequestMapping(value = "/employee/{id}",method = RequestMethod.GET)
    public String toUpdate(@PathVariable("id") Integer id,Model model){
        //根据id查询员工信息
        Employee employee = employeeDao.get(id);
        //将员工信息共享到请求域中
        model.addAttribute("employee",employee);
        //跳转到employee_update.html
        return "employee_update";
    }

    @RequestMapping(value = "/employee",method = RequestMethod.PUT)
    public String updateEmployee(Employee employee){
        //修改员工信息
        employeeDao.save(employee);
        //重定向到列表 /employee
        return "redirect:/employee";
    }


}

employee_update.html,因为此处的数据是需要进行一个传递，所以需要用${}来进行传递

<!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" name="add">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

删除功能

这一段听的很懵逼。它主要是讲的前端方面的东西。这里

employee_list.index

<!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 : ${allEmployee}">
      <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>

controller方法

 @RequestMapping(value = "/employee/{id}",method = RequestMethod.DELETE)
    public String deleteEmployee(@PathVariable("id") Integer id){
        //删除员工信息
        employeeDao.delete(id);
        //重定向到列表
        return "redirect:/employee";

    }

RESTful到这里也是结束了

SpringMVC处理ajax

视频里面老师讲解了一下axios，感觉是懵的，但是之前学javaweb的时候也是学了，到这里又懵了。所以先等下。后头去看看之前的axios

ajax请求

这是单独的一个例子来演示ajax的部分功能

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<div id="app">
    <h1>index.html</h1>
    <input type="button" value="测试SpringMVC处理ajax" @click="testAjax()">
</div>

<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">

    /*
    *  axios({
                   url:"", //请求路径
                   method:"",  //请求方式
                   //以name=value&name=value的方式方式的请求参数
                   //不管使用的请求方式是get或者是post，请求参数都会被拼接到请求地址后
                   //此种方式的请求参数可以通过request.getParameter()获取
                   params:{},
                   //以json格式发送的请求参数
                   //请求参数会被保存到请求报文请求体传输到服务器
                   //此种方式的请求参数不可以通过request.getParameter()获取
                   data:{}
               }).then(response=>{
                  console.log(response.data);
               });
    **/

    var vue = new Vue({
       el:"#app",
       methods:{
           testAjax(){
               axios.post(
                   "/SpringMVC/test/ajax?id=1001",
                   {username:"admin",password:"123456"}
               ).then(response=>{
                   console.log(response.data);
               });
           }
       }
    });
</script>

</body>
</html>

测试方法

package com.atguigu.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
public class TestAjaxController {


    @RequestMapping("/test/ajax")
    public void testAjax(Integer id, HttpServletResponse response) throws IOException {
        System.out.println("id:"+id);
        response.getWriter().write("hello,axios");
    }

}

@RequestBody

将请求体中的内容和控制器方法中的形参进行绑定

使用@RequestBody注解将json格式的请求参数转换为java对象

a>导入jackson的依赖

b>在springMVC的配置文件中设置<mvc:annotation-driven />

c>在处理请求的控制器方式的形参位置，直接设置json格式的请求参数要转换的java类型的形参，使用@RequestBody注解标识即可

以下这个，还单独配置了pojo类

User

package com.atguigu.pojo;

public class User {

    private Integer id;

    private String username;

    private String password;

    private Integer age;

    private String gender;

    public User(Integer id, String username, String password, Integer age, String gender) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.gender = gender;
    }

    public User() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                '}';
    }
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<div id="app">
    <h1>index.html</h1>
    <input type="button" value="测试SpringMVC处理ajax" @click="testAjax()"><br>
    <input type="button" value="使用@RequestBody注解处理json格式的参数请求" @click="testRequestBody()"><br>
</div>

<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">

   

    var vue = new Vue({
       el:"#app",
       methods:{
           testAjax(){
               axios.post(
                   "/SpringMVC/test/ajax?id=1001",
                   {username:"admin",password:"123456"}
               ).then(response=>{
                   console.log(response.data);
               });
           },
           testRequestBody(){
               axios.post(
                   "/SpringMVC/test/RequestBody/json",
                   {username:"admin",password:"123456",age:"23",gender:"男"}
               ).then(response=>{
                   console.log(response.data)
               });
           }
       }
    });
</script>

</body>
</html>

测试方法

package com.atguigu.controller;


import com.atguigu.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
public class TestAjaxController {


    @RequestMapping("/test/ajax")
    public void testAjax(Integer id, @RequestBody String requestBody, HttpServletResponse response) throws IOException {
        System.out.println("requestBody:"+requestBody);
        System.out.println("id:"+id);
        response.getWriter().write("hello,axios");
    }

    @RequestMapping("/test/RequestBody/json")
    public void testRequestBody(@RequestBody User user, HttpServletResponse response) throws IOException {
        System.out.println(user);
        response.getWriter().write("hello,RequestBody");
    }

}

今天差不多到这里，看不进了