一、搭建后端完整结构
1. 后端结构说明
1.1 后端作用
1.2 代码结构
1.3 后端测试要求
要求: 接收URL的请求地址,之后JSON数据返回
URL: http://localhost:8090/getAll
1.4 编辑 UserController
@RestController
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/getAll")
public List<User> getAll(){
return userService.getAll();
}
}
1.5 编辑UserService/UserServiceImpl
UserService :
public interface UserService {
List<User> getAll();
}
UserServiceImpl :
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> getAll() {
return userMapper.selectList(null);
}
}
1.6 页面展示效果
2. 构建前端页面
2.1 编辑前端页面
需求: 前端准备一个表格,之后在表格中展现后端查询的所有数据.
知识点:
- html css
- jQuery 知识
- Ajax $.ajax({…})
- 了解JS的处理基本用法. VUE
html:
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>用户列表demo</title>
</head>
<body>
<table border="1px solid black" align="center" width="80%">
<tr>
<td colspan="4" align="center">用户列表</td>
</tr>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr align="center">
<td>100</td>
<td>黑熊精</td>
<td>3000</td>
<td>男</td>
</tr>
</table>
</body>
</html>
2.2 关于JSON结构
2.2.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.2.2 Object格式
案例:
{ "id": 100, "name":"tomcat", "age":18}
2.2.3 Array格式
案例:
[100, "张三", "李四"]
2.2.4 嵌套格式
案例:
[{
"id":"959",
"name":"zjy",
"hobby":["爬山","羽毛球","乒乓球"],
"装备":[
{
"name":"末世","value":"神装"
},
{
"name":"电刀","value":"神装"
},
{
"name":"破晓","value":"半神装"
}
]
}]
2.3 关于Ajax
2.3.1 什么是Ajax
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
特点:
- 局部刷新
- 异步访问
2.3.2 Ajax为什么可以异步
同步: 当用户发起请求时,如果后端服务器没有返回数据,此时用户页面无法展现,一直处于加载状态(整个页面同时刷新)
异步原因: 因为Ajax中由Ajax引擎
具体步骤:
- 用户将请求发送给Ajax一你请,之后JS继续向下执行
2.3.3 jQuery 下载
2.4 Ajax实现前后端调用
2.4.1 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.4.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)
}
2.4.3 Ajax获取远程数据
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>用户列表demo</title>
<!-- 导入JS函数类库 -->
<script src="js/jquery.min.js"></script>
<script>
/* 让页面加载完成之后,再次调用 */
/* 编程方式: 函数式编程 */
$(function(){
/* 常见Ajax的写法:
1. $.Ajax({})
2. $.get()
3. $.post()
4. $.getISON()
*/
/* 语法说明:
$.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 = ""
// JS可以将接收的JSON串转化为JS对象
$.get(url,data,function(data){
// 循环遍历返回值
// 基本循环
// for(var i = 0 ; i < data.length ; i++){
// console.log(data[i])
// }
// 增强for循环,in 遍历数组下标
// for(index in data){
// console.log(data[index])
// }
// 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)
}
})
})
</script>
</head>
<body>
<table id="tab1" border="1px solid black" align="center" width="80%">
<tr>
<td colspan="5" align="center" height="50px"><b>用户列表</b></td>
</tr>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
