1. Json结构
1.1 Json概述
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，实现数据前后端交互。
它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON采用完全独立于程序语言的文本格式。这些特性使JSON成为理想的数据交换语言。
1.2 Json基本格式
1.2.1 对象格式
对象（object）是无序的"key":value键值对集合，一个对象以“{”开始，“}”结束，每个"key"后面跟一个:，键值对之间使用,分隔。
例如：{"id":1,"name":"黑熊精","age":3000,"sex":"男"}
1.2.2 数组格式
数组（array）是值（value）的有序集合，一个数组以“[”开始，“]”结束，值之间使用“,”分隔。
例如：["张三","李四","不知火舞"]
1.2.3 嵌套格式
值是可以嵌套的。
例如：[{"id":1,"name":"黑熊精","age":3000,"sex":"男"},{"id":3,"name":"金角大王","age":3000,"sex":"男"}]
四层嵌套：[1,"张三",{"id":100,"name":"李四","hobby":["敲代码","打游戏",{"gender":"女"}]}]
2. 实现前后端交互
2.1 前端页面
前后端交互
用户列表 |
||||
|---|---|---|---|---|
| 编号 | 名称 | 年龄 | 性别 | 操作 |
| 1 | 黑熊精 | 3000 | 男 | |
2.2 jQuery动态获取数据
2.2.1 下载jQuery.js类库
官网地址:https://jquery.com/
2.3 Ajax异步调用
- Ajax是实现前后端交互,最为常用的一种方式，其特点为：局部刷新 异步访问；
- JQuery是JS的一种高级函数类库，JQuery提供了一种高效的Ajax的请求的方式；
- 现阶段所使用的Ajax是由jQuery进行的动态封装，如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求。
2.3.1 Ajax异步调用原理
- 同步: 用户发起请求时，要求第一时间内服务器做出响应，在此期间用户不可以做其它操作,只能等待服务器返回数据，只能全局刷新1次。
- 异步: 用户发起请求时，要求服务器做出响应，在此期间用户可以做其它的操作。如果后端服务器返回数据则通过回调函数通知客户端，并且可以局部刷新多次。
2.3.2 Ajax实现数据获取
2.3.3 data参数传递
- 1.对象方式实现数据传参
语法：{key1：value1，key2：value2}
- 2.拼接字符串的方式
语法：key1=value1&key2=value2
2.3.4 关于Ajax返回值数据说明
后台服务器返回的是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析，解析之后形成了JS的对象。
预期服务器返回的数据类型如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。
虽然服务器的返回值是JSON,但是经过Ajax智能的判断,则动态的转化为JS的对象。
2.4 JS原生for循环写法
2.4.1 原生写法
for(var i=0;i
2.4.2 in关键字
其中index代表的是遍历的下标.，从0开始 0,1,2,3…
for(index in data){ console.log(data[index]) }2.4.3 of关键字
其中user代表的是遍历的对象。
for(user of data){ console.log(user ) }2.5 JS模版字符串语法
原生的JS中经常出现字符串拼接的现象，其中需要动态的拼接参数 则结构复杂，没有数据结构,导致阅读混乱.。
ES6-7 提供了新的模版语法 ，通过反引号来动态拼接字符串。
for(user of data){ let tr = `${user.id} ${user.name} ${user.age} ${user.sex} 2.6 表格数据的动态展现
前后端交互 用户列表
编号 名称 年龄 性别 操作 3. JS变量基本用法与Ajax小结
3.1 var 关键字
var id: 表示定义了一个变量，其名称为id。
该变量相当于在全局范围内声明了一个变量，该变量没有作用域的概念，是一个全局变量。
弊端： 由于没有作用域的规定，导致变量使用混乱。
3.2 let 关键字
从新版本的JS开始，兼容支持let，该关键字的用法与var一样，但是有作用域的范围，更加的通用。
3.3 const 关键字
该关键字用来标识常量, 该数据不变。
3.4 Ajax小结
- Ajax是局部刷新，异步访问。
- Ajax异步的核心在于Ajax引擎（代理）。
- Ajax请求调用时，无论是否成功，都通过回调函数的方式进行响应。 success/error
4. 跨域说明
4.1 同源策略
只有浏览器的请求网址与Ajax的请求网址满足同源策略，浏览器才能解析Ajax,执行正确的请求。
什么是同源策略:
规定要求 —— 请求协议：// 域名：端口号
1.如果以上三者都满足,则符合同源策略，浏览器可以正确解析。
2.反之(有一个不满足)不满足同源策略，称之为跨域请求. 则浏览器不能正常解析Ajax请求。
4.2 同源策略的区别
（1）同域请求
浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: http://localhost:8090/abc/b
（2）端口不同, 跨域请求
浏览器地址: http://localhost:80/userList.html
Ajax请求地址: http://localhost:8090/abc/b
（3）协议不同,跨域请求
浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: https://localhost:8090/abc/b
（4）** 域名不同(即使映射也是跨域) ,跨域请求**
manage.jt.com 对应的IP假设为10.6.6.8
浏览器地址: http://manage.jt.com/userList.html
Ajax请求地址: http://10.6.6.8/abc/b
（5） 同域请求
http协议默认端口为80
浏览器地址: http://manage.jt.com:/userList.html
Ajax请求地址: http://manage.jt.com:80/aaa/bbb
5. Vue的使用
5.1 vue的概述
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式: 构建项目可以由简单到复杂
5.2 vue的优点
- 体积小 压缩后的文件只有33k；
- 运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM；
- 双向数据绑定，让开发者不再去操作DOM，将更多的经历投入到业务中；
- 生态丰富 市面上有大量的开源项目基于vue 进行开发 成熟稳定；
5.3 vue案例
5.3.1 vue入门案例
入门案例 vue入门案例
{ }}”来对data中的数据进行引用 --> {{hello}}5.3.2 vue指令：
在浏览器解析JS完成之前，用户看到的数据是{{msg}}，直到浏览器加载完全部JS则{{msg}}才替换为具体的数据。
v-cloak 这个指令保持在元素上，直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
vue的指令 {{msg}}
{{msg}}
{{one}}5.3.3 双向数据绑定
v-model指令： 数据绑定;只能标识可以编辑的标签；
1.数据与页面绑定，数据变化，则页面数据同步修改；
2.页面与数据绑定，页面值发生变化，则数据同步修改；
双向数据绑定 数据录入:5.3.4 MVVM思想
- 字母解释
M： model 数据
V ：view 视图
VM： (view-model) 数据和视图的控制
- 当页面数据发生变化时,则通过dom监听将数据传给model，当model的数据发生变化时,则通过数据绑定到页面中。
5.4 事件绑定
5.4.1 事件绑定 v-on 指令
事件的绑定 数值：{{num}}5.4.2 事件访问修饰符
@click.stop、@click.prevent
事件访问修饰符 数值：{{num}}5.4.3 按键访问修饰符
按键访问修饰符 回车触发: 空格触发:5.4.4 综合案例
计算器 数1:
数2:
总数:5.4.5 属性绑定
属性的绑定 5.5 分支结构
分支结构 考试成绩等级
录入成绩优秀良好一般及格不及格5.6 循环结构
循环结构 循环遍历数组
{{item}}
循环遍历对象
{{item}}{{key}}----{{value}}
{{key}}----{{value}}-----{{index}}
循环遍历集合
ID编号:{{user.id}}
姓名:{{user.name}}
年龄:{{user.age}}
5.7 表单数据提交
5.7.1 表单数据提交
表单数据提交 5.7.2 双向绑定属性
表单数据提交
name属性的长度: {{user.name.length}}
观察响应现象:{{user.name}}5.7.3 计算属性
计算属性 用户输入:
数据展现:{{msg.split('').reverse().join('')}}
计算属性:{{reverse}}5.8 vue生命周期
5.8.1 主要阶段
5.8.2 页面结构调用
测试vue生命周期函数 5.9 Vue数组的操作
数组的操作 {{item}}
6. VUE组件化
7. Vue前端交互
7.1 Promise概述
Promise是一种异步编程的解决方案，从语法上Promise是一个对象，从它身上可以获取异步调用的信息。
作用:
1.有效避免回调地狱问题 典型的Ajax嵌套问题 (闭包方式)
2.Promise对象提供了简洁的API 用法简单
7.2 Axios方式
7.2.1 Axios介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
7.2.2 Axios入门案例
- 1.对象方式实现数据传参
![[工业自动化-1]：PLC架构与工作原理](https://img-blog.csdnimg.cn/ce10a1471ed14382bc58364cf8bd5209.png)
还没有评论，来说两句吧...