前端开发Web
Ajax
概念:Asynchronous JavaScriptAnd XML，异步的JavaScript和XML
作用:
数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等
同步与异步
同步需“等待”，异步不需要
原生Ajax（较繁琐，一般不用）
1.准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
2.创建XMLHttpRequest对象:用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
Axios
简化了Ajax的书写
Axios入门
说明：
两个属性：method和url，method代表请求方式，url代表请求路径，如果要获取服务端响应回来的数据，后面就加上.then，之后传递一个函数（成功回调），该函数是Axios请求成功之后自动调用的函数，在该成功回调函数中可以接受一个JS对象result，然后通过result.data拿到result对象中的data属性，该data属性就是服务器响应回来的数据
请求方式别名：
axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, datal, config]])
发送GET请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{fconsole.log(result.data);
});
发送POST请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then((result) =>{console.log(result.data);
});
说明：http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld为请求路径，逗号后面为请求参数
简化：
前后端分离开发
YAPi
介绍:YApI是高效、易用、功能强大的ap1管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
地址：http://yapi.smart-xwork.cn/
1.添加项目
2.添加分类
3.添加接口
调用接口时需要传递请求参数
请求方式：GET；后面为请求路径
执行完毕后会返回数据
基本信息：
完善之后会自动生成一个Mock地址，前端人员在测试时可直接访问这个地址，会自动生成Mock测试数据，如下：
该数据是我们刚才在定义接口时所指定的字段，就是根据该字段规则返回的，如下：
如果要期望值，可以点击“高级Mock”，添加期望：
前端工程化
前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化
环境准备
Vue项目简介
命令行:vue create vue-project01
图形化界面:vue ui
目录结构
启动
方式一：
方式二：
开发流程
Vue组件库Element
什么是Element
Element:是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
组件:组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等
官网：https://element.eleme.cn/#/zh-CNListener
快速入门
原文地址：https://blog.csdn.net/Qiuhuaian/article/details/145266251
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！