nps/web/views/index/add.html

<div class="row tile">
    <div class="col-md-12 col-md-auto">
        <div class="ibox float-e-margins">
            <h3 class="ibox-title">add</h3>
            <div class="ibox-content">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" langtag="info-mode">类型 </label>
                        <div class="col-sm-10">
                            <select class="form-control" name="type" id="type">
                                <option {{if eq "tcp" .type}}selected{{end}} value="tcp">tcp</option>
                                <option {{if eq "udp" .type}}selected{{end}} value="udp">udp</option>
                                <option {{if eq "socks5" .type}}selected{{end}} value="socks5">socks5
                                </option>
                                <option {{if eq "httpProxy" .type}}selected{{end}} value="httpProxy">http</option>
                                <option {{if eq "secret" .type}}selected{{end}} value="secret">secret</option>
                                <option {{if eq "p2p" .type}}selected{{end}} value="p2p">p2p</option>
                            {{/*<option {{if eq "file" .type}}selected{{end}} value="file">file*/}}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" langtag="info-remark">备注</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="remark"
                                   placeholder="empty means to be unrestricted">
                        </div>
                    </div>
                {{if eq true .allow_multi_ip}}
                    <div class="form-group" id="server_ip">
                        <label class="col-sm-2 control-label" langtag="info-server-ip">服务端ip</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" value="0.0.0.0" name="server_ip"
                                   placeholder="such as 0.0.0.0">
                        </div>
                    </div>
                {{end}}
                    <div class="form-group" id="port">
                        <label class="col-sm-2 control-label" langtag="info-server-port">服务端端口</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="port" placeholder="such as 8024">
                        </div>
                    </div>

                {{if eq true .allow_local_proxy}}
                    <div class="form-group" id="local_proxy">
                        <label class="control-label col-sm-2" langtag="info-local-proxy">是否代理为服务端本地</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="local_proxy">
                                <option value="0">no</option>
                                <option value="1">yes</option>
                            </select>
                        </div>
                    </div>
                {{end}}

                    <div class="form-group" id="target">
                        <label class="col-sm-2 control-label" langtag="info-target">目标(ip:端口)</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" name="target" rows="4" placeholder="10.1.50.203:22
10.1.50.202:22"></textarea>
                            <span class="help-block m-b-none">can only fill in ports if it is local machine proxy, only tcp supports load balancing

</span>
                        </div>
                    </div>

                    <div class="form-group" id="client_id">
                        <label class="col-sm-2 control-label" langtag="info-client-id">客户端id</label>
                        <div class="col-sm-10">
                            <input value="{{.client_id}}" class="form-control" type="text" name="client_id"
                                   placeholder="id of client">
                        </div>
                    </div>

                    <div class="form-group" id="local_path">
                        <label class="col-sm-2 control-label" langtag="info-local-path">本地路径</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="local_path"
                                   placeholder="such as /tmp">
                        </div>
                    </div>

                    <div class="form-group" id="strip_pre">
                        <label class="col-sm-2 control-label" langtag="info-strip-pre">访问前缀</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="strip_pre"
                                   placeholder="such as static">
                        </div>
                    </div>

                    <div class="form-group" id="password">
                        <label class="col-sm-2 control-label" langtag="info-unique-vkey">唯一验证密钥</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="password"
                                   placeholder="unique identification key">
                            <span class="help-block m-b-none">when p2p or secret</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-2">
                            &nbsp;<button class="btn btn-success" href="#" id="add"><i
                                class="fa fa-fw fa-lg fa-eye"></i>新增
                        </button>
                        </div>
                    </div>

                </form>
            </div>
            &nbsp;
        </div>
    </div>
</div>
<script>
    var arr = []
    arr["all"] = ["type", "port", "compress", "u", "p", "target", "password", "strip_pre", "local_path", "local_proxy"]
    arr["tcp"] = ["type", "port", "target", "compress", "u", "p", "local_proxy", "tcp隧道模式，提供一条tcp隧道，适用于ssh、远程桌面等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的目标端口"]
    arr["udp"] = ["type", "port", "target", "compress", "local_proxy", "udp隧道模式，提供一条udp隧道，适用于dns、内网dns访问等，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，访问公网服务器的设定端口，则相当于访问内网目标地址的udp目标端口"]
    arr["socks5"] = ["type", "port", "compress", "u", "p", "socks5代理模式，内网socks5代理，配合proxifer，可如同使用vpn一样访问内网设备或资源，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置socks5代理，即访问内网设备或者资源 "]
    arr["httpProxy"] = ["type", "port", "compress", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
    arr["secret"] = ["type", "target", "compress", "password", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
    arr["p2p"] = ["type", "target", "compress", "password", "u", "p", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
    arr["file"] = ["type", "strip_pre", "local_path", "port", " http代理模式，内网http代理，可访问内网网站，添加后会自动生成一个客户端验证key<br>在内网机器执行<span style='color: red'>./easyProxy -vkey=生成的key -server=公网服务器ip:下面设定的端口</span><br>建立成功后，在外网环境下本机配置http代理，即访问内网站点"]
    arrClientHide = ["compress", "u", "p", "crypt", "mux"]

    function resetForm() {
        for (var i = 0; i < arr["all"].length; i++) {
            $("#" + arr["all"][i]).css("display", "none")
        }
        o = $("#type option:selected").val()
        for (var i = 0; i < arr[o].length - 1; i++) {
            $("#" + arr[o][i]).css("display", "block")
        }
        $("#info").html(arr[o][arr[o].length - 1])
    }

    function resetClientCnf() {
        for (var i = 0; i < arrClientHide.length; i++) {
            $("#" + arrClientHide[i]).css("display", "block")
        }
        op = $("#use_client  option:selected").val()
        if (op == 1) {
            for (var i = 0; i < arrClientHide.length; i++) {
                $("#" + arrClientHide[i]).css("display", "none")
            }
        }
    }

    $(function () {
        resetForm()
        resetClientCnf()
        $("#type").on("change", function () {
            resetForm()
            resetClientCnf()
        })
        $("#use_client").on("change", function () {
            resetForm()
            resetClientCnf()
        })
        $("#add").on("click", function () {
            $.ajax({
                type: "POST",
                url: "{{.web_base_url}}/index/add",
                data: $("form").serializeArray(),
                success: function (res) {
                    alert(res.msg)
                    if (res.status) {
                        history.back(-1)
                    }
                }
            })
        })
    })
</script>