27153554.html 73.3 KB
Newer Older
1
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>esp8266(2)-网络服务器 | aJream博客</title><meta name="keywords" content="esp8266"><meta name="author" content="aJream"><meta name="copyright" content="aJream"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="esp8266作为服务器使用">
[小G]'s avatar
[小G] 已提交
2
<meta property="og:type" content="article">
3
<meta property="og:title" content="esp8266(2)-网络服务器">
[小G]'s avatar
update  
[小G] 已提交
4
<meta property="og:url" content="http://ajream.gitee.io/posts/27153554.html">
[小G]'s avatar
[小G] 已提交
5 6 7
<meta property="og:site_name" content="aJream博客">
<meta property="og:description" content="esp8266作为服务器使用">
<meta property="og:locale" content="zh_CN">
[小G]'s avatar
---  
[小G] 已提交
8
<meta property="og:image" content="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png">
[小G]'s avatar
[小G] 已提交
9
<meta property="article:published_time" content="2021-08-02T00:20:00.000Z">
10
<meta property="article:modified_time" content="2021-09-10T03:19:57.136Z">
[小G]'s avatar
[小G] 已提交
11 12 13
<meta property="article:author" content="aJream">
<meta property="article:tag" content="esp8266">
<meta name="twitter:card" content="summary">
[小G]'s avatar
update  
[小G] 已提交
14
<meta name="twitter:image" content="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/ajream/ajream.github.io/img/plane1.png"><link rel="canonical" href="http://ajream.gitee.io/posts/27153554"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/pwa/manifest.json"/><link rel="apple-touch-icon" sizes="180x180" href="/pwa/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/pwa/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/pwa/16.png"/><link rel="mask-icon" href="/pwa/safari-pinned-tab.svg" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>var _hmt = _hmt || [];
[小G]'s avatar
---  
[小G] 已提交
15 16
(function() {
  var hm = document.createElement("script");
[小G]'s avatar
---  
[小G] 已提交
17
  hm.src = "https://hm.baidu.com/hm.js?cf4298a93605ae2ed32ac87ebc5f4154";
[小G]'s avatar
---  
[小G] 已提交
18 19 20 21
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><script>const GLOBAL_CONFIG = { 
[小G]'s avatar
[小G] 已提交
22 23 24 25
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"","msgToSimplifiedChinese":""},
[小G]'s avatar
---  
[小G] 已提交
26 27
  noticeOutdate: {"limitDay":200,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":150},
[小G]'s avatar
[小G] 已提交
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-center"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
63
  title: 'esp8266(2)-网络服务器',
[小G]'s avatar
[小G] 已提交
64 65 66 67
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
68
  postUpdate: '2021-09-10 11:19:57'
[小G]'s avatar
[小G] 已提交
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
[小G]'s avatar
---  
[小G] 已提交
157 158 159 160
    document.addEventListener('pjax:complete', detectApple)})(window)</script><link rel="stylesheet" href="/css/copyright.css"><link rel="stylesheet" href="/css/index.min.css"><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/background.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/icon.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-swiper/lib/swiperstyle.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-clock/lib/clock.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><script async src="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus@latest/lib/carousel-touch.min.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar2.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">100</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">18</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">18</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-file-alt"></i><span> 文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/notes/"><i class="fa-fw fas fa-edit"></i><span> 笔记</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/poems/"><i class="fa-fw fas fa-book"></i><span> 诗歌</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-link"></i><span> 链接</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></li><li><a class="site-page child" href="/web-links/"><i class="fa-fw fas fa-paperclip"></i><span> 网站</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">aJream博客</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-file-alt"></i><span> 文章</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/notes/"><i class="fa-fw fas fa-edit"></i><span> 笔记</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/poems/"><i class="fa-fw fas fa-book"></i><span> 诗歌</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-link"></i><span> 链接</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></li><li><a class="site-page child" href="/web-links/"><i class="fa-fw fas fa-paperclip"></i><span> 网站</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">esp8266(2)-网络服务器</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-08-02T00:20:00.000Z" title="发表于 2021-08-02 08:20:00">2021-08-02</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-09-10T03:19:57.136Z" title="更新于 2021-09-10 11:19:57">2021-09-10</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%A1%AC%E4%BB%B6%E5%AD%A6%E4%B9%A0/">硬件学习</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E7%A1%AC%E4%BB%B6%E5%AD%A6%E4%B9%A0/esp8266/">esp8266</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>5分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="esp8266(2)-网络服务器"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div><article class="post-content" id="article-container"><h2 id="1、建立基本网络服务器">1、建立基本网络服务器</h2>
<ol>
<li>
<p>导入库文件 <code>ESP8266WebServer.h</code></p>
[小G]'s avatar
[小G] 已提交
161
</li>
[小G]'s avatar
---  
[小G] 已提交
162 163
<li>
<p>创建服务器对象</p>
[小G]'s avatar
[小G] 已提交
164 165
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">ESP8266WebServer <span class="title">server</span><span class="params">(<span class="number">80</span>)</span></span>;  <span class="comment">//80是端口号</span></span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
166 167
<li>
<p>启动服务器</p>
[小G]'s avatar
[小G] 已提交
168 169
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">server.begin();</span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
170 171
<li>
<p>服务器访问配置</p>
[小G]'s avatar
[小G] 已提交
172 173
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 访问根节点时,调用处理函数 handleRoot</span></span><br><span class="line">server.on(<span class="string">&quot;/&quot;</span>, handleRoot);</span><br><span class="line"></span><br><span class="line"><span class="comment">//访问不到,即404时,调用处理函数 handleNotFound</span></span><br><span class="line">server.onNotFound(handleNotFound);</span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
174 175
<li>
<p>访问处理函数</p>
[小G]'s avatar
[小G] 已提交
176 177 178
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleRoot</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">200</span>, <span class="string">&quot;text/plain&quot;</span>, <span class="string">&quot;Hello from ESP8266&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleNotFound</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">404</span>, <span class="string">&quot;text/plain&quot;</span>, <span class="string">&quot;404: Not found&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
179 180
<li>
<p>循环监听端口</p>
[小G]'s avatar
[小G] 已提交
181 182 183 184 185
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">loop</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.handleClient();   <span class="comment">//循环监听客户端访问情况</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>完整code:</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WiFi.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WiFiMulti.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WebServer.h&gt;</span></span></span><br><span class="line"></span><br><span class="line">ESP8266WiFiMulti wifiMulti;</span><br><span class="line"><span class="function">ESP8266WebServer <span class="title">server</span><span class="params">(<span class="number">80</span>)</span></span>; <span class="comment">//80是端口号</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">setup</span><span class="params">()</span></span>&#123;</span><br><span class="line">    Serial.begin(<span class="number">9600</span>);</span><br><span class="line">    server.begin();</span><br><span class="line">    server.on(<span class="string">&quot;/&quot;</span>, handleRoot);</span><br><span class="line">    server.onNotFound(handleNotFound);</span><br><span class="line"></span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;RBook&quot;</span>, <span class="string">&quot;17191719&quot;</span>);</span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;bbb&quot;</span>, <span class="string">&quot;12345678&quot;</span>);</span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;ccc&quot;</span>, <span class="string">&quot;12345678&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">int</span> i = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (wifiMulti.run() != WL_CONNECTED)&#123;</span><br><span class="line">        delay(<span class="number">600</span>);</span><br><span class="line">        Serial.print(++i);</span><br><span class="line">        Serial.print(<span class="string">&quot; &quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    Serial.println(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    Serial.print(<span class="string">&quot;IP Address: &quot;</span>);</span><br><span class="line">    Serial.println(WiFi.localIP());</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//监听客户端</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">loop</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.handleClient();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//访问处理函数</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleRoot</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">200</span>, <span class="string">&quot;text/plain&quot;</span>, <span class="string">&quot;Hello esp8266&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleNotFound</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">404</span>, <span class="string">&quot;text/plain&quot;</span>, <span class="string">&quot;404 not found&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
[小G]'s avatar
---  
[小G] 已提交
186 187
<h2 id="2、通过网络服务器实现开发板控制">2、通过网络服务器实现开发板控制</h2>
<p>通过网页控制nodeMCU开发板小灯亮灭</p>
[小G]'s avatar
[小G] 已提交
188
<p>步骤1、2、3、6不变,只是第3、4步的服务器访问配置和访问处理函数有些许改动</p>
[小G]'s avatar
---  
[小G] 已提交
189 190 191
<ol start="3">
<li>
<p>服务器访问配置</p>
[小G]'s avatar
[小G] 已提交
192 193
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">server.on(<span class="string">&quot;/&quot;</span>, HTTP_GET, handleRoot);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*添加这个控制LED的网页, 使用post方式发送http请求*/</span></span><br><span class="line">server.on(<span class="string">&quot;/LED&quot;</span>, HTTP_POST, handleLED); </span><br><span class="line"></span><br><span class="line">server.onNotFound(handleNotFound);</span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
194 195
<li>
<p>访问处理函数</p>
[小G]'s avatar
[小G] 已提交
196 197 198 199
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleRoot</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">200</span>, <span class="string">&quot;text/html&quot;</span>, <span class="string">&quot;&lt;form action=\&quot;/LED\&quot; method=\&quot;POST\&quot;&gt;&lt;input type=\&quot;submit\&quot; value=\&quot;Toggle LED\&quot;&gt;&lt;/form&gt;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意这句html代码:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;/LED&quot;</span> <span class="attr">method</span>=<span class="string">&quot;POST&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;Toggle LED&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
[小G]'s avatar
---  
[小G] 已提交
200
<p>这会生成一个按钮,点击这个按钮会把数据发到&quot;/LED&quot;页面</p>
[小G]'s avatar
[小G] 已提交
201
</blockquote>
[小G]'s avatar
---  
[小G] 已提交
202 203
<p>下面是“/LED”页面的处理函数:</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleLED</span><span class="params">()</span></span>&#123;</span><br><span class="line">    <span class="keyword">static</span> <span class="keyword">bool</span> LEDState = LOW;<span class="comment">//记录LED此时亮灭状态</span></span><br><span class="line">    LEDState = !LEDState;</span><br><span class="line">    digitalWrite(LED_BUILTIN, LEDState);</span><br><span class="line">    server.sendHeader(<span class="string">&quot;Location&quot;</span>, <span class="string">&quot;/&quot;</span>);</span><br><span class="line">    server.send(<span class="number">303</span>);        <span class="comment">//303表示将网页重定向</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
[小G]'s avatar
[小G] 已提交
204 205 206 207
</li>
</ol>
<p>完整code</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WiFi.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WiFiMulti.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WebServer.h&gt;</span></span></span><br><span class="line"></span><br><span class="line">ESP8266WiFiMulti wifiMulti;</span><br><span class="line"><span class="function">ESP8266WebServer <span class="title">server</span><span class="params">(<span class="number">80</span>)</span></span>; <span class="comment">//80是端口号</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">setup</span><span class="params">()</span></span>&#123;</span><br><span class="line">    Serial.begin(<span class="number">9600</span>);</span><br><span class="line"></span><br><span class="line">    pinMode(LED_BUILTIN, OUTPUT);  <span class="comment">//设置内置LED引脚为输出模式</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">/*服务器配置*/</span></span><br><span class="line">    server.begin();</span><br><span class="line">    server.on(<span class="string">&quot;/&quot;</span>, HTTP_GET, handleRoot);</span><br><span class="line">    server.on(<span class="string">&quot;/LED&quot;</span>, HTTP_POST, handleLED);</span><br><span class="line">    server.onNotFound(handleNotFound);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*Wifi配置*/</span></span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;RBook&quot;</span>, <span class="string">&quot;17191719&quot;</span>);</span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;bbb&quot;</span>, <span class="string">&quot;12345678&quot;</span>);</span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;ccc&quot;</span>, <span class="string">&quot;12345678&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">int</span> i = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (wifiMulti.run() != WL_CONNECTED)&#123;</span><br><span class="line">        delay(<span class="number">600</span>);</span><br><span class="line">        Serial.print(++i);</span><br><span class="line">        Serial.print(<span class="string">&quot; &quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    Serial.println(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    Serial.print(<span class="string">&quot;IP Address: &quot;</span>);</span><br><span class="line">    Serial.println(WiFi.localIP());</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">loop</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.handleClient();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleRoot</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">200</span>, <span class="string">&quot;text/html&quot;</span>, <span class="string">&quot;&lt;form action=\&quot;/LED\&quot; method=\&quot;POST\&quot;&gt;&lt;input type=\&quot;submit\&quot; value=\&quot;Toggle LED\&quot;&gt;&lt;/form&gt;&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleNotFound</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">404</span>, <span class="string">&quot;text/plain&quot;</span>, <span class="string">&quot;404 not found&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleLED</span><span class="params">()</span></span>&#123;</span><br><span class="line">    <span class="keyword">static</span> <span class="keyword">bool</span> LEDState = LOW; <span class="comment">//记录LED此时亮灭状态</span></span><br><span class="line">    LEDState = !LEDState;</span><br><span class="line">    digitalWrite(LED_BUILTIN, LEDState);</span><br><span class="line">    server.sendHeader(<span class="string">&quot;Location&quot;</span>, <span class="string">&quot;/&quot;</span>);</span><br><span class="line">    server.send(<span class="number">303</span>);        <span class="comment">//303表示将网页重定向</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
[小G]'s avatar
---  
[小G] 已提交
208 209
<h2 id="3、将开发板引脚状态发送到终端网页">3、将开发板引脚状态发送到终端网页</h2>
<p>将引脚<strong>D3</strong>(已经与flash按键相连,按键按下为低电平)的电平状态显示到网页中</p>
[小G]'s avatar
[小G] 已提交
210
<ol>
[小G]'s avatar
---  
[小G] 已提交
211 212
<li>
<p>首先在开始时将D3引脚设置为上拉输入模式</p>
[小G]'s avatar
[小G] 已提交
213 214
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pinMode(D3, INPUT_PULLUP); </span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
215 216
<li>
<p>循环读取引脚状态 <code>digitalRead()</code></p>
[小G]'s avatar
[小G] 已提交
217 218
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">bool</span> pinState;</span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">loop</span><span class="params">()</span></span>&#123;</span><br><span class="line">    pinState = digitalRead(D3); <span class="comment">// 获取引脚状态</span></span><br><span class="line">    <span class="comment">//......</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
[小G]'s avatar
---  
[小G] 已提交
219 220
<li>
<p>要在根节点下显示引脚状态,所以其访问处理函数为:</p>
[小G]'s avatar
[小G] 已提交
221 222 223 224 225 226 227 228
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleRoot</span><span class="params">()</span> </span>&#123;   </span><br><span class="line">  String displayPinState;                   <span class="comment">// 存储按键状态的字符串变量</span></span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(pinState == HIGH)&#123;                     <span class="comment">// 当按键引脚D3为高电平</span></span><br><span class="line">    displayPinState = <span class="string">&quot;Button State: HIGH&quot;</span>; <span class="comment">// 字符串赋值高电平信息</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;                                  <span class="comment">// 当按键引脚D3为低电平</span></span><br><span class="line">    displayPinState = <span class="string">&quot;Button State: LOW&quot;</span>;  <span class="comment">// 字符串赋值低电平信息</span></span><br><span class="line">  &#125;</span><br><span class="line">  esp8266_server.send(<span class="number">200</span>, <span class="string">&quot;text/plain&quot;</span>, displayPinState); </span><br><span class="line">                                           <span class="comment">// 向浏览器发送按键状态信息  </span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>完整code</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WiFi.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WiFiMulti.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span> <span class="meta-string">&lt;ESP8266WebServer.h&gt;</span></span></span><br><span class="line"></span><br><span class="line">ESP8266WiFiMulti wifiMulti;</span><br><span class="line"><span class="function">ESP8266WebServer <span class="title">server</span><span class="params">(<span class="number">80</span>)</span></span>; <span class="comment">//80是端口号</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">bool</span> pinState;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">setup</span><span class="params">()</span></span>&#123;</span><br><span class="line">    Serial.begin(<span class="number">9600</span>);</span><br><span class="line"></span><br><span class="line">    pinMode(D3, INPUT_PULLUP);  <span class="comment">//上拉输入模式</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">/*服务器配置*/</span></span><br><span class="line">    server.begin();</span><br><span class="line">    server.on(<span class="string">&quot;/&quot;</span>, HTTP_GET, handleRoot);</span><br><span class="line">    server.onNotFound(handleNotFound);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*Wifi配置*/</span></span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;RBook&quot;</span>, <span class="string">&quot;17191719&quot;</span>);</span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;bbb&quot;</span>, <span class="string">&quot;12345678&quot;</span>);</span><br><span class="line">    wifiMulti.addAP(<span class="string">&quot;ccc&quot;</span>, <span class="string">&quot;12345678&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">int</span> i = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (wifiMulti.run() != WL_CONNECTED)&#123;</span><br><span class="line">        delay(<span class="number">800</span>);</span><br><span class="line">        Serial.print(++i);</span><br><span class="line">        Serial.print(<span class="string">&quot; &quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    Serial.println(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    Serial.print(<span class="string">&quot;IP Address: &quot;</span>);</span><br><span class="line">    Serial.println(WiFi.localIP());</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">loop</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.handleClient();</span><br><span class="line">    pinState = digitalRead(D3);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleRoot</span><span class="params">()</span></span>&#123;</span><br><span class="line">    String displayPinState;</span><br><span class="line">    <span class="keyword">if</span>(pinState == HIGH)&#123;                     <span class="comment">// 当按键引脚D3为高电平</span></span><br><span class="line">      displayPinState = <span class="string">&quot;Button State: HIGH&quot;</span>; <span class="comment">// 字符串赋值高电平信息</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;                                  <span class="comment">// 当按键引脚D3为低电平</span></span><br><span class="line">      displayPinState = <span class="string">&quot;Button State: LOW&quot;</span>;  <span class="comment">// 字符串赋值低电平信息</span></span><br><span class="line">    &#125;</span><br><span class="line">    server.send(<span class="number">200</span>, <span class="string">&quot;text/plain&quot;</span>, displayPinState);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">handleNotFound</span><span class="params">()</span></span>&#123;</span><br><span class="line">    server.send(<span class="number">404</span>, <span class="string">&quot;text/plain&quot;</span>, <span class="string">&quot;404 not found&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意:引脚状态改变后需要手动刷新网页,网页显示才会改变</p>
</blockquote>
[小G]'s avatar
[小G] 已提交
229
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>esp8266(2)-网络服务器</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="http://ajream.gitee.io/posts/27153554.html">http://ajream.gitee.io/posts/27153554.html</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a" style="display: inline-block;width: 120px"><h>作者</h><div class="post-copyright-cc-info"><h>aJream</h></div></div><div class="post-copyright-c" style="display: inline-block;width: 120px"><h>发布于</h><div class="post-copyright-cc-info"><h>2021-08-02</h></div></div><div class="post-copyright-u" style="display: inline-block;width: 120px"><h>更新于</h><div class="post-copyright-cc-info"><h>2021-09-10</h></div></div><div class="post-copyright-c" style="display: inline-block;width: 120px"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY 4.0" href="https://creativecommons.org/licenses/by/4.0/deed.zh">CC BY 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/esp8266/">esp8266</a></div><div class="post_share"><div class="social-share" data-image="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/2080031a.html"><img class="prev-cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">esp8266(3)-闪存文件系统</div></div></a></div><div class="next-post pull-right"><a href="/posts/4dc0a7a8.html"><img class="next-cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">esp8266(1)-接入点模式-无线终端模式</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/89cf4bca.html" title="esp8266(0)-Arduino配置esp8266开发环境"><img class="cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-01</div><div class="title">esp8266(0)-Arduino配置esp8266开发环境</div></div></a></div><div><a href="/posts/4dc0a7a8.html" title="esp8266(1)-接入点模式-无线终端模式"><img class="cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-02</div><div class="title">esp8266(1)-接入点模式-无线终端模式</div></div></a></div><div><a href="/posts/2080031a.html" title="esp8266(3)-闪存文件系统"><img class="cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-03</div><div class="title">esp8266(3)-闪存文件系统</div></div></a></div><div><a href="/posts/d150c3f1.html" title="esp8266(4)-NodeMCU作为客户端使用"><img class="cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-03</div><div class="title">esp8266(4)-NodeMCU作为客户端使用</div></div></a></div><div><a href="/posts/2d7f83ef.html" title="esp8266(5)-Stream数据流"><img class="cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-03</div><div class="title">esp8266(5)-Stream数据流</div></div></a></div><div><a href="/posts/baad5185.html" title="esp8266(6)-WiFi配网"><img class="cover" src="https://gitee.com/ajream/images/raw/master/img/20210829225240_pcbimg.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-04</div><div class="title">esp8266(6)-WiFi配网</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/avatar2.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">aJream</div><div class="author-info__description">脚踏实地!</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">100</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">18</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">18</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/ajream"><i class="fab fa-github"></i><span>关注我</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/ajream" target="_blank" title="Github"><i class="iconfont icon-git-copy"></i></a><a class="social-icon" href="https://gitee.com/ajream" target="_blank" title="Gitee"><i class="iconfont icon-gitee"></i></a><a class="social-icon" href="mailto:hjiannannwpu@126.com" target="_blank" title="邮件"><i class="iconfont icon-youjian"></i></a><a class="social-icon" href="https://www.zhihu.com" target="_blank" title="知乎"><i class="iconfont icon-zhihu"></i></a><a class="social-icon" href="https://www.bilibili.com" target="_blank" title="B站"><i class="iconfont icon-bilibili1"></i></a><a class="social-icon" href="https://www.nowcoder.com/profile/137967069" target="_blank" title="牛客网"><i class="iconfont icon-niu"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">欢迎来到我的博客!</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E5%BB%BA%E7%AB%8B%E5%9F%BA%E6%9C%AC%E7%BD%91%E7%BB%9C%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-number">1.</span> <span class="toc-text">1、建立基本网络服务器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E9%80%9A%E8%BF%87%E7%BD%91%E7%BB%9C%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%AE%9E%E7%8E%B0%E5%BC%80%E5%8F%91%E6%9D%BF%E6%8E%A7%E5%88%B6"><span class="toc-number">2.</span> <span class="toc-text">2、通过网络服务器实现开发板控制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E5%B0%86%E5%BC%80%E5%8F%91%E6%9D%BF%E5%BC%95%E8%84%9A%E7%8A%B6%E6%80%81%E5%8F%91%E9%80%81%E5%88%B0%E7%BB%88%E7%AB%AF%E7%BD%91%E9%A1%B5"><span class="toc-number">3.</span> <span class="toc-text">3、将开发板引脚状态发送到终端网页</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/1294a4bd.html" title="stm32标准外设库介绍"><img src="https://gitee.com/ajream/images/raw/master/img/20210910172758_stm32.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="stm32标准外设库介绍"/></a><div class="content"><a class="title" href="/posts/1294a4bd.html" title="stm32标准外设库介绍">stm32标准外设库介绍</a><time datetime="2021-09-11T06:00:25.000Z" title="发表于 2021-09-11 14:00:25">2021-09-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/190b30be.html" title="MDK keil新建stm32工程"><img src="https://gitee.com/ajream/images/raw/master/img/20210910172758_stm32.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MDK keil新建stm32工程"/></a><div class="content"><a class="title" href="/posts/190b30be.html" title="MDK keil新建stm32工程">MDK keil新建stm32工程</a><time datetime="2021-09-10T08:41:28.000Z" title="发表于 2021-09-10 16:41:28">2021-09-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/a4c109bd.html" title="MDK keil卸载芯片包packs"><img src="https://gitee.com/ajream/images/raw/master/img/20210910172758_stm32.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MDK keil卸载芯片包packs"/></a><div class="content"><a class="title" href="/posts/a4c109bd.html" title="MDK keil卸载芯片包packs">MDK keil卸载芯片包packs</a><time datetime="2021-09-09T08:41:28.000Z" title="发表于 2021-09-09 16:41:28">2021-09-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/54667693.html" title="标签外挂"><img src="https://gitee.com/ajream/images/raw/master/img/20210905193431_butterfly.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="标签外挂"/></a><div class="content"><a class="title" href="/posts/54667693.html" title="标签外挂">标签外挂</a><time datetime="2021-09-08T12:13:46.000Z" title="发表于 2021-09-08 20:13:46">2021-09-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/401491fc.html" title="矢量场"><img src="https://gitee.com/ajream/images/raw/master/img/20210902230207_dianci.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="矢量场"/></a><div class="content"><a class="title" href="/posts/401491fc.html" title="矢量场">矢量场</a><time datetime="2021-09-08T08:00:00.000Z" title="发表于 2021-09-08 16:00:00">2021-09-08</time></div></div></div></div></div></div></main><footer id="footer" style="background: url()"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2021 By aJream</div><div class="footer_custom_text"><p><a style="margin-inline:5px"target="_blank"href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo"title="博客框架为Hexo"></a><a style="margin-inline:5px"target="_blank"href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/theme-Butterfly-orange?style=flat&logo=bitdefender"title="主题采用Butterfly"></a><a style="margin-inline:5px"target="_blank"href="https://github.com/ajream/"><img src="https://img.shields.io/badge/Source-Github-blueviolet?style=flat&logo=github"title="代码托管在Github"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换"></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>function loadValine () {
[小G]'s avatar
[小G] 已提交
230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: '9XR2blQ1LDN7yP0lzRmwn98i-gzGzoHsz',
      appKey: '21G6ouMeHjgLVH8HNa6nbwTg',
      placeholder: '快来评论一下吧~',
      avatar: 'monsterid',
      meta: 'nick,mail,link'.split(','),
      pageSize: '10',
      lang: 'zh-CN',
      recordIP: false,
      serverURLs: '',
      emojiCDN: '',
      emojiMaps: "",
      enableQQ: false,
      path: window.location.pathname,
      requiredFields: ["nick,mail"],
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !false) {
  if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
[小G]'s avatar
---  
[小G] 已提交
262
}</script></div><div class="aplayer no-destroy" data-id="6925236447" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div><script defer src="/live2d-widget/autoload.js"></script><script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script><script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js" data-mobile="false" data-text="公为天下,报效祖国,诚实守信,襟怀坦荡,勇猛精进,敢为人先,毅然果决,坚韧不拔,基础扎实,工作踏实,作风朴实,开拓创新,富强,民主,文明,和谐,自由,平等,公正,法治,爱国,敬业,诚信,友善" data-fontsize="15px" data-random="false" async="async"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
[小G]'s avatar
[小G] 已提交
263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
[小G]'s avatar
update  
[小G] 已提交
346 347
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --> <script data-pjax>if(document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    var parent = document.getElementById('recent-posts');
348
    var child = '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet"><div class="magnet_item"><a class="magnet_link" href="/categories/java/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">📚 aJreamのJava全栈学习 (69)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="/categories/Hexo/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🎮 aJreamのHexo博客搭建&主题配置 (3)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="/categories/win10/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">💻 aJreamのWin10主题配置 (3)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="/categories/硬件学习/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🔧 aJreamの硬件学习 (24)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><a class="magnet_link_more"  href="http://ajream.gitee.io/categories" style="flex:1;text-align: center;margin-bottom: 10px;">查看更多...</a></div></div>';
[小G]'s avatar
update  
[小G] 已提交
349 350 351 352
    console.log('已挂载magnet')
    parent.insertAdjacentHTML("afterbegin",child)}
     </script><style>#catalog_magnet{flex-wrap: wrap;display: flex;width:100%;justify-content:space-between;padding: 10px 10px 0 10px;align-content: flex-start;}.magnet_item{flex-basis: calc(50% - 5px);background: #f2f2f2;margin-bottom: 10px;border-radius: 8px;transition: all 0.2s ease-in-out;}.magnet_item:hover{background: #aebfe3}.magnet_link_more{color:#555}.magnet_link{color:black}.magnet_link:hover{color:white}@media screen and (max-width: 600px) {.magnet_item {flex-basis: 100%;}}.magnet_link_context{display:flex;padding: 10px;font-size:16px;transition: all 0.2s ease-in-out;}.magnet_link_context:hover{padding: 10px 20px;}</style>
    <style>null</style><script data-pjax>
[小G]'s avatar
---  
[小G] 已提交
353 354 355 356 357 358 359 360 361 362 363
                        function butterfly_swiper_injector_config(){
                          var parent_div_git = document.getElementById('recent-posts');
                          var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/dc7f8ae1.html" alt=""><img width="48" height="48" src="https://gitee.com/ajream/images/raw/master/img/20210905193431_butterfly.png" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2021-08-29</span><a class="blog-slider__title" href="posts/dc7f8ae1.html" alt="">butterfly主题配置记录</a><div class="blog-slider__text">用于记录搭建Hexo博客的过程即butterfly主题的配置</div><a class="blog-slider__button" href="posts/dc7f8ae1.html" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/c8eb4af9.html" alt=""><img width="48" height="48" src="https://gitee.com/ajream/images/raw/master/img/20210905193431_butterfly.png" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2021-08-29</span><a class="blog-slider__title" href="posts/c8eb4af9.html" alt="">Hexo添加百度统计分析</a><div class="blog-slider__text">Hexo添加百度统计分析</div><a class="blog-slider__button" href="posts/c8eb4af9.html" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/54a4218.html" alt=""><img width="48" height="48" src="https://gitee.com/ajream/images/raw/master/img/20210905102351_win10_.png" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2021-09-05</span><a class="blog-slider__title" href="posts/54a4218.html" alt="">win10主题美化</a><div class="blog-slider__text">Win10系统美化记录</div><a class="blog-slider__button" href="posts/54a4218.html" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="posts/446faab7.html" alt=""><img width="48" height="48" src="https://gitee.com/ajream/images/raw/master/img/20210905102351_win10_.png" alt=""/></a><div class="blog-slider__content"><span class="blog-slider__code">2021-09-05</span><a class="blog-slider__title" href="posts/446faab7.html" alt="">win10创建系统还原及如何还原</a><div class="blog-slider__text">Win10创建系统还原点及还原演示</div><a class="blog-slider__button" href="posts/446faab7.html" alt="">详情   </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
                          console.log('已挂载butterfly_swiper')
                          // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错,但不影响使用(支持pjax跳转)
                          parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错,但不影响使用(支持pjax跳转)
                          }
                        if( document.getElementById('recent-posts') && (location.pathname ==='all'|| 'all' ==='all')){
                        butterfly_swiper_injector_config()
                        }
                      </script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script><script defer data-pjax src="https://cdn.jsdelivr.net/npm/hexo-butterfly-swiper/lib/swiper_init.js"></script><script data-pjax>
[小G]'s avatar
[小G] 已提交
364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386
  function butterfly_clock_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_injector_config();
  }
[小G]'s avatar
---  
[小G] 已提交
387
  </script><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script data-pjax src="https://cdn.jsdelivr.net/npm/hexo-butterfly-clock/lib/clock.min.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
[小G]'s avatar
update  
[小G] 已提交
388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '50ms');
    arr[i].setAttribute('data-wow-offset', '50');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script>
[小G]'s avatar
[小G] 已提交
404 405 406 407
  <script data-pjax src="https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.16/hexo_githubcalendar.js"></script>
  <script data-pjax>
        function GithubCalendarConfig(){
            var git_githubapiurl ="https://python-github-calendar-api.vercel.app/api?aJream";
[小G]'s avatar
---  
[小G] 已提交
408
            var git_color =['#ebedf0', '#f1f8ff', '#dbedff', '#c8e1ff', '#79b8ff', '#2188ff', '#0366d6', '#005cc5', '#044289', '#032f62', '#05264c'];
[小G]'s avatar
[小G] 已提交
409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424
            var git_user ="aJream";
            var parent_div_git = document.getElementById('recent-posts');
            var git_div_html = '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>';
            if(parent_div_git && location.pathname =='/'){
                console.log('已挂载github calendar')
                // parent_div_git.innerHTML=git_div_html+parent_div_git.innerHTML // 无报错,但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",git_div_html) // 有报错,但不影响使用(支持pjax跳转)
            };
            GithubCalendar(git_githubapiurl,git_color,git_user)
        }
        if(document.getElementById('recent-posts')){
            GithubCalendarConfig()
        }
    </script>
    <style>#github_container{min-height:280px}@media screen and (max-width:650px) {#github_container{background-image:;min-height:0px}}</style>
    <style>undefined</style><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>