Axios

概念

一个基于Promise的HTTP库，主要用来向服务器发发送Ajax请求，并在请求过程中做一些处理。
特性：

• 可以在浏览器中发送XMLHttpRequest
• 可以在node.js发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 能够取消请求
• 自动转换JSON数据
• 客户端可以防止XSRF攻击

使用

安装

npm install axios --save

引入

import axios from 'axios'

API方法

• reque(config)
• get(url, [config])
• delete(url, [config])
• head(url, [config])
• options(url, [config])
• post(url, [config])
• put(url, [config])
• patch(url, [config])

其他内容参见Axios相关知识点总结

请求配置

{// 用于请求服务器的URLurl: '/usr',// 创建请求使用的方法，有两种，分别是get和postmethod: 'get',// 将自动追加在url前面，除非url是一个绝对url// 可以通过设置一个baseUrl便于方法传递相对URLbaseUrl: 'http://domain/api/',// 允许在向服务器发送之前，修改请求数据//  只能用于put、delete、和patch这几个请求参数中// 后面数组中的函数必须返回一个字符串、ArrayBuffer或streamtransformRequest: [function(data, headers){return data;}],// 在传递给then/catch之前，允许修改响应数据transformResponse: [function(data){return data;}],// 自定义请求头headers:{'X-Requested-With', 'XMLHttpRequest'},// 跟随请求一起发送的URL参数//必须是一个五个是对象或者URLSearchParmas对象params: {id: 12345},// 负责params序列化函数paramsSerializer: function(params){return Qs.stringify(parmas, {arrayFormat: 'brackets'})},// 作为请求主体时，被发送的数据//  只适用于put、post和patch方法// 在没有设置transformRequest时，必须是以下类型之一// -string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams// -浏览器专属：FormData、File、Blob// -Node专属：Streamdata: {firstName: 'Fred'},// 请求超时毫秒数（0表示无超时时间）// 如果请求超时，那么请求会被中断timeout: 100,// 表示跨域请求时是否需要使用凭证withCredentials: false,// 允许自定义处理请求，以求测试更轻松adapter: function(){// ...},// auth表示应该使用HTTP基础验证，并提供凭证// 设置一个Authorization头，覆盖掉现有使用的headers设置的自定义Authorization头auth: {username: 'zs',password: '12345'},// 服务器响应读数据类型responseType: 'json',// 响应字符集 默认responseEncoding: 'utf8',// 用作xsrf token的值的cookie的名称xsrfCookieName: 'XSRF-TOKEN',// defaultxsrfHeaderName: 'X-XSRF-TOKEN',// onUploadProgress允许为上传处理进度事件onUploadProgress: function(processEvent){// 对原生进度事件进行处理},// onDownloadProgress允许为下载处理进度事件onDownloadProgress:  function(progressEvent){// 对原生进度事件进行处理},// 定义允许的响应内容的最大尺寸maxContentLength: 2000,// 定义对给定的HTTP响应状态码是resolve或者reject promise// 如果validateStatus返回true，promise将会被resolve，否则会被rejectvalidateStatus: function(status){return status>= 200 &&status < 300; //default},// 在node.js中follow的最大重定向数目// 如果设置为0，则将不会follow任何重定向maxRedirects: 5, //default//HttpAgent和HttpsAgent分别在node.js中用于定义在执行http和https时使用的自定义代理//keepAlive默认不启用httpAgent: new http.Agent({keepAlive: true}),httpsAgent: new https.Agent({keepAlive: true}),//定义代理服务器的主机名称和端口// auth表示http基础验证应当用于连接代理，并提供凭据// 这将会设置一个proxy-authorization头// 覆写掉已经通过header设置的自定义proxy-authorization头proxy: {host: '127.0.0.1',port: 9000,auth: {username: 'zs',password: '123456'}}
}

跨域处理

跨域：浏览器不能执行其它网站的脚本，是由浏览器的同源（协议、域名、端口号都相同）策略造成的，施加的安全限制。

特别说明：localhost和127.0.0.1虽然都指向本机，但也属于跨域

Vue3.0解决跨域两种方式：

• 在服务端进行跨域处理
• 在Vue-cli脚手架进行处理

Axios本身不可以，可以使用代理的方式来解决。代理可以解决的原因：因为客户端请求服务器的数据是 存在跨域的，而服务器与服务器之间可以相互请求是没有跨域概念的。所以过程是：配置一个代理的服务器，然后去请求另外一个服务器的数据，然后把请求获取到的数据返回到代理服务器上，代理服务器再返回给客户端，以此来解决。

实现步骤

• 1.在Vue-cli脚手架根目录下创建vue.config.js文件
• 2.增加下面的内容

module.exports = {publicPath: '/',devServer: {proxy: {'/api': {// 接口域名target: 'https://www.lb.com',// 是否跨域changeOrigin: true,// 是否处理websocketsws: true,// 是否https接口secure: true,//路径重写 pathRewrite: {// 请求http://www.lb.com/login.php，这时候直接写成/api/login.php// 替换target中的请求地址'^/api': ''}}]}
}

特别说明：每次修改vue.config.js文件后，需要重启项目才能生效。

Element Plus

基于Vue3.0实现的一套不依赖业务的UI组件库。

使用

安装

npm install element-plus --save

引入

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

内置过渡动画

定义内置的过渡动画，包括淡入淡出、缩放和展开折叠：

• 元素淡入方式有两种：ele-fade-in-linear和el-fade-in
• 元素缩放有三种：el-zoom-in-center（中心缩放）、el-zoom-in-top（往上缩放）和el-zoom-in-buttom（向下缩放）
• 使用el-collapse-transition组件实现折叠效果

特别说明：使用内置过渡动画的标签外层必须使用嵌套的<transition>标签，并添加name属性，属性值为进行某种过渡动画的样式类名。

组件

布局

ElementPlus随着屏幕或者窗口尺寸的增加，系统会自动把浏览器窗口分为最多24栏，结合媒体查询，就可以制作出强大的响应式栅格系统。
通过提供的row和col组件，并通过col组件的span属性可以自由的布局；当需要一定的间隔时，row组件提供的gutter属性来指定每个栏之间的间隔。
ElementPlus参照Boostrap的响应式设计，预设了5个响应尺寸：xs（<768px）、sm（≥768px）、md（≥992px）、lg（≥1200px）和xl（≥1920px）。

图标与按钮

提供有一套常用的图表集合，直接通过设置类名即可使用，详见网址。

表单

提供了许多表单元素样式。表单元素一定要绑定响应式数据，否则数据将不能输入到表单元素中。

表格

提供了丰富的表格样式以及相关处理，包括数据进行排序、筛选、对比和其他自定义操作。

通知

Notification组件提供通知功能，即悬浮在页面角落，显示全局的通知消息提醒。ElementPlus使用$notify方法接收options操作参数。
有四种类型的通知：

• success成功
• warning警告
• info信息
• error错误

导航菜单

水平导航菜单

默认是垂直模式的，可以通过mode属性改变其方向。
可以通过submenu组件生成二级菜单。

侧边导航菜单

通过el-menu-item-group组件实现菜单分组。

Badge标记

出现在按钮、图标旁边的数字或状态标记。
属性：

• value：展示新消息的数量
• max：自定义属性的最大值
• is-dot：以小红点的形式标注需要关注的内容

轮播图

在页面的指定区间内循环播放的同一类型的图片、文字等内容。

Drawer抽屉

展开时打开一个侧边栏，可以从多个方向进行访问。
两个部分：

• title：需要具名的title的插槽，也可以通过title属性来进行定义，默认是空的。
• body

默认是从右向左打开的，也可以通过direction属性设置其弹出的方向。