Caddy服务器搭建和实现文件共享

  1:Caddy介绍

  作为新兴 Web 服务器,Caddy
提供了广大概括易用的功效而从未历史的负担,其默认协助并且能帮你活动配置
HTTP/2、HTTPS,对于 IPV6、WebSockets 都有很好的支撑。基于 Go 编写的
Caddy
天生对于多核拥有很好的扶助,并且其充裕的插件系统提供了文本管理、文件上传、基于
马克Down 的博客系统等等开箱即用的扩充效能。

  使用 Caddy
服务器软件,轻松将自己的微处理器成为服务器,搭建一个属于自己的“网站”,从而将文件夹以网页的样式共享出去,让局域网甚至互联网上的任何电脑、手机、平板设备均能通过浏览器轻松访问和下载它们…

  caddy的设置,就是从caddy的官网下载:
https://caddyserver.com/download。

投机从未有过采用另外表格插件,参考网上例子,自己编辑出来的django网页实例,请各位参考!

2:Caddy安装

  遵照需要设置自己的插件,此处安装filemanager,下载完成后,解压到任意目录下,如下图所示:

                图片 1   

  

率先看图做事,表格布局选用bootstrap,俗话说bootstrap橹多了就会css了,呵呵,下边看图:

3:Caddy实现文件共享

  • 新建目录

    进去到此文件夹内,在此根目录新建一个“index.html”
(首页) 文件,用记事本编辑,输入任何内容如 “Hello Caddy!” 并保存。

         图片 2

  • 双击启动Caddy,访问网页(Caddy默认端口号2015)

    图片 3

               图片 4

               图片 5

  注意 1:因为 index.html 文件是网页的首页,Caddy
会自动识别,倘使文件名改成 “another.html”,就必须输入
“localhost:2015/another.html” 才能看到了。

  注意 2:即便以后要使用 “filemanager 文件管理器”
等模块,那么在下载的时候必须要手动勾选对应的模块,默认只勾选了着力模块。

图片 6

– Caddy默认执行index.html

    第一次执行./caddy,实际上就开动了一个静态文件Server。但这么些server不默认帮忙你navigate directory。假若您领会website
root目录(假诺没有点名root,则caddy执行的当

  前路径会作为website的root路径)下的文本名,比如foo.txt,你可以在浏览器 中输入:localhost:2015/foo.txt,caddy会执行科学的劳动,浏览器也会显得foo.txt的全文。

  对于静态文件Server,caddy协理在website的root路径下率先查找是否有如下五个公文:

  //caddy/middleware/browse/browse.go
  var IndexPages = []string{
      “index.html”,
      “index.htm”,
      “default.html”,
      ”default.htm”,
  }

  倘使查到有中间一个,则先行再次回到那多少个文件内容,这就是静态站点的首页。

  要是要协理目录文件列表浏览,则需要为website配置browse
middleware,这样对于无index
file的目录,大家可以看看目录文件列表。

  localhost:2015 {
      browse
  }        

                图片 7

地点有六个按钮,是动态增长进去的,可以利用jquery语言,$(“#xx”).append新添一个按钮,

– 新建并修改Caddyfile

     
 图片 8

 

  •  新建file文件夹,创立测试文件

     
   图片 9

  注意:假诺需要通过互联网访问,那么这里的 IP 就要修改成你的公网 IP
或者动态域名了。我这边依然以局域网为例子,对应的网址是 192.168.1.33。

  • ### 文件上传下载测试

   网页输入192.168.1.33:8888/file,如下图所示

         图片 10

    默认用户名和密码都是admin,登录进去如下图所示:

                   图片 11

    点击左侧栏可以上传目录和文件

                   图片 12

                   图片 13  

    如上图所示,创立成功。

    同时,同一个局域网内的手机也可以访问并且开展文件的上传和下载。

                  图片 14

    

 

 

 

 

 

 

 

 

 

 

最基本的表单代码:

<button class="btn btn-small btn-primary" type="button" id="blank">添加空白表单</button>
<form class="form-inline">
       {% csrf_token %}
        <table class="table table-conde" id="t2">
            <caption class="text-left"></caption>
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <table class="table table-conde" id="t3">
            <caption class="text-left"></caption>
            <thead></thead>
            <tbody></tbody>
            <tfoot></tfoot>
        </table>
        <div class="text-center" id="form_add"></div>
 </form>

接下去使用js动态加载表格:

$('#blank').click(function(){//空白表单
            $("#t1 caption").append("<i class='icon-forward'></i> 合同基础清单");
            $("#t1 tbody").append(formbill());
            $("#t2 caption").append("<i class='icon-forward'></i> 附件1 合同手机清单 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t2row'><i class='icon-plus'></i> 添加一行</a>");
            $("#t2 thead").append("<th>客户姓名</th><th>合同号</th><th>业务号码</th><th>套餐类型</th><th>经办人</th><th>备注</th><th>操作</th>");
            $("#t3 caption").append("<i class='icon-forward'></i> 附件2 合同座机清单 &nbsp;&nbsp;&nbsp;&nbsp;<a class='btn btn-small' id='t3row'><i class='icon-plus'></i> 添加一行</a>");
            $("#t3 thead").append("<th>客户姓名</th><th>合同号</th><th>业务号码</th><th>套餐类型</th><th>经办人</th><th>备注</th><th>操作</th>");
            $("#form_add").append("<input type='button' id='btn_add' value='提交数据' class='btn btn-primary btn-sm'/>");
      });    

下一场实现行添加和行删除的效能:

//行添加
$('#t2 caption').on("click","#t2row",function(){
               var len = $("#t2 tr").length+1; 
              $("#t2 tbody").append("<tr id="+len+">"
                                   +"<td><input type='text' class='input-medium acct_code' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium acc_nbr' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium tc_type' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium con_agent' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                   +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                   +"<td><a class='btn btn-small' onclick='deltr("+len+")'>删除</a></td>"
                                   +"</tr>"
                                   );
      });
      $('#t3 caption').on("click","#t3row",function(){
            var len = $("#t3 tr").length+1; 
              $("#t3 tbody").append("<tr id="+len+">"
                                  +"<td><input type='text' class='input-medium acct_name' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium acct_code' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium acc_nbr' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium tc_type' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium con_agent' placeholder='.input-medium'></td>"
                                  +"<td><input type='text' class='input-medium remark' placeholder='.input-medium'></td>"
                                  +"<td><a class='btn btn-small' onclick='deltr("+len+")'>删除</a></td>"
                                  +"</tr>"
                                  );
      });
//行删除
   function deltr(index) {
     $("tr[id='"+index+"']").remove();//删除当前行
    }

 

 那里要注意三个问题:

首先,像id=t2row/t3rowde
按钮是动态添加上的,倘使拔取普通的$(‘#xxx’).click是没用的,必须使用$(‘#t2
caption’).on(“click”,”#t2row”,function(){})这种格式

第二,删除按钮的id必须跟tr中的id绝对应

 

兑现行添加和行删除的法力后,该考虑什么将多字段的表单传递到django的后端中去,代码如下:

          var str_tailsj = "[";
          $("#t2 tbody").find("tr").each(function(){
                var tdArr1 = $(this).children();
                str_tailsj = str_tailsj+"{'product_name':'手机',";
                str_tailsj = str_tailsj+"'acct_name':'"+ tdArr1.eq(0).find("input").val()+"',";
                str_tailsj = str_tailsj+"'acct_code':'"+ tdArr1.eq(1).find("input").val()+"',";
                str_tailsj = str_tailsj+"'acc_nbr':'"+ tdArr1.eq(2).find("input").val()+"',";
                str_tailsj = str_tailsj+"'tc_type':'"+ tdArr1.eq(3).find("input").val()+"',";
                str_tailsj = str_tailsj+"'con_agent':'"+ tdArr1.eq(4).find("input").val()+"',";
                str_tailsj = str_tailsj+"'remark':'"+ tdArr1.eq(5).find("input").val()+"'},";
          });
          str_tailsj = str_tailsj + "]";

将多字段表单,用json字符串的花样传递到后端,然后在后端利用python中的eval转换成相应的款式展开拍卖,具体代码参照下:

参照网址:http://www.cnblogs.com/CQ-LQJ/p/5442785.html

a="[{'bill1':'1','bill41':'2'},{'bill1':'1','bill41':'2'},]"
print eval(a)[0]['bill1']
输出为1