返回顶部
首页 > 资讯 > 精选 >SpringMVC与前端交互的方法
  • 449
分享到

SpringMVC与前端交互的方法

2023-06-20 15:06:22 449人浏览 泡泡鱼
摘要

这篇文章主要介绍“springMVC与前端交互的方法”,在日常操作中,相信很多人在springmvc与前端交互的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”SpringMVC与前端交互的方法”的疑惑有所

这篇文章主要介绍“springMVC前端交互的方法”,在日常操作中,相信很多人在springmvc与前端交互的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”SpringMVC与前端交互的方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

目录
  • 一,创建day13的module

  • 二,复习SpringMVC

    • –1,需求:访问/car/get ,获取汽车数据

    • –2,创建RunApp类

    • –3,创建Car类

    • –4,创建CarController类

  • 三,SpringMVC解析请求参数

    • –1,普通的GET提交

    • –2,RestFul提交

  • 四,简单的前后端关联

    • –1,需求

    • –2,创建html页面

    • –3,创建UserController类,解析参数

  • 五,利用JDBC技术,把请求参数入库

    • –1,添加jdbc的依赖(修改pom.xml)

    • –2,准备user表

    • –3,修改UserController类的save()

    • –4,测试

一,创建day13的module

选中project-右键-new-module-选择Maven-next-输入module名-finish

二,复习SpringMVC

–1,需求:访问/car/get ,获取汽车数据

SpringMVC与前端交互的方法

–2,创建RunApp类

package cn.tedu;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;//启动类@SpringBootApplicationpublic class RunApp {    public static void main(String[] args) {        SpringApplication.run(RunApp.class);    }}

–3,创建Car类

package cn.tedu.pojo;//Model用来封装数据public class Car {    private int id;    private String name;    private double price;    //Constructor构造方法,用来方便的new    public Car(){}    public Car(int id, String name, double price) {        this.id = id;        this.name = name;        this.price = price;    }    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 double getPrice() {        return price;    }    public void setPrice(double price) {        this.price = price;    }}

–4,创建CarController类

package cn.tedu.controller;//MVC里的C层,用来接受请求和做出响应(springmvc)import cn.tedu.pojo.Car;import org.springframework.WEB.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController//接受请求,并把JSON数据返回@RequestMapping("car")  //规定了url地址的写法public class CarController {    @RequestMapping("get")    public Car get(){        Car c = new Car(10,"BMW",19.9);        return c ;    }}

三,SpringMVC解析请求参数

SpringMVC框架,可以自动解析请求中,携带的参数。甚至可以直接封装成Java对象。而不必自己一个个解析参数。

–1,普通的GET提交

package cn.tedu.controller;//MVC里的C层,用来接受请求和做出响应(springmvc)import cn.tedu.pojo.Car;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController//接受请求,并把json数据返回@RequestMapping("car")  //规定了url地址的写法public class CarController {    //SpringMVC框架解析请求中的参数    //Http://localhost:8080/car/get5?id=10&name=BMW&price=9.9    @RequestMapping("get5")    public void get5(Car c){//springmvc框架会把请求的参数,封装给car对象        System.out.println(c.getId()+c.getName()+c.getPrice());    }    //http://localhost:8080/car/get4?id=10&name=BMW    @RequestMapping("get4")    public void get4(Integer id,String name){        //id是用来接受url里id的值,name用来接受url里name的值        System.out.println(id+name);    }    //http://localhost:8080/car/get3?id=10    @RequestMapping("get3")//    public void get3(int id){ //参数是基本类型,访问这个方法必须带参数,否则有异常    public void get3(Integer id){//参数是引用类型,访问这个方法没带参数就是null        System.out.println(id);    }    //自己解析请求中的参数    public void get2(){        String url="http://localhost:8080/car/get2?id=10&name=BMW&price=9.9";        //先按?切出来,取第二部分,再用&切出来参数名和参数值[id=10,name=BMW,price=9.9]        String[] s = url.split("\\?")[1].split("&");        for (String ss : s) {            String key =  ss.split("=")[0];            String value = ss.split("=")[1] ;        }    }    @RequestMapping("get")    public Car get(){        Car c = new Car(10,"BMW",19.9);        return c ;    }}

–2,RestFul提交

package cn.tedu.controller;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;//对比,请求参数的不同获取方式:get/restful@RestController@RequestMapping("car2")public class CarController2 {    //1.普通的get方式获取请求参数    //解析参数:http://localhost:8080/car2/get?id=10&name=BMW&age=10&sex=1    @RequestMapping("get")    public String get(Integer id,String name,Integer age,Integer sex){//        return id+name+age+sex ;//直接把结果展示在浏览器上        return "{'id':'"+id+"'}" ;//组织成json串给浏览器展示    }    //2.restful方式获取请求参数:通过{}绑定地址中参数的位置 + 通过注解获取{???}的值    //解析参数:http://localhost:8080/car2/get2/10/BMW/10/1    @RequestMapping("get2/{id}/{name}/{x}/{y}")    public void get2(@PathVariable Integer id,                     @PathVariable String name,                     @PathVariable   String x,                     @PathVariable Integer y){        System.out.println(id);        System.out.println(name);        System.out.println(x);        System.out.println(y);    }}

四,简单的前后端关联

–1,需求

点击页面的a,Get方式提交数据,交给框架解析参数

–2,创建html页面

<!DOCTYPE html><html><head><meta charset="utf-8"><title>用get方式提交数据给服务器</title></head><body><a href="http://localhost:8080/user/save?id=857&name=jack&age=666">点我提交数据get</a><a href="http://localhost:8080/user/save2/857/jack/666">点我提交数据restful</a></body></html>

–3,创建UserController类,解析参数

package cn.tedu.controller;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("user")public class UserController {    //1. 解析get的请求参数 http://localhost:8080/user/save?id=857&name=jack&age=666    @RequestMapping("save")    public void save(Integer id,String name,Integer age){        System.out.println(id+name+age);    }    //2. 解析restful的请求参数 http://localhost:8080/user/save2/857/jack/666    //get和restful的区别?         //get的好处是数据都在地址栏拼接,restful的好处是相对安全        //restful主要是用来优化、简化get提交数据的写法    @RequestMapping("save2/{x}/{y}/{z}")    public void save2(@PathVariable Integer x,                      @PathVariable String y,                      @PathVariable Integer z){        System.out.println(x+y+z);    }}

五,利用JDBC技术,把请求参数入库

SpringMVC与前端交互的方法

–1,添加jdbc的依赖(修改pom.xml)

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">    <parent>        <artifactId>cgb2104boot01</artifactId>        <groupId>cn.tedu</groupId>        <version>0.0.1-SNAPSHOT</version>    </parent>    <modelVersion>4.0.0</modelVersion>    <artifactId>day13</artifactId>    <!--添加jar包的依赖-->    <dependencies>        <dependency>            <groupId>mysql</groupId>            <artifactId>Mysql-connector-java</artifactId>            <version>5.1.48</version>        </dependency>    </dependencies></project>

–2,准备user表

CREATE TABLE `user` (  `id` int(3) default NULL,  `name` varchar(10) default NULL,  `age` int(2) default NULL) ENGINE=InnoDB DEFAULT CHARSET=utf8;

–3,修改UserController类的save()

package cn.tedu.controller;import org.springframework.web.bind.annotation.PathVariable;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;@RestController@RequestMapping("user")public class UserController {    //1. 解析get的请求参数 http://localhost:8080/user/save?id=857&name=jack&age=666    @RequestMapping("save")    public void save(Integer id,String name,Integer age) throws Exception {//        System.out.println(id+name+age);                //注册驱动        Class.forName("com.mysql.jdbc.Driver");        //获取连接        String url ="jdbc:mysql:///cgb2104?characterEncoding=utf8&amp;serverTimezone=Asia/Shanghai";        Connection conn = DriverManager.getConnection(url,"root","root");        //获取传输器//        String sql= "insert into user(id,name) values(?,?)";//给指定的字段设置值        String sql= "insert into user values(?,?,?)";//所有字段设置值        PreparedStatement ps = conn.prepareStatement(sql);        //给SQL设置参数        ps.setInt(1,id);//给第一个?设置值        ps.setString(2,name);//给第二个?设置值        ps.setInt(3,age);//给第三个?设置值        //执行SQL        int rows = ps.executeUpdate();        //释放资源 -- OOM(OutOfMemory)        ps.close();        conn.close();    }    //2. 解析restful的请求参数 http://localhost:8080/user/save2/857/jack/666    //get和restful的区别?         //get的好处是数据都在地址栏拼接,restful的好处是相对安全        //restful主要是用来优化、简化get提交数据的写法    @RequestMapping("save2/{x}/{y}/{z}")    public void save2(@PathVariable Integer x,                      @PathVariable String y,                      @PathVariable Integer z){        System.out.println(x+y+z);    }}

–4,测试

SpringMVC与前端交互的方法

SpringMVC与前端交互的方法

到此,关于“SpringMVC与前端交互的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: SpringMVC与前端交互的方法

本文链接: https://lsjlt.com/news/297898.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • SpringMVC与前端交互的方法
    这篇文章主要介绍“SpringMVC与前端交互的方法”,在日常操作中,相信很多人在SpringMVC与前端交互的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”SpringMVC与前端交互的方法”的疑惑有所...
    99+
    2023-06-20
  • SpringMVC与前端交互案例教程
    目录一,创建day13的module二,复习SpringMVC–1,需求:访问/car/get ,获取汽车数据–2,创建RunApp类–3,创建Car类–4,创建CarControl...
    99+
    2024-04-02
  • Spring MVC前端与后端的ajax交互方法有哪些
    这篇文章主要介绍Spring MVC前端与后端的ajax交互方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方式一 通过URL传参通过URL挂接参数,如/auth/getUs...
    99+
    2024-04-02
  • php怎么与前端交互
    在PHP中,可以使用以下方法与前端进行交互:1. 使用表单提交:通过HTML表单将用户输入的数据提交给后端的PHP脚本进行处理。PH...
    99+
    2023-08-11
    php
  • Vue前端后端的交互方式 axios
    目录语法数据请求封装前言: 大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有vue-resource axios fetch等方式进行数据集请求...
    99+
    2024-04-02
  • 前端ajax与后端交互的示例分析
    这篇文章主要介绍了前端ajax与后端交互的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前端中常常用的与后端交换数据的话,通常是要用...
    99+
    2024-04-02
  • ajax前后端数据交互的方法有哪些
    在Ajax中,前端和后端之间的数据交互有以下几种方法:1. 使用XMLHttpRequest对象:通过创建XMLHttpReques...
    99+
    2023-08-09
    ajax
  • Vue中前端与后端如何实现交互
    目录Promise的基本使用基本使用多个请求,链式编程Promise的API—实例方法Promise的API—对象方法(直接通过Promise函数名称调用的方...
    99+
    2024-04-02
  • thymeleaf中前后端数据交互方法汇总
    1. 引入静态资源:th:href或th:scr+@{/从static目录开始} <html lang="en" xmlns:th="http://www.thymeleaf....
    99+
    2024-04-02
  • 前后端交互流程
    1.前后端交互: 前后端交互,也可以理解为数据交互。前端需要获取(GET)的数据获取上传(POST)的数据,要通过 请求 来完成的,前端发送请求,后端接收到请求后,便进行对数据库的操作,返回前端所需要的数据,即可完成来一次前后端的交互。 大...
    99+
    2023-10-07
    java tomcat 前端
  • web前后端交互方式是什么
    这篇文章主要讲解了“web前后端交互方式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前后端交互方式是什么”吧!  正如我们所知,一个完整的IT项目是由多个不同岗位共同完成的,包...
    99+
    2023-06-27
  • 利用Node.js+Koa框架实现前后端交互的方法
    前言 对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握。今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的。 koa 是由 Express 原班人马打造的,致力于成为一个更小...
    99+
    2022-06-04
    框架 后端 方法
  • SpringBoot使用WebSocket实现前后端交互的操作方法
    目录背景实现一、导入依赖二、新建WebSocket配置类,注入Bean三、新建WebSocket服务端,在其中处理websocket逻辑四、客户端实现,可以借助FreeMarker模...
    99+
    2024-04-02
  • Vue前端交互模式与Promise怎么使用
    这篇文章主要介绍“Vue前端交互模式与Promise怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue前端交互模式与Promise怎么使用”文章能帮助大家解决问题。Promise 概述Pr...
    99+
    2023-06-27
  • NoSQL数据库怎么与前端进行交互
    NoSQL数据库与前端可以通过以下几种方式进行交互: RESTful API:通过RESTful API调用数据库的接口,前端可...
    99+
    2024-05-07
    NoSQL
  • 详解Python flask的前后端交互
    目录前端index.htmlscript.js后端app.py总结场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示。 按下按钮之前: 按下按钮之后: ...
    99+
    2024-04-02
  • 前后端交互(小白教学)
    在我们的印象中什么是前后端交互呢 我们一个后端程序员为什么要去学习前端知识 前后端交互到底是靠什么而进行关联的呢 接下来我们带着这三个问题来阅读这边文章!!! 1.前后端交互 所谓前后端交互,即前后端交互为前端和后端的互动,...
    99+
    2023-09-02
    1024程序员节 java html
  • Vue前端如何实现与后端进行数据交互
    目录vue前端与后端数据交互安装在main.js文件引入使用启动vue和前后端连接直接上图vue前端与后端数据交互 安装 npm install axios --save 在main...
    99+
    2024-04-02
  • Vue前端怎么实现与后端进行数据交互
    这篇文章主要介绍了Vue前端怎么实现与后端进行数据交互的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue前端怎么实现与后端进行数据交互文章都会有所收获,下面我们一起来看看吧。Vue前端与后端数据交互安装npm...
    99+
    2023-06-29
  • Java前后端交互的一些细节
     在后端进行POST请求后端接收前端数据时,关于PrintWriter:参考地址 注意传进来的对象为空说明未在数据库查到拥有该账号的用户,所以需要告诉前端“账号密码不正确”,如果不为空说明有该用户,所以可以登录。  @Overrid...
    99+
    2023-10-12
    java 交互 servlet 开发语言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作