WebAPI接口对接：

提示：此片文章是总结接口对接经验其中包括模型的建立以及统一的调用

---

学习内容：

1. 数据对象模型的建立
2. 如何规范定义模型
3. 统一的请求方法
4. 系统中model的命名

---

• 数据对象的建立

接口的数据传输对象包括Request对象和Response对象

每一个接口都单独建立一个文件夹

• 规范定义模型

定义一个统一的父类（这是Request的统一父类）
GetApi方法是用于获取接口请求路径用的 (这里要注意Request是继承ResPonse的)

这里是Response的父类，父类中又接口的公用属性，每个接口返回都又这些参数。

接下来我们来看一个接口的返回和请求类

请求数据传输对象

返回数据对象

• 统一的请求方法

当然你有可以继承这个请求方法的接口去根据每一个接口的需求重写它
例如

其实这种写法用到的领域驱动设计

系统中model的命名规则

关于DO，DTO和VO在项目

DO：对应数据库表结构

VO：一般用于前端展示用

DTO：用于数据传递（接口入参和接口返回值都可以）

---

Web APIs

API

API：应用程序接口，可以通过提供的接口直接使用某种功能。相当于插座上的接口。

它们是基于对象的

对象是API使用的数据（包含在对象属性中）的容器以及API提供的功能（包含在对象方法中）。

客户端 JS中API

不是JS的一部分，但是是在JS的基础上构建的。
种类：

1. 浏览器API（内置于Web浏览器中）
   作用：从浏览器和电脑周边环境中提取数据，并用来做有用的复杂的事情
2. 第三方API（不在Web浏览器中）
   作用：必须在Web中的某个地方获取代码和信息。
   

操作文档

使用文档对象模型Document Object Model （DOM）操作WEB文档。
作用：使用Document对象 操作文档结构，操作HTML和CSS — 创建、移除以及修改HTML，动态地应用新样式。

navigator表示浏览器存在于web上的状态和标识（即用户代理）。
可以用这个对象获取一些信息，比如来自用户摄像头的地理信息、用户偏爱的语言、多媒体流等等。

window是载入浏览器的标签
窗口大小：Window.innerWidth和Window.innerHeight

document（在浏览器中用DOM表示）是载入窗口的实际页面。
用这个对象来返回和操作文档中HTML和CSS上的信息。获取DOM中一个元素的引用，修改其文本内容，并应用新的样式，创建新的元素并添加为当前元素的子元素，甚至把他们一起删除。

文档对象模型

DOM（文档对象模型）是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本。
DOM树整个文档的以 “树结构” 的形式呈现。

DOM操作

• 修改节点内容

1. 元素引用：选择要操作的元素，并将它的引用存储在对象中（const 或 var）；
2. 根据元素属性进行修改

• 创建新结点

1. document.create()创建一个段落节点, 添加结点内容,追加到文档(网页)后方 appendChild().
2. 创建文本节点 document.createTextNode()

移动和删除元素

1. 移动到末尾:

父元素.appendChild(元素引用);

2. 删除节点:

删除节点.parentNode.removeChild(删除节点);

操作样式

1. 动态设置样式 – 内联样式

元素引用.style.属性 = '';

属性名的规则是小驼峰命名法.

para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';

2. 设置元素属性 – 类（更加正式，没有css，js混合）

 Element.setAttribute();

eg:

<style>
.highlight {
  color: white;
  background-color: black;
  padding: 10px;
  width: 250px;
  text-align: center;
}
</style>

para.setAttribute('class', 'highlight');

任意时刻，窗口占满；

        // 元素引用
        var div = document.querySelector('div');
        // 窗口大小
        var WIDTH = window.innerWidth;
        var HEIGHT = window.innerHeight;

        // 改变div宽高
        div.style.width = WIDTH + 'px';
        div.style.height = HEIGHT + 'px';

        // 窗口改变大小时，触发
        window.onresize = function() {
            winWidth = window.innerWidth;
            winHeight = window.innerHeight;
            div.style.width = winWidth + 'px';
            div.style.height = winHeight + 'px';
        }

网页实例:动态购物清单

支持回车添加item。

从服务器获取数据的API

API：包括XMLHttpRequest和Fetch API。（Ajax）
作用：更新网页的一小部分。

最初:

缺点: 更新网页的任何一部分都需要,重新加载整个网页.


后来 :

使用AJAX更新页面的一部分 ：

• 不刷新页面更新网页;
• 在页面加载后从服务器请求数据;
• 在页面加载后从服务器接收数据;
• 在后台向服务器发送数据;
  AJAX 代表异步 JavaScript 和 XML
  
  为了进一步提高速度，有些网站还会在首次请求时将某些存储在用户的计算机上,如下图 :
  

基本的Ajax请求 XHR和 Fetch

body：

    <h1>Ajax的起点</h1>

    <form>
        <label for="verse-choose">选择一个节</label>
        <select id="verse-choose" name="verse-choose">
            <option>Verse 1</option>
            <option>Verse 2</option>
            <option>Verse 3</option>
            <option>Verse 4</option>
        </select>
    </form>

    <h2>征服蠕虫，<em>埃德加·爱伦·坡，1843年</em></h2>

    <pre>

    </pre>

XMLHttpRequest

        const verseChoose = document.querySelector('select');
        const poemDisplay = document.querySelector('pre');

        verseChoose.onchange = function() {
            const verse = verseChoose.value;
            updateDisplay(verse);
        };

        function updateDisplay(verse) {
            verse = verse.replace(" ", "");
            verse = verse.toLowerCase();
            let url = verse + '.txt';

            let request = new XMLHttpRequest();
            request.open('GET', url);
            request.responseType = 'text';

            // 从网络获取资源是一个 "异步" 操作,等他结束才能继续操作
            request.onload = function() {
                poemDisplay.textContent = request.response;
            }

            request.send();

            // --------------------------------------------------
            // fetch(url)
            //     .then(response => response.text())
            //     .then((text) => {
            //         poemDisplay.textContent = text;
            //     })
        }

        updateDisplay('Verse 1');
        verseChoose.value = 'Verse 1';

fetch

fetch() 返回一个解析HTTP响应的promise, 你在 .then() 中定义的任何函数会被自动给与一个响应作为一个参数，这个参数可以取任何名字。

1. fetch的响应：response.ok表示响应是否成功。
   2.响应失败， 响应的网络状态和描述性消息分别包含在response.status和response.statusText属性中。
2. 响应成功，响应结果的类型：response.blob()图像或视频,text(),json();

        const verseChoose = document.querySelector('select');
        const poemDisplay = document.querySelector('pre');

        verseChoose.onchange = function() {
            const verse = verseChoose.value;
            updateDisplay(verse);
        };

        function updateDisplay(verse) {
            verse = verse.replace(" ", "");
            verse = verse.toLowerCase();
            let url = verse + '.txt';

            // let request = new XMLHttpRequest();
            // request.open('GET', url);
            // request.responseType = 'text';

            // // 从网络获取资源是一个 "异步" 操作,等他结束才能继续操作
            // request.onload = function() {
            //     poemDisplay.textContent = request.response;
            // }

            // request.send();

            // --------------------------------------------------
            fetch(url)
                .then(response => response.text())
                .then((text) => {
                    poemDisplay.textContent = text;
                })
        }

        updateDisplay('Verse 1');
        verseChoose.value = 'Verse 1';

响应失败防范措施：

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error: ${response.status}`);
                }
                return response.blob();
            })
            .then(blob => showProduct(blob, product))
            .catch(err => console.error(`Fetch problem: ${err.message}`));

第三方 API

许多大型网站和服务提供的API就是第三方API，他们允许开发者使用他们的数据或服务。
第三方API，从某种角度讲，植根于第三方服务器上。

1. 组织url

2. 请求头

3. 请求响应成功（是/否）

4. 数据处理

5. 使用数据

绘制2D图形 canvas

作用：以编程方式更新包含在HTML <canvas> 元素中的像素数据创建2D和3D场景的Canvas和WebGL。eg：动画循环window.requestAnimationFrame()

浏览器包含强大的图形编程工具, 如:可缩放矢量图形 (SVG)到<canvas> 元素( Canvas API 和 WebGL ).
网页的进步过程是: 纯文字 → img → background-image 和 SVG → 2D: canvas(画布和Canvas API 用来生成动画, 游戏画面, 数据分析图) → 3D: WebGL

填充颜色

fill填充
画布实例：

1. 在 HTML 中插入一个 <canvas> 元素，创建画布并确定尺寸;

<canvas class="myCanvas">
  <p>添加恰当的反馈信息。</p>
</canvas>

2.JS

        // 画布的基础设置
        // 1.对画布元素进行引用
        const canvas = document.querySelector('.myCanvas');

        // 2设置画布宽高
        var width = canvas.width = window.innerWidth;
        var height = canvas.height = window.innerHeight;

        // 3.对画布的上下文引用并设置格式,用来绘图
        const ctx = canvas.getContext('2d');

        // 画布api
        // 4.填充样式
        ctx.fillStyle = 'rgb(0,0,0)';

        // 5.填充矩形
        ctx.fillRect(0, 0, width, height);

		// 自适应浏览器窗口
        // window.onresize = function() {
        //     let width = canvas.width = window.innerWidth;
        //     let height = canvas.height = window.innerHeight;
        //     ctx.fillRect(0, 0, width, height);
        // }

ctx.fillRect(0, 0, width, height)：

注意：
新层覆盖旧层，绘制顺序十分重要。

绘制线条

stroke绘制边框

        // 6.线条颜色,宽度
        ctx.strokeStyle = 'rgb(255,0,255)'
        ctx.lineWidth = 10;

        // 绘制图形
        ctx.strokeRect(25, 25, 175, 200);

        // 画布的基础设置
        // 1.对画布元素进行引用
        const canvas = document.querySelector('.myCanvas');

        // 2设置画布宽高
        var width = canvas.width = window.innerWidth;
        var height = canvas.height = window.innerHeight;

        // 3.对画布的上下文引用并设置格式,用来绘图
        const ctx = canvas.getContext('2d');

        // 画布api
        // 4.填充样式
        // ctx.fillStyle = 'rgba(0,0,0,0.75)';

        // 5.填充矩形
        // ctx.fillRect(0, 0, width, height);

        // 绘制线条
        // 6.线条颜色,宽度
        ctx.strokeStyle = 'rgb(255,0,255)'
        ctx.lineWidth = 10;

        // 7.绘制图形
        ctx.strokeRect(25, 25, 175, 200);

绘制路径

beginPath()：在钢笔当前所在位置开始绘制，默认情况下， 钢笔起始位置为 (0, 0)。
moveTo()：不留痕迹的将钢笔“跳”至新位置。
fill()：通过为当前所绘制路径的区域填充颜色来绘制一个新的填充形状。
stroke()：通过为当前绘制路径的区域描边，来绘制一个只有边框的形状。
路径也可和矩形一样使用 lineWidth 和 fillStyle / strokeStyle 等功能。

画线填充

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制路径</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas class="myCanvas">
        <p>Add suitable fallback here.</p>
    </canvas>

    <script>
        const canvas = document.querySelector('.myCanvas');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
        const ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgb(0,0,0)';
        ctx.fillRect(0, 0, width, height);

        // 准备颜色
        ctx.fillStyle = 'rgb(255, 0, 0)';
        // 放入钢笔 -- 开始
        ctx.beginPath();
        //更换钢笔落笔位置
        ctx.moveTo(50, 50);
        // lineTo 移动到
        ctx.lineTo(150, 50);
        var triHeight = 50 * Math.tan(degToRad(60));
        ctx.lineTo(100, 50 + triHeight);
        ctx.lineTo(50, 50);
        // 绘制路径 -- 结束并填充颜色
        ctx.fill();

        // js使用弧度值 
        // 函数：角度转弧度
        function degToRad(degrees) {
            return degrees * Math.PI / 180;
        }
    </script>
</body>

</html>

画圆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制路径</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas class="myCanvas">
        <p>Add suitable fallback here.</p>
    </canvas>

    <script>
        // 1.准备画板
        const canvas = document.querySelector('.myCanvas');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
        const ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgb(0,0,0)';
        ctx.fillRect(0, 0, width, height);

        // 2.准备颜色
        ctx.fillStyle = 'rgb(0, 0, 255)';
        // 3.放入画笔
        ctx.beginPath();

        // 4.画圆,圆心,半径,弧度起点,弧度终点,逆时针方向(弧度为零的点是时钟三的位置)
        ctx.arc(100, 100, 100, degToRad(0), degToRad(-90), true);

        // 6.绘制路径,提笔填充线围成的图形
        ctx.fill();

        ctx.fillStyle = 'yellow';
        ctx.beginPath();
        ctx.arc(100, 100, 50, degToRad(0), degToRad(90), false);
        ctx.lineTo(100, 100);
        ctx.fill();

        // js使用弧度值 
        // 函数：角度转弧度
        function degToRad(degrees) {
            return degrees * Math.PI / 180;
        }
    </script>
</body>

</html>

绘制文本

fillText() ：绘制有填充色的文本。
strokeText()：绘制文本外边框（描边）。

        // 文本外边框 -- 描边
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 1;
        ctx.font = '36px arial';
        ctx.strokeText('Canvas text', 50, 50);

        // 文字
        ctx.fillStyle = 'red';
        ctx.font = '48px georgia';
        ctx.fillText('Canvas text', 50, 150);

绘制图片

            // 绘制图片1：图片对象，起点，图片宽高
            // ctx.drawImage(image, 50, 50, 100, 100);
            // 绘制图片2：图片对象，裁剪图片（图片的左上角默认0,0），裁剪尺寸，绘制的位置，200尺寸
            ctx.drawImage(image, 20, 30, 400, 250, 50, 100, 300, 200);

<body>
    <canvas class="myCanvas">
        <p>Add suitable fallback here.</p>
    </canvas>

    <script>
        // 1.准备画板
        const canvas = document.querySelector('.myCanvas');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
        const ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgb(0,0,0)';
        ctx.fillRect(0, 0, width, height);

        // 将相片嵌入画布
        var image = new Image();
        image.src = './images/tea.jpg';
        image.onload = function() {
            // 绘制图片1：图片对象，起点，图片宽高
            // ctx.drawImage(image, 50, 50, 100, 100);
            // 绘制图片2：图片对象，裁剪图片（图片的左上角默认0,0），裁剪尺寸，绘制的位置，200尺寸
            ctx.drawImage(image, 20, 30, 400, 250, 50, 100, 300, 200);
        }
    </script>
</body>

网页实例:动画实例

网页实例:动画实例

3D

视频和音频 API

HTML5提供了<video>和<audio>元素，通过自身api控制视频和音频，进度。

    <video controls>
        <source src="./video/475829081-1-112.mp4" type="video/mp4" />
        <source src="./video/475829081-1-112.webm" type="video/webm" />
        <p>
            你的浏览器不支持HTML5的视频,请<a href="rabbit320.mp4">点击链接</a>
            观看。
        </p>
    </video>

video标签内的段落在浏览器不支持video标签事才显示
controls属性会启用默认的播放控件，但是跨浏览器的支持方面存在问题。可以通过删除controls属性，使用HTMLMediaElement API来控制视频和音频的功能。

设备API

对网络应用程序有用的方式操作和检索现代设备硬件中的数据的API。如：地理定位API

客户端存储

在用户电脑web客户端存放数据的方法，可以保留自己的个性化配置，如主题、是否登录过，线下访问

HTTP cookie （Web cookie）

示例

示例1:

Set-Cookie: <cookie名>=<cookie值>

示例2:

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

过期时间，以客户端时间为准。

示例3:

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

secure ： 可以预防 man-in-the-middle 攻击者的攻击
HttpOnly ： 此类 Cookie 仅作用于服务器。

Cookie 的作用域

Domain 和 Path 标识定义了Cookie的作用域：即允许 Cookie 应该发送给哪些URL。

Domain：
不写，默认origin，不包含子域名。
如果指定Domain，通常包含域名。如

Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）。

Path：
Path 标识指定了主机下的哪些路径可以接受 Cookie（该 URL 路径必须存在于请求 URL 中）。如

Path=/docs
以下地址也会包含在内
/docs
/docs/Web/
/docs/Web/HTTP

SameSite :
SameSite Cookie 允许服务器要求某个 cookie 在跨站请求时不会被发送，可以阻止跨站请求伪造攻击（CSRF）。

Set-Cookie: key=value; SameSite=Strict

SameSite 的三种值

None。浏览器会在同站请求、跨站请求下继续发送 cookies，不区分大小写。
Strict。浏览器将只在访问相同站点时发送 cookie。（在原有 Cookies 的限制条件上的加强，如上文 “Cookie 的作用域” 所述）
Lax。与 Strict 类似，但用户从外部站点导航至URL时（例如通过链接）除外。 在新版本浏览器中，为默认选项，Same-site cookies 将会为一些跨站子请求保留，如图片加载或者 frames 的调用，但只有当用户从外部站点导航到URL时才会发送

---

Cookie曾经用于客户端数据的存储，由于每次向服务端发送请求时都会携带cookie，带来性能的下降，所以现在渐渐被淘汰。取而代之的是用 Web storage API （本地存储和会话存储）或 IndexedDB 。
Web storage 用于存储少量数据；
indexedDB 用于存储大量结构化数据；

Web storage ：
sessionStorage 存储的数据在浏览器打开期间都可以用，包括重新加载和恢复。
localStorage 浏览器关闭后重新打开，数据仍然存在。

indexedDB ：

编写总结不易 点赞关注收藏三连一波 哈哈哈
使用axios请求库前提
封装 axios 工具，编辑 src/api/index.js 文件
首先，我们要使用 axios 工具，就必须先安装 axios 工具。执行下面的命令进行安装

npm install axios -D

由于宿舍翻墙条件不好，这里使用 cnpm 替代

这样，我们就安装好了 axios 工具了。

一 ，
新建了一个 src/api/index.js
配置封装axios请求

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'  //写死的地址
var root = '/apis';   //动态切换  配合配置文件   正常是config文件
// 引用axios
var axios = require('axios')
// 自定义判断元素类型JS
function toType (obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}

/*
接口处理函数
这个函数每个项目都是不一样的，我现在调整的是适用于
https://cnodejs.org/api/v1 的接口，如果是其他接口
需要根据接口的参数进行调整。参考说明文档地址：
https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
主要是，不同的接口的成功标识和失败提示是不一致的。
另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/

function apiAxios (method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL: root,
    withCredentials: false
  })
  .then(function (res) {
    if (res.data.success === true) {
      if (success) {
        success(res.data)
      }
    } else {
      if (failure) {
        failure(res.data)
      } else {
        window.alert('error: ' + JSON.stringify(res.data))
      }
    }
  })
  .catch(function (err) {
    let res = err.response
    if (err) {
      window.alert('api error, HTTP CODE: ' + res.status)
    }
  })
}


// 返回在vue模板中的调用接口
export default {
  get: function (url, params, success, failure) {
    return apiAxios('GET', url, params, success, failure)
  },
  post: function (url, params, success, failure) {
    return apiAxios('POST', url, params, success, failure)
  },
  put: function (url, params, success, failure) {
    return apiAxios('PUT', url, params, success, failure)
  },
  delete: function (url, params, success, failure) {
    return apiAxios('DELETE', url, params, success, failure)
  }
}

调整 main.js 绑定 api/index.js 文件
因为原始文件就配置得比较好，就是加上两行定义
原始是

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
修改添加后


import Vue from 'vue'
import App from './App'
import router from './router'


// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api


Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

修改一下 src/page/index.vue 文件，将代码调整为以下代码：

<template>
  <div>index page</div>
</template>
<script>
export default {
  created () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}
</script>

这里是调用 cnodejs.org 的 topics 列表接口，并且将结果打印出来。
https://img-blog.csdn.net/20170826143745291?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnVuZ0xlbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
以上是所有人可以调试的接口 以及写死的接口
以下是个人动态的接口以及代理配置 因为是开发环境需要
至于为什么会需要代理 是因为跨域问题 具体各位百度 个人知识浅薄 可能讲的不好
配置文件 vue.config.js
位置在项目根目录下（因为好多博客并不说明文件位置 像我一样小白会当初傻逼）

const vueConfig = {
  devServer: {
    // development server port 8000
    port: 8085,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
      '/apis': {
//  /apis对接匹配你接口文件的之后动态的路径
        target: 'http://116.199.15.19:8070/apis',
        // target: 'http://192.168.3.105:8001',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/apis': '/',
        },
      },
      '/files': {
        target: 'http://116.199.15.19:8070/files',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/files': '/',
        },
      },
    },
  },
};
module.exports = vueConfig;

到此你接口配置好了 接下来就是对于接口url接上具体的文件名称之类，以及对于验证参数的传参之类的 以下是我的登录验证 src/view/login.vue
handlevalue()方法就是对接口进行补充传参验证做路由跳转

<template>
  <div id="components-layout-demo-basic">
    <a-layout class="layout-login">
      <a-layout-header>
        <div>
          <div>
            <img src="@/assets/logo-header.svg" alt="" style="height: 44px; margin-right: 16px; border-style: none" />
            <span class="header-title">Ant Design</span>
          </div>


          <div class="desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
        </div>
      </a-layout-header>
      <a-layout-content class="content-body">
        <div class="content-header">
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="账户密码登录">
              <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
                <a-form-item style="text-align: left">
                  <a-input
                    v-decorator="['userName', { rules: [{ required: true, message: '请输入帐户名或邮箱地址' }] }]"
                    class="input-header"
                    placeholder="账户: admin"
                    size="large"
                  >
                    <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
                  </a-input>
                </a-form-item>
                <a-form-item style="text-align: left">
                  <a-input-password
                    v-decorator="['password', { rules: [{ required: true, message: '请输入密码！' }] }]"
                    type="password"
                    placeholder="密码: admin or ant.design"
                    size="large"
                    userName
                  >
                    <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
                  </a-input-password>
                </a-form-item>
                <!-- <a-form-item>
                  <a-checkbox
                    v-decorator="[
                      'remember',
                      {
                        valuePropName: 'checked',
                        initialValue: true,
                      },
                    ]"
                    class="checkbox-left"
                  >
                    记住密码
                  </a-checkbox>
                  <a class="login-form-forgot" href=""> 自动登录 </a>
                  <a-button type="primary" html-type="submit" class="login-form-button"> 登录 </a-button>
                  Or
                  <a href=""> register now! </a>
                </a-form-item> -->
              </a-form>
            </a-tab-pane>
            <a-tab-pane key="2" tab="手机号登录" force-render style="text-align: left">
              <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
                <a-form-item>
                  <a-input
                    v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号' }] }]"
                    class="input-header"
                    placeholder="手机号"
                    size="large"
                  >
                    <a-icon slot="prefix" type="mobile" style="color: rgba(0, 0, 0, 0.25)" />
                  </a-input>
                </a-form-item>
                <a-form-item @submit="handleSubmit">
                  <span>
                    <a-input
                      v-decorator="['verificationCode', { rules: [{ required: true, message: '请输入验证码！' }] }]"
                      type="password"
                      placeholder="验证码"
                      size="large"
                      style="float: left; width: 65%"
                    >
                      <a-icon slot="prefix" type="mail" style="color: rgba(0, 0, 0, 0.25)" />
                    </a-input>
                    <a-button size="large" style="float: right; font-size: 14px; width: 30%" html-type="submit"> 获取验证码 </a-button></span
                  >
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="content-header">
          <a-form id="components-form-demo-normal-login" class="login-form" @submit="handleSubmit">
            <a-form-item>
              <a-checkbox
                v-decorator="[
                  'remember',
                  {
                    valuePropName: 'checked',
                    initialValue: true,
                  },
                ]"
                class="checkbox-left"
                >自动登录
              </a-checkbox>
              <a class="login-form-forgot" href=""> 忘记密码 </a>


              <a-button size="large" type="primary" class="login-form-button" html-type="submit" @click="handlevalue()">登录</a-button>
              <!-- <router-link :to="{ path: this.routervalue }">登录</router-link> -->
            </a-form-item>
            <div style="text-align: left">
              <span style="float: left">其他登录方式</span><a-icon class="icon-all" type="alipay" /><a-icon class="icon-all" type="taobao" /><a-icon
                class="icon-all"
                type="weibo"
              />
              <a style="float: right" href=""> 注册账户 </a>
            </div>
          </a-form>
        </div>
      </a-layout-content>
      <a-layout-footer class="footer">
        <div style="padding-left: 40px; margin-bottom: 8px">
          <span style="padding-right: 40px">帮助</span><span style="padding-right: 40px">隐私</span><span style="padding-right: 40px">条款</span>
        </div>
        <div>Copyright © 2018 vueComponent</div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routervalue: '',
      name: '',
      password: '',
      // status: '',
      // name: this.form.getFieldValue('userName'),
      // form: [
      //   {
      //     password: '',
      //     userName: '123',
      //     phone: '',
      //     verificationCode: '',
      //   },
      // ],
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },


  mounted() {},
  methods: {
    callback(key) {
      // console.log(key);
    },
    handlevalue() {
      this.name = this.form.getFieldValue('userName');
      this.password = this.form.getFieldValue('password');
      this.$api.post('/auth/login', { userName: this.name, password: this.password }, (r) => {
        const status = '';
        this.status = r.success;
        // console.log(this.status);
        // console.log(this.name);
        // console.log(this.password);
        if ((this.status = true)) {
          this.routervalue = '/home';


          console.log(this.status);
          console.log(this.form.getFieldValue('password'));
          console.log(this.name);
          this.$router.push(this.routervalue);
        }
      });
    },


    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
  },
};
</script>
<style>
#components-layout-demo-basic {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: transparent;
  /* color: red; */
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}


#components-layout-demo-basic .ant-layout-content {
  background: transparent;
  /* color: red; */
  /* min-height: 120px; */
  line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
.layout-login {
  width: 100%;
  min-height: 540px;
  background: #f0f2f5 url(../assets/bg-login.svg) no-repeat 50%;
  background-size: 100%;
  position: relative;
  padding: 54px 0 74px;
}
.header-title {
  font-size: 33px;
  color: rgba(0, 0, 0, 0.85);
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-weight: 600;
  position: relative;
  top: 10px;
}
.desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 0px;
  margin-top: 15px;
  margin-bottom: 40px;
}
.content-header {
  margin-top: 200px;
  width: 368px;
  /* height: 350px; */
  overflow: auto;
  margin: auto;
  /* position: absolute;
  top: 250px;
  left: 0;
  right: 0; */
}
.content-body {
  margin-top: 70px;
}
.checkbox-left {
  float: left;
}
.input-header {
  height: 40px;
}
.icon-all {
  /* color: rgba(0, 0, 0, 0.2); */
  color: #f0f2f5;
  font-size: 18px;
  background-color: rgb(192, 194, 196);
  border-radius: 20px;
  margin-left: 16px;
  padding: 3px;
}
.footer {
  width: 100%;
  bottom: 0;
  padding: 0 16px;
  margin: 48px 0 24px;
  text-align: center;


  color: rgba(0, 0, 0, 0.45);
}
/* 表单 */
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
  margin-top: 24px;
}
</style>

参考https://blog.csdn.net/fungleo/article/details/77601761
编写总结不易 点赞关注收藏三连一波 哈哈哈