一、搭建后端完整结构

1、后端作用

接收：接收前端发送过来的数据，SpringMVC Controller
处理：按照用户的业务需求处理数据，Spring Server
返回：将处理之后的结果，按照特定的要求返回给用户，SpringMVC Controller

2、代码结构

Springboot官网后台模板 springboot后端_json

3、后端测试要求

需求：接收URL请求地址,之后JSON数据返回
URL：http://localhost:8090/getAll
需求：: 利用MP的方式查询数据库

4、编辑后端程序

4.1）编写启动类SpringBootRun
package com.jt;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.jt.mapper") //Spring容器内部为接口创建代理对象
                             //JDK的动态代理对象
public class SpringBootRun {

    //标准写法
    public static void main(String[] args) {
        SpringApplication.run(SpringBootRun.class, args);
    }
}
4.2）编写User类
package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import org.springframework.stereotype.Component;

import java.io.Serializable;

/**
 * 对象关系映射配置:
 *      1.User对象需要与demo_user表绑定
 *      2.User对象中的属性与表中的字段一一绑定
 */
@Data //自动提供get、set、tostring方法
@Accessors(chain = true)
@TableName("demo_user") //定义哪张表
//实体对象的作用 就是用来实现参数传递
//@Component //不需要将实体对象交给Spring容器管理
public class User implements Serializable {
    //主键自增
    @TableId(type= IdType.AUTO)
    //序列化:保证数据传输完整性
    private Integer id;

    //@TableField( "name")
    //如果属性与字段同名(包括驼峰规则)注解可以省略
    private String name;
    private Integer age;
    private String sex;
}
4.3）编写UserService接口
package com.jt.service;

import com.jt.pojo.User;

import java.util.List;

public interface UserService {

    List<User> getAll();

    void deletebyId(Integer id);

    void updatabyId(User id);
}
4.4）编写接口的实现类UserControllerlmpl
package com.jt.service;

import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class UserControllerlmpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> getAll() {
 		//不需要where条件,查询是全部数据.
        return userMapper.selectList(null);
    }

    @Override
    public void deletebyId(Integer id) {
        userMapper.deleteById(id);
    }

    @Override
    public void updatabyId(User user) {

    }
}
4.5）编写Mapper接口
package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;

public interface UserMapper extends BaseMapper<User> {

}
4.6）编写UserController控制类
package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
//标识Controller类 交给Spring容器管理/返回JSON数据
@RestController
@CrossOrigin
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/getAll")
    public List<User> getAll(){
        return userService.getAll();
    }
    @RequestMapping("/deletebyId")
    public void deletebyId(Integer id){
        System.out.println(id);
        userService.deletebyId(id);
    }
    @RequestMapping("/updata")
    public void updata(User user){
        System.out.println(user);
        userService.updatabyId(user);
    }
}

5、页面效果展现

Springboot官网后台模板 springboot后端_ajax_02

二、前后端业务调用

1、前后端调用流程

Springboot官网后台模板 springboot后端_js_03

2、编写前端界面

需求：前端准备一个表格,之后在表格中展现后端查询的所有数据.
知识点:
1、html css
2、jQuery 知识
3、Ajax $.ajax({…})
4、了解JS的处理基本用法 VUE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
	</head>
	<body>
		<table border="1px" align="center" width="80%">
			<tr>
				<td colspan="4" align="center"><h1>用户列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
			</tr>
			<tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr>
			<h1>作用:获取后端数据 之后也页面展现</h1>
		</table>
	</body>
</html>

3、关于JSON结构

3.1）什么是JSON

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

3.2）Object格式
{ "id": 100, "name":"tomcat", "age":18}

Springboot官网后台模板 springboot后端_ajax_04

3.3）嵌套结构

Springboot官网后台模板 springboot后端_json_05

[{ "Id":100, "name":"黑熊精" }, { "Id":200,"name":"白龙马","color":[ "白色", "黑色", "蓝色","红色"],"装备":[{"name":"上古马鞍","level":"顶级" },{"name":"上古马蹬","level":"顶级"}]}]

//格式如下：
[
    {
        "Id":100,
        "name":"黑熊精"
    },
    {
        "Id":200,
        "name":"白龙马",
        "color":[
            "白色",
            "黑色",
            "蓝色",
            "红色"
        ],
        "装备":[
            {
                "name":"上古马鞍",
                "level":"顶级"
            },
            {
                "name":"上古马蹬",
                "level":"顶级"
            }
        ]
    }
]

4、关于Ajax

4.1）Ajax介绍

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

特点:

  1. 局部刷新
  2. 异步访问
4.2）Ajax为什么可以异步

同步:
当用户发起请求时,如果后端服务器没有返回数据,此时用户页面无法展现. 一直出于加载的状态 (整个页面同时刷新)

异步原因: 有Ajax引擎
步骤:

  1. 用户将请求发送给Ajax引擎. 之后JS继续向下执行.
  2. Ajax引擎接收用户请求之后,通过代理的方式访问后端服务器.
  3. 后端服务器接收请求之后,执行业务操作,最终将响应的结果返回值代理服务器(Ajax引擎)
  4. 引擎通过回调函数的方式返回给用户数据.
4.3） jQuery下载

网址： https://jquery.com/download

Springboot官网后台模板 springboot后端_js_06

5、jQuery前后端调用

5.1）JS中循环写法

1.基础循环写法

//JS可以将接收的JSON串动态转化为JS对象
	$.get(url,function(data){
		//循环遍历返回值
		for(var i=0; i<data.length;i++){
			console.log(data[i])
		}
	})

2.in关键字

//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
	//循环遍历返回值
	//in 遍历数组下标
	for(index in data){//从0开始
		console.log(data[index])
	}
})

3.of 关键字

//JS可以将接收的JSON串动态转化为JS对象
				$.get(url,function(data){
					//循环遍历返回值
					//of 关键字 直接获取遍历对象
					for(user of data){
						console.log(user)
					}
				})
5.2)模版字符串

说明: 模版字符串语法从ES5以后提供的
语法: 反引号
特点:

  1. 被反引号包裹的都是字符串 可以随意换行 可以保留代码结构.
  2. 可以动态的从对象中获取数据 语法: ${对象.属性}
    用法:
for(user of data){
				//获取数据信息
				var tr = 
				`<tr align="center">
					<td>${user.id}</td>
					<td>${user.name}</td>
					<td>${user.age}</td>
					<td>${user.sex}</td>
				 </tr>`
				 
				 //将tr标签追加到表格中
				 $("#tab1").append(tr)
			}
5.3）Ajax获取远程数据
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<!-- html是一种解释执行的语言 -->
		<!-- 导入JS函数类库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<script>
			
			//让页面加载完成之后,再次调用
			//编程方式: 函数式编程
			$(function(){
				
				/**
				 * 常见Ajax写法:
				 * 	 1.$.ajax({})
				 *   2.$.get()   get类型
				 *   3.$.post()
				 * 	 4.$.getJSON()
				 */
				
				/**
				 * 语法说明:
				 * 	$.get(url,data,function(data){},dataType)
				 * 参数说明:
				 * 		1.url: 请求服务器的网址
				 * 		2.data: 前端向服务器传递的参数  字符串
				 * 		3.回调函数: 请求成功之后开始回调
				 * 		4.dataType: 返回值结果的数据类型. 可以省略自动判断
				 *	
				 */
				var url = "http://localhost:8090/getAll"
				/**
				 * 关于data语法: id=100  name="tom"
				 * 		1.JS对象写法
				 * 		  {id:100,name:"tom"}
				 * 		2.字符串拼接
				 * 		  id=100&name=tom
				 */
				//var data = "id=100&name=tom"
				var data = {id:100,name:"tom"}
				
				//JS可以将接收的JSON串动态转化为JS对象
				$.get(url,function(data){
					//循环遍历返回值
					//of 关键字 直接获取遍历对象
					for(user of data){
						//获取数据信息
						var tr = 
						`<tr align="center">
							<td>${user.id}</td>
							<td>${user.name}</td>
							<td>${user.age}</td>
							<td>${user.sex}</td>
						 </tr>`
						 
						 //将tr标签追加到表格中
						 $("#tab1").append(tr)
					}
				})
			})
			
				/**
				 * 传统Ajax 功能强大
				 */
				$.ajax({
					url: "http://localhost:8090/getAll",
					type: "get",
					data: {id:100,name:"tomcat"},
					success: function(data){
						console.log(data)
					},
					error: function(data){//浏览器的返回值
						console.log(data)
					},
					async: true  //默认为true 异步   false 同步调用
				})

				
			
			/* 
			 1. 基本循环
			 for(var i=0; i<data.length;i++){
			 	console.log(data[i])
			 }
			 
			 2.in 关键字
			 for(index in data){
			 	console.log(data[index])
			 }
			 
			 */
			
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" align="center" width="80%">
			<tr>
				<td colspan="4" align="center"><h1>用户列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
			</tr>
			<!-- <tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr> -->
		</table>
	</body>
</html>

6、效果

Springboot官网后台模板 springboot后端_Springboot官网后台模板_07

7、JS变量基本用法

7.1）var关键字

var id: 表示定义一个变量名称为ID ，该变量相当于在全局范围内声明了一个变量，该变量声明没有作用域的概念(哪哪都能用)。
弊端: 由于没有作用域的规定，导致变量使用混乱

7.2）let 关键字

说明: 从新版本的JS开始，兼容支持let。该关键字的用法与var一样，但是有作用域的范围，更加的通用。

7.3）const关键字

说明: 该关键字用来标识常量, 该数据不变

8、关于Ajax总结

1. Ajax 是局部刷新,异步访问
 2. Ajax异步的核心在于 Ajax引擎(代理)
 3.  Ajax请求调用时，无论是否成功，都通过回调函数的方式进行success/error
 4. Ajax参数传递写法 2种 
 		4.1.对象写法
    			{key:value,key2:value2}
    	4.2.字符串拼接
    			key=value&key2=value2
   5.for循环方式
   		5.1.常规方式循环 
  		5.2. in 3.of 
  	6.模版字符串用法 ``号 取值 ${key} 
  	7.定义变量用let 定义常量用const

三、跨域

1 、同源策略

1.1）同源策略介绍

规定: 如果浏览器的网址与Ajax请求网址必须满足同源策略，则浏览器才能解析Ajax，执行正确的请求。

什么是同源策略:
规定要求
	请求协议://域名:端口号
	1.如果3者都满足，则符合同源策略。浏览器可以正确解析。
	2.反之(有一个不满足)不满足同源策略，称之为跨域请求， 则浏览器不能正常解析Ajax请求。
1.2）关于同源策略练习
浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: http://localhost:8090/abc/b 满足同源策略

浏览器地址: http://localhost:80/userList.html
Ajax请求地址: http://localhost:8090/abc/b 端口不同 跨域请求

浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: https://localhost:8090/abc/b 协议不同,跨域请求

manage.jt.com 对应的IP假设为10.6.6.8
浏览器地址: http://manage.jt.com/userList.html
Ajax请求地址: http://10.6.6.8/abc/b 跨域请求 域名不同(即使映射也是跨域)

浏览器地址: http://manage.jt.com:/userList.html http协议默认端口80
Ajax请求地址: http://manage.jt.com:80/aaa/bbb 同域请求

2、CORS介绍

2.1）介绍

CORS是一个W3C标准，全称是**“跨域资源共享”**（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
如果实现跨域资源共享，则需要单独配置服务端即可。 只需要将允许访问的页面的网址，通过响应头的形式进行设定，则可以实现跨域请求。

2.2） 不允许跨域说明

什么是跨域

Springboot官网后台模板 springboot后端_ajax_08

2.3） 跨域流程图

Springboot官网后台模板 springboot后端_Springboot官网后台模板_09


注解解决跨域

Springboot官网后台模板 springboot后端_js_10

响应头信息：

Springboot官网后台模板 springboot后端_Springboot官网后台模板_11