Spring MVC 入门

it195
146 阅读4分钟

​

 1.restFul风格

 

1.1传统get方式提交

url1: http://localhost:8080/findUser?name=tomcat&age=18

url2: http://localhost:8080/findUser?name=tomcat&age=18&sex=男

需求：上述的参数传递是否可以简化？

简化写法：

url3: http://localhost:8080/findUser/tomcat/18/男

1.2restFul风格

案例：url3: http://localhost:8080/findUser/tomcat/18/男 发送

要求：

        1.restFul的风格数据的位置一旦确定，不能修改

        2.参数与参数之间使用“/”的方式分割

        3.restFul的风格适用于 get/post/put/delete请求类型

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

在这里插入图片描述​

1.3编辑后端Controller

  /**
     * URL地址:
     *  http://localhost:8080/findUser/tomcat/18/男  get类型
     * 参数: name/age/sex
     * 返回值: 返回值获取的数据
     * restFul语法:
     *     1. 参数与参数之间使用/分割
     *     2. 需要接收的参数使用{}包裹
     *     3. 参数接收时采用@PathVariable取值
     */
    @RequestMapping("/findUser/{name}/{age}/{sex}")
    public String findUser(@PathVariable String name,
                           @PathVariable int age,
                           @PathVariable String sex){

        return name+":"+age+":"+sex;
    }

 1.4测试效果

​2.JSON

2.1JSON介绍

JSON（JavScript Object Notation）是一种轻量级的数据交换格式，它使的人们很容易的进行阅读和编写。同时也方便了机器精心解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

2.1JSON格式-对象格式

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

​

 例子: 其中的’'号key可写可不写

    {"id": "100","name": "tomcat", "age": "18"}

2.2JSON格式-数组格式

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

​

	[100,"张三",true]

2.3JSON格式-嵌套格式

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

​

 [100,true,["a","b",{"name":"张三","hobbys": ["吃饭","睡觉"]}]]

3.SpringMVC前后端交互-@ResponseBody

3.1业务说明

问题说明1: 前端访问后端服务器,一般采用Ajax方式进行数据传递. 后端服务器返回给前端页面 通常采用JSON格式数据
问题说明2: 后端服务器怎么接收前端的参数的. servlet机制

问题: 后端服务器如何返回JSON串

3.2案例测试

需求: 根据name/age 查询用户,要求返回User对象的JSON串
URL: http://localhost:8080/findJSON?name=tomcat&age=18

/**
     * URL: http://localhost:8080/findJSON?name=tomcat&age=18  get
     * 参数: name=tomcat&age=18
     * 返回值:  User对象的JSON
     * 知识点:
     *      1.@ResponseBody //将返回值转化为JSON串  使用最多!!!
     *      2.如果返回String类型,则@ResponseBody将字符串本身返回给前端.
     */
    @RequestMapping("/findJSON")
    @ResponseBody //将返回值转化为JSON串
    public User findJSON(User user){
        //在业务层扩展数据
        user.setId(101);
        user.setSex("男");
        return user;
    }

3.3测试结果

​

4.@RestController注解

4.1编辑RestUserController

package com.jt.controller;

import com.jt.pojo.User;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

//@Controller //将类交给SpringMVC管理
//@ResponseBody //当前类中的所有方法 都返回JSON串
@RestController // = @Controller + @ResponseBody
@RequestMapping("/rest")
public class RestUserController {

    /**
     * 注意事项:
     *      1.springMVC中的请求路径不能重复!!!!
     *      2.可以@RequestMapping("/业务名称")自定义前缀
     * @return
     */
    @RequestMapping("/findJSON")
    public User findUser(User user){
        user.setId(105);
        user.setSex("男");
        return user;
    }
}

 4.2测试效果

​

知识小结

  1. restFul风格
    特点:
    1.参数写到url中使用/分割
    2.接收时采用{xxxx} 使用@PathVariable注解获取
    3.支持请求类型 post/put/get/delete
    JSON串
  2. 格式: 1.对象格式 2.数组格式
    嵌套格式: value可以嵌套
    易错项: json格式必须添加""号
  3. 注解:
    1.@ResponseBody 将返回值转化为JSON
    2.@RestController 将当前类的所有返回值都转化为JSON

5.前后端交互 

5.1搭配项目环境

​

5.2Axios讲解

5.2.1Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率.
特点: 局部刷新,异步访问

5.2.2Ajax异步原理说明

组成部分:\

  1. 用户
    2. Ajax引擎–代理\
  2. 服务器

异步的特点：\

  1. 由Ajax引擎直接访问后端服务器。\
  2. 在回调函数没有执行之前，用户可以执行自己的任务。 异步

​

 5.2.3Axios入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios测试案例-1</h1>
		<script>
			/* 
				1.可以编辑Axios 发送ajax请求
				2.不同的服务器之间发送ajax请求时会有"跨域"问题
				3.解决跨域问题 通过注解搞定. @CrossOrigin  
			 */
			var url = "http://localhost:8080/hello"
			axios.get(url)
				 .then(function(result){ //回调函数!!!
					 console.log(result)
				 })
		</script>
	</body>
</html>

5.2.4编辑UserController

​

5.2.5页面效果展现

​

6.前后端交互案例

6.1Axios-Get请求

6.1.1业务需求说明

 需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserById?id=100\ 参数: id = 100
返回值: User对象的JSON 伪造一个User对象

6.1.2编辑AxiosController

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 {
    /**
     * URL地址:  http://localhost:8080/axios/getUserById?id=100
     * 参数:     id = 100
     * 返回值:  User对象的JSON   伪造一个User对象
     */
    @RequestMapping("/getUserById")
    public User getUserById(Integer id){
        //根据ID查询数据库
        User user = new User();
        user.setId(id);
        user.setName("好好学习");
        user.setAge(1000);
        user.setSex("男");
        return user;
    }
}

6.1.3编辑页面HTML

/**
			 * var 关键字 没有作用域的概念!!!!
			 * let 相当于var 有作用域 更加安全.
			 * const 定义常量的
			 * 关于axios数据返回值对象的说明:
			 * 		axios为了接收后端服务器数据,利用promise对象
			 * 		封装参数
			 */
			let url1 = "http://localhost:8080/axios/getUserById?id=100"	
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise.data)
				 })

6.1.4编辑页面效果

​

 6.2Axios-Get-对象参数写法

6.2.1业务需求说明

需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx\ 参数: id=xxx name=xxx
返回值: List [user1,user2]

6.2.2编辑UserController

 /**
     * URL地址:  http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
     * 参数:         id=xxx  name=xxx
     * 返回值:     List [user1,user2]
     */
    @RequestMapping("/getUserByNA")
    public List<User> getUserByNA(User user){
        List<User> list = new ArrayList<>();
        list.add(user);//简化赋值操作 直接返回
        list.add(user);
        return list;
    }

6.2.3编辑页面js

/**
			 * 1.get请求 对象传参
			 * 2.语法说明:
			 * 		关键字: params : 对象信息
			 */
			let user2 = {name:"tomcat",age:100}
			let url2 = "http://localhost:8080/axios/getUserByNA"
			axios.get(url2,{params:user2})
				 .then(function(promise){
					 console.log(promise.data)
				 })

6.2.4页面效果展示

1.页面URL地址

​

2.页面打印信息

​

6.3 Axios-Get-restFul结构 

6.3.1需求说明

查询name=tomcat sex=“男” 的用户 要求请求采用restFul的风格实现数据获取.
URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男\ 参数: name/sex
返回值: List

6.3.2编辑AxiosController

 /**
     * URL地址:  http://localhost:8080/axios/findUserByNS/tomcat/男
     * 参数: name/sex
     * 返回值: List<User>
     */
    @RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
    public List<User> findUserByNS(User user){
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user);
        return list;
    }

6.3.3编辑前端JS

/**
				 * 需求: 利用restFul的风格实现前后端交互.
				 * URL:  http://localhost:8080/axios/findUserByNS/tomcat/男
				 * 难点:
				 * 		1.tomcat/男直接写死在url地址中. 后期扩展不方便
				 * 模版字符串写法:ES6引入的新功能
				 * 语法:
				 * 		1. 使用反引号  ``
				 * 		2. 作用:  1.可以保证字符串的格式
				 * 				  2.可以动态获取变量的值
				 */ 
				let user3 = {name: "tomcat", sex: "男"}
				let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
				let html = `<div>
								<p>AAA</p>
								<p>BBB</p>
							</div>
							`
				axios.get(url3)
					 .then(function(promise){
						 console.log(promise.data)
					 })

6.3.4页面效果展示

1.页面URL地址

​

2.页面数据展示

​

​

avatar
文章
阅读
粉丝