cgb2105-day14

灰太狼 2021-09-11 03:10 275阅读 0赞

### 文章目录 ###

*   *  一，前端后大联动
     *   *  \--1，需求
         *  \--2，步骤
         *  \--3，创建表
         *  \--4，创建前端网页，写ajax代码
         *  \--5，创建后端程序，接受请求入库
         *   *  项目结构
             *  编写启动类
             *  编写Car类
             *  编写CarController类
         *  \--6，测试
         *  \--7，总结
     *  二，SpringMVC框架解析post提交的数据
     *   *  \--1，get和post的区别
         *  \--2，需求
         *  \--3，开发步骤
         *   *  创建studentform.html的页面
             *  编写后端程序
             *  创建Student类，充当了模型层
             *  创建StudentController类，充当了控制层
         *  \--4，测试
         *  \--5，总结
     *  标题

## 一，前端后大联动 ##

### –1，需求 ###

接受浏览器发来的请求数据，解析，利用jdbc入库

### –2，步骤 ###

1，利用jdbc入库，设计表设计表的字段  
2，编写前端的代码，利用ajax把请求参数携带着访问服务器  
3，编写后端的代码，先加jar包的依赖，再利用jdbc发起insert的语句

### –3，创建表 ###

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

### –4，创建前端网页，写ajax代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 ajax提交数据并入库</title>
    		
    		<script src="old/jquery-1.8.3.min.js"></script>
    		<script>
    			function fun(){ 
    				$.ajax({ 
    					type: "get" , //要使用的请求方式
    					url:"http://localhost:8080/car/save" , //要访问的服务器程序
    					data: {   //请求参数
    						"id":"10", 
    						"name":"BMW",
    						"price":"9.9" 
    					},
    					success: function(data){  //成功时的方案 
    						console.log(data);
    						console.log(data.id);
    						alert(100);
    					}
    				})
    			}
    		</script>
    	</head>
    	<body>
    		
    		<a onclick="fun()" href="#">点我提交数据</a>
    		
    	</body>
    </html>

### –5，创建后端程序，接受请求入库 ###

#### 项目结构 ####

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

#### 编写启动类 ####

package cn.tedu;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    //启动类
    @SpringBootApplication //会进行资源的自动扫描(从启动类当前包开始扫描)
    public class RunApp { 
        public static void main(String[] args) { 
            SpringApplication.run(RunApp.class);
        }
    }

#### 编写Car类 ####

package cn.tedu.pojo;
    //充当MVC的M层，Model，用来封装数据(最好和表里的字段数据一致)
    public class Car { 
        private Integer id ;
        private String name ;
        private String type ;
        private String color ;
        private Double price ; 
       
        //get set toString
        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 +
                    '}';
        }
    }

#### 编写CarController类 ####

package cn.tedu.controller;
    
    import cn.tedu.pojo.Car;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.sql.Connection;
    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    
    //充当MVC里的C，Controller控制器，用来接受请求和给出响应
    @RestController
    @RequestMapping("car")
    public class CarController { 
    
        @RequestMapping("save")
        public void save(Car c) throws Exception { 
            //利用jdbc入库，入库的数据从c获取
            //1，注册驱动
            Class.forName("com.mysql.jdbc.Driver");
            //2，获取连接
            String url = "jdbc:mysql:///cgb2105?characterEncoding=utf8" ;
            Connection conn = DriverManager.getConnection(url,"root","root");
            //3，获取传输器
            String sql = "insert into car values(?,?,?,?,?)" ;
            //?是占位符，个数和表里的字段个数匹配，顺序和字段顺序一致
            PreparedStatement ps = conn.prepareStatement(sql);
            //4，执行SQL
            ps.setInt(1 , c.getId());//把请求携带来的参数，拿到，给第1个?设置值
            ps.setString(2, c.getName());//把请求携带来的参数，拿到，给第2个?设置值
            ps.setString(3, c.getType());//把请求携带来的参数，拿到，给第3个?设置值
            ps.setString(4, c.getColor());//把请求携带来的参数，拿到，给第4个?设置值
            ps.setDouble(5, c.getPrice());//把请求携带来的参数，拿到，给第5个?设置值
            ps.executeUpdate();
            //5，释放资源
            ps.close();
            conn.close();
            System.out.println("恭喜您，操作成功！！！！");
        }
    
    }

### –6，测试 ###

先启动服务器，用前端网页，发起请求，访问服务器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210715113920535.png]

### –7，总结 ###

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

## 二，SpringMVC框架解析post提交的数据 ##

### –1，get和post的区别 ###

get的数据都是拼接的形式，在地址栏展示。相对来说不安全，长度受限  
post 属性相对安全，容量比较大

### –2，需求 ###

通过post方式，提交学生数据

### –3，开发步骤 ###

编写前端程序

#### 创建studentform.html的页面 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试 springmvc解析post数据</title>
    		
    		<style> /* 修饰 输入框的宽度高度 */ .a{ /* 选中网页中class=a的元素*/ width: 320px; height: 30px; } /* 修饰保存按钮 */ input[type="submit"]{ background-color: blue; /* 背景色 */ border-color: blue;/* 边框的颜色 */ color:white; /* 字的颜色 */ height: 30px; width: 50px; } /* 修饰取消按钮 */ input[type="button"]{ background-color: hotpink; /* 背景色 */ border-color: hotpink; /* 边框的颜色 */ color:white; /* 字的颜色 */ height: 30px; width: 50px; } </style>
    	</head>
    	<body>
    	    
    		<form method="post" action="http://localhost:8080/student/add">
    			<table>
    				<tr>
    					<td>
    						<h1>学生信息管理系统MIS</h1>
    					</td>
    				</tr>
    				<tr>
    					<td> 姓名：</td>
    				</tr>
    				<tr>
    					<td> 
    						<input class="a" type="text" placeholder="请输入姓名..." name="user" />
    					</td>
    				</tr>
    				<tr>
    					<td> 年龄：</td>
    				</tr>
    				<tr>
    					<td> 
    						<input class="a" type="number" placeholder="请输入年龄..." name="age" />
    					</td>
    				</tr>
    				<tr>
    					<td> 
    						性别：(单选框) 
    						<input type="radio" name="sex" value="0" />男
    						<input type="radio" name="sex" value="1" />女
    					</td>
    				</tr>
    				<tr>
    					<td> 
    						爱好：(多选) 
    						<input type="checkbox" name="hobby" value="ppq"/>乒乓球
    						<input type="checkbox" name="hobby" value="ps" />爬山
    						<input type="checkbox" name="hobby" value="cg" />唱歌
    					</td>
    				</tr>
    				<tr>
    					<td> 
    						学历：(下拉框) 
    						<select name="edu">
    							<option value="1">本科</option>
    							<option value="2">专科</option>
    							<option value="3">高中</option>
    						</select>
    					</td>
    				</tr>
    				<tr>
    					<td> 
    						入学日期： 
    						<input type="date" name="intime" />
    					</td>
    				</tr>
    				<tr>
    					<td> 
    						<input type="submit" value="保存"/>
    						<input type="button" value="取消"/>
    					</td>
    				</tr>
    			</table>
    		</form>
    	</body>
    </html>

#### 编写后端程序 ####

![在这里插入图片描述][20210715152554970.png]

#### 创建Student类，充当了模型层 ####

package cn.tedu.pojo;
    import java.util.Arrays;
    import java.util.Date;
    //Model层，用来封装数据
    //类里的属性名 ---和页面中 name属性的值 必须相同 ！！！否则不会封装数据
    public class Student { 
        private String user ;
        private Integer age ;
        private Integer sex ;
        private String[] hobby ; //保存了页面提价的多个爱好
        private Integer edu;
         //页面提交的日期都是String类型，需要自己变成Date类型，否则页面永远400错误
        @DateTimeFormat(pattern="yyyy-MM-dd" )
        private Date intime;
    
        //get set toString...
        public String getUser() { 
            return user;
        }
    
        public void setUser(String user) { 
            this.user = user;
        }
    
        public Integer getAge() { 
            return age;
        }
    
        public void setAge(Integer age) { 
            this.age = age;
        }
    
        public Integer getSex() { 
            return sex;
        }
    
        public void setSex(Integer sex) { 
            this.sex = sex;
        }
    
        public String[] getHobby() { 
            return hobby;
        }
    
        public void setHobby(String[] hobby) { 
            this.hobby = hobby;
        }
    
        public Integer getEdu() { 
            return edu;
        }
    
        public void setEdu(Integer edu) { 
            this.edu = edu;
        }
       
        public Date getIntime() { 
            return intime;
        }
    
        public void setIntime(Date intime) { 
            this.intime = intime;
        }
    
        @Override
        public String toString() { 
            return "Student{" +
                    "user='" + user + '\'' +
                    ", age=" + age +
                    ", sex=" + sex +
                    ", hobby=" + Arrays.toString(hobby) +
                    ", edu=" + edu +
                    ", intime=" + intime +
                    '}';
        }
    }

#### 创建StudentController类，充当了控制层 ####

package cn.tedu.controller;
    
    import cn.tedu.pojo.Student;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    @RestController
    @RequestMapping("student")
    public class StudentController { 
    
        @RequestMapping("add")
        public Student add(Student s){ 
            System.out.println(s);
            return s ;
        }
    
    }

### –4，测试 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][2021071515502768.png]

### –5，总结 ###

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

## 标题 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210911/59b46d53cc9845098640082e3f21300b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210911/738fbff036e141f8a8ccd19311a30290.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210911/948dca96808a48b99f5f4e70274d60b5.png
[20210715113920535.png]: /images/20210911/4051c34b00774a44a5127988daa5aed8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210911/86a9a37cae1746489d1bd31a63d5fb58.png
[20210715152554970.png]: /images/20210911/91fbc7414e9040d99da26f80055ee287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 4]: /images/20210911/dfb564ba134042ba921801e91b922af6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 5]: /images/20210911/312f1e3b6165431ea762499d78ce0d95.png
[2021071515502768.png]: /images/20210911/34745899ffe64c69980175b7ae538f58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 6]: /images/20210911/c02adccf30264274afa6825df45e20a2.png