未来学习 | 很棒的知识分享站   http://www.f-learn.cn/   未来学习是一个很棒的知识分享站,专注于收集最新的基础知识、进阶深入学习、视觉艺术设计和分享素材。   zh-cn   Wednesday, 1 July 2020 12:00:00 GMT   Wednesday, 1 July 2020 12:00:00 GMT   http://www.f-learn.cn/rss/   Editor for Naokiono   ononaoki2020@gmail.com   ononaoki2020@gmail.com   5         <![CDATA[ J1900搭建家庭Web服务器]]>      http://www.f-learn.cn/class/17.html      <figure class="image"><img src="/Static/upload/source/20200907/8655f5629dac9b8e9.png"></figure><p>是时候跟RaspBerry Pi (树莓派)说一声再见了,它小巧省电又便捷,除了搭建Web服务器功能外,其它各种方面都很优秀。然后我的Pi 3b+折腾很久很久,然后又落灰几年。相比Pi &nbsp;4代的CPU提升了3-4倍,性能堪比主流PC会不会更好一些?最后调查它的性价比、系统和软件兼性很差,各种问题....彻底放弃。</p><h4><strong>你好,J1900</strong></h4><p>去各大网站观察、包括UP主直播硬件改装,所有包含与它相关的,我东嗅西闻积累过来的经验,最后选择了J1900,可以说它性价比超过了树莓派。本来它是N年前产物了,相对于它对NAS、软路由和家庭WEB服务器绰绰有余。</p><p>调查过程中,遇到过追求性能的人,确实是瞧不起J1900,为了玩转Exsi直接上较贵的DELL低功耗的主机(i3-9100T 4G 128G固态 ),本来自己做为屌丝很穷的IT男,少花钱定位目标明确,玩玩就可以了,不必较劲。</p><p>J1900是通过咸鱼购买,很幸运买到了8G内存和128G固态盘,咸鱼到手价格是400元赚到了。这款型号同样配置在某宝售卖1100元~1500元的价格,产品是没有说明手册的,相关设置、BIOS、接口、串口什么的都要自己琢磨。</p><figure class="image"><img src="/Static/upload/source/20200907/7535f5629f7064d59.png"></figure><p>说起J1900具体配置,是某宝工控机双网双串口(不做路由器其实没什么用),一直没有找到单网口无串口的主机,也考虑到了游娱宝盒,不想自己手动修改风扇、价格也不是很理想。咸鱼淘来的具体配置如下:</p><figure class="table" style="width:676.571px;"><table><thead><tr><th style="background-color:rgb(238, 238, 238);border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">硬件</th><th style="background-color:rgb(238, 238, 238);border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">配置</th></tr></thead><tbody><tr><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">CPU</td><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">4 x&nbsp;Intel(R) Celeron(R) CPU J1900 @ 1.99GHz&nbsp;</td></tr><tr><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">主板</td><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">To be filled by O.E.M. (属于小工厂制造的主板)</td></tr><tr><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">内存</td><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">tigo/金泰克 DDR3L 1600 8GB</td></tr><tr><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">网卡</td><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">双 RTL8111/8168/8411 PCI Express Gigabit Ethernet Controller</td></tr><tr><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">固态</td><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">SAMSUNG MZMTE128HMGR</td></tr><tr><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">BIOS</td><td style="border-bottom:1px solid rgb(221, 221, 221);border-left:1px solid rgb(221, 221, 221);border-right:1px solid rgb(221, 221, 221);border-top:1px solid rgb(221, 221, 221);padding:8px;">American Megatrends Inc.&nbsp;5.6.5</td></tr></tbody></table></figure><p><br><strong>1. 安装Ubuntu操作系统</strong></p><p>以往树莓派安装系统比较折腾,这次J1900很轻松完成了Ubuntu系统安装!我在这里详细说明正确安装方法:</p><p><strong>第一步&nbsp; 下载Ubuntu Server 服务器版镜像文件</strong><br>版本是 ubuntu server 18.04.5 镜像地址:</p><pre><code class="language-plaintext">http://releases.ubuntu.com/18.04/</code></pre><p><strong>第二步&nbsp;&nbsp;用Win32DiskImager刻录U盘</strong></p><p>下载刻录U盘软件建议用镜像烧录工具 Win32DiskImager,不要使用UltraISO, 错误会提示:出现安装程序无法从硬盘复制文件时遇到错误。</p><p><strong>第三步&nbsp;&nbsp;安装系统</strong><br>插入U盘,按住F11键(每个主板BIOS不同)选择U盘开始装。</p><figure class="image"><img src="/Static/upload/source/20200907/2815f562a4cd95643.png"></figure><p>安装系统选择 英文&nbsp;</p><figure class="image"><img src="/Static/upload/source/20200907/7765f562a5bf39239.png"></figure><p>操作系统 选择英文,不要选择中文</p><figure class="image"><img src="/Static/upload/source/20200907/3195f562ad1465529.png"></figure><p>自动获取网卡端口(DHCP) 建议不做任何操作,默认即可</p><figure class="image"><img src="/Static/upload/source/20200907/6355f562adb113373.png"></figure><p>因为有国内镜像不需要VPN加速,默认不填写下一步</p><figure class="image"><img src="/Static/upload/source/20200907/8885f562ae4a14146.png"></figure><p>镜像地址,默认中文官网地址,下载速度稍慢,为了稳定建议默认安装<br>网速条件不好的可以更换阿里云镜像地址,阿里云镜像地址:</p><pre><code class="language-plaintext">http://mirrors.aliyun.com/ubuntu </code></pre><figure class="image"><img src="/Static/upload/source/20200907/3845f562b2ceb09b7.png"></figure><p>建议不需要硬盘分区操作,直接默认下一步即可</p><figure class="image"><img src="/Static/upload/source/20200907/7625f562b3a6ff1f1.png"></figure><p>选择第二个,开始写入硬盘</p><figure class="image"><img src="/Static/upload/source/20200907/9825f562b461b6af3.png"></figure><p>填写用户名、服务器名称、登录账号和密码</p><p>&nbsp;</p><p><strong>1.1 远程登录SSH</strong></p><p>J1900安装完系统后,查询IP地址方便SSH登录,IP查询:</p><pre><code class="language-plaintext">ifconfig -a</code></pre><p>得到IP地址后,基本结束工作J1900安装工作,SSH登录方法如下:</p><pre><code class="language-plaintext">ssh&nbsp;用户名@IP地址</code></pre><pre><code class="language-plaintext"> 例: J1900 ip地址 192.168.1.55 J1900 密码和账号 jadmin 123456 输入: ssh jadmin@192.168.1.55 回车提示密码登录即可</code></pre><p><br><strong>1.2 解决Ubuntu常见的BUG问题</strong><br><strong>针对J1900完美解决关机、重启出现卡死</strong><br>16.04版本对关机BUG需要替换内核过程很麻烦。18.08.5版本增加以下参数即可解决!<br><strong>第一步&nbsp;打开文件</strong></p><pre><code class="language-plaintext">sudo vim /etc/modprobe.d/blacklist-nouveau.conf</code></pre><p><strong>第二步&nbsp;复制以下内容</strong></p><pre><code class="language-plaintext">blacklist nouveau</code></pre><p><strong>第三步&nbsp;禁用 Nouveau</strong></p><pre><code class="language-plaintext">sudo echo options nouveau modeset=0 | sudo tee -a /etc/modprobe.d/nouveau-kms.conf</code></pre><p><strong>最后&nbsp;更新配置</strong></p><pre><code class="language-plaintext">sudo&nbsp;update-initramfs&nbsp;-u</code></pre><p>&nbsp;</p><figure class="image"><img src="/Static/upload/source/20200907/2425f562bacbc1154.png"></figure><p><br><strong>2.&nbsp;安装宝塔</strong></p><p>Ubuntu系统完美解决后,开始搭建Web管理软件,国内知名度最高的宝塔软件。它支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能,非常强大。</p><p>输入以下命令进行下载,自动安装,过程可能需要几十分钟:</p><pre><code class="language-plaintext">wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh &amp;&amp; sudo bash install.sh </code></pre><figure class="image"><img src="/Static/upload/source/20200907/4125f562bcc030f93.png"></figure><p>选择 y 开始自动安装</p><figure class="image"><img src="/Static/upload/source/20200907/5145f562be5339312.png"></figure><p>安装完成后,提示给您内外网IP地址和账号密码</p><p><strong>2.1&nbsp;配置宝塔</strong></p><figure class="image"><img src="/Static/upload/source/20200907/8085f562bf4d75431.png"></figure><p>输入ssh客户端账号密码即可登录</p><p>&nbsp;</p><p><strong>第一步&nbsp; 安全入口修改</strong></p><p>1&nbsp; 点击"安全"栏目,防火墙新增放行端口 9100,备注为宝塔面板端口。<br>2 &nbsp;点击"面板设置"栏目, 面板端口改为9100,安全入口改为webserver,面板用户和密码更改简单的。</p><p>下次入口登录地址:</p><pre><code class="language-plaintext">http://192.168.1.55:9100/webserver&nbsp;</code></pre><p>&nbsp;</p><p style="text-align:justify;"><strong>第二步&nbsp; 安装环境和软件</strong></p><p style="text-align:justify;"><strong>PHP:</strong></p><pre><code class="language-plaintext">Nginx 1.18.0 轻量级,占有内存少,并发能力强 MySQL 5.562 MySQL是一种关系数据库管理系统! PHP-7.4 PHP是世界上最好的编程语言 Pure-Ftpd 1.0.49 免费FTP服务器软件 phpMyAdmin 4.9 Web端MySQL管理工具 pySqliteAdmin 1.1 sqlite3可视化Web端管理工具</code></pre><p style="text-align:justify;"><strong>Node.js:</strong></p><pre><code class="language-plaintext">PM2管理器 4.2.3 node.js管理器,内置 node.js + npm + nvm + pm2 MongoDB 4.0.10 基于分布式文件存储的数据库,旨在为WEB应用提供可扩展的高性能数据存储解决方案</code></pre><p><strong>其它:</strong></p><pre><code class="language-plaintext">Fail2ban防爆破 1.6 防止恶意主机爆破服务站点,禁止导致多个身份验证错误主机 系统防火墙 2.3 提供系统防火墙(iptables/firewall/ufw)的可视化管理功能 Linux工具箱 1.6 Linux系统工具,配置DNS、Swap、时区、IP配置、内存盘! 宝塔SSH终端 完整功能的SSH客户端,仅用于连接本服务器 宝塔配置备份 1.0 快速备份宝塔相关配置数据</code></pre><p style="text-align:justify;">所有软件建议编译安装(安装过程时间很慢)如果有安装失败选择快速安装即可。<br><br><strong>第三步&nbsp; 一些问题可以留言问答</strong></p><p><i>家庭WEB服务器,域名怎么解析?</i><br>- <i>需要花生壳或内网穿透来解决,注意国家法律政策,80端口是不能使用的。</i></p><p><i>为什么PHP和Node.js两个一起安装?</i></p><p><i>- PHP当做运行博客,Node.js用来学习前端:)</i></p><p>&nbsp;</p><p><strong>好了,搭建J1900成功!</strong></p><p style="text-align:center;">&nbsp;</p>      09/07 2020       J1900搭建家庭Web服务器      Ono Naoki               <![CDATA[ Awesome APIs]]>      http://www.f-learn.cn/class/16.html      <h2>Awesome APIs</h2><h2>目录</h2><ul><li><a href="https://markdowntohtml.com/#%E4%BA%8C%E6%AC%A1%E5%85%83">二次元</a></li><li><a href="https://markdowntohtml.com/#%E5%8D%9A%E5%AE%A2">博客</a></li><li><a href="https://markdowntohtml.com/#%E4%B9%A6%E7%B1%8D">书籍</a></li><li><a href="https://markdowntohtml.com/#%E5%95%86%E4%B8%9A">商业</a></li><li><a href="https://markdowntohtml.com/#%E6%97%A5%E5%8E%86">日历</a></li><li><a href="https://markdowntohtml.com/#%E5%85%B1%E4%BA%AB%E6%B1%BD%E8%BD%A6">共享汽车</a></li><li><a href="https://markdowntohtml.com/#%E4%BA%91">云</a></li><li><a href="https://markdowntohtml.com/#%E4%BA%91%E5%AD%98%E5%82%A8">云存储</a></li><li><a href="https://markdowntohtml.com/#%E7%89%A9%E6%B5%81">物流</a></li><li><a href="https://markdowntohtml.com/#%E8%AE%BE%E8%AE%A1">设计</a></li><li><a href="https://markdowntohtml.com/#%E5%BC%80%E5%8F%91">开发</a></li><li><a href="https://markdowntohtml.com/#%E9%82%AE%E4%BB%B6">邮件</a></li><li><a href="https://markdowntohtml.com/#%E5%81%A5%E8%BA%AB--%E5%8F%AF%E7%A9%BF%E6%88%B4">健身 &amp; 可穿戴</a></li><li><a href="https://markdowntohtml.com/#%E5%A4%96%E6%B1%87--%E8%B4%A7%E5%B8%81">外汇 &amp; 货币</a></li><li><a href="https://markdowntohtml.com/#%E6%B8%B8%E6%88%8F">游戏</a></li><li><a href="https://markdowntohtml.com/#%E7%89%A9%E8%81%94%E7%BD%91">物联网</a></li><li><a href="https://markdowntohtml.com/#%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0">机器学习</a></li><li><a href="https://markdowntohtml.com/#%E5%9C%B0%E5%9B%BE">地图</a></li><li><a href="https://markdowntohtml.com/#%E9%80%9A%E4%BF%A1">通信</a></li><li><a href="https://markdowntohtml.com/#%E9%9F%B3%E4%B9%90">音乐</a></li><li><a href="https://markdowntohtml.com/#%E6%96%B0%E9%97%BB--%E4%BF%A1%E6%81%AF">新闻 &amp; 信息</a></li><li><a href="https://markdowntohtml.com/#%E7%AC%94%E8%AE%B0">笔记</a></li><li><a href="https://markdowntohtml.com/#%E6%94%AF%E4%BB%98">支付</a></li><li><a href="https://markdowntohtml.com/#%E6%91%84%E5%BD%B1">摄影</a></li><li><a href="https://markdowntohtml.com/#%E4%BD%8D%E7%BD%AE">位置</a></li><li><a href="https://markdowntohtml.com/#%E7%A4%BE%E4%BA%A4">社交</a></li><li><a href="https://markdowntohtml.com/#%E8%B4%AD%E7%89%A9">购物</a></li><li><a href="https://markdowntohtml.com/#%E5%A4%96%E5%8D%96">外卖</a></li><li><a href="https://markdowntohtml.com/#%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C">团队协作</a></li><li><a href="https://markdowntohtml.com/#%E6%96%87%E6%9C%AC%E5%88%86%E6%9E%90">文本分析</a></li><li><a href="https://markdowntohtml.com/#%E5%BE%85%E5%8A%9E">待办</a></li><li><a href="https://markdowntohtml.com/#%E6%97%85%E6%B8%B8">旅游</a></li><li><a href="https://markdowntohtml.com/#%E7%BF%BB%E8%AF%91">翻译</a></li><li><a href="https://markdowntohtml.com/#%E8%A7%86%E9%A2%91">视频</a></li><li><a href="https://markdowntohtml.com/#%E8%AF%AD%E9%9F%B3%E5%88%86%E6%9E%90">语音分析</a></li><li><a href="https://markdowntohtml.com/#%E5%9B%BE%E5%83%8F%E5%88%86%E6%9E%90">图像分析</a></li><li><a href="https://markdowntohtml.com/#%E5%A4%A9%E6%B0%94">天气</a></li><li><a href="https://markdowntohtml.com/#%E6%9B%B4%E5%A4%9A%E8%B5%84%E6%BA%90">更多资源</a></li></ul><h3>二次元</h3><ul><li><a href="https://github.com/AniList/ApiV2-GraphQL-Docs">AniList</a> - 通过 AniList GraphQL Api, 可以快速, 强大地访问超过500k的动漫和漫画条目, 包括角色, 创作人员和播放数据.</li><li><a href="https://github.com/Rabtman/AcgClub/wiki/%E5%AE%85%E7%A4%BEAcgClub-API">宅社 AcgClub</a> - 宅社 AcgClub API主要是提供 ACG 相关的聚合类服务.</li><li><a href="https://hitokoto.cn/api">一言</a> - 一言 API 主要是提供一句话服务,可以是动漫中的台词,也可以是网络上的各种小段子.</li><li><a href="https://kitsu.docs.apiary.io/#">Kitsu API</a> - Kitsu 是一个现代动漫探索平台, 可帮助您跟踪正在观看的动漫, 发现新动漫并与其他粉丝进行社交.</li></ul><h3>博客</h3><ul><li><a href="https://developers.google.com/blogger/">Blogger</a> - Blogger API v3 版本允许你创建新的博客, 编辑或者删除已经存在的博客, 查询符合特定标准的博客.</li><li><a href="https://github.com/Medium/medium-api-docs">Medium</a> - 访问 <a href="https://medium.com/">medium.com</a> 的数据.</li><li><a href="https://cloud-developer.weebly.com/">Weebly</a> -借助 Weebly Cloud, 你可以提供 Weebly 的最佳网站构建方式, 使你的客户能够在几分钟内创建自己的网站, 博客或在线商店, 同时完全控制帐单, 支持和客户关系.</li><li><a href="https://codex.wordpress.org/WordPress_APIs">WordPress</a> - 访问 WordPress 的 API.</li><li><a href="http://telegra.ph/api">Telegraph</a> - 访问 Telegraph 的 API, Telegram 的 发布服务.</li></ul><h3>书籍</h3><ul><li><a href="https://anapioficeandfire.com/">An API Of Ice And Fire</a> - 冰与火之歌的 API 提供 JSON 格式的“冰与火之歌”宇宙中的所有书籍, 人物, 房屋的数据. 无需验证身份. Node 和 Swift 库可用.</li><li><a href="https://openlibrary.org/developers/api">Open Library Books API</a> - Open Library 是一个开放的, 可编辑的图书馆目录, 为每一本出版的图书都建立了网页.</li><li><a href="http://api.repo.nypl.org/">The New York Public Library Digital Collections API</a> - 一个多世纪以来, 纽约公共图书馆已经积累了一系列罕见而独特的材料, 涵盖了所有有记录的知识.</li><li><a href="http://developer.bookshare.org/">Bookshare</a> - Bookshare API 使我们的合作伙伴能够使具有合格的阅读障碍的顾客搜索, 浏览和下载书籍和期刊.</li></ul><h3>商业</h3><ul><li><a href="https://airtable.com/api">Airtable</a> - Airtable Standard API 允许你创建, 读取, 更新和销毁记录.</li><li><a href="https://buffer.com/developers/api">Buffer</a> - The Buffer API 提供了访问用户的待发送和已发送的更新内容, 社交媒体资料, 定时访问和更多内容.</li><li><a href="https://developer.concur.com/api-reference/">Concur Labs</a> - 访问 Concur 的 RESTful API.</li><li><a href="https://developers.envoy.com/">Envoy</a> - 访问 Envoy 的 API.</li><li><a href="http://api.jotform.com/docs/">JotForm</a> - JotForm API 可以在不使用JotForm 网站的情况下连接到你的表单数据.</li><li><a href="https://developer.mailchimp.com/">MailChimp</a> - 访问 MailChimp 的 API.</li><li><a href="https://pruvan.com/resources/pruvan-api/">Pruvan</a> - 访问 Pruvan 的 API.</li><li><a href="https://quip.com/api/">Quip</a> - Quip REST API 让你实现流程自动化, 并将Quip 与你或你公司使用的其他产品集成在一起.</li><li><a href="https://developer.salesforce.com/page/Salesforce_APIs">Salesforce</a> - 访问 Salesforce 的 API.</li><li><a href="https://connect.squareup.com/">Square</a> - Square 提供简单的信用卡处理和针对各类业务的完整解决方案.</li><li><a href="https://www.wolfram.com/datadrop/quick-reference/web-api/">Wolfram Data Drop</a> - 访问 Wolfram Data Drop 的 RESTful API.</li></ul><h3>日历</h3><ul><li><a href="https://developers.google.com/google-apps/calendar/">Google Calendar</a> - Google Calendar API 可以让你将你的应用与 Google Calendar 集成, 为你吸引用户创造新的途径.</li><li><a href="https://msdn.microsoft.com/en-us/office/office365/api/calendar-rest-operations">Outlook Calendar</a> - The Calendar API 提供了访问由 Office 365 中 Azure Active Directory 保护的事件, 日历, 日历组以及以下域中的特定 Microsoft 帐户中的类似数据: Hotmail.com, Live.com, MSN.com, Outlook.com 和 Passport.com.</li></ul><h3>共享汽车</h3><ul><li><a href="https://www.lyft.com/developers">Lyft</a> - 允许访问实时 ETA, 可用性, 价格估计, 乘坐状态等数据.</li><li><a href="http://developer.10101111.com/resourceCenter/doc?r=api/content">神州租车</a> - 来自中国的共享汽车公司.</li><li><a href="https://developer.uber.com/">Uber</a> - 允许定制旅行体验, 请求出行, 后勤保障, 创建机器人等等.</li></ul><h3>云</h3><ul><li><a href="https://develop.aliyun.com/api/">阿里云</a></li><li><a href="https://cloud.baidu.com/doc/index.html">百度云</a></li><li><a href="http://www.bmob.cn/">Bmob</a></li><li><a href="https://cloud.google.com/apis/docs/overview">Google Cloud Platform</a></li><li><a href="https://leancloud.cn/">LeanCloud</a></li><li><a href="https://cloud.oracle.com/home">Oracle Cloud</a></li><li><a href="http://www.qiniu.com/">七牛</a></li><li><a href="https://cloud.tencent.com/document/api?lang=zh-cn">腾讯云</a></li><li><a href="https://www.wilddog.com/">野狗</a></li><li><a href="https://www.upyun.com/">又拍云</a></li></ul><h3>云存储</h3><ul><li><a href="https://developer.amazon.com/amazon-drive">Amazon Cloud Drive</a> - 借助 Amazon Cloud Drive 最新的 RESTful API 和 Android 与 iOS SDK, Amazon Drive 正转向为受邀的开发者提供服务, 以确保他们能够为其所支持的使用案例提供始终如一的可用云盘服务。</li><li><a href="https://developer.box.com/">Box</a> - 支持搜索, 元数据, 粒度权限模型, 企业级安全, 保留策略, 120种类型的文件预览功能.</li><li><a href="https://developers.digitalocean.com/">Digital Ocean</a> - 在55秒内部署SSD云服务器.</li><li><a href="http://www.documentcloud.org/help/api">Document Cloud</a> - DocumentCloud 运行在你通过 OpenCalais 上传的每一份文件中, 为你提供有关人员, 地点和组织的广泛信息.</li><li><a href="https://www.dropbox.com/developers">Dropbox</a> - 为和文件相关的应用提供了一个强大的 API.</li><li><a href="https://developers.google.com/drive/">Google Drive</a>- Google Drive API 允许你从移动设备和网络应用中读取, 写入和同步存储在 Google Drive 中的文件.</li><li><a href="https://dev.onedrive.com/">OneDrive</a> - 访问 OneDrive 中的文件.</li><li><a href="https://www.qnap.com/event/dev/useng/p_about.php">QNAP</a> - 借助 QNAP 开发工具包(API 和 SDK), 开发人员可以设计能在客户端设备(如智能手机或 PC)上运行的应用, 并远程管理和访问存储在NAS上的文件和文档。</li><li><a href="http://www.verizonenterprise.com/cloud/documentation/StorageAPIReference.htm">Verizon Cloud</a> - 上传, 检索和管理大量数据, 通过 API 调用访问数据, 查看预先打包的报告, 依靠 Verizon 的安全措施保证数据安全和随时可用.</li></ul><h3>物流</h3><ul><li><a href="https://docs.aftership.com/api/">AfterShip</a> - 支持超过200家物流公司的物流跟踪和通知.</li><li><a href="http://www.aikuaidi.cn/api/">爱快递</a> - 支持超过200家中国物流公司.</li><li><a href="https://www.aramex.com/developers/aramex-apis">Aramex</a> - 通过全球物流提供商网络提供包裹, 快递和货运服务.</li><li><a href="http://www.canadapost.ca/cpo/mc/business/productsservices/developers/services/fundamentals.jsf">Canada Post</a> - 允许电子商务解决方案提供商和在线商家将加拿大邮政服务(如邮寄,评级和跟踪数据)整合到平台或网站中.</li><li><a href="http://www.dhl-usa.com/en/express/resource_center/integrated_shipping_solutions.html">DHL</a> - DHL XML 服务为开发者提供了整合 DHL 来自140多个国家的服务可用性, 运输时间, 费率, 物流跟踪以及更多功能的能力.</li><li><a href="https://www.fedex.com/us/developer/web-services/index.html">FedEx</a> - FedEx 网络服务允许企业将 FedEx 的运输功能集成到他们现有的仓库管理系统中, 无需现场托管。</li><li><a href="http://www.kuaidi100.com/openapi/">快递100</a> - 支持超过100中国物流公司和300家国际物流公司.</li><li><a href="http://www.kuaidi.com/openapi.html">快递网</a> - 支持超过100家物流公司.</li><li><a href="http://www.kdniao.com/">快递鸟</a> - 支持超过400家物流公司.</li><li><a href="http://www.ups.com/content/us/en/resources/techsupport/developercenter.html">UPS</a> - 提供了将 UPS 的运输功能集成到网站和企业应用程序的能力.</li></ul><h3>设计</h3><ul><li><a href="http://developer.dribbble.com/v1/">Dribbble</a> - 访问 Bucket, 项目, 作品, 团队, 用户和工作等数据.</li><li><a href="https://www.behance.net/dev/api/endpoints/">Behance</a> - 获取项目, 可关注的广告素材, 创意领域, 用户, 收藏等信息.</li><li><a href="https://www.deviantart.com/developers/">deviantART</a> - 允许获取 deviantart.com 的数据.</li></ul><h3>开发</h3><ul><li><a href="https://developer.artik.cloud/documentation/api-reference/">ARTIK Cloud</a> - ARTIK Cloud API 提供访问 ARTIK Cloud 平台的数据.</li><li><a href="https://m2x.att.com/developer/documentation/v2/overview">AT&amp;T M2X</a> - M2X 的 RESTful API 简化了设备和 M2X 服务之间的连接, 使你能够构建利用时间序列数据分析和分布式的高可用性时间序列数据存储的应用程序和服务, 为你的客户和最终用户提供有意义的信息, 并构建物联网和 M2M 解决方案, 而无需管理自己的存储基础架构.</li><li><a href="https://developer.atlassian.com/cloud/bitbucket/">Bitbucket</a> - Bitbucket 是一个基于 Web 的托管服务, 由 Atlassian 拥有, 用于使用 Mercurial 或 Git 版本控制系统的源代码和开发项目.</li><li><a href="https://dev.bitly.com/">bitly</a> - bitly是一种最简单, 最有趣的方式来保存, 分享和发现来自网络的链接.</li><li><a href="https://buddy.works/api/reference/getting-started/overview">Buddy</a> - Buddy 是一个持续集成服务. 它支持 GitHub, Bitbucket 和 Gitlab 项目. 自动化 Web 和 Docker 应用程序的生命周期: 构建, 测试和部署.</li><li><a href="https://wiki.mozilla.org/Bugzilla:REST_API">Bugzilla</a> - Bugzilla 是一个基于 Web 的通用的错误追踪器和测试工具, 最初由 Mozilla 项目开发和使用, 并在 Mozilla Public License 下获得许可.</li><li><a href="https://circleci.com/docs/api/v1-reference/">CircleCI</a> - CircleCI API 是一个 RESTful, 全功能的 API, 允许你访问所有信息并触发 CircleCI 中的所有操作.</li><li><a href="https://open.coding.net/">Coding</a> - 访问 <a href="https://coding.net/">https://coding.net/</a> 的 API.</li><li><a href="https://www.diycode.cc/api">diycode</a> - 访问 <a href="https://www.diycode.cc/">https://www.diycode.cc/</a> 的 API.</li><li><a href="http://gank.io/api">干货集中营</a> - 访问 <a href="http://gank.io/">http://gank.io/</a> 的 API.</li><li><a href="https://developer.github.com/v3/">GitHub</a> - 世界上领先的软件开发平台.</li><li><a href="https://developer.gitter.im/docs/welcome">Gitter</a> - GitHub 的聊天工具.</li><li><a href="https://docs.gitlab.com/ee/api/README.html">GitLab</a> - 通过一个简单而强大的 API 自动化 GitLab.</li><li><a href="https://developers.google.com/android-publisher/">Google Play Developer</a> - Google Play Developer API 允许你执行大量的发布和应用程序管理任务。</li><li><a href="https://ipinfo.io/developers">IPInfo.io</a> - 使用ipinfo.io IP查找API快速简单地将IP地理位置集成到你的脚本或网站。</li><li><a href="https://laravel-china.org/topics/3097">Laravel China</a> - 访问 <a href="https://laravel-china.org/">https://laravel-china.org/</a> 的 API.</li><li><a href="https://github.com/openhab/openhab1-addons/wiki/REST-API">openHAB</a> - openHAB 的 REST API 服务于不同的目标. 它可用于将 openHAB 与其他系统集成, 因为它允许读取项目和项目状态以及状态更新或发送项目命令. 此外, 它还提供对站点地图的访问, 因此它是远程用户界面(例如胖客户端或完全基于 Javascript 的 Web 客户端)使用的接口.</li><li><a href="http://www.oschina.net/openapi">开源中国</a> - 访问 <a href="https://oschina.net/">https://oschina.net/</a> 的 API.</li><li><a href="https://docs.particle.io/reference/api/">Particle</a> - Particle Cloud API 是一个 REST API.</li><li><a href="https://proxycrawl.com/">ProxyCrawl</a> - 没有拦截、验证码和代理地爬取任何网站.</li><li><a href="http://goqr.me/api/">QR Code Generator</a> - 你可以使用 QR 码生成器 Web API 在 api.qrserver.com 上生成和解码/读取 QR 码图形.</li><li><a href="https://ruby-china.org/api-doc/">Ruby China</a> - 访问 <a href="https://ruby-china.org/">https://ruby-china.org/</a> 的 API.</li><li><a href="https://www.scraperapi.com/documentation">Scraper API</a> - 使用Scraper API轻松构建可扩展的web scrapers.</li><li><a href="https://api.stackexchange.com/docs">StackExchange</a> 访问 Stack Exchange API.</li><li><a href="https://subversion.apache.org/docs/api/1.8/">SVN</a> - 文档涵盖了 Subversion 库提供的公共 API. 它主要面向程序员, 无论是从事 Subversion 本身的开发人员, 还是希望使用这些 API 的第三方应用程序开发人员.</li><li><a href="https://docs.travis-ci.com/api/">TravisCI</a> - 这是官方 Travis CI Web 界面使用的 API, 因此 web 界面所能做的所有事情都可以通过 API 完成.</li><li><a href="https://www.v2ex.com/p/7v9TEc53">V2EX</a> - 访问 <a href="https://www.v2ex.com/">https://www.v2ex.com/</a> 的 API.</li><li><a href="https://github.com/w3c/w3c-api">W3C</a> - 作为对 W3C 社区的开发人员要求与 W3C 的数据进行交互的要求的相应, W3C Systems 团队开发了一个 Web API. 通过它, 规格, 群组, 组织和用户的数据变得可用. W3C API 是基于 JSON 格式的仅针对公开数据的只读 Web API.</li><li><a href="https://github.com/ZenHubIO/API">ZenHub</a> - ZenHub 是唯一的原生集成在 GitHub 接口中的项目管理工具.</li></ul><h3>邮件</h3><ul><li><a href="http://context.io/">Context.IO</a> - Context.IO 是一个现代的, 可扩展的电子邮件 API, 简化了电子邮件数据的处理.</li><li><a href="https://developers.google.com/gmail/api/">Gmail</a> - 现代, 简单, 快速, RESTful.</li><li><a href="https://www.inboxapp.com/docs">Inbox</a> - Inbox 提供了用于与邮件提供商合作的现代 RESTful API. 停止与旧的协议角力, 专注于构建伟大的应用程序.</li><li><a href="https://mandrillapp.com/api/docs/">Mandrill</a> - Mandrill 就像 MailChimp, 适用于应用程序. 发送交易性的, 易于触发和个性化的电子邮件, 然后跟踪结果.</li><li><a href="https://msdn.microsoft.com/en-us/office/office365/api/mail-rest-operations">Outlook Mail</a> - Outlook Mail API允许你阅读, 创建和发送消息和附件, 查看和响应事件消息, 以及管理由 Office 365中的 Azure Active Directory 保护的文件夹. 它还在 Microsoft 帐户中专门提供了与这些域中相同的功能: Hotmail.com, Live.com, MSN.com, Outlook.com 和 Passport.com.</li></ul><h3>健身 &amp; 可穿戴</h3><ul><li><a href="https://developers.adidas.com/services">Adidas AG</a> - 访问 Adidas AG 的 API.</li><li><a href="https://dev.fitbit.com/">Fitbit</a> - Fitbit API 允许开发人员在自己的应用程序, 产品和服务中与 Fitbit 数据进行交互.</li><li><a href="https://jawbone.com/up/developer">Jawbone UP</a> - 利用步数, 运动, 食物和睡眠跟踪的力量建立自己的产品和体验.</li><li><a href="https://developer.sony.com/develop/services/lifelog-api/">Lifelog</a> - 索尼的 Lifelog API使你可以安全地访问智能手机中的传感器和 SmartWear 设备收集到的用户的生活方式, 健身和健康数据. 利用它在你的应用程序或服务中创建的具有创造性的新用例.</li><li><a href="https://build.misfit.com/">Misfit</a> - 你现在可以利用一整套工具将 Misfit 的活动跟踪, 睡眠跟踪和可穿戴控制功能集成到你的产品和服务中.</li><li><a href="https://developer.nike.com/content/nike-developer-cq/us/en_us/index/documentation/api-docs.html">Nike+</a> - Nike Activity Services 会将用户活动汇总的详细信息返回给 Nike +. 例如, 用户的跑步细节, 如平均速度, 时间, 距离, 从他/她的 Nike + FuelBand 获得的 NikeFuel, 终身成就等等.</li><li><a href="http://www.reconinstruments.com/developers/develop/for-recon-engage/api-documentation/">Recon</a> - 访问 <a href="http://www.reconinstruments.com/">Recon instruments</a> 的数据.</li><li><a href="https://strava.github.io/api/">Strava</a> - Strava V3 API 是一个公开可用的接口, 允许开发人员访问丰富的 Strava 数据集.</li><li><a href="http://www.withings.com/us/en/developers">Withings</a> - Withings API 允许开发人员利用 Withings 设备和 Withings 记录的数据创建应用程序.</li></ul><h3>外汇 &amp; 货币</h3><ul><li><a href="https://1forge.com/">1Forge.com</a> - 通过 JSON 和 WebSocket 的实时外汇和加密服务.</li></ul><h3>游戏</h3><ul><li><a href="https://dev.battle.net/">暴雪</a> - Battle.net 是一个在线电子游戏网站, 其特点是由暴雪娱乐开发的游戏集合. 可用的 Battle.net API 包括 D3, WoW, SC2, 社区 API 和游戏数据 API.</li><li><a href="https://developer.clashofclans.com/#/">部落冲突</a> - 部落冲突 API 提供了接近实时的游戏相关数据.</li><li><a href="https://developers.eveonline.com/">星战前夜</a> - EVE Online 是最受欢迎的科幻大型多人在线角色扮演游戏(MMORPG)之一. EVE Online CREST 和 XML API 提供了对角色, 行业, 市场, Solar System, 联盟和企业以及其他游戏数据的编程访问.</li><li><a href="https://developers.facebook.com/docs/games">Facebook Games Services</a> - Facebook Games Services 为游戏开发者提供了各种服务, 包括(但不限于) 成就 API, 分数 API, 应用通知, 请求, 游戏养成和 Facebook SDK for Unity.</li><li><a href="https://developers.google.com/games/">Google Play Games Services</a> - Google Developers Games 网站提供了各种 API, SDK 和服务, 包括(但不限于)游戏发布 API, Unity 插件, Play 游戏服务(成就, 排行榜, 玩家统计等)和 Google AdMob.</li><li><a href="https://developer.riotgames.com/">Riot Games</a> - 为英雄联盟开发者社区提供安全可靠的游戏数据访问.</li><li><a href="https://steamcommunity.com/dev">Steam Web APIs</a> - Steam Web API 允许开发人员向 Steam 查询他们可以在自己的网站上展示的信息. 目前我们提供的唯一 API 提供了 Team Fortress 2 的项目数据, 但是这个列表将随着时间的推移而增长.</li><li><a href="http://www.giantbomb.com/api/">Giant Bomb</a> - Giant Bomb API 提供了对 Giant Bomb 网站上的大量信息的程序化访问, 例如游戏名称, 评级, 视频, 公司, 主题, 流派等等。</li></ul><h3>物联网</h3><ul><li><a href="https://developer.automatic.com/">Automatic</a> - 为和 Automatic 数据交互提供了 REST API, 实时事件 API 和 流式 API.</li><li><a href="https://developer.amazon.com/public/solutions/alexa/alexa-voice-service/content/avs-api-overview">Amazon Alexa</a> - 利用 Alexa Voice Service API, 开发人员可以通过话筒和扬声器为连接的产品提供语音功能.</li><li><a href="https://developers.google.com/actions/">Google Assistant</a> - Actions on Google 允许你为 Google Assistant 创建应用.</li><li><a href="https://developer.home8systems.com/">Home8</a> - 100%无线物联网系统, Home8 简化了智能报警系统的 DIY 安装, 同时为你提供最佳的视频认证报警保护.</li><li><a href="https://developers.athom.com/api/">Homey</a> - 访问 Homey 的 API.</li><li><a href="https://developers.hp.com/printos/printos">HP Print</a> - 访问 HP Print 的 API.</li><li><a href="https://api.developer.lifx.com/">LIFX</a> - LIFX 是一款多色智能 WiFi LED 灯泡. LIFX HTTP API 允许你通过互联网控制 LIFX 设备, 并且是与 LIFX 设备交互的REST API.</li><li><a href="https://api.lightwaverf.com/">LightwaveRF</a> - 该 API 概述了 LightwaveRF 系统当前正在使用的本地命令协议.</li><li><a href="http://developers.microbees.com/documentation/#reference">microBees</a> - 轻松执行 REST API 并订阅实时消息.</li><li><a href="https://www.moj.io/developer/">Mojio</a> - 使用 REST 节点进行请求和响应类型集成, 使用 PUSH API 来实时推送数据.</li><li><a href="https://mystrom.ch/de/mystrom-api">myStrom</a> - myStrom WLAN Energy Control Switch 提供了一个 REST API, 允许你从 myStrom 独立的本地网络直接访问/控制交换机.</li><li><a href="http://neur.io/developers/">Neurio</a> - Neurio 是一个带有公共 API 的开放平台, 所以你可以任意扩展它. 将其连接到 Web 服务, 或编写自己的应用程序.</li><li><a href="https://developers.meethue.com/">Philips Hue</a> - 飞利浦的 Hue 连接的灯泡和桥接器让你能够完全控制你的照明.</li><li><a href="https://smappee.atlassian.net/wiki/display/DEVAPI/SmappeeDevAPI+Home">Smappee</a> - 使用 Smappee 的 API, 可以帮助你测量电能消耗和太阳能生产量.</li><li><a href="https://developers.athom.com/api/">SmartThins</a> - 访问 SmartThings 的 API.</li><li><a href="http://developers.stacklighting.com/">Stack Lighting</a> - Stack API 是一个 REST API, 它定义了一组允许开发人员执行请求并通过 HTTP 协议接收响应的函数. 该 API 为开发人员提供了控制亮度, 色温, 运动设置, 环境光线感应设置以及其他功能的功能, 以根据个人喜好调整 Stack 响应式照明.</li><li><a href="https://dev.vin.li/#/home">Vinli</a> - Vinli 是一个用于简单快速地构建车联网应用的平台.</li><li><a href="http://www.yeelight.com/en_US/developer">Yeelight</a> - Yeelight 智能 LED 产品支持通过 WiFi 远程控制.</li></ul><h3>机器学习</h3><ul><li><a href="https://aws.amazon.com/cn/documentation/machine-learning/">Amazon Machine Learning</a> - Amazon Machine Learning 使开发人员可以轻松构建智能应用程序, 包括欺诈检测, 需求预测, 有针对性的市场营销和点击预测等.</li><li><a href="https://bigml.com/api">BigML</a> - BigML 平台具有异常检测, 聚类分析, 用于决策树的 SunBurst 可视化, 文本分析等功能.</li><li><a href="https://www.diffbot.com/dev/docs/">Diffbot</a> - Diffbot 平台利用 AI, 计算机视觉, 机器学习和自然语言处理的组合, 自动从网页(如文本, 图像, 视频, 产品信息和评论)提取数据.</li><li><a href="https://cloud.google.com/prediction/docs/">Google Cloud Prediction</a> - Google Cloud Prediction API 提供了一个 RESTful API 来构建机器学习模型. Prediction 的基于云的机器学习工具可以帮助你分析数据, 为你的应用程序添加各种功能, 如客户情绪分析, 垃圾邮件检测, 推荐系统等.</li><li><a href="https://developer.ibm.com/watson/">IBM Watson</a> - 允许开发人员构建利用机器学习技术的应用程序, 如自然语言处理, 计算机视觉和预测.</li><li><a href="https://azure.microsoft.com/en-us/services/cognitive-services/">Microsoft Azure Machine Learning</a> - Microsoft Azure 机器学习平台提供自然语言处理, 推荐引擎, 模式识别, 计算机视觉和预测建模等功能.</li></ul><h3>地图</h3><ul><li><a href="http://lbs.amap.com/">高德地图</a> - 访问高德地图的 Web API.</li><li><a href="http://lbsyun.baidu.com/index.php?title=webapi">百度地图</a> - 访问百度地图的 Web API.</li><li><a href="https://www.microsoft.com/maps/choose-your-bing-maps-API.aspx">必应地图</a> - 访问必应地图的 API.</li><li><a href="https://developers.google.com/maps/web-services/?hl=en">Google Maps</a> - Google Maps web Service 是一个 Google 服务的 HTTP 接口集合, 为你的地图应用程序提供地理数据.</li><li><a href="https://developer.here.com/develop/rest-apis">Here Maps</a> - 使用简单的 HTTP GET 方法提供地图, 路由, 地理编码, 地点, 定位, 交通, 过境和天气信息.</li><li><a href="http://lbs.qq.com/webservice_v1/index.html">腾讯地图</a> - 访问腾讯地图的 WebService API.</li></ul><h3>通信</h3><ul><li><a href="https://developer.ciscospark.com/">Cisco Spark</a> - 创建一个房间, 邀请他人, 搜索公司里的人, 将信息发布到一个房间, 获取房间历史记录, 或者在他人发布新信息时实时通知他们.</li><li><a href="https://open-doc.dingtalk.com/">Dingtalk</a> - 访问 Dingtalk 的 API.</li><li><a href="http://docs.dondeesta.apiary.io/#introduction/api">dondeEsta Family</a> - 访问 dondeEsta family 的 API.</li><li><a href="https://fleep.io/fleepapi/">Fleep</a> - Fleep是所有团队和项目的使者.</li><li><a href="https://dev.groupme.com/docs/v3">GroupMe</a> - GroupMe API 使你能够使用群组消息传递功能来增强现有的应用程序, 创建有趣的新体验, 或者只是为现有的群组添加一些调味品.</li><li><a href="https://developer.indoona.com/">indoona</a> - 基于 HTTPS 的 The indoona RESTful API 使你能够: 给 indoona 用户和群组发送信息, 创建特定的联系人地址簿使 indoona 用户能够与你的应用聊天.</li><li><a href="https://developers.line.me/">LINE</a> - LINE是一款免费应用, 用于在智能手机, 平板电脑和个人电脑等电子设备上进行即时通讯.</li><li><a href="https://developers.messagebird.com/">MessageBird</a> - MessageBird API 将你的网站或应用程序连接到世界各地的运营商. 使用API, 你可以集成短信, 聊天和语音.</li><li><a href="https://api.slack.com/">Slack</a> - Slack是基于云的专有团队协作工具和服务.</li><li><a href="https://core.telegram.org/api">Telegram</a> - The Bot API 允许你轻松创建使用 Telegram 消息作为接口的应用. The Telegram API 允许你建立自己的定制 Telegram 客户端.</li><li><a href="http://docs.justyo.co/">Yo</a> - Yo 是最简单的通知平台.</li></ul><h3>音乐</h3><ul><li><a href="https://developers.deezer.com/">Deezer</a> - Deezer 是一种基于网络的音乐流服务.</li><li><a href="https://github.com/kaolafm/api">考拉FM</a> - 允许访问考拉 FM 的数据.</li><li><a href="http://www.last.fm/zh/api?setlang=en">Last.fm</a> - Last.fm API 允许任何人使用 Last.fm 数据创建他们自己的程序, 无论他们使用网络, 桌面还是移动设备上.</li><li><a href="https://developer.musicgraph.com/">MusicGraph</a> - 由 Senzari 推出的 MusicGraph API 是世界上第一个音乐知识引擎, 它将作为一个功能强大的『图形 API』的方式提供, 开发人员可以利用它来利用强大的音乐智能来增强其应用.</li><li><a href="https://developer.musixmatch.com/">Musixmatch</a> - 使用 Musixmatch API 将歌词带到你的应用程序中.</li><li><a href="http://www.onemusicapi.com/">One Music</a> - One Music API 能够提供令人惊讶的音乐范围的元数据, 因为它汇集了现有的, 维护良好的在线数据库.</li><li><a href="http://open.qingting.fm/">蜻蜓FM</a> - 允许访问蜻蜓 FM 的数据.</li><li><a href="http://wq.qq.com/">企鹅FM</a> - 允许访问企鹅 FM 的数据.</li><li><a href="https://developers.soundcloud.com/">SoundCloud</a> - 允许用户在网络上上传和分享音乐.</li><li><a href="https://developer.spotify.com/web-api/">Spotify</a> - Spotify 的 Web API 可让你的应用程序从 Spotify 音乐目录获取数据, 并管理用户的播放列表和保存的音乐.</li></ul><h3>新闻 &amp; 信息</h3><ul><li><a href="http://www.brewerydb.com/developers">BrewereyDB</a> - BreweryDB 是一个包含啤酒厂, 啤酒, 啤酒活动和公会信息的数据库.</li><li><a href="https://www.diigo.com/api_dev">Diigo</a> - Diigo API 允许你构建与 Diigo 服务交互的应用程序.</li><li><a href="https://developer.feedly.com/">feedly</a> - 访问 feedly 的 API.</li><li><a href="https://docs.genius.com/">Genius</a> - Genius API 帮助维基百科建立世界上最伟大的公共知识项目.</li><li><a href="https://www.goodreads.com/api">goodreads</a> - Goodreads API 允许开发人员访问 Goodreads 数据, 以帮助处理书籍的网站或应用程序更加个性化, 社交化和更具吸引力.</li><li><a href="https://github.com/HackerNews/API">HackerNews</a> - 官方 HN API 的文档和示例.</li><li><a href="https://www.inoreader.com/developers/">Inoreader</a> - Inoreader API 允许你帮助用户订阅订阅源, 阅读文章或将其编目以供稍后查看.</li><li><a href="https://www.instapaper.com/api">Instapaper</a> - Instapaper API 允许第三方应用程序将 URL 添加到 Instapaper.</li><li><a href="https://docs.narro.co/#introduction">Narro</a> -访问文章和读物, 并代表客户提交.</li><li><a href="https://newsblur.com/api">Newsblur</a> - NewsBlur 的 API 允许用户获取摘要, 摘要数量, 摘要图标, 内容分析和独立的摘要故事.</li><li><a href="http://www.npr.org/api/index">NPR</a> - NPR 的 API 提供了一种灵活, 强大的方式来访问你最喜欢的 NPR 内容.</li><li><a href="https://pinboard.in/api">Pinboard</a> - Pinboard API 是一种以编程方式与书签, 笔记和其他 Pinboard 数据进行交互的方式.</li><li><a href="https://getpocket.com/developer/">Pocket</a> - 通过集成 Pocket API, 将『保存后使用』的功能带给用户和应用程序.</li><li><a href="https://api.producthunt.com/v1/docs">Product Hunt</a> - 访问 <a href="https://www.producthunt.com/">producthunt.com</a> 的 API.</li><li><a href="https://developer.nytimes.com/">纽约时报</a> - 访问『纽约时报』的 API.</li><li><a href="https://developer.usatoday.com/docs/">今日美国</a> - 访问来自『今日美国』的新闻和有趣的故事.</li></ul><h3>笔记</h3><ul><li><a href="https://dev.yinxiang.com/doc/">印象笔记</a> - 访问印象笔记的 API 参考和指南.</li><li><a href="https://msdn.microsoft.com/en-us/office/office365/howto/onenote-supported-ops">OneNote</a> - 访问 OneNote 的 RESTful API.</li><li><a href="http://note.youdao.com/open/">有道云笔记</a> - 访问有道云笔记的 Web API.</li></ul><h3>支付</h3><ul><li><a href="https://developer.paypal.com/docs/api/">PayPal</a> - 访问 PayPal REST API.</li><li><a href="https://developers.paymill.com/index">Paymill</a> - 访问完整的 API 参考, 获得你需要知道引入 PAYMILL 相关的任何信息。</li><li><a href="https://paytm.com/business/payments/developers">Paytm</a> - 访问你需要使用的 API 的详细信息, 使用 Paytm Wallet 在你的应用/网站上进行付款, 并处理与付款相关的操作问题(例如: 退款, 交易状态检查).</li><li><a href="https://www.wepay.com/">WePay</a> - WePay 专为平台, 如市场, 众筹网站和小型商业工具而设计. 可获得无缝的用户体验和防欺诈保护.</li></ul><h3>摄影</h3><ul><li><a href="https://github.com/500px/api-documentation">500px</a> - 500px API 提供对 500px 功能和内容的编程访问.</li><li><a href="https://developers.giphy.com/docs/">Giphy</a> - 世界上最大的 GIF 图片库.</li><li><a href="https://api.imgur.com/">Imgur</a> - 使用 Imgur 的 RESTful API, 你可以做任何你能够在 <a href="http://imgur.com/">imgur.com</a> 网站做的事情.</li><li><a href="https://pixabay.com/api/docs/">Pixabay</a> - pixabay API 是一个 RESTful 接口, 用于搜索和检索 Creative Commons CC0 下发布的 Pixabay 图像和视频.</li><li><a href="https://unsplash.com/documentation">Unsplash</a> - 访问世界上最强大的图片引擎.</li><li><a href="https://unsplash.it/">Unsplash It</a> - 使用来自 <a href="https://unsplash.com/">unsplash</a> 的优美的占位图.</li><li><a href="https://source.unsplash.com/">Unsplash Resource</a> - 一个用于嵌入 <a href="https://unsplash.com/">Unsplash</a> 图片的简单 API.</li></ul><h3>位置</h3><ul><li><a href="https://www.yelp.com/developers/documentation/v2/overview">Yelp</a> - 访问 Yelp 的 API.</li><li><a href="https://developers.zomato.com/api">Zomato</a> - Zomato API 使你能够访问全球10000个城市超过150万家餐厅的最新, 最详尽的信息.</li></ul><h3>社交</h3><ul><li><a href="https://disqus.com/api/docs/">Disqus</a> -Disqus 平台包含各种功能, 如社交整合, 社交网络, 用户档案, 垃圾邮件和审核工具, 分析, 电子邮件通知和移动评论.</li><li><a href="https://developers.facebook.com/docs/?locale=en_US">Facebook</a> - Facebook是一家美国营利性公司, 也是一家在线社交媒体和社交网络服务公司.</li><li><a href="https://www.flickr.com/services/api/">Flickr</a> - 几乎是世界上最好的在线照片管理和共享的应用.</li><li><a href="https://developer.foursquare.com/">Foursquare</a> - Foursquare API 让你可以访问我们的世界级的地点数据库, 并且可以与 Foursquare 用户和商家进行互动.</li><li><a href="https://www.instagram.com/developer/">Instagram</a> - 与朋友和家人用一种简单有趣并有创造性的方式来捕捉, 编辑, 分享照片, 视频和信息.</li><li><a href="https://developer.linkedin.com/">LinkedIn</a> - 世界上最大的专业网络平台.</li><li><a href="https://developers.pinterest.com/">Pinterest</a> - Pinterest API 使你能够访问用户的 Pinterest 数据, 喜欢他们的信息流, Pins, 关注者等.</li><li><a href="https://www.reddit.com/dev/api/">Reddit</a> - Reddit 是一个美国社交新闻聚合, 网上内容评分, 和讨论的网站.</li><li><a href="https://www.tumblr.com/docs/en/api/v2">Tumblr</a> - Tumblr 是一个表达自我, 发现自我, 并与你喜爱的东西紧密相连的地方.</li><li><a href="https://dev.twitter.com/">Twitter</a> - 访问 Twitter 的数据.</li><li><a href="http://open.weibo.com/wiki/API">微博</a> - 访问微博, 用户, 评论, 收藏等内容.</li></ul><h3>购物</h3><ul><li><a href="https://developer.amazon.com/services-and-apis">Amazon</a> - 访问Amazon 的 API.</li><li><a href="https://developer.bestbuy.com/">Best Buy</a> -访问 Best Buy 的 APIs.</li><li><a href="http://open.dangdang.com/">当当</a> - 访问当当网的 API.</li><li><a href="https://go.developer.ebay.com/">eBay</a> - 访问 eBay 的 API.</li><li><a href="https://developer.homedepot.com/">Home Depot</a> - 访问 Home Depot 的API.</li><li><a href="https://jos.jd.com/api/index.htm">京东</a> - 访问京东的 API.</li><li><a href="http://docs.semantics3.com/reference">Semantics3</a> - 访问 Semantics3 的 RESTful API.</li><li><a href="https://developer.slice.com/">Slice</a> - 访问 Slice 的 REST API.</li><li><a href="https://open.taobao.com/doc2/api_list.htm">淘宝</a> - 访问淘宝的 API.</li></ul><h3>外卖</h3><ul><li><a href="http://dev.waimai.baidu.com/">百度外卖</a> - 百度外卖是中国的一个外卖平台.</li><li><a href="http://developer.dianping.com/">大众点评</a> - 大众点评是中国的一个外卖平台.</li><li><a href="http://openapi.eleme.io/v2/quickstart.html">饿了么</a> - 饿了么是中国的一个外卖平台.</li><li><a href="http://developer.waimai.meituan.com/doc/show">美团</a> - 美团是中国的一个外卖平台.</li></ul><h3>团队协作</h3><ul><li><a href="https://asana.com/guide/help/api/api">Asana</a> - 允许你以编程方式更新和访问平台上的大部分数据.</li><li><a href="https://developer.join.me/">join.me</a> - join.me 是一个在线会议工具, 让人们可以一起完成伟大的事情.</li><li><a href="https://www.teambition.com/developer/open-platform">Teambition</a> - Teambition 的 Open Platform 提供用于获取数据的完整开放 API 集. 根据项目数据构建应用程序将充分利用你的协作数据, 如项目跟踪, 数据挖掘等.</li><li><a href="http://developer.teamsnap.com/">TeamSnap</a> - 使用世界上最好的团队管理解决方案来支持你的用户.</li><li><a href="https://developers.trello.com/">Trello</a> - Trello 是一个基于 Web的项目管理应用程序.</li><li><a href="https://dev.worktile.com/document/overview">Worktile</a> - 访问 Worktile 的 API.</li></ul><h3>文本分析</h3><ul><li><a href="http://docs.bosonnlp.com/">BosonNLP</a> - 中文文本分析.</li><li><a href="https://rapidapi.com/BigLobster/api/language-identification-prediction">检测语言API</a> - 任何文本的自动语言识别。</li><li><a href="http://nlp.qq.com/help.cgi">腾讯文智</a> - 中文文本分析.</li><li><a href="https://azure.microsoft.com/en-us/services/cognitive-services/text-analytics/">Text Analytics API</a> - The Text Analytics API 是一套文本分析 Web 服务, 使用最佳的 Microsoft 机器学习算法构建.</li><li><a href="https://www.ibm.com/watson/developercloud/natural-language-understanding/api/v1/">Watson Natural Language Understanding</a> - Watson 的 Natural Language Understanding 使用自然语言处理来分析任何文本的语义特征.</li></ul><h3>待办</h3><ul><li><a href="https://www.beeminder.com/api">Beeminder</a> - 访问 Beeminder 的 API.</li><li><a href="http://docs.followup.cc/">FollowUp.cc</a> - 访问 FollowUp.cc 的 API.</li><li><a href="https://developer.todoist.com/">Todoist</a> - Todoist API (也称为『Sync API』) 专门用于客户端(例如移动应用程序)和 Todoist 之间的高效数据同步.</li><li><a href="https://api.toodledo.com/3/">Toodledo</a> - Toodledo API 可以自由使用, 并提供对用户的任务, 笔记, 大纲和列表的访问.</li></ul><h3>旅游</h3><ul><li><a href="http://u.ctrip.com/union/help/Termsofuse.aspx">携程</a> - 访问携程的数据.</li><li><a href="http://open.elong.com/home/index">艺龙</a> - 访问艺龙网的酒店和飞机票数据.</li><li><a href="http://open.qunar.com/">去哪儿</a> - 访问去哪儿网的酒店, 火车票, 飞机票和保险数据.</li><li><a href="http://open.tuniu.cn/">途牛</a> - 访问途牛的数据. 仅对供应商开放.</li></ul><h3>翻译</h3><ul><li><a href="http://api.fanyi.baidu.com/api/trans/product/index">百度翻译</a> - 支持多种语言之间的相互翻译.</li><li><a href="https://cloud.google.com/translate/docs/">Google Translate</a> - 支持动态地翻译上千种语言间的相互翻译.</li><li><a href="http://open.iciba.com/?c=api">金山词霸</a> - 支持简单的翻译功能.</li><li><a href="https://www.microsoft.com/en-us/translator/translatorapi.aspx">Microsoft Translator</a> - 支持多种语言的基于云的机器翻译服务, 可达到全球国内生产总值 (GDP) 的95%以上.</li><li><a href="https://developer.oxforddictionaries.com/">牛津词典</a> - 访问牛津词典的 API.</li><li><a href="https://www.shanbay.com/help/developer/api_v1/">扇贝</a> - 提供了完整的 API, 支持查询, 添加学习记录, 写笔记等.</li><li><a href="https://tech.yandex.com/translate/">Yandex Translate</a> - 支持超过70种语言并且能够翻译单独的词语或完整的文本.</li><li><a href="http://api.yeekit.com/">译云翻译 API</a> - 支持几种语言之间的翻译.</li><li><a href="http://fanyi.youdao.com/openapi">有道翻译</a> - 支持简单的翻译操作.</li></ul><h3>视频</h3><ul><li><a href="https://developer.dailymotion.com/api">Dailymotion</a> - Dailymotion 是全球第二大视频托管平台.</li><li><a href="http://open.getnarrative.com/">Narrative</a> - 自定义剪辑, 获取玩家, 徽章, 并与 Narrative API 一起玩耍.</li><li><a href="http://open.iqiyi.com/lib/scheme.html">爱奇艺</a> - 支持查询爱奇艺的数据.</li><li><a href="http://www.lecloud.com/zh-cn/help/2016/07/27/150.html?LeftMenu=api_db_guide">乐视视频</a> - 允许查询, 上传, 下载等.</li><li><a href="https://developer.fandango.com/Rotten_Tomatoes">Rotten Tomatoes</a> - Rotten Tomatoes API 提供了获得 Rotten Tomatoes 的评分和评论, 允许获得批准的公司和个人用 Rotten Tomatoes 数据丰富他们的应用和小部件.</li><li><a href="http://lm.tv.sohu.com/union/open_platform.do">搜狐视频</a> - 允许查询数据.</li><li><a href="https://developers.themoviedb.org/">The Movie Database (TMDb)</a> - The Movie Database 提供最受好评的电影, 即将到来的电影, 现在播放电影, 热门电影, 热门电视节目, 最受好评的电视节目, On the air 节目, Airing today TV shows, 热门人物等的接口.</li><li><a href="https://www.tvmaze.com/api">TVmaze</a> - 电视节目和网络系列数据库. 剧集指南,演员,工作人员和角色信息. 回顾,评论,剧集预告片,名人照片等。</li><li><a href="https://developer.vimeo.com/">Vimeo</a> - 最受创作者支持的网络社区, 可以获得高质量的工具, 用于在没有广告的情况下以华丽的高清格式托管, 分享和流式传输视频.</li><li><a href="https://developers.google.com/youtube/documentation/">Youtube</a> - 将YouTube 的功能嵌入到你自己的网站和应用程序中.</li><li><a href="https://doc.open.youku.com/">优酷</a> - 允许上传, 下载, 登录等.</li></ul><h3>语音分析</h3><ul><li><a href="http://yuyin.baidu.com/docs">百度语音</a> - 访问百度的语音分析 REST API.</li><li><a href="https://cloud.google.com/speech/">Cloud Speech API</a> - Google Cloud Speech API 使开发人员能够通过在易于使用的 API 中应用强大的神经网络模型, 将音频转换为文本.</li></ul><h3>图像分析</h3><ul><li><a href="https://dev.camscanner.com/?language=zh-cn">扫描全能王</a> - 通过图像裁剪技术将纸质文档数字化.</li><li><a href="https://clarifai.com/developer/guide/">clarifai</a> - Clarifai API 提供了图片和视频识别服务.</li><li><a href="https://cloud.google.com/vision/">Cloud Vision API</a> - Google Cloud Vision API 使开发人员能够通过将强大的机器学习模型封装在易于使用的 REST API 中来理解图像的内容.</li><li><a href="https://azure.microsoft.com/en-us/services/cognitive-services/computer-vision/">Computer Vision API</a> - Microsoft 的 Computer Vision API 提供了最先进的算法来处理图像和返回信息.</li><li><a href="https://console.faceplusplus.com.cn/documents/4887579">Face++</a> - Face++ 人工智能开放平台是旷视科技推出的、面向开发者的开放平台。Face++以 API 或 SDK 的形式, 将领先的、基于深度学习的计算机视觉技术开放给开发者, 帮助你的应用更好地读懂世界。</li><li><a href="https://www.ibm.com/watson/developercloud/visual-recognition/api/v3/#introduction">Watson Visual Recognition</a> - IBM Watson™ 视觉识别服务识别你上传到服务器的图像中的场景, 物体和名人脸部. 你也可以创建和训练自定义分类, 以确定适合你的需求的主题.</li><li><a href="http://api1.wozhitu.com/">我知图</a> - 访问我知图的图像分析 API.</li></ul><h3>天气</h3><ul><li><a href="http://apidev.accuweather.com/developers/">AccuWeather</a> - AccuWeather API 通过一个简单的 REST 风格的 Web 界面为订阅者提供基于位置的天气数据的访问.</li><li><a href="http://www.aerisweather.com/develop/">Aeris Weather</a> - 驱动你的定制应用的先进 API, 为新鲜空气提供了从简到繁的解决方案.</li><li><a href="https://caiyunapp.com/index.html#api">彩云天气</a> - 中国天气信息.</li><li><a href="https://www.heweather.com/documents/">和风天气</a> - 中国天气信息.</li><li><a href="https://openweathermap.org/api">Open Weather Map</a> - Open Weather Map 服务提供免费的天气数据和预测 API, 适用于任何制图服务, 如网页和智能手机应用程序.</li><li><a href="https://www.wunderground.com/weather/api/">Weather Underground</a> - 可靠的数据, 准确的预测, 全球覆盖80种语言.</li><li><a href="https://developer.weatherunlocked.com/documentation">Weather Unlocked</a> - 电子广告商, 电子商务和开发人员的天气驱动方案.</li><li><a href="https://www.seniverse.com/doc">心知天气</a> - 中国天气信息.</li><li><a href="https://tech.yandex.com/weather/">Yandex.Weather</a> - Yandex.Weather 使用专有的预测技术 Meteum 来评估<strong>俄罗斯</strong>地区特定地点的当前天气情况, 并为这些地理坐标创建预报.</li><li><a href="https://developer.yahoo.com/weather/">Yahoo! Weather</a> - 获取任何位置的最新天气信息, 包括5天预报, 风, 大气, 天文条件等.</li></ul><h3>更多资源</h3><ul><li><a href="http://www.alidayu.com/">阿里大于</a> - 提供中国可用的 API .</li><li><a href="https://developer.amazon.com/">Amazon Developer</a> - 允许构建有关 Amazon 的应用与游戏, Alexa, AWS, Amazon 服务与 API 以及 Amazon 设备的软件。</li><li><a href="https://www.apix.cn/">APiX</a> - 提供中国可用的信用相关的 API.</li><li><a href="http://www.avatardata.cn/Docs">阿凡达数据</a> - 提供中国可用的 API .</li><li><a href="http://apistore.baidu.com/">百度API STORE</a> - 提供中国可用的 API .</li><li><a href="https://m.datayes.com/">通联数据商城</a> - 提供中国可用的金融相关 API .</li><li><a href="https://console.developers.google.com/apis/library">Google API Library</a> - Google API Library 包含100多个 API, 例如 Google Cloud API, Google Maps API, Google Apps API, 移动 API, 社交媒体 API, Youtube API, 广告 API 以及其他受欢迎的 API.</li><li><a href="http://www.haoservice.com/">HaoService</a> - 提供中国可用的 API .</li><li><a href="https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api/">iTunes Search API</a> - 允许在网站中放置搜索字段以搜索 iTunes Store, App Store, iBooks Store 和 Mac App Store 中的内容.</li><li><a href="https://developer.microsoft.com/en-us/">Microsoft Developer</a> - 访问 Microsoft 的公共 API.</li><li><a href="https://www.juhe.cn/">聚合数据</a> - 提供中国可用的 API .</li><li><a href="https://www.programmableweb.com/">ProgrammableWeb</a> - 关于 API 的新闻和信息的主要来源, 记录全球 API 经济的发展, 提供网络最依赖的 API 目录.</li><li><a href="https://developer.yahoo.com/everything.html">Yahoo! Developer Network</a> - Yahoo Developer Network 为开发者提供了用于简化构建, 宣传, 增强应用的API 和 工具. 和 Yahoo 一起赚钱吧.</li></ul>      08/17 2020       Awesome APIs      Ono Naoki               <![CDATA[ 通过ES6 Module看import和require区别]]>      http://www.f-learn.cn/class/15.html      <h3><strong>前言</strong></h3><p>说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化,那为什么会出现两种方案呢,又有什么不同呢?</p><h3><strong>模块化的不同解决方案</strong></h3><p>追根溯源,JS这门脚本语言设计伊始就是没有模块化的,所以早期的全局变量容易造成命名冲突。但随着web项目越来越大,JS的代码量也与日俱增,于是社区就自发约定了几种模块化的方案:requirejs遵循AMD,seajs遵循CMD,node的module遵循CommonJS规范,虽然写法上有所不同,都是为了能够间接实现模块化的基础上保持较为一致的代码风格。</p><p>随着ES2015的发布,官方标准定义了一种模块化的方案,那就是import、export。可是,标准毕竟是标准,各大浏览器和node终端要实现标准还是有一段距离的,目前来说都2018年了主流浏览器都还没实现,还得依赖转换工具(例如babel)转为ES5的代码之后浏览器才能解析。所以这也就解释了为什么我们的工程化代码中nodeJS遵循的CommonJS规范和ES6的模块化方案并存的现象。</p><h3><strong>两者的区别</strong></h3><ul><li>import是ES6标准中的模块化解决方案,require是node中遵循CommonJS规范的模块化解决方案</li><li>后者支持动态引入,也就是require(${path}/xx.js),前者目前不支持,但是已有提案</li><li>前者是关键词,后者不是</li><li>前者是编译时加载,必须放在模块顶部,在性能上会比后者好一些,后者是运行时加载,理论上来说放在哪里都可以</li><li>前者采用的是实时绑定方式,即导入和导出的值都指向同一个内存地址,所以导入值会随着导出值变化。而后者在导出时是指拷贝,就算导出的值变化了,导入的值也不会变化,如果想要更新值就要重新导入</li><li>前者会编译成require/exports来执行</li></ul><h3><strong>用法上的区别</strong></h3><h4><strong>import导入模块</strong></h4><p>导入模块根据模块导出时的写法有不同写法,如果模块是普通导出:</p><pre><code class="language-javascript"> // test.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; // demo.js import { firstName } from './test.js' console.log(firstName); // 'Michael' import * as test from './test.js' console.log(test); //Module{} 所有内容 import { firstName as key, lastName as value } from './test.js' console.log(key + '--' + value); // Michael--Jackson</code></pre><p>带有默认值时,也是我们日常开发中常用的方式:</p><pre><code class="language-javascript"> // test.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export default { firstName, lastName, year }; // demo.js import test from './test.js' console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}</code></pre><p>实际上这个default就是一个语法糖,只不过defaul是一个关键字,在这里等同于</p><pre><code class="language-javascript">import { default as test } from './test.js'</code></pre><p>特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。可以理解为export导出的是一种引用关系而不是一个具体的值,它们的实质是,在接口名与模块内部变量之间,建立了一一对应的关系,例如下面这样就会报错:</p><pre><code class="language-javascript">export 1; var m = 1; export m;</code></pre><p>但是改为用花括号包起来变成对象之后就成了输出引用关系就可以正常导出了:</p><pre><code class="language-javascript">var m = 1; export { m }</code></pre><h4><strong>require导入模块</strong></h4><p>require导入模块就没那么复杂了,导出时是什么样,导入时就还是什么样:</p><pre><code class="language-javascript">// test.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; module.exports = { firstName, lastName, year }; // demo.js const test = require('./test.js'); console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}</code></pre><p>还有一种不常用的用法,直接导出:</p><pre><code class="language-javascript">// test.js var year = 1958; exports.year = year; // demo.js const test = require('./test.js'); console.log(test); // {year: 1958}</code></pre><p>需要注意的是,module.exports导出之后,后面的代码就对导出的模块无效了,例如上例中</p><pre><code class="language-javascript">// test.js module.exports = { firstName, lastName, year }; exports.name = '222'; // demo.js const test = require('./test.js'); console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}</code></pre><p>特别说明一下,由于require是可以在任意地方引入的,所以,我们在开发中用~引入图片的方式实际上等效于require:</p><pre><code class="language-javascript">&lt;img src="~assets/img/icon/red_logo.png" class="logo" alt=""&gt; //等效于 &lt;img :src="require('assets/img/icon/red_logo.png')" class="logo" alt=""&gt;</code></pre><h3><strong>总结</strong></h3><p>import和require就是两种不同的JS模块化实现方式而已,由于之前npm生态的很多包都是基础CommonJS规范写的,所以相当一段时间之内必然是import和require这两种模块引入方式共存的。</p><p>总体来说时代总是发展的,ES6作为语言规范是迟早会被各大主流浏览器支持的,不然也就称不上主流浏览器了。所以为了长远考虑,我们还是尽量使用ES6的import来引入模块,等以后浏览器支持了我们也就可以少改一些代码了。</p>      07/27 2020       通过ES6 Module看import和require区别      Ono Naoki               <![CDATA[ ES6中class类的全方面理解]]>      http://www.f-learn.cn/class/14.html      <p>传统的javascript中只有对象,没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人困惑!<br>如果要生成一个对象实例,需要先定义一个构造函数,然后通过new操作符来完成。构造函数示例:</p><pre><code class="language-javascript">//函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数) function Person(name,age) { this.name = name; this.age=age; } Person.prototype.say = function(){ return "我的名字叫" + this.name+"今年"+this.age+"岁了"; } var obj=new Person("laotie",88);//通过构造函数创建对象,必须使用new 运算符 console.log(obj.say());//我的名字叫laotie今年88岁了 </code></pre><p>构造函数生成实例的执行过程:</p><pre><code class="language-javascript">1.当使用了构造函数,并且new 构造函数(),后台会隐式执行new Object()创建对象; 2.将构造函数的作用域给新对象,(即new Object()创建出的对象),而函数体内的this就代表new Object()出来的对象。 3.执行构造函数的代码。 4.返回新对象(后台直接返回); </code></pre><p>ES6引入了Class(类)这个概念,通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰,更像是一种面向对象的语言。如果将之前的代码改为ES6的写法就会是这个样子:</p><pre><code class="language-javascript">class Person{//定义了一个名字为Person的类 constructor(name,age){//constructor是一个构造方法,用来接收参数 this.name = name;//this代表的是实例对象 this.age=age; } say(){//这是一个类的方法,注意千万不要加上function return "我的名字叫" + this.name+"今年"+this.age+"岁了"; } } var obj=new Person("laotie",88); console.log(obj.say());//我的名字叫laotie今年88岁了 </code></pre><p>注意项</p><pre><code class="language-javascript">1.在类中声明方法的时候,千万不要给该方法加上function关键字 2.方法之间不要用逗号分隔,否则会报错 </code></pre><p>由下面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法!</p><pre><code class="language-javascript">console.log(typeof Person);//function console.log(Person===Person.prototype.constructor);//true </code></pre><p>以下代码说明构造函数的prototype属性,在ES6的类中依然存在着。<br><code>console.log(Person.prototype);//输出的结果是一个对象</code><br>实际上类的所有方法都定义在类的prototype属性上。代码证明下:</p><pre><code class="language-javascript">Person.prototype.say=function(){//定义与类中相同名字的方法。成功实现了覆盖! return "我是来证明的,你叫" + this.name+"今年"+this.age+"岁了"; } var obj=new Person("laotie",88); console.log(obj.say());//我是来证明的,你叫laotie今年88岁了 </code></pre><p>当然也可以通过prototype属性对类添加方法。如下:</p><pre><code class="language-javascript">Person.prototype.addFn=function(){ return "我是通过prototype新增加的方法,名字叫addFn"; } var obj=new Person("laotie",88); console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn </code></pre><p>还可以通过Object.assign方法来为对象动态增加方法</p><pre><code class="language-javascript">Object.assign(Person.prototype,{ getName:function(){ return this.name; }, getAge:function(){ return this.age; } }) var obj=new Person("laotie",88); console.log(obj.getName());//laotie console.log(obj.getAge());//88 </code></pre><p>constructor方法是类的构造函数的默认方法,通过new命令生成对象实例时,自动调用该方法。</p><pre><code class="language-javascript">class Box{ constructor(){ console.log("啦啦啦,今天天气好晴朗");//当实例化对象时该行代码会执行。 } } var obj=new Box(); </code></pre><p>constructor方法如果没有显式定义,会隐式生成一个constructor方法。所以即使你没有添加构造函数,构造函数也是存在的。constructor方法默认返回实例对象this,但是也可以指定constructor方法返回一个全新的对象,让返回的实例对象不是该类的实例。</p><pre><code class="language-javascript">class Desk{ constructor(){ this.xixi="我是一只小小小小鸟!哦"; } } class Box{ constructor(){ return new Desk();// 这里没有用this哦,直接返回一个全新的对象 } } var obj=new Box(); console.log(obj.xixi);//我是一只小小小小鸟!哦 </code></pre><p>constructor中定义的属性可以称为实例属性(即定义在this对象上),constructor外声明的属性都是定义在原型上的,可以称为原型属性(即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值, true说明是实例属性,false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。</p><pre><code class="language-javascript">class Box{ constructor(num1,num2){ this.num1 = num1; this.num2=num2; } sum(){ return num1+num2; } } var box=new Box(12,88); console.log(box.hasOwnProperty("num1"));//true console.log(box.hasOwnProperty("num2"));//true console.log(box.hasOwnProperty("sum"));//false console.log("num1" in box);//true console.log("num2" in box);//true console.log("sum" in box);//true console.log("say" in box);//false </code></pre><p>类的所有实例共享一个原型对象,它们的原型都是Person.prototype,所以<strong>proto</strong>属性是相等的</p><pre><code class="language-javascript">class Box{ constructor(num1,num2){ this.num1 = num1; this.num2=num2; } sum(){ return num1+num2; } } //box1与box2都是Box的实例。它们的__proto__都指向Box的prototype var box1=new Box(12,88); var box2=new Box(40,60); console.log(box1.__proto__===box2.__proto__);//true </code></pre><p>由此,也可以通过<strong>proto</strong>来为类增加方法。使用实例的<strong>proto</strong>属性改写原型,会改变Class的原始定义,影响到所有实例,所以不推荐使用!</p><pre><code class="language-javascript">class Box{ constructor(num1,num2){ this.num1 = num1; this.num2=num2; } sum(){ return num1+num2; } } var box1=new Box(12,88); var box2=new Box(40,60); box1.__proto__.sub=function(){ return this.num2-this.num1; } console.log(box1.sub());//76 console.log(box2.sub());//20 </code></pre><p><strong>class不存在变量提升</strong>,所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,<strong>ES5存在变量提升</strong>,可以先使用,然后再定义。</p><pre><code class="language-javascript">//ES5可以先使用再定义,存在变量提升 new A(); function A(){ } //ES6不能先使用再定义,不存在变量提升 会报错 new B();//B is not defined class B{ }</code></pre><h4><br><strong>继承</strong><br><br><br>继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过<strong>extends</strong>关键字继承。相较于ES5当中通过原型链继承要清晰和方便许多。先上代码:</h4><pre><code class="language-javascript">class Cucurbit{ constructor(name,color){ console.log("farther") this.name=name; this.color=color; } say(){ console.log("我的名字叫"+this.name+"我是"+this.color+"颜色的"); } } class First extends Cucurbit{ constructor(name,color){ super(name,color);// 调用父类的constructor(name,color) } say(){ console.log("我是child"); super.say(); } } var wa=new First("大娃","红色"); wa.say(); </code></pre><p>输出:</p><pre><code class="language-javascript">farther 我是child 我的名字叫大娃我是红色颜色的 </code></pre><p>上面代码中,子类的constructor方法和say方法中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。<br>子类必须在constructor方法中调用super方法,之后才能使用this关键字,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象。如果不调用super方法,子类就得不到this对象。在这一点上ES5的继承与ES6正好相反,ES5先创建自己的this对象然后再将父类的属性方法添加到自己的this当中。<br>如果子类First没有显式的定义constructor,那么下面的代码将被默认添加(不信可以尝试下,哈)。换言之,如果constructor函数中只有super的话,该constructor函数可以省略。</p><pre><code class="language-javascript">constructor(name,color){ super(name,color);// 调用父类的constructor(name,color) } </code></pre><p>总结super在子类中一般有三种作用</p><pre><code class="language-javascript"> 1.作为父类的构造函数调用(已说明) 2.在普通方法中,作为父类的实例调用(已说明) 3.在静态方法中,作为父类调用(下篇文章会做介绍) </code></pre><h4>实例</h4><blockquote><p>创建一个tab切换,页面中有三个按钮内容分别为“中”,“日”,“韩”。要求点击按钮,按钮以及切换的内容的背景颜色分别会变为红,黄,绿。</p></blockquote><p>首先创建一个tab.html页面,内容为:</p><pre><code class="language-xml">&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;切换&lt;/title&gt; &lt;style&gt; #country input{ margin:10px; padding:10px; } #country div{ width:300px; height:300px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="country"&gt; &lt;input type="button" value="中"&gt; &lt;input type="button" value="日"&gt; &lt;input type="button" value="韩"&gt; &lt;div&gt;中国&lt;/div&gt; &lt;div&gt;日本&lt;/div&gt; &lt;div&gt;韩国&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script src="tag.js"&gt;&lt;/script&gt; &lt;script&gt; new Tag("#country"); &lt;/script&gt; &lt;/html&gt; </code></pre><p>然后创建一个tag.js,内容为:</p><pre><code class="language-javascript">class Tag{ constructor(id){ this.id=document.querySelector(id); this.btn=this.id.querySelectorAll("input"); this.div=this.id.querySelectorAll("div"); this.colorArr=["red","yellow","green"]; this.index=0;//显示元素的下标。 this.init(); } init(){//初始化 this.hide(); this.show(); //给按钮增加事件 for(let i=0;i&lt;this.btn.length;i++){ this.btn[i].onclick=function(){ this.index=i; this.hide(); this.show(); }.bind(this) } } hide(){//隐藏DIV,去除按钮背景色 for(var i=0;i&lt;this.btn.length;i++){ this.btn[i].style.background=null; this.div[i].style.display="none"; } } show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置 this.div[this.index].style.display="block";//将DIV进行显示 //按钮与DIV的背景颜色进行设置 this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index]; } } </code></pre><blockquote><p>示例到现在还没有用到ES6的继承啊,别急!咱们再加个需求,在上面的切换示例基础上,再加一个内容为“娱乐”,“体育","财经"的切换。该切换需要在原来可点击的基础上实现自动切换功能,以及点击页面空白区域也可实现切换。</p></blockquote><p>将tag.html页面修改为:</p><pre><code class="language-javascript">&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;切换&lt;/title&gt; &lt;style&gt; #country input,#news input{ margin:10px; padding:10px; } #country div,#news div{ width:300px; height:300px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="country"&gt; &lt;input type="button" value="中"&gt; &lt;input type="button" value="日"&gt; &lt;input type="button" value="韩"&gt; &lt;div&gt;中国&lt;/div&gt; &lt;div&gt;日本&lt;/div&gt; &lt;div&gt;韩国&lt;/div&gt; &lt;/div&gt; &lt;div id="news"&gt; &lt;input type="button" value="娱乐"&gt; &lt;input type="button" value="财经"&gt; &lt;input type="button" value="体育"&gt; &lt;div&gt;娱乐&lt;/div&gt; &lt;div&gt;财经&lt;/div&gt; &lt;div&gt;体育&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script src="tag.js"&gt;&lt;/script&gt; &lt;script&gt; new Tag({ id:"#country", index:1, colorArr:["red","green","blue"] }); new autoTag({ id:"#news", index:2, colorArr:["black","pink","purple"] }); &lt;/script&gt; &lt;/html&gt; </code></pre><p>将tag.js修改为:</p><pre><code class="language-javascript">class Tag{ constructor(obj){ this.id=document.querySelector(obj.id); this.btn=this.id.querySelectorAll("input"); this.div=this.id.querySelectorAll("div"); this.colorArr=obj.colorArr; this.index=obj.index;//显示元素的下标。 this.init(); } init(){//初始化 this.hide(); this.show(); var that=this; //给按钮增加事件 for(let i=0;i&lt;this.btn.length;i++){ this.btn[i].onclick=function(ev){ this.index=i; this.hide(); this.show(); ev.cancelBubble=true; }.bind(this) } } hide(){//隐藏DIV,去除按钮背景色 for(var i=0;i&lt;this.btn.length;i++){ this.btn[i].style.background=null; this.div[i].style.display="none"; } } show(){//显示指定的DIV,按钮与DIV的背景颜色进行设置 this.div[this.index].style.display="block";//将DIV进行显示 //按钮与DIV的背景颜色进行设置 this.div[this.index].style.background=this.btn[this.index].style.background=this.colorArr[this.index]; } } class autoTag extends Tag{ constructor(id){ super(id); this.autoInit(); } autoInit(){ document.body.onclick=this.change.bind(this); setInterval(this.change.bind(this),5000) } change(){ this.index+=1; if(this.index&gt;=this.btn.length) this.index=0; this.hide(); this.show(); } }</code></pre><h4><br><strong>静态方法</strong><br><br>&nbsp;</h4><p>不需要实例化类,即可直接通过该类来调用的方法,即称之为“静态方法”。将类中的方法设为静态方法也很简单,在方法前加上static关键字即可。这样该方法就不会被实例继承!</p><pre><code class="language-javascript">class Box{ static a(){ return "我是Box类中的,实例方法,无须实例化,可直接调用!" } } //通过类名直接调用 console.log(Box.a());//我是Box类中的,实例方法,无须实例化,可直接调用! </code></pre><p>上面的代码一,类Box的a方法前有static关键字, 表明该方法是一个静态方法, 可以直接在Box类上调用。静态方法只能在静态方法中调用,不能在实例方法中调用。</p><pre><code class="language-javascript">class Box{ static a(){ return "我只允许被静态方法调用哦!" } static b(){ //通过静态方法b来调用静态方法a console.log(this.a()); } } Box.b();//输出:我只允许被静态方法调用 哦 </code></pre><p>通过实例方法来调静态方法会报错:</p><pre><code class="language-javascript">class Box{ static a(){ return "我只允许被静态方法调用哦!" } b(){ console.log(this.a());//TypeError: this.a is not a function } } var obj=new Box(); obj.b(); </code></pre><p>父类的静态方法, 可以被子类继承:</p><pre><code class="language-javascript">class Box { static a() {//父类Box的静态方法 return '我是父类的静态方法a'; } } class Desk extends Box {} //子类Desk可以直接调用父类的静态方法a console.log(Desk.a()); </code></pre><p>倘若想通过子类的静态方法调用父类的静态方法,需要从super对象上调用:</p><pre><code class="language-javascript">class Box { static a() { return '我是通过super来调取出来的'; } } class Desk extends Box { static a(){ return super.a(); } } console.log(Desk.a()); </code></pre><p>静态属性</p><p>静态属性指的是 Class 本身的属性, 即Class.propname, 而不是定义在实例对象( this) 上的属性。</p><pre><code class="language-javascript">class Box{ constructor(){ this.name="实例属性" } } Box.prop1="静态属性1"; Box.prop2="静态属性2"; console.log(Box.prop1,Box.prop2);//静态属性1 静态属性2</code></pre><p><br>作者:张培跃<br>链接:https://www.jianshu.com/p/5585412b4575<br>&nbsp;</p>      07/24 2020       ES6中class类的全方面理解      Ono Naoki               <![CDATA[ 类、静态和继承的封装学习]]>      http://www.f-learn.cn/class/13.html      <h4><strong>ES5原生类方法</strong></h4><pre><code class="language-javascript">function Foo(name,cname) { /*构造函数里面的方法和属性*/ this.name=name; this.cname=cname; this.run=function(){ console.log(`${this.name}---${this.cname}`) } } let arr =new Foo('未来学习','首席全栈设计师'); /*实例方法是通过实例化来调用的,静态是通过类名直接调用*/ arr.run(); //输出:未来学习---首席全栈设计师</code></pre><p><strong>在类上增加方法和属性,用prototype方法:</strong></p><pre><code class="language-javascript">foo.prototype.school='东京大学人工智能计算机'; foo.prototype.work=function(){ console.log(`${this.name}---${this.cname}---${this.school}`); } arr.work(); //输出:未来学习---首席全栈设计师---东京大学人工智能计算机</code></pre><p><strong>增加一个静态方法:</strong></p><pre><code class="language-javascript">/*静态方法*/ Foo.sub=function(){ console.log('这个方法目前还不知道怎么用'); } Foo.sub(); //输出:这个方法目前还不知道怎么用</code></pre><p><strong>所有代码:</strong></p><pre><code class="language-javascript">function Foo(name,cname) { /*构造函数里面的方法和属性*/ this.name=name; this.cname=cname; this.run=function(){ console.log(`${this.name}---${this.cname}`) } } /*实例方法是通过实例化来调用的,静态是通过类名直接调用*/ let arr =new Foo('未来学习','首席全栈设计师'); arr.run(); Foo.prototype.school='东京大学人工智能计算机'; Foo.prototype.work=function(){ console.log(`${this.name}---${this.cname}---${this.school}`); } arr.work(); /*静态方法*/ Foo.sub=function(){ console.log('这个方法目前还不知道怎么用'); } Foo.sub();</code></pre><h4><strong>ES5原生继承</strong></h4><pre><code class="language-javascript">function Foo(name,school) { this.name=name; this.school=school; this.run=function(){ console.log(this.name+'--'+this.school); } } function Web(name,school){ /*对象冒充实现继承*/ Foo.call(this,name,school); } Web.prototype=new Foo(); let arr=new Web('未来学习','东京大学'); arr.run();</code></pre><h4><strong>ES6写法(非常简洁):</strong></h4><pre><code class="language-javascript">class Foo{ /*类的构造函数,实例化的时候执行,new的时候执行*/ constructor(name,cname) { this._name=name; this._cname=cname; } _Name(){ console.log(this._name,this._cname); } } let arr=new Foo('未来学习','最棒的分享'); arr._Name(); </code></pre><p><strong>静态方法:</strong></p><pre><code class="language-javascript">class Foo{ /*类的构造函数,实例化的时候执行,new的时候执行*/ constructor(name,cname) { this._name=name; this._cname=cname; } _Name(){ console.log(this._name,this._cname); } /*内部静态方法*/ static _work(){ console.log('内部静态方法'); } } let arr=new Foo('未来学习','最棒的分享'); arr._Name(); /*外部静态资源*/ Foo.arr = "外部静态方法"; console.log(Foo.arr); /*内部静态方法*/ Foo._work();</code></pre><p><strong>ES6继承:</strong></p><pre><code class="language-javascript">class Foo{ constructor(name,age){ this.name=name; this.age=age; } getInfo(){ console.log(`姓名:${this.name} 年龄:${this.age}`); } run(){ console.log('run') } } class Web extends Foo{ //继承了Person extends super(name,age); constructor(name,age,content){ super(name,age); /*实例化子类的时候把子类的数据传给父类*/ this.content=content; } print(){ console.log(this.content); } } var w=new Web('未来学习','1','开张有1岁了'); w.getInfo(); w.print();</code></pre><p><strong>单列:</strong></p><pre><code class="language-javascript">class Db { static getInstance(){ /*单例*/ if(!Db.instance){ Db.instance=new Db(); } return Db.instance; } constructor(){ console.log('实例化会触发构造函数'); this.connect(); } connect(){ console.log('连接数据库'); } find(){ console.log('查询数据库'); } } var myDb=Db.getInstance(); var myDb2=Db.getInstance(); var myDb3=Db.getInstance(); var myDb4=Db.getInstance(); myDb3.find(); myDb4.find();</code></pre>      07/24 2020       类、静态和继承的封装学习      Ono Naoki               <![CDATA[ ES6语法基本学习]]>      http://www.f-learn.cn/class/12.html      <h4><strong>Js声明变量:</strong></h4><pre><code class="language-javascript">var name = "未来学习"; //给自定义变量 document.write(name); //打印在页面 console.log(name); //使用 console.log() 写入到浏览器的控制台</code></pre><p>以上是最基本语法<br>以下变量ES6语法 , Let 和 var 本质一样的,但Let只能在块级有效。</p><pre><code class="language-javascript">let name = "未来学习"; console.log(name); //打印浏览器控制台 function word(){ let webname = "未来学习是个好网站"; console.log(webname); //Let在块级有效 } word(); //输出方法下的consle.log console.log(webname); //无法输出。</code></pre><p>上面代码不明白还就可以简化理解:</p><pre><code class="language-javascript">if(true){ let webname = "未来学习是个好网站"; } console.log(webname); //无法输出,所在只能在块级有效</code></pre><p>声明变量还有const方法,只能保值不能修改。</p><pre><code class="language-javascript">const name = '未来学习'; name = '我想把'未来学习改未来世界'; console.log(name); //报错 第二个name修改后无法读取</code></pre><h4><strong>模板字符串:</strong></h4><pre><code class="language-javascript">var name = "未来学习"; console.log(name + '是个好网站'); //var写法 let name = "未来学习"; let content = "而且初级免费学习的。"; console.log(`${name}是个好网站` + `${content}`); //es6写法,注意单引号</code></pre><h4><strong>方法简写:</strong></h4><pre><code class="language-javascript">var name = '未来学习是一个方法'; var app ={ name:name } console.log(app.name); //普通写法 let name = '未来学习是一个方法'; let app ={ name } console.log(app.name); //ES6简写 let name = '未来学习是一个方法'; let app ={ name, go:function(){ console.log(`${name},所以尽快学习!`); } } app.go(); //更简写 let name = '未来学习是一个方法'; let app ={ name, go(){ console.log(`${name},所以尽快学习!`); } } app.go(); //把function去掉</code></pre><h4><strong>箭头函数:</strong></h4><pre><code class="language-javascript">function go(){ let name ="加快学习速度!"; console.log(name); } go(); //普通function写法 go=()=&gt;{ let name ="加快学习速度!"; console.log(name); } go(); //function替换()=&gt;</code></pre><h4><strong>回调函数(获取异步数据)</strong></h4><p>先思考这个打印出顺序:</p><pre><code class="language-javascript">console.log('模拟A'); setTimeout(function(){ console.log('模拟B'); },1000); console.log('模拟C'); //最后得出ACB 异步处理就是 没有工作的优先执行,有工作的往后拖延排队</code></pre><p>那么在回调函数里获取异步:</p><pre><code class="language-javascript">function go(back){ setTimeout(function(){ let name = '我得10秒后才能执行'; back(name); },1000) } go(function(date){ console.log(date); })</code></pre><p>ES6简写:</p><pre><code class="language-javascript">go=(back)=&gt;{ setTimeout(function(){ let name = '我得10秒后才能执行'; back(name); },1000) } go((date)=&gt;{ console.log(date); })</code></pre><h4><strong>Promise方法处理异步:</strong></h4><pre><code class="language-javascript">let ok = new Promise((res,req)=&gt;{ //res成功回调 req失败回调 setTimeout(function(){ let name = '我得10秒后才能执行'; res(name); },1000) }); ok.then((date) =&gt; { console.log(date); }); </code></pre><h4><strong>async 和 await:</strong></h4><p>async是让方法变成异步; await是让等待异步方法完成; 普通函数:</p><pre><code class="language-javascript">go=()=&gt;{ return '普通数据'; } console.log(go());</code></pre><p>不适用setTimeout情况下,让方法变成异步:</p><pre><code class="language-javascript">async function go(){ return '普通数据'; } console.log(go()); //返回 Promise对象 {"普通数据"}</code></pre><p>如何返回不是Promise对象,直接拿到普通数据:</p><pre><code class="language-javascript">async function go(){ return '普通数据'; } go().then((date)=&gt;{ console.log(date); //输出普通数据 })</code></pre><p>await使用:</p><pre><code class="language-javascript">async function go(){ return '普通数据'; } async function text(){ console.log(await go()); //普通数据 } text();</code></pre><p>观察排序(堵塞):</p><pre><code class="language-javascript">async function go(){ console.log(2); return '普通数据'; } async function text(){ console.log(1); console.log(await go()); console.log(3); } text(); // 1 2 普通数据 3</code></pre><p>async 定义方法返回Promise对象:</p><pre><code class="language-javascript">//pormise方法: function go(){ return new Promise((res,req)=&gt;{ setTimeout(()=&gt;{ let name = '未来学习'; res(name); }) }) } go().then((date)=&gt;{ console.log(date); }) //async await方法 function go(){ return new Promise((res,req)=&gt;{ setTimeout(()=&gt;{ let name = '全端观察'; res(name); }) }) } async function test(){ let date = await go(); console.log(date); } test();</code></pre><p>&nbsp;</p>      07/22 2020       ES6语法基本学习      Ono Naoki               <![CDATA[ Win+Docker+宝塔快速技巧]]>      http://www.f-learn.cn/class/11.html      <h4><strong>这是Docker史上快速搭建技巧没有之一!</strong></h4><p>VMware、Hyper-V、VirtualBox虚拟机并且知道启动太慢太臃肿。<br>所以Docker速度非常快!系统文件很小!<br>随便玩,容器里任意安装、删除、还原并使用Nginx、Node.js、Apache、PHP、Mysql、Mongodb等。<br><strong>下载Win版Docker:</strong></p><pre><code class="language-plaintext">https://www.docker.com/products/docker-desktop</code></pre><p><strong>设置Docker国内加速:&nbsp;</strong><br>找到右下角图标,选择Settings - &nbsp;Daemon - Registry mirrors 粘贴以下地址:</p><pre><code class="language-plaintext">https://almtd3fa.mirror.aliyuncs.com http://f1361db2.m.daocloud.io</code></pre><p><strong>安装centos系统:</strong></p><pre><code class="language-plaintext">docker pull centos</code></pre><p><strong>查看镜像:</strong></p><pre><code class="language-plaintext">docker images</code></pre><p><strong>创建启动、映射容器:</strong></p><pre><code class="language-plaintext">docker run -i -t -d --name baota2020 -p 20:20 -p 21:21 -p 80:80 -p 443:443 -p 888:888 -p 8888:8888 --privileged=true -v /F/docker/www:/www centos</code></pre><p>上面命令的意思是创建一个docker容易命名为baota(名称大家自定义)让他后台运行,然后将宿主机的20,21,80,443,888,8888这五个端口映射到docker容器中去。<br>并且将宿主机的/f/docker/www文件夹映射到docker容器的/www上去(注意:文件目录如果不存在。宿主机和容器会自己创建,无需手动创建)。privileged表示在运行容器的时候,给容器加特权,设置容器有写文件的权限。</p><p><strong>查看运行中的容器:</strong></p><pre><code class="language-plaintext">docker ps</code></pre><p><strong>进入容器并启动:</strong></p><pre><code class="language-plaintext">docker exec -it baota /bin/bash</code></pre><p><strong>安装宝塔:</strong></p><pre><code class="language-plaintext">yum install -y wget &amp;&amp; wget -O install.sh http://download.bt.cn/install/install_6.0.sh &amp;&amp; sh install.sh</code></pre><p><strong>安装成功:</strong></p><pre><code class="language-plaintext">================================================================== Congratulations! Installed successfully! ================================================================== Bt-Panel: http://123.173.77.19:8888/e09edd52 username: k0s52xmq password: 28d824f8 If you cannot access the panel, release the following panel port [8888] in the security group 若无法访问面板,请检查防火墙/安全组是否有放行面板[8888]端口 ==================================================================</code></pre><p><strong>从容器退出:</strong></p><pre><code class="language-plaintext">ctrl+c 退出容器并关闭容器 ctrl+p+q 退出不关闭容器</code></pre><p><strong>从容器再进入:</strong></p><pre><code class="language-plaintext">docker ps -a 查看所有容器 docker attach (容器id)</code></pre><p><strong>如果容器已经停止,并开启:</strong></p><pre><code class="language-plaintext">docker start (容器id)</code></pre><p><strong>开启宝塔:</strong></p><pre><code class="language-plaintext">/etc/init.d/bt restart</code></pre><h4><br><strong>把容器保存为镜像</strong></h4><p>容器配置好PHP等环境,如果玩坏了,不希望浪费时间重新安装。<br>可以把容器存为镜像,方便随时导出导入运行。</p><pre><code class="language-plaintext">docker commit -m="centos 8.2-2.2004 baota php7.4 nginx 1.19 mysql8.0" -a="naokiono" (容器id) naokiono/centos:v1</code></pre><figure class="table"><table><tbody><tr><td colspan="2">&nbsp;命令格式 : docker&nbsp;commit&nbsp;[OPTIONS]&nbsp;CONTAINER&nbsp;[REPOSITORY[:TAG]]</td></tr><tr><td>-a&nbsp;</td><td>–author=”” &nbsp;作者信息</td></tr><tr><td>-m</td><td>–message=”” &nbsp;提交信息</td></tr><tr><td>-p</td><td>–pause=true &nbsp;提交是暂停容器运行</td></tr></tbody></table></figure><p>创建成功后,查看本地镜像,出现自己的镜像。<br><strong>查看镜像:</strong></p><pre><code class="language-plaintext">docker images</code></pre><figure class="image"><img src="/Static/upload/source/20200719/9765f143f4bb892b4.jpg"></figure><h3>&nbsp;</h3><p><strong>保存镜像:</strong></p><pre><code class="language-plaintext">docker save -o centos.tar naokiono/centos:v1</code></pre><p><strong>还原镜像:</strong></p><pre><code class="language-plaintext">docker load &lt; centos.tar</code></pre><p><strong>发布镜像:</strong><br>登录 docker hub</p><pre><code class="language-plaintext">docker login </code></pre><p>推送镜像到仓库&nbsp;</p><pre><code class="language-plaintext">docker push naokiono/centos</code></pre><p>登录 https://hub.docker.com/ 就可以在 Repositories 中查看到刚者提交的镜像了<br>退出 docker hub</p><pre><code class="language-plaintext">docker logout</code></pre><h3><br><strong>常见的故障</strong></h3><p><strong>故障1:</strong></p><pre><code class="language-plaintext">error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.40/images/search?limit=25&amp;term=ubuntu: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuration on Windows, the docker client must be run elevated to connect. This error may also indicate that the docker daemon is not running.</code></pre><p>解决办法:命令输入即解决!</p><pre><code class="language-plaintext">cd C:\Program Files\Docker\Docker DockerCli.exe -SwitchDaemon</code></pre><p><strong>故障2:</strong></p><pre><code class="language-plaintext">Hyper-V and Containers features are not enabled. Do you want to enable them for Docker to be able to work properly? Your computer will restart automatically.</code></pre><p>解决办法:确保Hyper-V安装完毕。<br>&nbsp;</p><figure class="image"><img src="/Static/upload/source/20200719/3195f14357bbd0cc2.jpg"></figure><h4><br><br><strong>想体验这个版本的镜像,你可以尝试:</strong></h4><pre><code class="language-plaintext">docker pull kyomini/centos http://127.0.0.1:8888/f74584df username:10jqkift password:0e4d31a9</code></pre><p>&nbsp;</p>      07/19 2020       Win+Docker+宝塔快速技巧      Ono Naoki               <![CDATA[ 配色工具]]>      http://www.f-learn.cn/class/10.html      <h3>08/01.&nbsp;<strong>Palettable</strong></h3><p>开启Palettable 后会随机显示一个颜色,可点选下方的喜欢或不喜欢(快捷键为L 和D),喜欢会将颜色固定并开始选择下一个颜色,不喜欢就会继续演算其他颜色。透过互动方式协助使用者找出最合适的色彩组合,利用使用者选择的颜色计算出更贴近、可互相搭配的色彩 汇出为带有色码PNG 图片格式。<br>&nbsp;</p><figure class="image"><img src="/Static/upload/source/20200801/8365f24e0820f14d3.png"></figure><p><a href="https://www.palettable.io/">To &gt;&nbsp;</a></p><p>&nbsp;</p><h3>07/15.&nbsp;<strong>Colorsinspo&nbsp;</strong></h3><p>这里汇集了很多和配色相关的东西,从完整的配色方案,工具到教程,不一而足。Colorsinspo 让你选择配色比以往更加简单。</p><figure class="image"><img src="/Static/upload/source/20200716/2285f105ba1255983.png"></figure><p><a href="https://colorsinspo.com/">To &gt;&nbsp;</a></p><p><br>等待收集中….</p>      07/16 2020       配色工具      Ono Naoki               <![CDATA[ ckeditor5富文本编辑器快速使用指南]]>      http://www.f-learn.cn/class/9.html      <h4><strong>1 坑</strong></h4><p>ckeditor5富文本编辑器是强大的框架\模块化架构,并且易于定制,但是它坑地方确实很多。<br>语言不通,进行官网下载,NPM安装出错。<br>NPM安装部分插件,兼容性问题出错。无奈之下,在官网进行选择自动选择插件打包下载,结果是付费的,试用30天提供的序列号。<br>另外多媒体嵌入,只能支持国外媒体嵌入。<br>最后上传图片,也是各种问题。</p><h4><br><strong>2 准备工具</strong></h4><p>node最新版本,需要npm命令</p><p>npm替换中国源<br><code>&nbsp;npm config set registry https://registry.npm.taobao.org&nbsp;</code><br>安装yarn命令依赖管理工具,建议国外版本进行安装<br><code>&nbsp;https://yarnpkg.com/&nbsp;</code><br>安装webpack依赖框架,集成打包<br>PHP环境,为解决上传图片、localhost运行看效果<br>&nbsp;</p><h4><strong>3 第一步,先在官网选择插件下载安装</strong></h4><p>打开地址<code> https://ckeditor.com/ckeditor-5/online-builder/ </code>选择Classic,出现多个插件打包安装页面,如果英语比较差,可以页面翻译。<br>注意:翻译页面是无法增加插件的,只有英文页面进行增加插件。建议所有插件都选择,下一步所有功能放工具栏里,最后进行打包下载。<br>&nbsp;</p><figure class="image"><img src="/Static/upload/source/20200713/8265f0bb630281296.gif"></figure><h4><br><strong>4 第二步,克隆源码下载进行安装</strong></h4><pre><code class="language-plaintext">git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git cd ckeditor5-build-classic npm install</code></pre><p>如果用中国源下载很慢,直接在github打包下载。</p><p>4.1 具体文件结构如下:</p><pre><code class="language-plaintext">build //webpack打包后ckeditor.js文件 sample //测试文件 src //ckeditor.js源码文件</code></pre><p>为了在页面调用使用,打开src里ckeditor.js文件夹,看到一些常用的功能基本都有:</p><pre><code class="language-javascript">import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder'; import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage'; import Heading from '@ckeditor/ckeditor5-heading/src/heading'; import Image from '@ckeditor/ckeditor5-image/src/image'; import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'; import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'; import Indent from '@ckeditor/ckeditor5-indent/src/indent'; import Link from '@ckeditor/ckeditor5-link/src/link'; import List from '@ckeditor/ckeditor5-list/src/list'; import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'; import Table from '@ckeditor/ckeditor5-table/src/table'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation'; export default class ClassicEditor extends ClassicEditorBase {} // Plugins to include in the build. ClassicEditor.builtinPlugins = [ Essentials, UploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation ]; // Editor configuration. ClassicEditor.defaultConfig = { toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'indent', 'outdent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo' ] }, image: { toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] }, // This value must be kept in sync with the language defined in webpack.config.js. language: 'en' };</code></pre><p>把它修改成一下代码:</p><pre><code class="language-javascript">import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js'; import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js'; import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js'; import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js'; import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage.js'; import Heading from '@ckeditor/ckeditor5-heading/src/heading.js'; import Image from '@ckeditor/ckeditor5-image/src/image.js'; import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js'; import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js'; import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js'; import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js'; import Indent from '@ckeditor/ckeditor5-indent/src/indent.js'; import Link from '@ckeditor/ckeditor5-link/src/link.js'; import List from '@ckeditor/ckeditor5-list/src/list.js'; import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js'; import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'; import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js'; import Table from '@ckeditor/ckeditor5-table/src/table.js'; import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js'; import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js'; class Editor extends ClassicEditor {} Editor.builtinPlugins = [ Essentials, UploadAdapter, Autoformat, Bold, Italic, BlockQuote, CKFinder, EasyImage, Heading, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, Indent, Link, List, MediaEmbed, Paragraph, PasteFromOffice, Table, TableToolbar, TextTransformation ]; export default Editor;</code></pre><p>基本功能满足不了自己要求,还需要文字左右居中对齐、高亮代码、表格修改功能等。</p>      07/12 2020       ckeditor5富文本编辑器快速使用指南      Ono Naoki               <![CDATA[ PHP连接数据库方式]]>      http://www.f-learn.cn/class/8.html      <p>PHP与MySQL的连接有三种API接口,分别是:PHP的MySQL扩展 、PHP的mysqli扩展 、PHP数据对象PDO,当然还有PHP的数据库类Medoo。<br>PHP的MySQL扩展是提供了一个面向过程的接口,并且是针对MySQL4.1.3或者更早版本设计的。因此这个扩展虽然可以与MySQL4.1.3或更新的数据库服务端进行交互,但并不支持后期MySQL服务端提供的一些特性。<br>PHP的mysqli扩展用于使用 MySQL4.1.3或更新版本中新的高级特性。其特点为:面向对象接口 、prepared语句支持、多语句执行支持、事务支持 、增强的调试能力、嵌入式服务支持 、预处理方式完全解决了sql注入的问题。<br><br><span class="text-big"><strong>PHP与MySQL的连接有三种</strong></span></p><p>PHP与MySQL的连接有三种API接口,分别是:PHP的MySQL扩展 、PHP的mysqli扩展 、PHP数据对象PDO,当然还有PHP的数据库类Medoo。</p><p>PHP的MySQL扩展是提供了一个面向过程的接口,并且是针对MySQL4.1.3或者更早版本设计的。因此这个扩展虽然可以与MySQL4.1.3或更新的数据库服务端进行交互,但并不支持后期MySQL服务端提供的一些特性。</p><p>PHP的mysqli扩展用于使用 MySQL4.1.3或更新版本中新的高级特性。其特点为:面向对象接口 、prepared语句支持、多语句执行支持、事务支持 、增强的调试能力、嵌入式服务支持 、预处理方式完全解决了sql注入的问题。</p><p>PDO是PHP Data Objects的缩写,是PHP应用中的一个数据库抽象层规范。PDO提供了一个统一的API接口可以使得你的PHP应用不去关心具体要连接的数据库服务器系统类型,也就是说,如果你使用PDO的API,可以在任何需要的时候无缝切换数据库服务器,比如从Oracle 到MySQL,仅仅需要修改很少的PHP代码。其功能类似于JDBC、ODBC、DBI之类接口。同样,其也解决了sql注入问题,有很好的安全性。</p><p>Medoo是轻量级的PHP数据库框架, 和PDO一样能查询多个数据,这框架是轻量级的,不适合大型数据库查询。</p><p>最新版本PHP7建议用PDO连接,MySQLi用在PHP5.X版本连接,Mysql已经很太老了,很多书籍教程都有这种连接。如果觉得原生很麻烦,直接用Medoo框架连接。</p><p>MySQLi 和 PDO 有它们自己的优势: PDO 应用在 12 种不同数据库中, MySQLi 只针对 MySQL 数据库。 所以,如果你的项目需要在多种数据库中切换,建议使用 PDO ,这样你只需要修改连接字符串和部分查询语句即可。<br>使用 MySQLi, 如果不同数据库,你需要重新编写所有代码,包括查询。 两者都是面向对象, 但 MySQLi 还提供了 API 接口。 两者都支持预处理语句。预处理语句可以防止 SQL 注入,对于 web 项目的安全性是非常重要的。</p><h2><span class="text-small"><strong>实例 (MySQLi - 面向过程风格方法)</strong></span></h2><pre><code class="language-php">&lt;?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; // 创建连接 $conn = mysqli_connect($servername, $username, $password, $dbname); // 检测连接 if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } $sql = "INSERT INTO MyGuests (firstname, lastname, email) VALUES ('John', 'Doe', 'john@example.com')"; if (mysqli_query($conn, $sql)) { echo "新记录插入成功"; } else { echo "Error: " . $sql . "&lt;br&gt;" . mysqli_error($conn); } mysql_close($conn); ?&gt;</code></pre><p><strong>或者</strong></p><pre><code class="language-php">&lt;?php $serve = 'localhost:3306'; $username = 'root'; $password = 'root'; $dbname = 'examples'; $link = mysqli_connect($serve,$username,$password,$dbname); mysqli_set_charset($link,'UTF-8'); // 设置数据库字符集 $result = mysqli_query($link,'select * from customers'); $data = mysqli_fetch_all($result); // 从结果集中获取所有数据 print_r($data); ?&gt;</code></pre><h2><span class="text-small"><strong>实例 (MySQLi - 面向对象风格方法)</strong></span></h2><pre><code class="language-php">&lt;?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检测连接 if ($conn-&gt;connect_error) { die("连接失败: " . $conn-&gt;connect_error); } $sql = "INSERT INTO MyGuests (firstname, lastname, email) VALUES ('John', 'Doe', 'john@example.com')"; if ($conn-&gt;query($sql) === TRUE) { echo "新记录插入成功"; } else { echo "Error: " . $sql . "&lt;br&gt;" . $conn-&gt;error; } $conn-&gt;close(); ?&gt;</code></pre><p><strong>或者</strong></p><pre><code class="language-php">&lt;?php $serve = 'localhost:3306'; $username = 'root'; $password = 'root'; $dbname = 'examples'; $mysqli = new Mysqli($serve,$username,$password,$dbname); if($mysqli-&gt;connect_error){ die('connect error:'.$mysqli-&gt;connect_errno); } $mysqli-&gt;set_charset('UTF-8'); // 设置数据库字符集 $result = $mysqli-&gt;query('select * from customers'); $data = $result-&gt;fetch_all(); // 从结果集中获取所有数据 print_r($data); ?&gt;</code></pre><h2><span class="text-small"><strong>实例 (PDO链接 PHP7):</strong></span></h2><pre><code class="language-php">&lt;?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDBPDO"; try { $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); // 设置 PDO 错误模式,用于抛出异常 $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $sql = "INSERT INTO MyGuests (firstname, lastname, email) VALUES ('John', 'Doe', 'john@example.com')"; // 使用 exec() ,没有结果返回 $conn-&gt;exec($sql); echo "新记录插入成功"; } catch(PDOException $e) { echo $sql . "&lt;br&gt;" . $e-&gt;getMessage(); } $conn = null; ?&gt;</code></pre><p>在<strong>PHP7</strong>中已经废除了mysql库,则只能使用mysqli及PDO<br>使用PDO或mysqli都可以连接mysql,但更推荐使用PDO连接数据库,因为PDO支持12种不同的数据库驱动程序,mysqli只支持mysql,而且PDO性能更高。<br><strong>或者</strong></p><pre><code class="language-php">&lt;?php $serve = 'mysql:host=localhost:3306;dbname=examples;charset=utf8'; $username = 'root'; $password = 'root'; try{ // PDO连接数据库若错误则会抛出一个PDOException异常 $PDO = new PDO($serve,$username,$password); $result = $PDO-&gt;query('select * from customers'); $data = $result-&gt;fetchAll(PDO::FETCH_ASSOC); // PDO::FETCH_ASSOC表示将对应结果集中的每一行作为一个由列名索引的数组返回 print_r($data); } catch (PDOException $error){ echo 'connect failed:'.$error-&gt;getMessage(); } ?&gt;</code></pre><h2><span class="text-small"><strong>Medoo框架1.2</strong></span></h2><pre><code class="language-php">$database = new medoo([ // 必须配置项 'database_type' =&gt; 'mysql', 'database_name' =&gt; 'name', 'server' =&gt; 'localhost', 'username' =&gt; 'your_username', 'password' =&gt; 'your_password', 'charset' =&gt; 'utf8', // 可选参数 'port' =&gt; 3306, // 可选,定义表的前缀 'prefix' =&gt; 'PREFIX_', // 连接参数扩展, 更多参考 http://www.php.net/manual/en/pdo.setattribute.php 'option' =&gt; [ PDO::ATTR_CASE =&gt; PDO::CASE_NATURAL ] ]); $database-&gt;insert("account", [ "user_name" =&gt; "foo", "email" =&gt; "foo@bar.com" ]);</code></pre><h2><span class="text-small"><strong>Medoo框架1.6</strong></span></h2><pre><code class="language-php">require 'vendor/autoload.php'; use Medoo\Medoo; $database = new Medoo([ // required 'database_type' =&gt; 'mysql', 'database_name' =&gt; 'name', 'server' =&gt; 'localhost', 'username' =&gt; 'your_username', 'password' =&gt; 'your_password', // [optional] 'charset' =&gt; 'utf8', 'port' =&gt; 3306, // [optional] Table prefix 'prefix' =&gt; 'PREFIX_', // [optional] Enable logging (Logging is disabled by default for better performance) 'logging' =&gt; true, // [optional] MySQL socket (shouldn't be used with server and port) 'socket' =&gt; '/tmp/mysql.sock', // [optional] driver_option for connection, read more from http://www.php.net/manual/en/pdo.setattribute.php 'option' =&gt; [ PDO::ATTR_CASE =&gt; PDO::CASE_NATURAL ], // [optional] Medoo will execute those commands after connected to the database for initialization 'command' =&gt; [ 'SET SQL_MODE=ANSI_QUOTES' ] ]); $database-&gt;insert("account", [ "user_name" =&gt; "foo", "email" =&gt; "foo@bar.com" ]);</code></pre><p>哪种方式更简单呢?</p>      07/10 2020       PHP连接数据库方式      Ono Naoki