前端开发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

快速入门

常见组件（复制粘贴的过程）

Table表格

找到Table表格，点击显示代码

一、先将el-table复制

说明：

参数	说明	类型	可选值	默认值
data	显示的数据	array

border

是否带有纵向边框

boolean

:data指的是绑定的数据模型，就是下面定义的数组对象。数组当中就是一个个的JS对象

style设置样式

el-table-column：每一个代表一列

prop：这一列要展示的是这个对象中的哪一个属性。例如：第一列展示date属性，第二列展示name属性等

width表示宽度

分页

需要定义size-change和current-change这两个方法方便调用

size：控制每页展示多少条

prev：是否展示上一页的按钮

pager：展示每一页的页码

next：下一页的按钮是否展示

jumper：是否要展示前往多少页这个选项

total：是否要展示总页数

参数	说明	类型	可选值	默认值
background	是否为分页按钮添加背景色	boolean	—	false
layout	组件布局，子组件名用逗号分隔	String	`sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`	'prev, pager, next, jumper, ->, total'