前言
專案上線之後,如果是後端報錯,只能重新編譯打包部署然後重啟;如果僅僅是前端頁面、樣式、指令碼修改,只需要替換到就可以了。
小公司的話可能比較自由,可以隨意替換,但是有些公司許可權設定的比較嚴格,需要提交申請交給運維去處理。
如果僅僅是一個前端問題,又很緊急,這時候提申請走流程勢必會影響到使用者的正常使用。
今天,擼主給大家推薦一款前端程式碼檔案編輯器來解決以上問題。
案例
定義實體,用於前端檔案樹展示:
@Data
public class SysFile {
private Integer fileId;
private String name;
private Integer parentId;
private String parentPath;
}
由於專案採用的是SpringBoot
框架,打成了war
包部署,後端採用以下方式獲取檔案列表:
/**
* 列表
* @return
*/
@RequestMapping(value = "list", method = RequestMethod.POST)
public Result list() throws FileNotFoundException {
String filePath = ResourceUtils.getURL("classpath:").getPath();
List<SysFile> fileList = new ArrayList<>();
getAllFilePaths(filePath,fileList,0,"");
return Result.ok(fileList);
}
遞迴獲取某目錄下的所有子目錄以及子檔案:
/**
* 遞迴獲取某目錄下的所有子目錄以及子檔案
* @param filePath
* @param filePathList
* @return
*/
private static List<SysFile> getAllFilePaths(String filePath, List<SysFile> filePathList,
Integer level,String parentPath) {
File[] files = new File(filePath).listFiles();
if (files == null) {
return filePathList;
}
for (File file : files) {
int num = filePathList.size()+1;
SysFile sysFile = new SysFile();
sysFile.setName(file.getName());
sysFile.setFileId(num);
sysFile.setParentId(level);
if (file.isDirectory()) {
if(level==0){
if(file.getName().equals("templates")||
file.getName().equals("static")){
filePathList.add(sysFile);
parentPath = SystemConstant.SF_FILE_SEPARATOR+file.getName();
getAllFilePaths(file.getAbsolutePath(), filePathList,num,parentPath);
num++;
}
}else{
filePathList.add(sysFile);
String subParentPath = parentPath+SystemConstant.SF_FILE_SEPARATOR+file.getName();
getAllFilePaths(file.getAbsolutePath(), filePathList,num,subParentPath);
num++;
}
} else {
if(level!=0){
sysFile.setParentPath(parentPath+SystemConstant.SF_FILE_SEPARATOR+file.getName());
filePathList.add(sysFile);
num++;
}
}
}
return filePathList;
}
獲取檔案內容:
/**
* 獲取內容
* @return
*/
@RequestMapping(value = "getContent", method = RequestMethod.POST)
public Result getContent(String filePath) throws FileNotFoundException {
String path = ResourceUtils.getURL("classpath:").getPath();
String content = FileUtil.readUtf8String(path+filePath);
return Result.ok(content);
}
修改儲存:
/**
* 儲存內容
* @return
*/
@RequestMapping(value = "save", method = RequestMethod.POST)
public Result save(String filePath, String content) throws FileNotFoundException {
String path = ResourceUtils.getURL("classpath:").getPath();
/**
* 生產環境自行解除
*/
if(active.equals("prod")){
return Result.error("演示環境禁止插插插!!!");
}else{
File file = new File(path+filePath);
long lastModified = file.lastModified();
FileUtil.writeUtf8String(content,path+filePath);
file.setLastModified(lastModified);
return Result.ok();
}
}
當然了,如果程式碼修改比較多,也可以對檔案進行上傳覆蓋操作。
截圖
小結
如果身邊恰好沒有工具連線遠端服務,亦或是自己沒有伺服器的許可權,這款線上修改器,擼主覺得還是很方便的。但一定要控制好許可權,防止普通人員亂修改,還有一定要做好安全日誌記錄。