SpringMVC_随笔_内存溢出

SpringMVC SpringMVC 1.SpringMVC介绍

Spring MVC属于SpringframeWork的后续产品，已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构，从而在使用Spring进行WEB开发时，可以选择使用Spring的Spring MVC框架或集成其他MVC开发框架，如Struts1(现在一般不用)，Struts 2(一般老项目使用)等等。

SpringMVC框架主要功能：实现前后端的交互

交互：

    1.前端通过http请求可以携带参数访问后端服务器  （请求）

    2.后端服务器可以将结果通过响应交还给前端        （响应）

2.关于Tomcat端口号说明

SpringMVC框架使用需要借助tomcat服务器

3.SpringMVC入门案例

编辑UserController类

package com.jt.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller     //将类交给SpringMVC,SpringMVC交给Spring容器管理
@ResponseBody       //将数据转化为特殊的字符串返回
public class UserController {
 
    
    @RequestMapping("/hello")
    public String hello(){
        return "你好，SpringMVC";
    }
}

地址栏输入：http://localhost:8080/hello

4.参数接收 1.简单参数传递

需求：向后端服务器传递2个数据 name=tomcat,age=18

URL:http://localhost:8080/findUserByNA?name=tomcat&age=18

@RequestMapping("/findUserByNA")
public String findUserByNA(String name,int age){
    return "数据正确："+name+":"+age;
}

2.对象方式传参

    1.编辑pojo类

说明：

    1.属性类型 必须为包装类型

    2.pojo 必须添加get/set方法

    3.pojo类型必须实现序列号接口

    2.编辑UserController类

URL:http://localhost:8080/findUserByNA2?name=TXL&age=18

package com.jt.controller;
 
import com.jt.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller     //将类交给SpringMVC,SpringMVC交给Spring容器管理
@ResponseBody       //将数据转化为特殊的字符串返回
public class UserController {
 

@RequestMapping("/hello")
public String hello(){
    return "你好，SpringMVC";
}
@RequestMapping("/dog")
public String dog(){
    return "{"code":0,"msg":"Dog"}";
}
@RequestMapping("/cat")
public String cat(){
    return "你好，SpringMVC猫";
}

    
    @RequestMapping("/findUserByNA")
    public String findUserByNA(String name,int age){
 
        return "数据正确："+name+":"+age;
    }
    @RequestMapping("/findUserByNA2")
    public String findUserByNA2(User user){
 
        return user.toString();
    }
}

3.同名提交

1.案例说明

说明：如果遇到同名提交问题，数据一般采用，的方式连接，如图

2.编辑UserController类

如果遇到同名提交问题，则SpringMVC可以采用数组接收，内部自动完成分割

底层实现：hobby.splite(",")

    @RequestMapping("/hobby")
    public String hobby(String[] hobby){
       
        //数组转化为字符串
        return Arrays.toString(hobby);
    }

5.restFul风格 1.传统get方式

URL:http://localhost:8080/findUserByNA?name=tomcat&age=18
简化：

URL:http://localhost:8080/findUserByNA/tomcat/18

2.restFul风格说明

URL:http://localhost:8080/findUserByNA/tomcat/18/男

要求：
1.此风格数据的位置一旦确定，不能修改
2.参数与参数之间用 / 的方式分割
3.此风格适用于各种请求类型请求类型种类：get/post/put/delete/

请求类型种类：get/post/put/delete/

4.语法：

            参数与参数之间使用/分割

            需要接收得参数使用{}包裹

            参数接收时采用@PathVariable取值

    如果{name}的属性与对象的属性名称一致 则可以使用对象接收

@RequestMapping("/findUser/{name}/{age}/{sex}")
public String fingUser(User user) {
 
    return user.toString();
}

6.JSON 1.JSON介绍

JSON(Javascript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAscript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2.JSON格式-对象格式

{id:100,name:"jack",age:18}     //key的引号可写可不写

对象（object）是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

3.JSON格式-数组格式

[100,"张三",true]

数组（array）是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

4.JSON格式-嵌套格式

[100,true,["a","b",{"name":"张三","hobbys":["吃饭","睡觉"]}],{"name":["玩代码","玩游戏"]}]    //嵌套数组，对象

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

5.前后端交互-@ResponseBody 1.业务说明：

问题说明1：前端访问后端服务器，一般采用Ajax方式进行数据传递，后端服务器返回给前端页面，通常采用JSON格式数据

问题说明2：后端服务器怎么接收前端的参数的，servlet机制

2.案例测试 @ResponseBody

根据name/age查询用户，要求返回User对象的JSON串

URL:http://localhost:8080/findJSON?name=tomcat&age=18

@RequestMapping("/findJSON")
@ResponseBody//将返回值转化为JSON串
public User findJSON(User user){
    //在业务层扩展数据
    user.setId(11);
    user.setSex("男");
    //user对象转化为JSON???
    return user;
}

返回JSON串

    3.@RestController //将当前类的所有方法转化为JSON串

       相当于@Controller + @ResponseBody的效果

       SpringMVC中的请求路径不能重复

7.前后端交互（Axios、Ajax） 1.Axios介绍

发起Ajax请求

1.Ajax介绍

功能和作用：Ajax主要实现前后端交互，提供用户页面与服务器之间的交互效率

特点：局部刷新，异步访问

2.Ajax异步原理说明

组成部分：

            1.用户

            2.Ajax引擎代理

            3.服务器

异步的特点：

    1.由Ajax引擎直接访问后端服务器

    2.在回调函数没有执行之前，用户可以执行自己的业务     异步

2.Axios入门案例

跨域问题：用@CrossOrigin()注解
URL地址： http://localhost:8080/hello

@RequestMapping("/hello")
public String hello() {
    return "你好，SpringMVC";
}

8.前后端交互案例 1.Axios-Get请求

var 关键字：没有作用域的概念
let 相当于var，有作用域更加安全
const 定义常量的
关于axios数据返回值对象的说明： axios为了接收后端服务器数据，利用promise对象封装对象

1.业务需求说明：

需求：根据ID查询用户信息

URL：http://localhost:8080/axios/getUserById?id=100

2.测试

let url1 = "localhost:8080/axios/getUserById?id=100";
axios.get(url1)
.then(function(promise){
	console.log(promise.data)
})

package com.jt.controller;
 
import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@CrossOrigin    //主要解决跨域问题
@RequestMapping("/axios")
 
public class AxiosController {
    
    @RequestMapping("/getUserById")
    public User getUserById(Integer id){
        //根据ID查询数据库
        User user = new User();
        user.setId(id);
        user.setName("好好学习");
        user.setAge(18);
        user.setSex("男");
        return user;
    }
 
}

2.Axios-Get-对象参数写法 1.业务需求说明：

       需求：根据ID查询用户信息

       URL：http://localhost:8080/axios/getUserByNA?id=xxx&name=xx

       参数        id        name

       返回值：        List[user1,user2]

   @RequestMapping("/getUserByNA")
   public List getUserByNA(User user){
       List list = new ArrayList<>();
       list.add(user); //简化赋值 *** 作    直接返回
       list.add(user);
       return list;
   }
   		
   		let	user2 = {name:"jack",age:23}
   		let url2 = "http://localhost:8080/axios/getUserByNA"
   		axios.get(url2,{params:user2})
   		.then(function(promise){
   			console.log(promise.data)
   		})

3.Axios-Get-restFul结构 1.需求说明

查询name=tomcat sex=“男” 要求请求采用restFul风格实现

http://localhost:8080/axios/getUserBNS/tomcat/男

参数 name/sex

返回值：List

2.编辑AxiosConstroller

    
    @RequestMapping("/getUserByNS/{name}/{sex}")    //调用set方法为属性赋值
    public List getUserByNS(User user) {
        List list = new ArrayList<>();
        list.add(user); //简化赋值 *** 作    直接返回
        list.add(user);
        return list;
    }

3.编辑前端

模板字符串写法：
语法：
1.使用反引号 `
2.作用：可以保证符串的格式
可以动态获字取变量的值

 let user3 = {name:"tomcat",sex:"男"}
 let url3 = `http://localhost:8080/axios/getUserByNS/${user3.name}/${user3.sex}`;
 axios.get(url3)
.then(function (promise) {
	console.log(promise.data)
})

4.Axios-Post请求 1.总结

@RequestMapping(value = "/saveUser",method = RequestMethod.POST)
@PostMapping("/saveUser")   //post请求
@GetMapping                 //get请求
@DeleteMapping              //delete请求
 *      1.Get请求通过?key=value&key=value
 *      post请求 数据是JSON串  数据的结构不同，所以不能使用User对象接收
 *      2.JSON串转化为User对象
 *          User对象转为JSON串     用@ResponseBody
 *          JSON串转化为User对象   用@RequestBody
 *      3.JSON串转化   要求：JSON串中的属性与对象中的属性一致，
 *      并且赋值时调用对象的set方法
 *      4.@RequestMapping可以支持任意类型的请求，不安全
 *      要求只接收post类型的请求
 *      5.只有post请求方式才加@RequestBody

2.编辑AxiosController

    
    @RequestMapping("/getUserByNS/{name}/{sex}")    //调用set方法为属性赋值
    public List getUserByNS(User user) {
        List list = new ArrayList<>();
        list.add(user); //简化赋值 *** 作    直接返回
        list.add(user);
        return list;
    }

    
    @RequestMapping(value = "/saveUser",method = RequestMethod.POST)
    @PostMapping("/saveUser")   //post请求
    @GetMapping                 //get请求
    @PutMapping                 //put请求
    @DeleteMapping              //delete请求
    public String saveUser(@RequestBody User user){
        System.out.println(user);
        return "新增用户";
    }

3.编辑前端

4.关于请求常见异常

405异常 ajax的请求类型与后端接收的请求类型不匹配
400异常参数类型不匹配
404异常请求路径找不到

5.请求类型和业务关系

常见请求类型：（Ajax只有4种）
1.GET 查询 *** 作
2.DELETE 删除 *** 作 GET和DELETE用法相同
3.POST 1.表单数据提交 2.新增 *** 作
4.PUT 修改 *** 作

1.put修改 *** 作

业务需求：
完成用户的修改 *** 作，将id=100的数据 name=张三，age=14，sex=女
URL:http://localhost:8080/axios/updateUser
返回值：修改成功数据后端打印
编辑前端

let url2 = "http://localhost:8080/axios/updateUser";
let user2 = {id:100,name:"张三",age:14,sex:"女"}
axios.put(url2,user2)
.then(function (promise) {
	console.log(promise.data);
})

编辑后端

    @PutMapping("/updateUser")
    public String updateUser(@RequestBody User user){
        System.out.println(user);
        return "修改成功";
    }

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/5637872.html

SpringMVC

发表评论

评论列表（0条）