README

快速原型设计，创建一个目录，创建一些HTML、PHP和样式表，然后在浏览器中修改你的原型。

你的原型可能使用Vue（2.6）、VueRouter、vue-blocks，并且将包含一个API桥接来调用你定义的PHP对象中的函数。

示例

<!-- myprotoype/index.html -->
<template url="/">
    <div>
        <h1>My Prototype</h1>
        <p>Retrieved data:</p>
        <pre>{{serverData}}</pre>
    </div>
    <script>
        export default {
            async mounted() {
                var arg1 = 'arg1';
                var arg2 = 'some value';
                this.serverData = await api.controller.getMyData(arg1, arg2);
            }
        }
    </script>
</template>

<?php 
class controller {
    function getMyData($arg1, $arg2) {
        return [
            'you have sent us: ' . $arg1 . ' and ' . $arg2
        ];
    }
}
?>

安装

通过composer

# Add to project
composer require j-angnoe/harness
# Use inside project:
vendor/bin/harness

# Or install globally
composer global require j-angnoe/harness:@dev

# Make sure the global composer path is inside path
PATH="$PATH:~$HOME/.config/composer/vendor/bin";

安装方法2：harness.phar

# Get the harness executable
wget https://github.com/j-angnoe/toolkit/raw/master/harness/build/harness.phar

# Make it executable
chmod +x harness.phar

# Create a symlink ins\ /usr/local/bin so you can access it anywhere from the commandline
sudo ln -sf harness.phar /usr/local/bin/harness 

# Now get yourself a harness and register it as default harness.
# for instance https://github.com/j-angnoe/toolkit/tree/master/vue-default-harness
cd /path/to/my-default-harness;
harness register;

使用方法

# Spin up a webserver that will serve your directory
harness [directory]  

# Execute a controller method
harness exec [controller] [method] [...args]
harness exec [filename] [method] [...args]
harness run  # alias for exec

# Building `bundle.js` files for your tools
npm install -g parcel;      # Parcel is a nice companion for prototyping
cd my-tool;
harness build .     # one time build
harness watch .     # continious building 

# Creating a harness tool
harness init my-tool;
cd my-tool;
# start working on your tool

harness register;       # Run this inside a default harness you want to use as default.
harness settings;       # Open the harness-settings.json file in `code`

# Harnass options 
harnass [directory]
    --port        # Which port to run
    --no-browser  # Dont open a browser window
    --tool        # Specify tool directory (instead of assuming [directory] is a tool)

在现有项目中嵌入工具

有关如何嵌入的一些见解可以在docs/embedding.md中找到

要求

linux（在ubuntu上开发，在mac上测试）。
php 7.4
一个浏览器（Firefox或通过mac的open命令）或设置环境变量HARNESS_BROWSER_COMMAND
代码（启动编辑器进行harness设置）

额外需求

fd命令
parcel（npmjs.org/parcel）用于自动构建包

处理上传

当遇到对/upload的POST（multipart/form-data）请求时，harness将尝试在默认控制器上调用静态方法harnessUpload。

// Clientside:
// Create a form that posts to `/upload`
<form method="POST" enctype="multipart/form-data" action="/upload">
    <input type="file" name="file" multiple>
    <input type="submit" value="Upload">
</form>

// Server side:

/** 
 * Create a function called `harnessUpload` 
 **/
function harnessUpload($arrayOfUploadedFiles = null) { 
    foreach ($arrayOfUploadedFiles as $file) { 
        // do your moving magic: 
        // move_uploaded_file($file['tmp_name'], '/somewhere/' . $file['name']); 
    }
}
/**
 * The arrayOfUploadedFiles is an array and supports single and multiple uploads.
 * Each element of $files is an associative array with these keys:
 * - name, type, tmp_name, size, error (see PHP Uploaded Files for more info).
 * 
 * Of course you may ignore this argument and work directly with PHP's $_FILES global
 * if you so desire. 
 **/

提供和下载文件

harness将把/download/FILENAME链接到Controller::harnessDownload($filename)，并将/dist/FILENAME链接到Controller::harnessServe($filename)

这些函数必须返回一个有效的文件名以供harness提供。harness将为你做一些MIME魔术，所以你不必这样做。如果函数无法提供有效的（可读的）文件，则发送HTTP 404。

// server side:
class Controller { 
    function harnessDownload($file) { 
        if (file_exists('./my-secret-files/' . $file)) {
            return './my-secret-files/' . $file;
        }
    }
    function harnessServe($file) { 
       return $this->harnessDownload($file);
    }
}

// client side:

<a href="/download/awesome-file.txt" target="_blank">Download</a>

Awesome image: 
<img src="/dist/my-image.png">

/download和/dist几乎相同。/download还会添加一个Content-Disposition头。如果你想使download和dist提供相同的文件，请实现上述示例中的2个函数。

j-angnoe / harness

维护者

详细信息