关键词：
文章目录
一，前端后大联动
–1，需求
接受浏览器发来的请求数据，解析，利用jdbc入库
–2，步骤
1，利用jdbc入库，设计表设计表的字段
2，编写前端的代码，利用ajax把请求参数携带着访问服务器
3，编写后端的代码，先加jar包的依赖，再利用jdbc发起insert的语句
–3，创建表
–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，创建后端程序，接受请求入库
项目结构
编写启动类
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，测试
先启动服务器，用前端网页，发起请求，访问服务器
–7，总结
二，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>
编写后端程序
创建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;
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;
//页面提交的日期都是String类型，需要自己变成Date类型，否则页面永远400错误
@DateTimeFormat(pattern="yyyy-MM-dd" )
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)
cgb2105-day10(代码片段)
文章目录一，JS对象二，DOM--1，作用--2，测试三，Jquery--1，概述--2，使用步骤--3，入门案例--4，jQuery的文档就绪标题一，JS对象<!DOCTYPEhtml><html> <head> < 查看详情
cgb2105-day12(代码片段)
文章目录一，SpringBoot--1，创建SpringBoot项目--2，配置maven--3，启动服务器--4，在服务器添加资源--5，测试二，SpringMVC--1，概述--2，MVC设计模式--3，工作原理三，入门案例--1 查看详情
cgb2105-day18(代码片段)
文章目录一，动态SQL--1，需求--2，开发步骤创建module修改pom.xml创建核心配置文件创建Dept类创建映射文件创建测试类二，Mybatis的接口开发结构--1，修改映射文件，把namespace的值改成接口的全路径--2，创... 查看详情
cgb2105-day13(代码片段)
文章目录一，SpringMVC–1，需求–2，创建module–3，创建启动类–4，创建资源–5，测试二，改造--1，创建Car类--2，改造CarController--3，改造网页--4，测试三，SpringMVC解析get请求 查看详情
cgb2105-day15(代码片段)
文章目录一，修改端口号--1，创建application.yml文件--2，创建数据二，SpringBoot热部署--1，添加jar包的依赖--2，配置选项--3，改完资源，直接build三，Lombok--1，概述--2，步骤安装插件添加jar 查看详情
cgb2105-day17(代码片段)
文章目录一，Mybatis--1，概述--2，入门案例项目结构修改pom文件，添加mybatis的jar包依赖创建核心配置文件，指定连接数据库的参数创建映射文件，写SQL创建User类修改核心配置文件，加入映射文件创建测... 查看详情
cgb2105-day16(代码片段)
文章目录一，DI--1，概述--2，测试创建Dept类创建User类测试二，SpringDI--1，创建Teacher类--2，创建Student类--3，创建核心配置文件，配置包扫描的路径--4，测试--5，总结三，MVC项目--1 查看详情
cgb2105-day11(代码片段)
文章目录一，JSON--1，概述--2，测试二，AJAX--1，概述--2，语法--3，测试三，Maven--1，概述--2，核心组件--3，使用步骤标题标题一，JSON–1，概述JSON是一种轻量级的数据交换格式。指 查看详情
cgb2106-day14(代码片段)
文章目录一,SpringMVC解析restful的请求参数--1,概述--2,测试创建RunApp启动类创建CarController类创建前端网页文件测试二,SpringMVC解析post的请求参数--0,项目结构--1,准备form表单--2,准备Student类--3,准备StudentController类--4,利用jdbc把接受到的... 查看详情
cgb2107-day14(代码片段)
文章目录一,Maven--1,概述--2,使用步骤二,在IDEA里用maven--1,创建Maven工程--2,配置maven--3,修改pom.xml文件,添加jar包的坐标--4,检查本地仓库5,常用的maven命令三,SpringBoot--1,概述--2,项目结构--3,创建SpringBoot工程--4,给工程配置maven信息--5,spring... 查看详情
cgb2109-day14(代码片段)
文章目录一,Vue组件的练习--1,测试二,Vue路由Router--1,概述--2,测试--3,总结--4,练习三,Vue的ajax--1,概述--2,测试四,Vue-cli--1,概述--2,安装vue-cli1,安装原因2,安装nodejs.mis的应用程序3,验证nodejs是否安装:4,安装脚手架:五,创建Vue项目!!1,首先创... 查看详情
cgb2108-day14(代码片段)
文章目录一,练习vue路由--1,代码--2,总结二,Vue-cli脚手架--1,概述--2,安装1,安装Nodejs(下一步下一步),并检查(在DOS窗口里执行DOS命令node-v)2,修改npm的镜像(下载的快):3,正式安装(没有飘红ERR就行了):4,下载vue项目5,检测vue项目是否下载完... 查看详情
cgb2110-day14(代码片段)
...的vue的工作空间文件夹里,执行以下的命令来下载vue项目代码.–3,测试也可以直接把压缩包,解压到你的vue的工作空间(E:\\workspace\\vue)启动项目必须进入到项目目录中,再执行启动命令<指即将启动指定项目>打开浏览器测试二,自... 查看详情
cgb2106-day05(代码片段)
文章目录一,视图--1,概述--2,测试二,SQL练习--1,测试三,SQL优化的方案--1,总结四,JDBC--1,概述--2,使用步骤--3,导入jar包--4,入门案例一,视图–1,概述可以把SQL的查询结果缓存起来,存入视图中.好处:简化了SQL的编写坏处:没法做SQL的优化,占... 查看详情
cgb2108-day05(代码片段)
文章目录一,作业--1,测试二,SQL面试题--1,测试三,JDBC--1,概述--2,使用步骤--3,入门案例--4,JDBC的练习一,作业–1,测试#SQL的练习:#练习1:查询部门编号是1的员工姓名deptempSELECTenameFROMempWHEREdeptno=(SELECTdeptnoFROMdeptWHEREdname='java开发... 查看详情
cgb2109-day04(代码片段)
文章目录一,SQL练习--1,测试二,字段约束--1,默认约束--2,检查约束--3,外键约束!三,标题一,SQL练习–1,测试#练习1:依次按照多个条件排序,asc升序,desc降序SELECT*FROMempORDERBYsalDESC,enameASCSELECT*FROMempORDERBYdeptnoDESC,enameASC#练习2:统计每个岗位... 查看详情
cgb2108-day06(代码片段)
...拟用户登录--3,JDBC的练习--4,JDBC的总结--5,修改释放资源的代码二,HTML--1,概述--2,入门案例一,JDBC–1,创建工具类packagecn.tedu.jdbc;importjava.sql.Connection;importjava.sql.DriverManager;//提供丰富的方法,方便的jdbc操作publiccl 查看详情
cgb2108-day08(代码片段)
文章目录一,表单提交数据--1,代码二,CSS--1,概述--2,入门案例--3,基础选择器--4,高级选择器三,盒子模型--1,概述--2,练习三,一,表单提交数据–1,代码<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>测试表... 查看详情