精华内容
下载资源
问答
  • 2022-03-28 17:34:02

    一、使用ajax请求
    主要使用到的参数:(url、type、data、dataType、success、error等,其他可根据需求)

    $.ajax({
    	//请求的地址
      url:"http://localhost:8080/json/test.json",     
      //请求方式,可用“get”或者“post”,默认为“get”
      type:"post",   
      //设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
      timeout:10000    
      //Boolean类型的参数,默认为true,即所有请求均为异步请求。为false时为同步请求
      async:true   
      //要求为Object或String类型的参数,发送到服务器端的数据。   
      data:{}       
      //服务器返回的数据类型。常用的数据类型有:text表示纯文本 xml表示xml数据 json表示json对象
      dataType: "json"  
      //要求为Function类型的参数,发送请求前可以修改
      beforeSend:function(option) {
    		//在这里写发送请求前想做的事
    	}  
      //请求成功后响应的回调函数
      success:function(data){
      		console.log(data)
    		//在这里写请求成功后想做的事
    	}
      //请求失败时响应的函数 
      error:function(err){
      		console.log(err)
    		//在这里写请求失败后做的事
    	}    
      //当发送信息至服务器时内容编码类型默认为"application/x-www-form-urlencoded"。
      //其他格式还有application/json,multipart/form-data(多用于表单),text/xml  
       contentType: "application/json"
    })
    

    二、使用axios请求
    这是基于vue中使用的,基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

    this.$axios({
          method:"post",//请求方式post或get  默认get
          url:"http://localhost:8080/json/test.json",//请求的地址
          //请求头参数
          headers:{
          	 token:"e770d10d38bde4027b6783a8102ea56020c1d23f"
          }
          //请求参数
          params:{
             user:"xgb",
             password:"123456"
          }
          //请求体
          data:data,
          timeout:10000 //超时时间
    }).then((res) =>{
          console.log(res)
          //在这里写请求成功后想做的事
    }).catch(function (err) {
          console.log(err)
          //在这里写请求失败后想做的事
    })
    
    更多相关内容
  • 学习完本课程可以继续学习“Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例”, 主要内容: 路线的查询接口 周边搜索接口 学习针对高德地图接口对接的实际应用    访问地址:...
  • WebAPI接口对接

    2022-04-29 08:48:42
    WebAPI接口对接: 提示:此片文章是总结接口对接经验其中包括模型的建立以及统一的调用 学习内容: 数据对象模型的建立 如何规范定义模型 统一的请求方法 数据对象的建立 接口的数据传输对象包括Request对象...

    WebAPI接口对接:

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


    学习内容:

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

    • 数据对象的建立

    接口的数据传输对象包括Request对象和Response对象
    在这里插入图片描述
    每一个接口都单独建立一个文件夹
    在这里插入图片描述

    • 规范定义模型

    定义一个统一的父类(这是Request的统一父类)
    GetApi方法是用于获取接口请求路径用的 (这里要注意Request是继承ResPonse的)
    在这里插入图片描述

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

    在这里插入图片描述
    接下来我们来看一个接口的返回和请求类

    请求数据传输对象
    在这里插入图片描述
    返回数据对象
    在这里插入图片描述

    • 统一的请求方法

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/eff350a6f86143ecaf856f2443f6d3e6.png
    当然你有可以继承这个请求方法的接口去根据每一个接口的需求重写它
    例如
    在这里插入图片描述

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

    系统中model的命名规则

    关于DO,DTO和VO在项目

    DO:对应数据库表结构

    VO:一般用于前端展示用

    DTO:用于数据传递(接口入参和接口返回值都可以)


    展开全文
  • 前端Web API

    2022-03-31 09:04:40
    前端Web APIAPI它们是基于对象的客户端 JS中API操作文档从服务器获取数据的API第三方 API地理位置 api(Geolocation API)绘制图形视频和音频 API设备API客户端存储 Web APIs API API:应用程序接口,可以通过提供...

    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(元素引用);
    
    1. 删除节点:
    删除节点.parentNode.removeChild(删除节点);
    

    操作样式

    1. 动态设置样式 – 内联样式
    元素引用.style.属性 = '';
    

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

    para.style.color = 'white';
    para.style.backgroundColor = 'black';
    para.style.padding = '10px';
    para.style.width = '250px';
    para.style.textAlign = 'center';
    
    1. 设置元素属性 – 类(更加正式,没有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 工具。...// 配置API接口地址 var root = 'https://cnodejs.org/api/v1' //

    编写总结不易 点赞关注收藏三连一波 哈哈哈
    使用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
    编写总结不易 点赞关注收藏三连一波 哈哈哈

    展开全文
  • 主要内容如下: 如何到高德地图开发者平台注册账号以及申请权限 如何在自己的项目中引入高德地图的接口 对接常见的接口:定位 得到详细地址信息 在地图上添加点标记 添加信息窗体 路线的查询接口 周边搜索接口 通过...
  • 调用接口(api)报错 前端接口调用注意事项
  • 启动接口服务 在你创建的json文件目录下打开命令窗口运行json-server db.json -p 8888(8888是端口号,自己随意,能用就行) json-server db.json -p 8888 运行成功的结果: 如果运行出现了错误,请检查数据格式或者是...
  • web项目对接钉钉扫码登录

    千次阅读 2020-10-28 10:37:43
    今天我们记录一下关于vue进行web开发的过程中对接钉钉的H5微应用的时候扫码登录的功能,你说他难吧,其实不难,很简单,你说他简单吧,看文档可能真的有点乱,不然您也不会来看我的帖子,我也看了别的大佬们写的关于...
  • 1.put接口的发布 /** * 请求体为json的put请求 * @param jsonString * @return */ @ResponseBody @RequestMapping(value="putTestRequestBody",method =RequestMethod.PUT) public String ...
  • 前端项目用的是VS code编译器 vue完成 前端引入 <script src="lib/vue.js"></script> <script src="lib/vue-resource.js"></script> <script src="lib/axios.min.js"></script
  • 使用Swagger作API接口对接

    千次阅读 2019-10-14 16:34:42
     在前后端分离的项目中,如手机端与接口对接WEB项目调用API,进行接口对接的方式一般是先创建WORD文档,然后把各个接口的链接、参数、访问方式、说明等信息粘贴进去。在制作文档的过程中,如果稍有不注意就容易...
  • 前言我一直认为WEB API设计是后端工程师的活,对WEB API设计规范理解的不是很深,正是因为之前看过不同后端工程师的Web API设计难以对接前端产品,导致经常需要修改接口,浪费了很多时间,专门抽点时间去研究一下。...
  • 文章介绍 vue-element-admin 登录...新建项目一个Web API项目:vue element admin 不要配置HTTPS 配置EFCore 配置跨越 配置JWT 后台运行程序 配置vue-element-admin 我的方法不是全局配置,没有配置以下文件
  • Swagger作API接口对接

    2020-09-10 10:22:55
     在前后端分离的项目中,如手机端与接口对接WEB项目调用API,进行接口对接的方式一般是先创建WORD文档,然后把各个接口的链接、参数、访问方式、说明等信息粘贴进去。在制作文档的过程中,如果稍有不注意就容易...
  • Insights是的附加组件,提供可自定义的UI框架,使您可以构建与OBI后端对接前端Web应用程序。 具体来说,有一个使用此框架构建的可视化构建器和仪表板查看器,并提供了许多标准应用程序中未提供的UI功能。 要部署...
  • 所以api接口文档就变的十分有意义了,目前市场有哪些比较优秀的接口文档管理工具呢?1、MinDoc网址:https://www.iminho.me/MinDoc 是一款针对IT团队开发的简单好用的文档管理系统。MinDoc 的前身是 SmartWiki 文档...
  • 在过去前后端打架的时代,我觉得你写的接口不行,而你又觉得我写的页面太简单了,觉得我技术一般。然后就打起来了…
  • java对接外部api需求提出解决思路编码测试总结 差不多有一个多月没有更新blog,也是...对接外部api接口就是说我在A项目写了一个接口时我的B项目需要到A这个接口的数据,那么在A项目上线的基础上使用B项目去调用A项目
  • 高德开放平台 | 高德地图API (amap....地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API (amap.com) 4、直接书写具体示例 开发语言:C# 开发工具:visual studio 2019 开发项目类型:控制台程序 //
  • 而拆分后的接口前端进行组合请求时,通常会出现一个区块要请求多个接口请求才能拿到想要的数据,过多的数据请求会导致区块渲染较慢等问题...解决方案1. 在服务端再开发一个新的合并接口来为客户端提供数据缺点: 该...
  • C++与Web接口对接

    千次阅读 2018-01-12 18:17:00
    生成C/C++的RPC代码(RPC:远程过程调用,它是一种通过网络从远程计算机程序上请求服务),XML数据绑定,对SOAP Web服务和其他应用形成高效的具体架构解析器,它们都受益于一个XML接口。 这个工具包提供了一个全面和...
  • 在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高。接下来就给大家讲解前后端分离接口。 为什么要前后端分离? 把前端与后端独立起来去开发,放在两个不同的服务器,需要独立...
  • 由于API接口设计一般出现在开发的详细设计中,但是随着诸多公司建立接口开放平台,产品经理也逐渐需要能理解API接口,尤其是做大型综合类平台性的产品,还要学会定义AG接口/bbin接口。本文就关于产品经理在设计接口...
  • Web架构(一)PHP前端请求Java接口

    千次阅读 2017-07-23 14:58:43
    本系列博客主要说明自己理解的web架构的思路。使用PHP作为前端,java的spring应用、...普通的web架构本文这里使用PHP作为前端,javaweb(Spring项目)提供接口。javaweb 接口代码托管嵌入的tomcat,可直接作为App运行
  • 在《又见AOP之基于RealProxy实现...今天,我想和大家分享的是,如何通过动态的Controller来实现从WCF到Web API的迁移。为什么会有这个环节呢?因为我们希望把一个老项目逐步迁移到.NET Core上面,在这个过程中首当...
  • )后端控制台可以看到详细错误信息,前端接口调用却只能看到500 internal error 内部错误,看不见详细错误信息,对接接口的伙计一脸懵逼。 二、解决方案 1、解决方案1: 1、在xxx.web网站项目的xxxWebModule.cs 中...
  • Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例 互联网编程行业...
  • API开发的框架推荐

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,827
精华内容 3,930
关键字:

web前端项目对接api接口

友情链接: USB.rar