1.搭建后端完成结构
1.1后端作用
1.接收前端发送的数据.(接收) SpringMVC Controller
2.按照用户的业务需求处理数据(处理) Spring Service
3.将处理之后的结果,按照特定的要求 返回给用户(返回) SpringMVC Controller
1.2 代码结构
1.3 后端测试要求
要求:接收URL请求地址,之后JSON数据返回.
URL: http://localhost:8090/getAll
要求利用MP的方式查询数据库.
1.4 编辑UserController
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.Usersevice;
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;
@RestController
public class UserController {
@Autowired
private Usersevice userservice;
@RequestMapping("/getAll")
public List<User> getAll(){
return userservice.getAll();
}
@RequestMapping("/deleteId")
private List<User> deleteId(Integer id){
userservice.deleteId(id);
return userservice.getAll();
}
}
1.5 编辑UserService
package com.jt.service;
import com.jt.pojo.User;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public interface Usersevice {
List<User> getAll();
void deleteId(Integer id);
}
1.6编辑UsersevriceImpl 实现类
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 UsersevriceImpl implements Usersevice {
@Autowired
private UserMapper userMapper;
@Override
public List<User> getAll() {
return userMapper.selectList(null);
}
@Override
public void deleteId(Integer i) {
userMapper.deleteById(i);
}
}
2.前后端业务调用
2.1 前后端调用流程
2.2 构建前端页面
2.3 关于JSON结构
1 .什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是JavaScript（JS）的一个子集
JS对象
var obj2={};//这只是JS对象
* <1>.JS对象写法，字段值不带双引号
* {id:100,name:“tom”}
* <2>.字符串拼接
* id=100&name=tom
*/
//var data = “id=100&name=tom”
var data = {id:100,name:“tom”}
下面是JSON串结构，JSON 不谈对象
2 .Object格式
{ "id": 100, "name":"tomcat", "age":18}
3. Array格式
[100, "张三", "李四"]
4.嵌套结构
value值位置可被上面两种结构嵌套进来
[
{
"id":1,
"name":"刘备"
},
{
"id":2,
"name":"关羽",
"place":[
"徐州",
"小沛",
"荆州"
]
},
{
"装备":{
"name":"赤兔马",
"兵器":[
{
"name":"青龙偃月刀"
},
"青釭剑",
"七星宝刀"
]
}
}
]
2.4 关于Ajax
-1.Ajax介绍
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），用来描述一种使用现有技术集合的‘新’方法，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
-2.特点:
- 局部刷新
- 异步访问
-3.Ajax为什么可以异步
同步:
当用户发起请求时,如果后端服务器没有返回数据,此时用户页面无法展现. 一直出于加载的状态 (整个页面同时刷新)
异步原因: 有Ajax引擎
步骤: - 用户将请求发送给Ajax引擎. 之后JS继续向下执行.
- Ajax引擎接收用户请求之后,通过代理的方式访问后端服务器.
- 后端服务器接收请求之后,执行业务操作,最终将响应的结果返回值代理服务器(Ajax引擎)
- 引擎通过回调函数的方式返回给用户数据.
-4 jQuery下载
网址: https://jquery.com/
2.5 jQuery前后端调用
1. JS中循环写法
基础循环写法
JS可以将接收的JSON串动态转化为JS对象
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
for(var i=0; i<data.length;i++){
console.log(data[i])
}
})
in关键字
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//in 遍历数组下标
for(index in data){//从0开始
console.log(data[index])
}
})
of 关键字
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//of 关键字 直接获取遍历对象
for(user of data){
console.log(user)
}
})
2 .模版字符串
说明: 模版字符串语法从ES5以后提供的
语法: 反引号
特点:
- 被反引号包裹的都是字符串 可以随意换行 可以保留代码结构.
- 可以动态的从对象中获取数据 语法: ${对象.属性}
用法:
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)
}
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"
* 写法: 25上课!!!!
* 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>
3 跨域
3.1 同源策略
要素1: 浏览器地址: file:///D:/workspace/cgb2105/webDemo/userList.html 展现页面
要素2: Ajax请求地址: http://localhost:8090/getAll
浏览器的地址与Ajax请求地址要求：
1.HTTP请求协议相同
2.请求的域名相同
3.端口号相同
则满足同源策略. 浏览器可以解析返回值,则请求正确.
3.2 同源策略题目
例子1:
- 浏览器地址: http://localhost:8090/a.html
- Ajax地址: http://localhost:8091/getAll 不满足:端口号不一样
例子2:
- 浏览器地址: http://localhost:8090/a.html
- Ajax地址: http://www.baidu.com:80/getAll 不满足: 域名/端口号不一样
http协议不写端口号默认（百度）：80
https协议默认端口号：443
例子3: 前提: IP与域名正确映射 ＤＮＳ
- 浏览器地址: http://10.1.10.8/a.html
- Ajax地址: http://www.baidu.com/getAll 不满足：域名不一致
3.3 跨域解决策略
1 .JSONP
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，
而 HTML 的核心知识: 利用 <script src属性=“获取远程服务器数据”> 实现跨域访问.
2.CORS 跨域资源共享
跨域资源共享( CORS ) ,通过Http 响应头 信息标识哪些网址可以访问服务器.现在几乎所有的浏览器默认支持CORS. 在请求之前会进行"预检" 如果预检成功,则在一段时间之后无需校验(30分钟).
报错信息:
3 .注解解决跨域
1).注解标识
controller层加注解 @CrossOrigin（“跨域网址”）
2).响应头信息
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
