1 搭建后端完整结构
1.1 后端的结构说明
1.1.1 后端作用
- 接收前端发送的数据.(接收) SpringMVC Controller
- 按照用户的业务需求处理数据.(处理) Spring Service
- 将处理之后的结果,按照特定的要求返回给用户(返回) SpringMVC Controller
1.1.2 代码结构
1.1.3 后端测试要求
: 接收url 请求地址,之后json数据返回
url: http://localhost:8090/getAll
要求利用MP方式查询数据库
1.1.4 编辑Service
UserService接口
UserService实现类
1.1.5 编辑controller
1.1.6 运行启动类
1.1.7 前端展示效果
2.1 前后端调用流程
2.2 前端的构建
2.2.1 编辑前端页面
需求: 前端准备一个表格,在表格中展现后端查询的所有数据.
知识点:
1.html css
2.jQuery
3.Ajax $.ajax({…})
4.了解js处理的基本用法. VUE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表demo</title>
<script src="jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: "http://localhost:8090/getAll",
type: "post",
success: function(data){
for(user of data){
// var str="<tr align='center'><td>"+user.id+"</td><td>"+user.name+"</td><td>"+user.age+"</td><td>"+user.sex+"</td></tr>"
let str = `
<tr align='center'>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>
`
$("#a1").append(str);
}
}
})
</script>
</head>
<body>
<table id="a1" 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>
2.3 关于JSON结构
2.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成为理想的数据交换语言。
2.3.2 JSON结构 对象object格式
对象(object) 是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。
例子:
{"id":100,"name":"tomcat","age":18}
2.3.3 JSON结构 数组array格式
数组(array) 是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。
例子:
[100,"张三","李四"]
2.3.4 JSON结构 值value格式
值(value) 可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。
例子:
[{"id":100,"name":"黑熊精"},
{"id":200,"name":"吴亦凡",
"color":["白色","黑色","蓝色","红色"],
"装备":[
{"name":"扇骨","level":"max"},
{"name":"骨扇","level":"max"}
]
}
]
2.4 关于Ajax
2.4.1 Ajax介绍
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
特点:
1.局部刷新
2.异步访问
2.4.2 Ajax为什么可以异步
同步: 当用户发起请求时,如果后端服务器没有返回数据,此时用户的页面无法展示,一直处于加载状态(整个页面同时刷新)
异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作.如果后端服务器返回数据则通过回调函数通知客户. 局部刷新多次.
异步原因:
- 用户将请求发送给ajax引擎,之后js继续向下执行.
- Ajax引擎接收用户请求之后通过代理的方式访问后端服务器
- 后端服务器接收请求之后执行业务操作,之后将相应的结果返回给代理服务器(Ajax引擎)
- 引擎通过回调参数方式通知用户
2.4.3 jQuery下载
网址:https://jquery.com/
下载:
2.5 jQuery前后端调用
2.5.1 js中循环写法
1.基础循环写法
for(var i;i<data.length;i++){
console.log(data[i])
}
2.in关键字循环
for(index in data){
console.log(data[index])
}
3.of关键字循环
for(user of data){
console.log(user)
}
2.5.2 模板字符串
**说明:**模板字符串语法从ES5以后提供的
语法: 反引号
特点:
1.被反引号包裹的都是字符串,可以随意换行,保留代码结构
2.可以动态的从对象中取值 语法: ${user.name }
for(user of data){
var str = `
<tr align='center'>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>`
$("#a1").append(str)
}
2.6 Ajax 获取远程数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表demo</title>
<script src="jquery-3.6.0.min.js"></script>
<script>
// 函数式编程
$(function(){
/**
* 语法说明:
* $.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"}
$.get(url,data,function(data){
for(user of data){
var str = `
<tr align='center'>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>
`
$("#a1").append(str)
}
})
})
</script>
</head>
<body>
<table id="a1" 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>
</table>
</body>
</html>