cgb2105-day13

迈不过友情╰ 2021-09-11 03:10 285阅读 0赞

### 文章目录 ###

*   *  一，SpringMVC
     *   *  –1，需求
         *  –2，创建module
         *  –3，创建启动类
         *  –4，创建资源
         *  –5，测试
     *  二，改造
     *   *  \--1，创建Car类
         *  \--2，改造CarController
         *  \--3，改造网页
         *  \--4，测试
     *  三，SpringMVC解析get请求的参数
     *   *  \--1，浏览器提交请求数据的方式
         *  \--2，解析get参数
     *  四，解析restful风格的请求参数
     *   *  \--1，项目结构
         *  \--2，修改网页
         *  \--4，修改Car
         *  \--5，修改CarController
         *  \--6，测试
     *  五，改造成ajax提交请求数据
     *   *  \--1，创建新的网页文件，写ajax代码
         *  \--2，改造CarController类，加一个跨域的注解
         *  \--3，测试

## 一，SpringMVC ##

### –1，需求 ###

访问链接： http://localhost:8080/car/get  
得到JSON数据： \{“id”:718,“name”:“保时捷”,“type”:“Cayman T”,“color”:“红色”,“price”:641000.0\}

### –2，创建module ###

省略。。。

### –3，创建启动类 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]

### –4，创建资源 ###

package cn.tedu.controller;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController //@Controller + @ResponseBody
    @RequestMapping("car")
    public class CarController { 
        
        @RequestMapping("get")
        public String get(){ 
            return "123";
        }
    }

### –5，测试 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]

## 二，改造 ##

### –1，创建Car类 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]

package cn.tedu.pojo;
    //封装数据 Model
    public class Car { 
        private int id;
        private String name;
        private String type;
        private String color;
        private double price;
        //constructors
        public Car(){  }
        public Car(int id, String name, String type, String color, double price) { 
            this.id = id;
            this.name = name;
            this.type = type;
            this.color = color;
            this.price = price;
        }
        //get set toString
        public int getId() { 
            return id;
        }
    
        public void setId(int id) { 
            this.id = id;
        }
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    
        public String getType() { 
            return type;
        }
    
        public void setType(String type) { 
            this.type = type;
        }
    
        public String getColor() { 
            return color;
        }
    
        public void setColor(String color) { 
            this.color = color;
        }
    
        public double getPrice() { 
            return price;
        }
    
        public void setPrice(double price) { 
            this.price = price;
        }
    
        @Override
        public String toString() { 
            return "Car{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", type='" + type + '\'' +
                    ", color='" + color + '\'' +
                    ", price=" + price +
                    '}';
        }
    }

### –2，改造CarController ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]

### –3，改造网页 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]

### –4，测试 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 6]

## 三，SpringMVC解析get请求的参数 ##

### –1，浏览器提交请求数据的方式 ###

get：把请求参数 在地址栏拼接http://localhost:8080/car/insert?id=1&name=张三&age=18  
post：安全，数据不在地址栏展示

### –2，解析get参数 ###

修改网页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 7]

修改CarController  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 8]

## 四，解析restful风格的请求参数 ##

### –1，项目结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 9]

### –2，修改网页 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 10]

### –4，修改Car ###

package cn.tedu.pojo;
    //Model
    public class Car { 
        private Integer id ;
        private String name ;
        private String type ;
        private String color ;
        private Double price ;
    
        public Integer getId() { 
            return id;
        }
    
        public void setId(Integer id) { 
            this.id = id;
        }
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    
        public String getType() { 
            return type;
        }
    
        public void setType(String type) { 
            this.type = type;
        }
    
        public String getColor() { 
            return color;
        }
    
        public void setColor(String color) { 
            this.color = color;
        }
    
        public Double getPrice() { 
            return price;
        }
    
        public void setPrice(Double price) { 
            this.price = price;
        }
    
        @Override
        public String toString() { 
            return "Car{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", type='" + type + '\'' +
                    ", color='" + color + '\'' +
                    ", price=" + price +
                    '}';
        }
    }

### –5，修改CarController ###

package cn.tedu.controller;
    
    import cn.tedu.pojo.Car;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    @RequestMapping("car")
    public class CarController { 
        //解析浏览器用get方式发来的汽车数据
        @RequestMapping("get")
        public Car get(){ 
            Car c = new Car();
            c.setId(100);
            c.setPrice(19.9);
            return c;
        }
    
        //普通get方式提交的数据：http://localhost:8080/car/add?id=10&name=BMW&price=9.9
        @RequestMapping("add")
        public String add(Integer id,String name,Double price){ 
            return id+name+price ;
        }
    //优化get提交数据的方式restful：http://localhost:8080/car/add2/10/BMW/9.9
        @RequestMapping("add2/{id}/{y}/{x}")//{id}是占位符，表示这个参数的位置
        public void add2(@PathVariable Integer id, //@PathVariabl用来获取{}中间的值
                         @PathVariable String y,
                         @PathVariable Double x){ 
            System.out.println(id+y+x);
        }
    
    }

### –6，测试 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 11]

## 五，改造成ajax提交请求数据 ##

### –1，创建新的网页文件，写ajax代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="old/jquery-1.8.3.min.js"></script>
    		<script>
    			function a(){ 
    				$.ajax({ 
    					type: "get" ,//要使用的请求方式
    					url:"http://localhost:8080/car/get" , //要使用的请求路径 
    					data: { //要拼接的数据---必须是JSON串
    						"id":"10",
    						"name":"BMW",
    						"price":"9.9"
    					},
    					success: function(data){  //成功时的方案 
    						console.log(data);
    						console.log(data.id);
    						alert(100);
    					}
    				})
    			}
    		</script>
    	</head>
    	<body>
    		<a onclick="a();" href="#">点我获取汽车数据</a>
    	</body>
    </html>

### –2，改造CarController类，加一个跨域的注解 ###

package cn.tedu.controller;
    
    import cn.tedu.pojo.Car;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    @RequestMapping("car")
    @CrossOrigin //解决跨域问题
    public class CarController { 
        //解析浏览器用get方式发来的汽车数据
        @RequestMapping("get")
        public Car get(){ 
            Car c = new Car();
            c.setId(100);
            c.setPrice(19.9);
            return c;
        }
    
        //普通get方式提交的数据：http://localhost:8080/car/add?id=10&name=BMW&price=9.9
        @RequestMapping("add")
        public String add(Integer id,String name,Double price){ 
            return id+name+price ;
        }
    //优化get提交数据的方式restful：http://localhost:8080/car/add2/10/BMW/9.9
        @RequestMapping("add2/{id}/{y}/{x}")//{id}是占位符，表示这个参数的位置
        public void add2(@PathVariable Integer id, //@PathVariabl用来获取{}中间的值
                         @PathVariable String y,
                         @PathVariable Double x){ 
            System.out.println(id+y+x);
        }
    
    }

### –3，测试 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/7c828f0ef7e349b6a4be703f41be50b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/6df976361cdd4a0aabb9bcb4c7e566fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210911/4871db9bf64f453abeb62987e0d84704.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210911/5d8453c44b9e4337b819a402ffa617c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]: /images/20210911/adeccca4f7154933b385e72c1e669576.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 5]: /images/20210911/ac178be91d3541d0b7ce91f8d08f2a32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 6]: /images/20210911/202e5b3ad2674aab87ee555b0f59b6e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 7]: /images/20210911/3ac73422b155488dbbac8bcec04ceafb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 8]: /images/20210911/ce81b4e6c45942738ee66244e20f39af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 9]: /images/20210911/cd22defc0eca463da00a08548ed20474.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 10]: /images/20210911/79397af430634e8992fe6ad2b4daa658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 11]: /images/20210911/0c1315e9780e41299a355e5cced82aab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 12]: /images/20210911/66b5b966f86943b89af529035977e5c1.png