任务背景

💔💔💔后台研发发现设备开机，直接启动项目【java+vue（nwjs-package.json-main:http://localhost:8080）】，页面直接显示localhost无法访问此网站，用户需等待十秒左右点击【重新加载】进入系统登录页面。

主线任务

请前端开发人员解决此问题，不要等着用户自己动手加载！！！

任务开始

⏳ ？？无语，之前的设备都没这个问题，就这个新设备就出现了各种问题，我真的很无语，便宜没好货啊家人们，百度百度吧，我是个不中用的废物，只会增删改查，遇到问题真的只能百度！！先看看吧，看看可能导致问题是啥原因，万一不用前端改呢！！我就省事了嘻嘻。

百度也没找到好东西，问一下。 ⏰这个他就是一开机欻欻欻项目就开始启动了，那可能就是nginx没起来呢，找不到前端的地址，让后台看看是不是没起来

📝表面上回复了嗯嗯，背地里已经在默默哭泣了，就是那新设备的配置低,不知道，我说是就是,（无端自信...），算了，不找原因了，看这意思找到了也是从我这改。

📢不能让用户手动重连，那就只能前端前边loading背地里连去了。先加个中介给这nwjs跟我的前端代码，(nwjs-package.json-main:index.html)

🎚让这个中介loading+重连，先百度个loading动画，我可不会写

css 复制代码

 <style>
    * {
      /* 初始化 */
      margin: 0;
      padding: 0;
    }

    body {
      /* 100%窗口高度 */
      height: 100vh;
      /* 弹性布局 水平+垂直居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
    }

    .loader {
      /* 相对定位 */
      position: relative;
      width: 80px;
      height: 80px;
      /* 渐变背景 金色到透明 */
      background: linear-gradient(#409EFF, transparent 40%);
      border-radius: 50%;
      /* 执行动画：动画名 时长 线性 无限次播放 */
      animation: roll 1s linear infinite;
    }

    /* 遮罩 */
    .loader::before {
      content: "";
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      /* 绝对定位 居中 */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #ffffff;
      border-radius: 50%;
    }

    /* 光晕 */
    .loader::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(#409EFF, transparent 40%);
      border-radius: 50%;
      z-index: -1;
      /* 模糊滤镜 */
      filter: blur(30px);
    }

    /* 定义动画 */
    @keyframes roll {
      to {
        transform: rotateZ(360deg);
        /* 颜色滤镜 通过设置度数可改变颜色 */
        /* filter: hue-rotate(360deg); */
      }
    }
  </style>

html 复制代码

<div class="loader"></div>

🎈好了，现在已经开始loading了，接下来就准备重连吧。重连的话，只要我一直调用那项目的一个接口，等调通了就能直接跳了，嘿呀真是聪明。（代码省略...），写完试试吧，嘿，还真别说，loading了老半天（不是，具体多长时间我没看，我忘了，反正挺长的，后台启动的很慢）

🧶换一个方法吧，这么长时间搁谁不得烦呢，又百度了一个，jQuery的

js 复制代码

  function getURL(url) {
    $.ajax({
      type: 'get',
      url: url,
      cache: false,
      dataType: "jsonp", //跨域采用jsonp方式 
      processData: false,
      timeout: 10000, //超时时间，毫秒
      complete: function (data) {
        if (data.status == 200) {
          window.location.href = url
        } else {
          getURL('https://localhost:8080/')
        }
      }
    });
  }
  getURL('https://localhost:8080/')

嘿嘿不赖。试了一下也还行，比上一个方法快多了家人们，直接交差

任务完成

小朋友们再见

【提高用户体验】localhost无法访问此网站或者无法访问此页面

任务背景

主线任务

任务开始

任务完成