开发效率翻倍的Web API使用技巧

2023-05-12 20:51:27

引言
Clipboard API（剪切板）
Fullscreen API（进入/退出全屏）
Online State API（网络状态）
Page Visibility API（页面显示）
Screen Orientation API（页面方向）
Battery API（电池信息）
Web Share API（分享）
ImageCapture API（图片抓取）
Selection API（文本选区）
Performance API（性能检测）
Geolocation API（获取位置）
Broadcast Channel API（跨页面通信）
Vibration API（设备振动）
Srceen Capture API（视频截图）
Intersection Observer API（元素监听）

引言

随着浏览器的日益壮大，浏览器自带的功能也随着增多，在 Web 开发过程中，我们经常会使用一些 Web API 增加我们的开发效率。

Clipboard API（剪切板）

剪切板 API 快速将内容复制到剪切板上，下面是一键复制的方法：

const onClipText = (text) => {
    handleCopyValue(text)
        .then(() => {
            alert("复制成功");
        })
        .catch(() => {
            alert("自动复制失败，请手动复制");
        });
};
const handleCopyValue = (text) => {
    //浏览器禁用了非安全域的 navigator.clipboard 对象
    //在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
    if (!navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(text);
    } else {
        // 判断是否支持拷贝
        if (!document.execCommand("copy")) return Promise.reject();
        // 创建标签，并隐藏
        const textArea = document.createElement("textarea");
        textArea.style.position = "fixed";
        textArea.style.top = textArea.style.left = "-100vh";
        textArea.style.opacity = "0";
        textArea.value = text;
        document.body.appendChild(textArea);
        // 聚焦、复制
        textArea.focus();
        textArea.select();
        return new Promise((resolve, reject) => {
            // 不知为何，必须写这个三目，不然copy不上
            document.execCommand("copy") ? resolve() : reject();
            textArea.remove();
        });
    }
};

执行onClipText方法，即可将想复制内容，复制到用户的剪切板上。

Fullscreen API（进入/退出全屏）

Fullscreen API 用于在 Web 应用程序中开启全屏模式，使用它就可以在全屏模式下查看页面/元素。在安卓手机中，它会溢出浏览器窗口和安卓顶部的状态栏（显示网络状态、电池状态等的地方）。

下面是一个 Fullscreen API 的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
    <div id="booktext">
       <h1>正能量先锋</h1>
        <p>在今天这个快节奏、竞争激烈的时代里，我们时常会面临一些挑战和困难，有时甚至会让我们感到绝望和沮丧。但我们应该时刻铭记，每一个困难背后都有无限的机会和可能。</p>
       <button onclick="toggleFullscreen()">进入/退出沉浸式阅读</button>
    </div>
    <script>
      var bookText = document.getElementById('booktext');
      function toggleFullscreen() {
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          bookText.requestFullscreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
          });
        }
      }
    </script>
  </body>
</html>

上面的例子展示了如何通过 Fullscreen API 实现一个视频全屏播放的功能。

在 HTML 中，我们定义了一个视频播放器，使用 controls 属性添加了播放器的控制栏。同时，我们也定义了一个按钮，点击该按钮可以全屏播放视频。

在 JavaScript 中，我们首先通过 getElementById 获取到视频容器，然后通过 querySelector 获取到视频元素本身。接着，定义了一个 toggleFullscreen 函数来监听按钮的点击事件，并根据当前全屏状态调用 requestFullscreen 或 exitFullscreen 来切换全屏状态。

需要注意的是，requestFullscreen 方法可能会被浏览器阻止，例如因为用户未授权。因此在实际使用中，我们需要使用 catch 方法来捕获 requestFullscreen 方法的调用错误信息。

Online State API（网络状态）

就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。

window.addEventListener("online", onlineHandler); // 联网时
window.addEventListener("offline", offlineHandler); // 断网时

比如很常见的一个需求，断网时提示，网络恢复时刷新。

实现断网重连：

const onlineHandler = () => {
    window.location.reload();
};
const offlineHandler = () => {
    alert("网络异常，请检查您的网络");
};
window.addEventListener("online", onlineHandler);
window.addEventListener("offline", offlineHandler);

这样就可以监听用户的网络状态，如网络链接、断开时可以对用户进行提示以及做相应的逻辑处理。

Page Visibility API（页面显示）

我们可以用document.visibitilityState来监听网页可见度，是否卸载..

在手机和电脑上都会现这种情况，比如页面中有一个视频正在播放，然后在切换tab页后给视频暂停播放，或者有个定时器轮询，在页面不显示的状态下停止无意义的轮询等等。

比如一个视频的例子来展示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fullscreen API Example</title>
  </head>
  <body>
 <video id="vs" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls>
 </video>
<script>
const video = document.getElementById('vs')
window.addEventListener('visibilitychange',() => {
    // 通过这个方法来获取当前标签页在浏览器中的激活状态。
    switch(document.visibilityState){
        case'prerender': // 网页预渲染 但内容不可见
        case'hidden':    // 内容不可见 处于后台状态，最小化，或者锁屏状态
        video.puase()
        case'visible':   // 内容可见
        video.play()
        case'unloaded':  // 文档被卸载
        video.destory()
    }
});
</script>
</body>
</html>

这个API的用处就是用来响应我们网页的状态，如果这个标签页显示则视频就开始播放，隐藏就暂停，关闭就卸载。

Screen Orientation API（页面方向）

我们可以通过以下代码来演示如何使用Screen Orientation API来控制页面的方向：

// 获取屏幕方向对象
const orientation = screen.orientation;
// 监听屏幕方向变化事件
orientation.addEventListener('change', () => {
  console.log(`屏幕方向变为：${orientation.type}`);
});
// 锁定屏幕方向为横屏
orientation.lock('landscape').then(() => {
  console.log('屏幕方向已锁定为横屏');
}).catch((err) => {
  console.log(`锁定屏幕方向失败：${err}`);
});
// 解锁屏幕方向
orientation.unlock();

在这段代码中，我们首先通过screen.orientation获取了屏幕方向对象，并通过addEventListener方法监听了屏幕方向变化事件。然后，我们使用lock方法将屏幕方向锁定为横屏，并在锁定成功后打印了一条消息。最后，我们使用unlock方法解锁了屏幕方向。

需要注意的是，lock方法可能会在某些设备上无法生效，因此我们需要在实际使用中进行兼容性测试。

Battery API（电池信息）

以下是一个使用 Battery API 的简单示例：

<!DOCTYPE html>
<html>
<head>
    <title>Web Battery API Example</title>
</head>
<body>
    <h1>Web Battery API Example</h1>
    <div id="battery-status">
        <p>当前电量: <span id="battery-level"></span></p>
        <p>电池状态: <span id="battery-status"></span></p>
    </div>
    <script>
        // 获取电池信息
        navigator.getBattery().then(function(battery) {
            // 更新电量信息
            updateBatteryStatus(battery);
            // 监听电池信息变化
            battery.addEventListener('levelchange', function() {
                updateBatteryStatus(battery);
            });
            battery.addEventListener('chargingchange', function() {
                updateBatteryStatus(battery);
            });
        });
        // 更新电量信息
        function updateBatteryStatus(battery) {
            document.querySelector('#battery-level').textContent = battery.level * 100 + '%';
            document.querySelector('#battery-status').textContent = battery.charging ? '正在充电' : '未充电';
        }
    </script>
</body>
</html>

这个例子展示了如何使用Web Battery API来获取电池的状态信息，并在页面上显示当前电量和电池状态。

在这个例子中，我们使用了navigator.getBattery()方法来获取电池信息，并使用battery.addEventListener()方法来监听电池信息变化。最后，我们使用updateBatteryStatus()函数来更新电量信息并在页面上显示。

Web Share API（分享）

以下是一个简单的Web Share API例子：

// 获取分享按钮元素
const shareButton = document.querySelector('#share-button');
// 添加点击事件监听器
shareButton.addEventListener('click', async () => {
  try {
    // 检查浏览器是否支持Web Share API
    if (navigator.share) {
      // 调用Web Share API分享
      await navigator.share({
        title: '分享标题',
        text: '分享描述',
        url: '分享链接'
      });
    } else {
      // 如果不支持，显示提示信息
      alert('该浏览器不支持Web Share API');
    }
  } catch (error) {
    // 处理异常情况
    console.error('分享失败:', error);
  }
});

这个例子假设页面中有一个id为share-button的分享按钮元素。当用户点击该按钮时，代码会检查浏览器是否支持Web Share API，如果支持则调用该API进行分享，否则显示一个提示信息。

在navigator.share方法中，我们可以传递一个包含title、text和url等属性的对象，用于指定分享内容的标题、描述和链接。如果用户选择分享，系统会弹出一个分享对话框，让用户选择分享方式（例如通过社交媒体、电子邮件等方式分享）。

如果用户取消分享，则navigator.share方法会返回一个Promise对象，其状态为rejected。我们可以通过捕获该Promise对象的异常来处理分享失败的情况。

ImageCapture API（图片抓取）

以下提供一个基本的Web ImageCapture API示例，如下所示：

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Web ImageCapture API Demo</title>
  </head>
  <body>
    <h1>Web ImageCapture API Demo</h1>
    <video id="video" width="640" height="480" autoplay></video>
    <br>
    <button id="capture-btn">Capture Image</button>
    <br>
    <canvas id="canvas" width="640" height="480"></canvas>
    <br>
    <img id="captured-img">
  </body>
</html>

JavaScript代码：

// 获取视频和按钮元素
const video = document.getElementById('video');
const captureBtn = document.getElementById('capture-btn');
// 获取画布和图像元素
const canvas = document.getElementById('canvas');
const img = document.getElementById('captured-img');
// 获取视频流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    video.play();
  })
  .catch(error => {
    console.log(error);
  });
// 设置ImageCapture
let imageCapture;
const track = video.srcObject.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
// 添加事件监听器
captureBtn.addEventListener('click', () => {
  // 拍照
  imageCapture.takePhoto()
    .then(blob => {
      // 将照片显示在画布上
      const url = URL.createObjectURL(blob);
      canvas.getContext('2d').drawImage(img, 0, 0);
      // 将照片显示在图像元素中
      img.src = url;
    })
    .catch(error => {
      console.log(error);
    });
});

这个示例将显示一个视频元素和一个“Capture Image”按钮。当用户点击按钮时，它将使用ImageCapture API拍摄照片，并在画布和图像元素中显示照片。

请注意，此示例仅适用于支持MediaStreamTrack和ImageCapture API的浏览器。

Selection API（文本选区）

下面是一个Web Selection API的例子，如下所示：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Web Selection API Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>Web Selection API Example</h1>
    <p>Select text in the paragraph below to see the API in action.</p>
    <p id="demo">The Web Selection API allows you to retrieve and manipulate text selections made by the user.</p>
</body>
</html>

JavaScript代码（web-selection-api.js）：

// 获取文本节点
const demoEl = document.getElementById('demo');
// 监听文本节点的选择事件
demoEl.addEventListener('mouseup', handleSelection);
// 处理选择事件
function handleSelection() {
    // 获取用户选择的文本
    const selection = window.getSelection();
    const selectedText = selection.toString();
    // 如果选择的文本不为空
    if (selectedText) {
        // 创建一个新的高亮节点
        const highlightEl = document.createElement('span');
        highlightEl.classList.add('highlight');
        // 将高亮节点插入到选择范围中
        const range = selection.getRangeAt(0);
        range.surroundContents(highlightEl);
        // 取消选择
        selection.removeAllRanges();
    }
}

这个例子演示了如何使用Web Selection API来获取用户选择的文本，并将其高亮显示。

当用户在页面上选择文本时，会触发mouseup事件，然后调用handleSelection函数来处理选择事件。

在handleSelection函数中，我们首先使用window.getSelection()方法获取用户选择的文本，然后检查是否选择了文本。

如果选择了文本，我们创建一个新的span元素，并将其添加到选择范围中，然后使用removeAllRanges()方法取消选择。最后，我们使用CSS样式将高亮显示的文本突出显示。

Performance API（性能检测）

以下是一个使用 Web Performance API 的例子：

// 测量页面加载时间
const startTime = window.performance.now();
window.addEventListener('load', () =&gt; {
  const loadTime = window.performance.now() - startTime;
  console.log(`页面加载时间为：${loadTime} 毫秒`);
});
// 测量网络时间
const resourceUrl = 'https://example.com/resource';
fetch(resourceUrl)
  .then(response =&gt; {
    const fetchTime = window.performance.now() - startTime;
    console.log(`请求时间为：${fetchTime} 毫秒`);
    // 获取网络时间信息
    const entry = performance.getEntriesByName(resourceUrl)[0];
    const start = entry.fetchStart;
    const end = entry.responseEnd;
    console.log(`DNS 查询时间为：${entry.domainLookupEnd - entry.domainLookupStart} 毫秒`);
    console.log(`TCP 握手时间为：${entry.connectEnd - entry.connectStart} 毫秒`);
    console.log(`TLS 握手时间为：${entry.secureConnectionStart ? entry.connectEnd - entry.secureConnectionStart : 'N/A'} 毫秒`);
    console.log(`请求时间为：${entry.responseStart - entry.requestStart} 毫秒`);
    console.log(`响应时间为：${entry.responseEnd - entry.responseStart} 毫秒`);
    console.log(`传输大小为：${entry.transferSize} 字节`);
  });

在这个例子中，我们使用了 Web Performance API 提供的 performance 对象来测量页面加载时间和使用 fetch() 方法获取资源的网络时间。我们还使用了 getEntriesByName() 方法来检索资源的网络时间信息。

Geolocation API（获取位置）

以下是一个使用 Geolocation API 获取用户当前位置信息的示例代码：

// 检查浏览器是否支持 Geolocation API
if ('geolocation' in navigator) {
  // 获取用户当前位置信息
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`您的纬度为：${latitude}，经度为：${longitude}`);
    },
    (error) => {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.log('用户拒绝了位置请求');
          break;
        case error.POSITION_UNAVAILABLE:
          console.log('无法获取位置信息');
          break;
        case error.TIMEOUT:
          console.log('请求超时');
          break;
        default:
          console.log('发生未知错误');
      }
    }
  );
} else {
  console.log('您的浏览器不支持 Geolocation API');
}

在这个例子中，我们首先检查浏览器是否支持 Geolocation API。

如果支持，则调用 navigator.geolocation.getCurrentPosition() 方法获取用户当前位置信息。该方法接受两个回调函数作为参数：一个成功的回调函数和一个失败的回调函数。

如果获取位置信息成功，则成功的回调函数将被调用，并传递包含位置信息的对象作为参数。否则将调用失败的回调函数，并传递一个描述错误的对象作为参数。

Broadcast Channel API（跨页面通信）

下面是一个使用 Broadcast Channel API 实现简单的跨窗口通信的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Broadcast Channel API Example</title>
  </head>
  <body>
    <div id="message"></div>
    <input type="text" id="input-message">
    <button onclick="sendMessage()">Send Message</button>
    <script>
      const channel = new BroadcastChannel('my-channel'); // 创建一个广播通道对象
      function sendMessage() {
        const inputMessage = document.getElementById('input-message');
        const message = inputMessage.value;
        channel.postMessage(message); // 将消息发送到广播通道中
        inputMessage.value = ''; // 清空输入框内容
      }
      channel.onmessage = (event) => {
        const message = event.data;
        const messageDiv = document.getElementById('message');
        messageDiv.innerHTML = message;
      }
    </script>
  </body>
</html>

上面的例子展示了如何使用 Broadcast Channel API 实现在两个窗口之间进行文本消息的双向通信。

在 HTML 中，我们定义了一个输入框和一个按钮，用于输入和发送消息。我们还定义了一个 div 元素，用于展示接收到的消息。

在 JavaScript 中，我们创建了一个名为 my-channel 的广播通道对象，并定义了一个 sendMessage 函数，该函数将输入框中的文本消息发送到广播通道中。

同时，我们在 channel 对象上通过 onmessage 方法监听广播通道上的消息，一旦有消息发送到该通道，就会触发该方法，在该方法中将接收到的消息展示在 div 元素中。

需要注意的是，广播通道的名字需要保持一致，才能实现不同窗口之间的通信。

Vibration API（设备振动）

以下是一个简单的Web Vibration API例子：

<!DOCTYPE html>
<html>
<head>
    <title>Web Vibration API Example</title>
</head>
<body>
    <h1>Web Vibration API Example</h1>
    <button onclick="vibrate()">Vibrate</button>
    <script>
        function vibrate() {
            if ("vibrate" in navigator) {
                navigator.vibrate(1000); // 1秒钟的震动
            } else {
                alert("Vibration API not supported in this browser.");
            }
        }
    </script>
</body>
</html>

这个例子中，当用户点击"Vibrate"按钮时，浏览器会尝试通过Web Vibration API来触发设备的震动功能。

如果设备支持Web Vibration API，则会进行1秒钟的震动，否则会弹出一个警告框提示用户该功能不被支持。

Srceen Capture API（视频截图）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Screen Capture API Example</title>
</head>
<body>
    <h1>Web Screen Capture API Example</h1>
    <button id="start-capture">Start Capture</button>
    <button id="stop-capture">Stop Capture</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        // 获取DOM元素
        const startCaptureBtn = document.getElementById('start-capture');
        const stopCaptureBtn = document.getElementById('stop-capture');
        const canvas = document.getElementById('canvas');
        // 获取媒体流（屏幕共享）并将其渲染到canvas中
        async function startCapture() {
            try {
                const mediaStream = await navigator.mediaDevices.getDisplayMedia();
                const context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
            } catch(err) {
                console.error("Error: " + err);
            }
        }
        // 停止捕获并停止媒体流
        function stopCapture() {
            const tracks = mediaStream.getTracks();
            tracks.forEach(track => track.stop());
        }
        // 注册按钮单击事件
        startCaptureBtn.addEventListener('click', startCapture);
        stopCaptureBtn.addEventListener('click', stopCapture);
    </script>
</body>
</html>

这个例子中，页面上有两个按钮，一个用于开始捕获屏幕，另一个用于停止捕获。捕获的内容被呈现在一个画布上。

在 startCapture() 函数中，我们使用 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕共享的媒体流，并将其渲染到canvas上。在 stopCapture() 函数中，我们停止所有媒体流的所有轨道，以结束捕获过程。

Intersection Observer API（元素监听）

以下是一个示例，演示了如何使用 Intersection Observer API 在元素进入视口时进行检测：

<!DOCTYPE html>
<html>
  <head>
    <title>Intersection Observer Example</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 50px;
      }
      .visible {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
      const boxes = document.querySelectorAll('.box');
      const options = {
        rootMargin: '0px',
        threshold: 0.5
      };
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
          } else {
            entry.target.classList.remove('visible');
          }
        });
      }, options);
      boxes.forEach(box => {
        observer.observe(box);
      });
    </script>
  </body>
</html>

在这个示例中，我们首先选择所有具有“box”类的元素。然后，我们创建一个带有0像素的rootMargin和0.5的阈值的IntersectionObserver实例。这意味着当元素的50％位于视口内时，它将被视为可见。

然后，我们循环遍历每个盒子元素，并在我们的观察者实例上调用observe方法，将盒子元素作为参数传递。

最后，在IntersectionObserver实例的回调函数中，我们检查每个条目是否与视口相交。如果是，则将“visible”类添加到条目的目标元素中，否则将其删除。

参考

web-api-examples
MDN-Web APIs
你（可能）不知道的 web api

以上就是开发效率翻倍的Web API使用技巧的详细内容，更多关于Web API使用技巧的资料请关注我们其它相关文章！

Netcore Webapi返回数据的三种方式示例

目录 ASP.NET Core为Web API控制器方法返回类型提供了如下几个选择: 1. 返回指定类型(Specific type) 2. 返回 IActionResult 实例 3. 返回 ActionResult<T> 实例 ASP.NET Core为Web API控制器方法返回类型提供了如下几个选择: Specific type IActionResult ActionResult<T> 1. 返回指定类型(Specific type) 最简单的API会返回原生的或者复杂的
Web Animations API实现一个精确计时的时钟示例

目录正文 JavaScript 计时器问题低精度 Web Animations API 开始时间示例:精确计时的时钟总结正文在 JavaScript 中,当事情准时发生时,很自然地会想到使用计时器函数. 但是,当某件事由于其他事情依赖于它而在准确的时刻发生时,你很快就会发现计时器会存在一个不准时的问题.而本文所要介绍的 Web Animations API 可以在某些情况下替代计时器函数,同时保持精确. 当你需要处理精确的视觉呈现时,你就会发现你花费了太多时间来解决 JavaScri
调用无文档说明的 Web API过程描述

目录第一步:打开开发者工具,找一个 JSON 响应第二步:复制为 cURL 第三步:去掉不相关的请求头第四步:在 Python 中发请求运行结束 (理论上)适用于所有场景问题 1:会话 cookie 过期问题 2:滥用请记住所有人都可以访问你没有文档说明的 API 大家好!几天前我写了篇小型的个人程序的文章,里面提到了调用没有文档说明的“秘密” API 很有意思,你需要从你的浏览器中把 cookies 复制出来才能访问. 有些读者问如何实现,因此我打算详细描述下,其实过程很简单
.NET webapi某化妆品直播卡死分析

目录一:背景 1. 讲故事二:Windbg 分析 1. 线程们都怎么了 2. 单例写法真的没问题吗 3. 验证我的想法 4. 后续三:总结一:背景 1. 讲故事 10月份星球里的一位老朋友找到我,说他们公司的程序在一个网红直播带货下给弄得无响应了,无响应期间有大量的 RabbitMQ 超时,寻求如何找到根源,聊天截图我就不发了. 既然无响应了,那必然是程序的大量线程被主动或者被动的挂起,朋友也很及时的从程序上抽了一管血下来,接下来就上 windbg 一起探究下到底发生了什么? 二:Win
每个 Python 开发者都应该知道的7种好用工具(效率翻倍)

Python 从一种小的开源语言开始,到现在,它已经成为开发者很受欢迎的编程语言之一. 今天我将给大家分享 7 种对所有 Python 开发人员都感觉很有趣.有用的工具,相信它们在你的工作中会经常出现,提升工作效率. 1.The F*ck 当我们忘记了某些软件包在这里或那里,The F*ck优雅地解决了这个问题.你所要做的只是键入"Fuck",然后它会告诉你出了什么问题. 它是该列表上很受欢迎的项目,并且将继续存在.安装方法如下: # mac brew install thefuck
SpringBoot和Swagger结合提高API开发效率

现在Web开发越来越倾向于前后端分离,前端使用AngularJS,React,Vue等,部署在NodeJS上,后面采用SpringBoot发布Rest服务,前后端进行分离.这样的架构灵活且特别适合大型团队的协作开发. 那么问题来了,因为前端都是和后端通过API进行交互的,那么前后端的Rest API的接口如何进行定义和沟通呢?首先想到的应该就是Swagger. 那么什么是Swagger,Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看
使用WEB工具快速提高Android开发效率

正所谓工欲善其事,必先利其器.学习并应用优秀的轮子,可以让我们跑的更快,走的更远.这里所指的工具是广义的,泛指能帮助我们开发的东西,或者能提高我们效率的东西,包括:开发工具,监测工具,第三方代码库等. 在Google的广大支持下,便捷开发Android程序的Native工具层出不穷.其实Android开发涉及到的范围也不小,一些Web工具有时候也会带来事半功倍的效果.有些甚至是一些native应用无法做到的.本文,将简单列举一下本人正在使用的一些工具,当然也会持续更新. 查找优秀的参考工程 co
用 Django 开发一个 Python Web API的方法步骤

Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC)风格的 Web 应用程序框架.它是Python API开发中最受欢迎的名称之一,自2005年成立以来,其知名度迅速提升. Django由Django软件基金会(Django Software Foundation)维护,并获得了社区的大力支持,在全球拥有11,600多个成员.在Stack Overflow上,Django大约有191,000个带标签的问题.Spotify,YouTube和Instagram等网站都依
遵守这些原则让你开发效率提高一倍(收藏)

一.概述在园子里面有很多关于各种技术细节的研究文章,都是比较牛逼的框架研究:但是一直没有看到关于怎么样提高开发效率的文章,大多提高开发效率的文章都是关于自动化等方面的辅助工具类型的,而不是开发中的一些小技巧:今天从编码规范.编码技巧.开发思想.设计模式等各方面的经验来分享如何提高开发效率. 二.实际场景在这个前后端分离盛行的开发年代,分工比较明确,开发者分前端开发者和后端开发者,然而感到欣慰的是.net 开发者大多是担任着全栈开发的职责,有经验的开发者都是从前端走过来的,说白了前端业务代码对
[Asp.Net Core]提高开发效率的方法

一.概述在园子里面有很多关于各种技术细节的研究文章,都是比较牛逼的框架研究:但是一直没有看到关于怎么样提高开发效率的文章,大多提高开发效率的文章都是关于自动化等方面的辅助工具类型的,而不是开发中的一些小技巧:今天从编码规范.编码技巧.开发思想.设计模式等各方面的经验来分享如何提高开发效率. 二.实际场景在这个前后端分离盛行的开发年代,分工比较明确,开发者分前端开发者和后端开发者,然而感到欣慰的是.net 开发者大多是担任着全栈开发的职责,有经验的开发者都是从前端走过来的,说白了前端业务代码对
ASP.NET(C#) Web Api通过文件流下载文件的实例

下载文件到本地是很多项目开发中需要实现的一个很简单的功能.说简单,是从具体的代码实现上来说的,.NET的文件下载方式有很多种,本示例给大家介绍的是ASP.NET Web Api方式返回HttpResponseMessage下载文件到本地.实现的方法很简单,其中就是读取服务器的指定路径文件流,将其做为返回的HttpResponseMessage的Content.直接贴出DownloadController控件器的代码: using System; using System.Collections.
ASP.NET Web API教程创建Admin控制器实例分享

In this section, we'll add a Web API controller that supports CRUD (create, read, update, and delete) operations on products. The controller will use Entity Framework to communicate with the database layer. Only administrators will be able to use thi
Python利用IPython提高开发效率

一.IPython 简介 IPython 是一个交互式的 Python 解释器,而且它更加高效. 它和大多传统工作模式(编辑 -> 编译 -> 运行)不同的是, 它采用的工作模式是:执行 -> 探索 ,而大部分和数据分析相关的代码都含有探索式操作(比如试误法和迭代法),所以 IPython 能大大提高编码效率. IPython 发展到现在,它不仅仅只是一个加强版的 Python shell 了, 它集成了 GUI 控制台,这可以让你直接进行绘图操作:它还有一个基于 Web 的交互式笔记
使用Fullpage插件快速开发整屏翻页的页面

我们经常看过一些整屏翻页的网站,看上去很高大上对于一些同学来说如果要原生的去开发可能还是有很大难度的. 今天我给大家介绍Fullpage插件,也能达到这一个效果. 下面我给同学们看下小米网站的这个页面:http://www.mi.com/hongmi2a/ 看过页面之后就直接进入我们今天的主题吧! 1.一些必要的资源 //jquery <script type="text/javascript" src="https://cdnjs.cloudflare.com/aja