step03day04学习笔记

//标识Controller类 交给Spring容器管理/返回JSON数据
@RestController
public class UserController {
    @Autowired
    private UserService userService;

    /**需求: 查询全部用户信息
     * URL: /getAll
     * 返回值: List<User>
     */
    @RequestMapping("/getAll")
    public List<User> getAll(){ 
        return userService.getAll(); }
}

1.1.5服务层代码

@Service
public class UserServiceImpl implements UserService{

    @Autowired //JDK动态代理对象
    private UserMapper userMapper;

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

2.前后端业务调用

2.1 前后端调用流程

2.2编辑前端的页面

2.2.1使用hbuilder管理项目

需求: 前端准备一个表格,之后在表格中展现后端查询的所有数据.

知识点

1.html css

2.js (jquary)

3.Ajax.$.ajax({…})

4.了解JS的处理基,VUE

html页面

<table id="tab01" border="1px" align="center" width="80%">
			<tr>
				<td colspan="5" align="center"><h1>用户列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<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>
				<td align="center">
					<input type="button"  value="修改" />
					<input type="button"  value="删除" />
				</td>
			</tr>
			<tr>
				<td align="center">230</td>
				<td align="center">鲤鱼精</td>
				<td align="center">3900</td>
				<td align="center">女</td>
				<td align="center">
					<input type="button"  value="修改" />
					<input type="button"  value="删除" />
				</td>
			</tr>
		</table>

2.3 关于JSON结构

2.3.1 什么是JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2.3.2 Object格式

例子:

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

2.3.3Array格式

案例:

	[100, "张三", "李四"]

2.3.4 嵌套结构

例子及其简析

{"id":100, "name":"lydon" ,
			"likecolor":["red","blue","yellow","gray","green"],
			"likeobject":[{"name":"lily","live":"宜宾","fav":"paint"},
			{"name":"Arilisy","live":"遂宁","fav":"汉服"},
			{"name":"Buffeermei","live":"资阳","fav":"王一博"}]
		}

说明：这样获取的对象可以是数组+对象，也可以是对象+数组，可以互相嵌套，如输出结果如下

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。 [3]
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作

特点:

1.局部刷新

2.异步访问

2.4.2 Ajax为什么可以异步

同步:

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

异步:有Ajax引擎

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

2.4.3 jQuary下载

网址: https://jquery.com/

2.4.4 ajax语法

/**
				 * 常见Ajax写法:
				 * 1.$.ajax({})
				 * 2.$.get()
				 * 3.$.post()
				 * 4.$.getJSON()*/
				 /**
				  * 语法说明:
				  * $.get(Url,data,function(data){},resultType)
				  * 参数说明:
				  * 	1.url:请求服务器的网址
				  * 	2.data:前端向服务器传递的参数
				  * 	3.回调函数:请求成功之后开始回调
				  * 	4.dataType:返回值的结果的数据类型*/

2.5数据简析Jquery前后端调用

2.5.1 js中循环写法

1. 基础for循环写法

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

2 高效for循环写法

//for循环方式2
				for(index in data){
					console.log(data[index])
				}

3 js中of循环写法

//循环遍历数组:for循环方式3
				//of 关键字 直接获取遍历对象
				for(user of data){
					var id=user.id
					var name=user.name
					var age=user.age
					var sex=user.sex
				}

2.5.2.模板字符串

说明: 模版字符串语法从ES5以后提供的
语法: 反引号
特点:
1. 被反引号包裹的都是字符串可以随意换行可以保留代码结构.
2. 可以动态的从对象中获取数据语法: ${对象.属性}

for(user of data){
					`<tr align="center">
					<td>${user.id}</td>
					<td>${user.name}</td>
					<td>${user.age}</td>
					<td>${user.sex}</td>
					</tr>`
					//将Tr标签追加到表格中
					$("#tab01").append(tr)
				}