前言

知道 Axure 导出的原型图是静态 html 文件后，思路就清晰了，在本地搭建一个 web 服务器即可局域网之间访问。

但在正式搭建的时候，还是遇到些棘手的问题，先列举出来，读者可以提前思考下：

产品经理如何用自己的电脑（通常 Windows）将共享的文件导出到服务器上（通常 Linux 上）；
可不可以搭建一个首页，前端自动识别服务器里存在的原型项目并展示在首页；

Samba 共享文件

在如何将 Windows 的文件导出到 Linux 上时，也纠结了几种方法，如用 svn 同步文件，或者 sftp 传输文件。但想到产品经理又不是我们这些敲代码的，对这些不熟悉。所以想要使用一种尽量没有学习成本的方法。

最后用了 Samba。Linux 上配置好后，Windows 映射成网络驱动器，然后在 Axure 分享链接时，选择本地此驱动器即可上传到服务器上。具体操作如下。

Linux 安装 Samba

公司的 Wiki 项目已经用到了 Samba，所以没有亲自安装，直接配置：

[axure]
        comment = share for axure
        path = /root/server_axure/html
        public = yes
        security = user
        map to guest = Bad User
        guest ok = yes
        guest account = ftp
        browseable = yes
        writable = yes
        create mask = 0777
        directory mask = 0777

配置文件在 /etc/samba/smb.conf 中，其中 path 用于存放 html 文件，即原型图上传的位置。

Windows 映射网络驱动器

Linux 配置好 Samba 后，打开 Windows 资源管理器，选择映射网络驱动器（或者添加一个网络位置），输入 samba 共享的地址，如本例中 \\192.168.0.105\axure。

上传原型图到服务器

Axure 点击分享，选择 Publish Locally，选择映射好的网络驱动器，注意新建一个文件夹，点击发布会自动上传到服务器上。

搭建 Web 端

此时，已成功将原型图 html 文件上传到服务器上，只要搭建一个 web 服务器就可以访问了。如本例中采用的是 Docker + Nginx 配置：

version: '3'
services:
  web:
    image: "nginx:latest"
    volumes:
      - "$PWD/html:/usr/share/nginx/html"
      - "$PWD/conf/nginx.conf:/etc/nginx/nginx.conf"
    container_name: axure_web
    ports:
      - "12345:8080"

server {
  listen 8080;
  root /usr/share/nginx/html;

  location / {
    index index.html index.htm;
  }
}

本例中，将原型图 html 文件上传到了 /project 文件夹下，命名为 test，则此时该原型图的访问地址为 http://192.168.0.105/project/test/start.html。

前端自动获取服务器目录

但是手动修改链接总归不够好，所以想看实现一个逻辑，当产品经理把原型图放入到指定文件夹中，服务器能自动读取所添加的原型图，然后在首页展示。

这个需求我问了下前端，前端断然否决，说不可能，前端无法访问服务器的。

本来也打算写一个后台实现这个需求的，因为谷歌也没有找到结果。但是在配置 Nginx 的时候突然想到其有一个参数 autoindex on，可实现目录浏览功能。

server {
  location /project/ {
    autoindex on;
  }
}

有希望！既然是个网址，前端是否可以通过 js 获取，解析网页，获取想要的目录文件呢！

研究良久，实现如下（本人是后端……随意写的，前端大神肯定有更好的写法）：

<script>
  function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
      }
    };
    xhttp.open("GET", "/project/", true);
    xhttp.send();
  }

  function myFunction(xml) {
    // console.log(xml.responseText)
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(xml.responseText, 'text/html');
    var preList = htmlDoc.getElementsByTagName("pre")[0].getElementsByTagName("a")
    for (i = 1; i < preList.length; i++) {
      console.log(preList[i].innerHTML)
      //jqueryAdd(preList[i].innerHTML.slice(0,-1))
    }
  }
</script>

前端小白抄袭网页

实现了前端自动获取服务器指定目录后，后面的事情其实可以交给公司前端帮忙弄一下了，就是首页列表展示，没多大工作量的。

但是，折腾的我还是想要自己来弄，在此分享一下自己如何直接将别人的网页拿来用的思路。

首先，将别人的网页右键保存下来，找到想要用的地方，比如本例中想要列表，则右键检查到列表的某个子模块，复制整个 html 实现；
然后，编写 js 方法如下，实现添加子模块到列表模块中；
再者，将写好的方法放入到循环中，如本例上述注释的地方；
最后，将原先的列表下的所有子模块删除，改为调用循环方法。

<script>
  function jqueryAdd(name) {
    var child = $(`
  <div class="el-col el-col-6" style="padding-left: 20px; padding-right: 20px;">
          <div class="task-card">
            <div class="node-name node-name-my">${name}</div>
            <div class="task-card-main" style="background: url(/static/images/${name}.png); background-size: cover">
              <div class="task-card-top">
              </div>
              <p class="task-brief"></p>
              <div class="task-status">
              </div>
            </div>
            <div class="task-card-apply">
              <div class="apply-info">
              </div>
              <div class="apply-btn">
                <div class="to-edit-task can-set" onclick="window.open('/project/${name}/start.html')" ><span>查看原型</span></div>
              </div>
            </div>
          </div>
        </div>
  `)
  $("#taskListId").append(child)
  }
</script>

最终实现结果如下：

参考

Last modified on 2021-06-17