补坑记录：新版网站后台的开发（二）

经过这么几天抽空的编写，整个山岚后台3.0的高级编辑部分已初步成型。

一、界面布局


上图中红色框住的区域是文件管理所打开的目录，点击这个区域，如果文本编辑区没收起，那么会收起文本编辑区，将目录区域完全展开。
绿色框的区域是文本编辑的文件对应的目录，点击这个区域，如果文本编辑区被收起，那么文本编辑区将展开。
上图蓝色框的区域是基本菜单区，主要包含了：
  • 文件上传
  • 新建文件夹
  • 新建文件
  • 行号与代码高亮功能的开关
  • 保存编辑区的文件
在黄色框住的区域是目录，这里包含了最基本的文件和文件夹的打开操作，与一些附加操作，如移动、复制、重命名、查看文件属性、压缩、删除等等。
紫色框住的区域是文本编辑区，最基本的文件编辑操作就在这里进行，当然上图中是开启了简单的代码高亮功能的，如果您不需要代码高亮，那么也可以在蓝色区域选择关闭。
白色区域就是文本编辑区对应的行号了，行号会随着文本编辑区滚动，当然，这个行号如果隐藏，那么行号占用的空间会还给目录显示，行号默认是半透明的。
当然上图还有一个主要的区域那就是网络通讯的进度条，这个区域位于红色蓝色绿色区域的下边线附近的位置，由于上图没有正在网络上加载内容，所以这个区域是透明的，没有显示出来。

二、功能作用

山岚后台3.0的高级编辑部分，主要用处就是文件管理，这个部分还原的旧版后台的核心功能，并进行了大量优化，方便了网站开发的高级用户对web程序的在线修改与编辑。因为这个部分获得了极高的直接读写目录权限，对于一般建站新手是用不上的，为了安全着想，这个部分被二次密码保护。
这个文件管理功能使得用户的设备只要有适合的浏览器，即使没有远程工具如FTP，也可以编辑更改网站内容，或者开发web应用软件。极大的方便了开发过程，将代码的编写、上传/更新/保存、在线调试、备份等等集为一体，省去了用户在临时设备上紧急调整程序需要配置开发环境的麻烦。
这个模块对于新手学习HTML、CSS、JavaScript、PHP等都省去了配置环境的麻烦，只要有个虚拟空间，将后台安装，使用这部分功能即可实现学习的环境，不再需要在线下学习、编辑完成再上传，避免了本地开发环境与服务器环境不一致引起的麻烦。
并且这里面的文件压缩，不需要PHP的zip库支持，在很多便宜或免费的空间中都没有PHP的zip库支持，照成无法压缩备份文件，而这个在线的开发环境的文件压缩，不依靠网上其它后台管理系统使用的zip库方案，而通过更底层办法实现，有效的防止了很多低成本空间不支持的情况。就连这里面用到的数据库，都是集成在后台中的，如果用户没有mySQL等数据库，而只有PHP环境，这个后台的数据库也一样可以照常运行，当然网站如果较大，也可以绑定mySQL等数据库使用本后台(这个功能很快会实现)。

三、部分功能的实现

这几天实现了很多的功能，并对不少操作，较之前的版本进行了优化，下面就来谈谈本次新实现的功能之一进度条。
首先这个文件管理部分终于使用了很久前就计划使用的AJAX技术，因为之前后台一直只是小幅更新，不便于新增使用这个技术。而这次后台源码、逻辑大换血，终于将这个技术应用到了后台的文件管理部分中。
使用了这项技术就有效避免了：在浏览器编辑内容提交时，服务器却不在的情况下，提交的内容丢失，同时浏览器界面因无内容奔溃。
我除了使用了onreadystatechange事件以及readyState属性，来实现提交结束后的回调操作，还使用了upload.onprogress的event来计算进度，实现进度条，并在实现后对进度计算失败的情况做了优化。
首先是传输的准备阶段：
接着是传输阶段：
这里我们大致逻辑如上，当然还有一些细节与优化，如我们这个函数的状态设置，很多地方在逻辑中省略了，没提到。
这个进度条就这样实现了，黄色:准备，蓝色:传输中，红色:异常，绿色:完成，透明:无传输。
经过测试，整个进度条在大文件上传中，可以很明显看到进度条的走动，但在较小的文件改动时，由于很快上传完成，可能仅仅看到颜色改变了几下，传输就结束了。当然，如果服务器出现了问题，也不会再出现以前的浏览器编辑内容丢失等情况，红色的进度条异常会很显眼的提醒开发者。当然，通过PHP上传的文件是有大小限制的，如果出现上传文件过大的情况，可能被服务器拒绝，这个问题可以通过修改PHP配置文件解决，虽然一般也不可能往服务器传那么大的文件。

这个高级功能部分还实现了许多功能，比如之前提到的可以无压缩环境支持的压缩，以及查看属性，还有为文件设置别名，用于即将实现的只读分享等等，这里由于时间有限，就不多具体说了，以后如果有时间，可以详细谈谈。

本文讲到AJAX上传时的一些逻辑，和新版山岚后台开发中的一些情况，如有疑问欢迎加入 Q群 564998567 与我们交流，如有错误恳请在反馈平台www.snang.cc/bgst/3/指出。