访问/admin/views
admin.js
outer.get('/views',(req,res) => { let dir = fs.readdirSync(`${process.cwd()}/views`); res.render('view.ejs',{dir:dir}) }); router.post("/views",(req,res)=>{ let dirname = req.body.dirname, dirtype = req.body.dirtype, content = req.body.content; // 单个文件 if(dirtype === '1'){ fs.readFile(`${process.cwd()}/views/${dirname}`,'utf-8',(err,data)=>{ res.json({ content:data, dirname: dirname }); }) return; } // 文件夹 if(dirtype === '2'){ fs.readdir(`${process.cwd()}/views/${dirname}`,(err,data)=>{ res.json({ dirtype: '2', dirname: dirname, content:data }) }) return; } // 模块修改 if(dirtype === '3'){ fs.writeFile(`${process.cwd()}/views/${dirname}`,content,(err,data)=>{ res.json({ result:"修改成功" }) }) } })view.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- includes是否含有 --> <% for(var i in dir){ %> <% if(dir[i].includes('.')){ %> <!-- data-dirtype: 1=>单个文件 2=>文件夹 --> <p data-dirtype='1' onclick='next(this)' ><%= dir[i] %></p> <% }else{ %> <p data-dirtype='2' onclick='next(this)' ><%= dir[i] %></p> <% } %> <% } %> <script src='/js/jquery.js'></script> <script> let dirname, dirtype; function next(_this){ // console.log(_this.getAttribute('data-dirname'));// if(_this.getAttribute('data-dirname') === null){ //如果是文件夹的文件 dirname = _this.innerText; }else{ dirname = `${_this.getAttribute('data-dirname')}/${_this.innerText}`; //设置路径 eg:admin/err.ejs }; dirtype = _this.getAttribute('data-dirtype'); $.ajax({ url:'/admin/views', type:'post', data:{ dirname:dirname, dirtype:dirtype }, success(data){ // console.log(data); // 如果返回是文件夹 打开文件夹 if(data.dirtype === '2'){ document.body.innerHTML = ''; // console.log(data.content); for(let i in data['content']){ // 下一级目录 if(data.content[i].includes('.')){ // 保存data-dirname : 文件夹目录名 document.body.innerHTML += `<p data-dirname='${data.dirname}' data-dirtype='1' onclick='next(this)' >${data.content[i]}</p>`; }else{ document.body.innerHTML += `<p data-dirtype='2' onclick='next(this)' >${data.content[i]}</p>`; } } document.body.innerHTML += `<span onclick='back()'>返回</span>`; }else{//打开模板 document.body.innerHTML = ` <span onclick='back()'>返回</span> <textarea cols= '80' rows='20'>${data['content']}</textarea> <button onclick='change()' >修改</button> ` } } }) } function back(){ document.body.innerHTML = ''; // 未解决 : 返回上级目录 dirname错乱 /*var str = ''; var a = _this.getAttribute('data-dirname'); if(a.includes('/')){ str = a.substring(0,(a.indexOf('/'))); console.log(a); console.log(str); }*/ $.ajax({ url:'/admin/views', type:'post', data:{ dirname: '', dirtype: '2' }, success(data){ for(let i in data['content']){ // 下一级目录 if(data.content[i].includes('.')){ document.body.innerHTML += `<p data-dirtype='1' onclick='next(this)' >${data.content[i]}</p>`; }else{ document.body.innerHTML += `<p data-dirtype='2' onclick='next(this)' >${data.content[i]}</p>`; } } } }) } function change(){ console.log($('textarea').val()); $.ajax({ url:'/admin/views', type:"post", data:{ dirname:dirname, dirtype:'3', content: $('textarea').val() }, success(data){ alert(data.result); } }) } </script> </body> </html>