Webapi

前后端拆散前后端拆散的起因为什么要有 前后端拆散 呢？ 咱们回忆一下以前的开发是怎么开发的，在以前的时候，前端业务还没那么简单，所以根本都是一个人包揽前后端，也就是全栈，而为了不便开发，就把前后端放在一个我的项目中去开发 这对于一个人开发来说是的确挺不便，然而随着互联网飞速发展，前端业务越来越简单了，一个人曾经干不过去了，所以开始辨别前端、后端了 这就是 前后端 拆散的起因 前后端拆散的懊恼前后端拆散，意味着 前端、后端 须要离开成两个我的项目去开发了，那么这两个我的项目运行时，怎么去沟通呢？ 接口，是的，通过接口，也就是 API 去沟通~于是也有了 RESTFUL API 的标准 然而还是有问题，就出在前后端沟通上，前端并不知道你后端写了哪些接口，换句话说：后端写的接口，前端基本不晓得长啥样啊，所以也无奈对应的去编写前端代码~ API 接口调试工具为了解决这个懊恼，很多 API 接口调试工具横空出世 根本流程就是： 后端写了接口，放在 API 工具上前端看到接口长啥样，并开始配合 Mock 性能进行调试，并编写前端页面测试能够对这些接口进行自动化测试所以比拟重要的点就是 API 调试工具要反对： 接口文档Mock 性能自动化测试明天介绍一款很好用的 API 调试工具 —— Apifox ApifoxApifox 长处Apifox 具备很多性能： 反对中文，应用门槛低可视化做的十分杰出，包含接口前后置、数据库等反对在线文档反对接口批量测试、自动化测试反对导出导入，可导入多达 20多 种格局的 API 文件反对本地 Mock 和云端 Mock反对高级 Mock反对生成申请代码，不便开发领有 IDEA 插件 Apifox Helper，能够一键将接口代码转化成接口文档，十分方便快捷！领有命令行工具 Apifox-Cli，能够应用命令行形式运行自动化测试反对回收站、历史记录等性能，不便回溯定位问题团队、我的项目创立团队接口的开发离不开整个团队，所以咱们在 Apifox 中能够先创立一个属于你们本人的团队~ 创立我的项目一个团队里必定不止一个我的项目，比方你的产品会有： 小程序App后盾管理系统这都是不同的我的项目，接口天然也不同，所以能够在 Apifox 团队中创立你这些不同的我的项目，不便辨别治理 填入每个我的项目的我的项目名，便于辨别；同时反对设定成员在该我的项目中的权限。 接口创立接口接下来就是 Apifox 的外围性能了，接口调试性能，咱们须要创立一个个的接口，不便前面的调试 接口界面接口调试界面接口界面 构造明显，清晰明了，能够在接口调试中设置 ...

本文起源：about.gitlab.com作者：Eugene Lim，Mike Eddington译者：极狐(GitLab) 市场部内容团队在极狐GitLab/GitLab 外部，咱们用 Dogfooding 文化来帮忙更好地了解产品、解决痛点以及配置谬误，构建一个更高效、性能更丰盛、用户体验更好的平台。本文将聚焦在「API 含糊测试」的 Dogfooding 实际上。 什么是 Web API 含糊测试Web API 含糊测试（Web API Fuzz Testing）次要通过生成大量随机但合乎肯定语法规定的输出，来对 Web API 进行测试。这种 “随机输出” 可能会触发 API 的一些意料之外的执行门路或谬误，从而发现 API 设计或实现中的某些破绽或谬误。 通过剖析这些谬误，能够发现缺点和潜在平安问题，而这些问题可能是聚焦特定破绽的平安扫描工具所脱漏的。极狐GitLab/GitLab Web API 测试是其余平安伎俩，如动态应用程序平安测试（SAST）、动静应用程序平安测试（DAST）等的无效补充。 主动生成 OpenAPI 标准运行 Web API 含糊测试分析器，需具备以下条件之一： OpenAPI 标准 - v2 或 v3；GraphQL 模式；HTTP 存档 (HAR)；Postman Collection - v2.0 或 v2.1。在 API 含糊测试项目初始阶段，API Vision 工作组也在钻研「如何在 OpenAPI 标准中主动生成 GitLab REST API endpoint」。因为 GitLab 应用 Grape API 框架，咱们曾经辨认并测试了 grape-swagger gem，它能够基于既有 grape 正文主动生成 OpenAPI v2 标准。 ...

[toc] 一、WebApi调优什么是WebApi调优 当浏览器端申请WebApi服务端读写数据须要消耗工夫，将消耗的工夫缩短，就称之为WebApi调优。 如图： 目标晋升WebApi的性能。二、WebApi 利用场景场景 前后端拆散的我的项目。 三、WebApi 性能瓶颈定位定位性能瓶颈 请看NetCore性能排查文章：https://blog.csdn.net/Fu_Shi_... 四、WebApi性能优化伎俩一-本地缓存单体我的项目 如图： 实现 设计思路 查问应用时先看本地缓存有无数据，有数据间接返回，无数据时到数据库查问，将查问到的数据增加到本地缓存中并将数据返回给浏览器端 长处与毛病 毛病 Memory是服务器内存中的缓存，如果并发量大并查问的数据又不统一，会造成内存十分的大 ，同时会造成GC一直地回收这个内存，因为Memory 外部应用的动态变量造成内存无奈回收，GC每回收一次，就会耗费一次CPU资源，如果GC回收的频率比拟大，那耗费的CPU资源也会变大，例如：当初的CPU的使用率为100%，GC耗费了70%CPU资源，那咱们的吞吐量只有30%，那解决申请的性能大幅度的降落。 解决方案 用工夫换空间的办法来解决，给缓存设置工夫。设置缓存大小设置单个缓存大小，并设置主动生效工夫长处 数据读写速度工夫缩短，性能失去晋升。 实现步骤 装置缓存Nuget包 Microsoft.Extensions.Caching.Memory Startup注册 ConfigureServices办法中注册缓存服务Service.AddMemoryCache(options=>{ options.SizeLimit = 1024*1024*100; //设置缓存大小});在应用的场景进行注入 在构造方法中注入private readonly IMemoryCache memoryCache;构造函数 （IMemoryCache _memoryCache）{ memoryCache =_memoryCache;}//测试对象 Person per = new Person();//查问缓存办法 //memoryCache.Get<Person>(key); //为了放避免多线程并发bool flag = memoryCache.TryGetValue<缓存对象>(key，out per);//true：有数据 false：无数据//限度缓存大小var cacheEntryOptions = new MemoryCacheEntryOptions（）.//设置单个缓存大下SetSize(1024).//设置过期工夫 主动生效SetSlidingExpiration(TimeSpan.FromSeconds(3));//增加缓存memoryCache.Set<Person>(key,value,cacheEntryOptions);解决第一次申请耗时解决方案 将我的项目启动的时候，将数据库中的数据增加到缓存中 代码实现 //类继承 IHostService //并在Startup类中注册五、WebApi 性能优化伎俩二-分布式缓存计划 请看这篇文章。https://blog.csdn.net/Fu_Shi_...六、WebApi 性能优化伎俩三-Http缓存（响应缓存）计划 协商缓存 装置Nuget包 ...

我认为Web Share API十分酷，简而言之，它会利用您所应用的平台上的原生共享性能（如果该平台反对的话）。 我喜爱这个： 远远不止这些货色： 为什么？ Web Share API只是几行代码。简略！没有图像，没有重量级的JavaScript或iframe。用户看到的UI是针对其平台定制的，甚至可能是由他们定制的，以在其中蕴含他们想要的货色。好样的，Web规范。 但并不是所有中央都反对。例如，我在Chrome浏览器中写这篇博客文章，在桌面Chrome浏览器中无奈应用，但在桌面的Safari中却能够工作 所以，如果我要应用它，我宁愿在把按钮放在页面上之前先测试一下是否反对。这是非常简单的： if (navigator.share) {}上面是一个例子，如果API被反对的话，我把一个 <button> 放在文章上，HTML和CSS省略。 JavaScript做了一些花哨的动作来获取文章的题目和第一段，以便在API中应用。我喜爱Jeremy Keith在页面上的做法： if (navigator.share) { navigator.share( { title: document.querySelector('title').textContent, text: document.querySelector('meta[name="description"]').getAttribute('content'), url: document.querySelector('link[rel="canonical"]').getAttribute('href') } );}你也能够将字符串传递给这些值，这只是在展现你如何在任何页面上动静地做一些工作。 Jeremy也始终在提倡建设一个JavaScript可选的Web Share API版本，他认为能够像这样工作。 <button type="share">而后，指定题目和文本： <button type="share" value="title,text">用逗号对我来说有点时尚，如果题目中蕴含逗号怎么办？那指定URL呢？咱们能够将它们全副分成属性吗？我想我晓得Jeremy会说什么：这是一个简略的申明性版本，如果你想扭转默认行为，那就是JavaScript的作用。 如何应用Web Share API自从在Android的Chrome 61中首次引入以来，Web Share API仿佛曾经受到关注。从实质上讲，它提供了一种办法，当间接从网站或Web应用程序分享内容时，能够触发设施（或桌面，如果应用Safari）的本地分享对话框，例如链接或联系卡。 尽管用户曾经能够通过原生形式分享网页上的内容，但他们必须在浏览器菜单中找到这个选项，即使如此，也无法控制分享的内容。该API的引入让开发者能够利用用户设施上的原生内容分享性能，将分享性能增加到利用或网站中。 与传统办法相比，这种办法具备许多劣势： 与你在DIY实现中可能领有的无限数量的内容相比，用户将取得宽泛的内容分享抉择。你能够通过删除各个社交平台上的第三方脚本来缩短页面加载工夫。你不须要为不同的社交媒体网站和电子邮件增加一系列按钮，一个按钮就足以触发设施的原生分享选项。用户能够在本人的设施上定制本人喜爱的分享指标，而不是仅仅局限于预约义的选项。对于浏览器反对的阐明在介绍API的工作细节之前，咱们先把浏览器反对的问题解决掉。说实话，目前浏览器的反对度并不高。它只实用于Android版Chrome浏览器，以及Safari（桌面和iOS）。 但不要因而而不违心在网站上采纳这个API。要实现一个反对不提供反对的浏览器的后备性能是很容易的，你会看到的。 应用它的一些要求在您本人的Web我的项目上采纳此API之前，须要留神两点： 您的网站必须通过HTTPS提供服务。为了促成本地开发，当您的站点通过localhost运行时，该API也能够应用。为了避免滥用，API只能在响应一些用户操作（如点击事件）时触发。这是一个例子为了演示如何应用这个API，我筹备了一个demo，它的工作原理与我的网站上的工作原理基本相同。该示例应用DIY形式，本人自定义分享对话框。 此时，一旦点击分享按钮，就会弹出一个对话框，显示出分享内容的几个选项，这是代码的一部分，可帮忙咱们实现这一指标： shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open');});让咱们持续进行示例转换，以改为应用Web Share API。首先要做的是检查用户的浏览器是否的确反对该API，如下所示： if (navigator.share) { // Web Share API is supported} else { // Fallback}应用Web Share API就像调用 navigator.share() 办法并传递一个至多蕴含以下字段之一的对象一样简略。 ...

Swiper插件的应用中武官网地址：https://www.swiper.com.cn/ 1.引入插件相干文件2.依照规定语法应用 留神：要引入swiper中的css文件 js文件 html构造等，不要随便更改类名 Swiper的应用办法1.首先加载插件，须要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或应用CDN。 <!DOCTYPE html><html><head> ... <link rel="stylesheet" href="dist/css/**swiper-bundle.min.css**"></head><body> ... <script src="dist/js/**swiper-bundle.min.js**"></script> ...</body></html>2.HTML内容。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果须要分页器 --> <div class="swiper-pagination"></div> <!-- 如果须要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果须要滚动条 --> <div class="swiper-scrollbar"></div></div>导航等组件能够放在container之外3.你可能想要给Swiper定义一个大小，当然不要也行。 .swiper-container { width: 600px; height: 300px;} 4.初始化Swiper <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果须要分页器 pagination: { el: '.swiper-pagination', }, // 如果须要后退后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果须要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script> 5.实现。祝贺你，当初你的Swiper应该曾经能失常切换了。 ...

迟缓动画的原理迟缓动画就是让元素的静止速度有所变动，最常见的迟缓动画就是让动画速度缓缓停下来外围思路让盒子每次挪动的间隔缓缓变小，速度就会缓缓变小外围算法：（目标值-当初的地位）/10 作为每次挪动的间隔步长进行的条件：让盒子以后的地位等于指标的地位，就进行定时器留神步长值须要取整<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } button { margin: 50px; } img { position: absolute; display: block; width: 200px; height: 200px; border-radius: 50%; } </style></head><body> <button>点击挪动至800</button> <button>点击挪动至0</button> <img src="./image/头像.jpg" alt=""> <script> var bth = document.querySelectorAll('button'); var img = document.querySelector('img') // obj：指标对象 target:指标地位 function aniamte(obj, target) { // 革除以前的定时器，只保留以后的计时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 如果步长为正值 则取大 如果步长为负值 则取小 var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 判断：如果指标对象的地位等于指标地位，则革除定时器 if (obj.offsetLeft == target) { clearInterval(obj.timer) } obj.style.left = obj.offsetLeft + step + "px" }, 15); } // 进行调用 bth[0].addEventListener('click', function() { aniamte(img, 800) }) bth[1].addEventListener('click', function() { aniamte(img, 0) }) </script></body></html> ...

键盘事件常见的键盘事件onkeyup:键盘按键按下被松开时触发onkeydown:键盘按键被按下时触发onkeypress:键盘按键被按下时触发（不辨认ctrl shift功能键）三个事件的执行程序：onkeydown----onkeypress---onkeyup <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> document.addEventListener('keydown',function(e){ console.log('键盘按键被按下了keydown') }) document.addEventListener('keypress',function(e){ console.log('键盘被按下了 press') }) document.addEventListener('keyup',function(){ console.log('键盘按键按下被松开了 keyup') }) </script> </body> </html> 键盘事件对象keyCode:返回该键的AScll码留神 onkeydown和onkeyup不辨别大小写，onkeypress辨别字母的大小写在咱们理论开发中咱们更多的应用keydown和keyup，他能辨认所有的功能键keypress不辨认功能键，然而keyCode属性能辨别大小写，返回不同的ASCI值<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <script> // 键盘事件对象中的keyCode属性能够失去相应键的ASCII码值 document.addEventListener('keyup', function(e) { console.log(e.keyCode); if (e.keyCode === 65) { alert("按下a键") } else { alert('没按下a键') } }) document.addEventListener('keypress', function(e) { console.log(e.keyCode) }); document.addEventListener('keydown', function(e) { console.log(e.keyCode) }) </script>></body></html> 模仿京东按键输出内容当咱们按下s键 光标就主动定位到搜寻框外面思路如下1.检测用用户是否按下s建，如果按下s键，就把光标定位到搜寻框外面2.应用键盘事件中的keyCod来判断用户是否按下s键3.搜寻框取得焦点：应用js中的focus（）办法 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="text"> <script> var search = document.querySelector('input'); document.addEventListener('keyup', function(e) { // 打印s键绝对应的ASCI嘛 console.log(e.keyCode); if (e.keyCode === 83) { search.focus() } }) </script></body></html> ...