关于pyspider webui乱码/无法正常运行的解决方案

最新推荐文章于 2024-03-12 22:03:49 发布

aersang

最新推荐文章于 2024-03-12 22:03:49 发布

阅读量675

点赞数 2

文章标签： python

本文链接：https://blog.csdn.net/aersang/article/details/124052031

版权

本文介绍了如何在内网环境中解决pyspider UI界面显示乱码的问题。作者通过F12开发者工具发现是由于内网无法访问CDN导致的CSS和JS文件缺失。通过复制外网环境中的相关文件到内网，并修改index.html文件中引用静态资源的路径，成功解决了UI乱码。此外，提供了修改后的index.html代码段以及直接下载替换的文件链接。

摘要由CSDN通过智能技术生成

今天第一天用pyspider，由于工作原因，需要在内网运行，在外网环境测试好（能正常运行且ui界面正常）将site-packages文件夹及Scripts文件夹移植到了内网主机，但是进入5000端口发现ui乱码，在网上寻求好久解决方案均无果，最终自己花了4个小时扒了扒代码，发现是css、js文件缺失导致的，可以通过本地化这些文件绕过指向cdn地址，这种方式同时也提升了效率，话不多说，把整个过程以及解决方案分享给大家！

首先我用了F12工具调用了控制台，发现部分css文件及js文件报错，状态码是404，仔细看看请求地址，跟run里的--cdn指向的网址是同一个，更改后重启了下，确定了两者之间的关系，所以问题应该是由于内网限制，无法从该网站获取css及js文件，在外网电脑缓存中把缺失的css、js文件拷贝到内网后，继续扒代码，发现最终指向了webui\templates中的index.html，打开后发现其中的

<link href="{{ url_for('cdn', path='twitter-bootstrap/3.1.1/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('cdn', path='x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css') }}" rel="stylesheet">
<link href="{{ url_for('cdn', path='sortable/0.6.0/css/sortable-theme-bootstrap.css') }}" rel="stylesheet">

    等代码与控制台的报错信息一致，且这些共同指向了run中的cdn，由于从未接触过网页编程，照猫画虎把后面的代码拿过来抄抄，

<link href="{{ url_for('static', filename='index.min.css') }}"

然后把缺失的css及js文件跟index.min.css放到同一文件夹(pyspider\webui\static)完美解决问题，遇到相同问题可以试一试

下面是更改后的index.html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dashboard - pyspider</title>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <meta name="description" content="pyspider dashboard">
    <meta name="author" content="binux">
    <link href="{{ url_for('static', filename='bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='bootstrap-editable.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='sortable-theme-bootstrap.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='index.min.css') }}" rel="stylesheet">

    <script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
  </head>

  <body>
    <header>
      <div id="need-set-status-alert" class="alert alert-danger alert-dismissible" style="display:none;" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        Project is not started, please set status to RUNNING or DEBUG.
      </div>
      <h1>pyspider dashboard</h1>
      <table class="table queue-info">
        <tr>
          <th>scheduler</th>
          <td class="queue_value" title="scheduler2fetcher">???</td>
          <th>fetcher</th>
          <td class="queue_value" title="fetcher2processor">???</td>
          <th>processor</th>
          <td class="queue_value" title="processor2result">???</td>
          <th>result_worker</th>
        </tr>
        <tr>
          <td style="border-width: 0px 1px;"></td>
          <td colspan=3></td>
          <td style="border-width: 0px 1px;"></td>
          <td colspan=2 style="border-width: 0px;"></td>
        </tr>
        <tr>
          <td style="border-width: 0px 0px 1px 1px"></td>
          <td colspan=3 style="border-width: 1px 0px;">
            <span class="queue_value" title="newtask_queue">???</span>
            + <span class="queue_value" title="status_queue">???</span>
          </td>
          <td style="border-width: 0px 1px 1px 0px;"></td>
          <td colspan=2 style="border-width: 0px;"></td>
        </tr>
      </table>
    </header>
    <section>
      <div class="global-btn clearfix">
        <div class="create-btn-div">
          <button class="project-create btn btn-default btn-primary" data-toggle="modal" data-target="#create-project-modal">Create</button>
        </div>

        <div class="active-btn-div">
          {% if config.scheduler_rpc is not none %}
            <a class="btn btn-default btn-info" href='/tasks' target=_blank>Recent Active Tasks</a>
          {% endif %}
        </div>

        <div class="modal fade" id="create-project-modal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Create New Project</h4>
              </div>
              <form class="form-horizontal" method="POST">
                <div class="modal-body">
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="project-name">Project Name</label>
                    <div class="col-sm-9">
                      <input class="form-control" type="text" name="project-name" autocomplete="off">
                      <span class="help-block" style="display: none;">[a-zA-Z0-9_]+</span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="start-urls">Start URL(s)</label>
                    <div class="col-sm-9">
                      <input class="form-control" type="text" name="start-urls">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-3 control-label" for="script-mode">Mode</label>
                    <div class="col-sm-9">
                      <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                          <input type="radio" name="script-mode" id="mode-script" autocomplete="off" value="script" checked> Script
                        </label>
                        <label class="btn btn-default">
                          <input type="radio" name="script-mode" id="mode-slime" autocomplete="off" value="slime"> Slime
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary">Create</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <table class="table sortable-theme-bootstrap projects">
        <thead>
          <tr>
            <th>group</th>
            <th>project name</th>
            <th>status</th>
            <th data-type="num">rate/burst</th>
            <th data-type="num">avg time</th>
            <th class="project-progress" data-type="num">&nbsp;<span>progress</span></th>
            <th data-type="num">&nbsp;</th>
            <th data-type="num">&nbsp;</th>
            <th data-type="num">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
            <th data-type="num">actions</th>
          </tr>
        </thead>
        <tbody>
        {% raw %}
          <tr v-cloak v-for="project in projects" data-name="{{* project.name }}">
            <td class="project-group"><span>{{ project.group }}</span></td>
            <td class="project-name"><a href="/debug/{{* project.name }}">{{* project.name }}</a></td>
            <td class="project-status">
              <span class="status-{{ project.paused ? 'PAUSED' : project.status }}" :data-value="project.paused ? 'PAUSED' : project.status">
                {{ project.paused ? 'PAUSED' : project.status }}
              </span>
            </td>
            <td class="project-rate" :data-value="project.rate"><span>{{ project.rate }}/{{ project.burst }}</span></td>
            <td class="project-time" :data-value="project.time.fetch_time + project.time.process_time">
              <span v-show="project.time.fetch_time">{{ (project.time.fetch_time * 1000).toFixed(1) }}+{{ (project.time.process_time * 1000).toFixed(2) }}</span>
            </td>
            <td v-for="type in '5m,1h,1d,all'.split(',')"
                class="project-progress progress-{{* type }}"
                :title="project.progress[type].title"
                :data-value="project.progress[type].task">
              <div class="progress">
                <div class="progress-text">{{* type }}<span v-show="project.progress[type].task">: {{ project.progress[type].task }}</span></div>
                <div class="progress-bar progress-pending"
                     :style="{ width: project.progress[type].pending/project.progress[type].task*100 + '%' }"></div>
                <div class="progress-bar progress-bar-success progress-success"
                     :style="{ width: project.progress[type].success/project.progress[type].task*100 + '%' }"></div>
                <div class="progress-bar progress-bar-warning progress-retry"
                     :style="{ width: project.progress[type].retry/project.progress[type].task*100 + '%' }"></div>
                <div class="progress-bar progress-bar-danger progress-failed"
                     :style="{ width: project.progress[type].failed/project.progress[type].task*100 + '%' }"
                ></div>
              </div>
            </td>
            {% endraw %}

            {% raw %}
            <td class="project-actions" data-value="{{ project.updatetime }}">
              {% endraw %}
              # if config.scheduler_rpc is not none:
              {% raw %}
              <button class="project-run btn btn-default btn-xs" @click="project_run(project, $event)">Run</button>
              <a class="btn btn-default btn-xs" href="/tasks?project={{ project.name }}" target=_blank>Active Tasks</a>
              {% endraw %}
              # endif
              # if config.resultdb:
              {% raw %}
              <a class="btn btn-default btn-xs" href="/results?project={{ project.name }}" target=_blank>Results</a>
              {% endraw %}
              # endif
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <script>
      // json projects data for vue
      var projects = {{ projects | tojson | safe }};
    </script>
    <script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap-editable.min.js') }}"></script>
    <script src="{{ url_for('static', filename='sortable.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vue.min.js') }}"></script>
    <script src="{{ url_for('static', filename='index.min.js') }}"></script>
  </body>
</html>
<!-- vim: set et sw=2 ts=2 sts=2 ff=unix fenc=utf8 syntax=htmldjango: -->