cgb2105-day14 灰太狼 2021-09-11 03:10 290阅读 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指定提交数据的方式 action指定数据要提价给谁处理 --> <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
相关 cgb2105-day12 文章目录 一,Spring Boot \--1,创建Spring Boot项目 \--2,配置maven ╰半橙微兮°/ 2021年09月11日 03:10/ 0 赞/ 346 阅读
相关 cgb2105-day09 文章目录 一,js的语句 二,js的数组 三,js的函数 四,Maven \--1,创建Mave 心已赠人/ 2021年09月11日 03:04/ 0 赞/ 371 阅读
相关 cgb2105-day08 文章目录 一,模拟 服务器 解析浏览器发来的数据 二,CSS选择器 三,练习HTML和CSS \--1,创建c 谁践踏了优雅/ 2021年09月11日 03:04/ 0 赞/ 311 阅读
还没有评论,来说两句吧...