使用post进行前后端连接

最新推荐文章于 2024-04-19 17:44:20 发布

银河系的一束光

最新推荐文章于 2024-04-19 17:44:20 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_58276266/article/details/117948978

版权

在spring boot中已经部署了tomcat 当启动类启动启动时tomcat也随之启动;

后端要想被前端访问必须将后端部署到服务器上, 前端其实是首先访问的是服务器,才能进行后端的代码;

spring mvc的作用是:接受前端的请求以及响应数据;框架底层会帮我们转换为json串

mcv中的m层是封装数据通过@restcontroller接受浏览器的请求

return 还可以返回匿名对象:return new 对象;

使用post方式提交数据,后端使用对象进行接收参数,因为使用post方式提交一般情况下都是大量的数据 ;所以使用对象进行接收数据 ;

前端普通post方式页面

这是一个注册页面的提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过post提交数据</title>
		
		<!-- 在HTML中嵌入css代码 -->
		<style>
			/* 输入框的高度宽度 */
			input[type='text']{
				width: 280px;
				height: 30px;
			}
			/* 整体右移 */
			form{
				margin-left:50px ;
			}
		</style>
	</head>
	<body>
		<!-- method属性用来指定数据的提交方式，action属性用来指定数据要提交到哪里，
				name属性用来指定数据提交时的属性名 name=jack
				value属性用来指定要提交的具体值
		 -->
		<form method="post" action="http://localhost:8080/stu/add">
			<table>
				<tr>
					<td>
						<h2>学生信息管理系统MIS</h2>
					</td>
				</tr>
				<tr>
					<td>姓名：	</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="请输入姓名..." name="name"/>
					</td>
				</tr>
				<tr>
					<td>年龄：	</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="请输入年龄..." name="age"/>
					</td>
				</tr>
				<tr>
					<td>
						性别：(单选框)
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好：(多选)
						<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
						<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="保存" style="color: white;background-color: #0000FF;border-color: #0000FF;"/>
						<input type="reset" value="取消" style="color: white;background-color: palevioletred;border-color: palevioletred;"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

封装数据

package cn.tedu.pojo;
import java.util.Arrays;
import java.util.Date;
//充当了MVC的M层,用来封装数据(类里的属性名要和
页面上name属性的值 一致,不然没法封装,如果没有name属性,
那么就使用value的值进行封装或者name属性的值都一样的时候,而value不一样则使用数组;)
public class Student {
    private String name;
    private Integer age;
    private Integer sex;
    private String[] hobby;//多选
    private Integer edu;
    
     //注意：HTML网页上输入的日期是String类型的，无法转成Date类型，HTML上会有400报错，需要用注解进行类型转换
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date intime;
    
    //get()  set()  toString()
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    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{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex=" + sex +
                ", hobby=" + Arrays.toString(hobby) +
                ", edu=" + edu +
                ", intime=" + intime +
                '}';
    }
}

准备RunApp(启动类)类

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);
    }
}

准备StuController类

package cn.tedu.controller;

import cn.tedu.pojo.Student;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

//作为MVC的C层，用来接受请求给出响应
@RestController
@RequestMapping("stu")
public class StuController {
    //解析post方式提交的数据
    @RequestMapping("add")
    public void add(Student s){
        System.out.println(s);
    }
}

前后端的原理

将前端的普通的方式改变为post进行提交数据

1): 修改页面的保存按钮

<input type="button" value="保存" onclick="fun();" style="color: white;background-color: #0000FF;border-color: #0000FF;"/>

2): 修改form表单的提交方式(这里是post方式)

<form method="post" action="#" id="f1">

3): 通过ajax提交数据,使用ajax必须引入jquery的文件

<!--1. 使用jQuery提供的ajax，导入jQuery提供的函数库 -->
<script src="jquery-1.8.3.min.js"></script>
<!--2. 开始写ajax的代码 -->
<script>
	function fun(){
		$.ajax({
			url: "http://localhost:8080/stu/add" , //指定要请求的路径 
			data: $("#f1").serialize()  , //请求时要携带的参数
			success: function(data){ //成功时会回调的函数
				alert(data);
			}
		});
	}
</script>

修改Controller的代码，添加了返回值和跨域问题的注解(@CrossOrigin)

package cn.tedu.controller;

import cn.tedu.pojo.Student;
import org.springframework.web.bind.annotation.CrossOrigin;
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;
import java.util.Arrays;

//作为MVC的C层，用来接受请求给出响应
@RestController
@RequestMapping("stu")
**@CrossOrigin//放行所有的请求,解决跨域问题**
public class StuController {
    //解析post方式提交的数据
    @RequestMapping("add")
    public Student add(Student s) throws Exception {
        System.out.println(s);
        **return s;**
    }
}

测试原理

在这里插入图片描述