查看模板目錄
fs.readdirSync("路徑")
訪問/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' οnclick='next(this)' >${data.content[i]}</p>`;
}else{
document.body.innerHTML += `<p data-dirtype='2' οnclick='next(this)' >${data.content[i]}</p>`;
}
}
document.body.innerHTML += `<span οnclick='back()'>返回</span>`;
}else{//打開模板
document.body.innerHTML = `
<span οnclick='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>
promise實際運用 優化sql代碼
router.get('/promise',(req,res)=>{
// 1.查詢數據 不關聯 可以用這方法
/*
'select * from article order by id desc limit 0,2'
'select * from comment where articleid'
*/
let fn = function(mysql){
return new Promise(function(resolve,reject){
sql(mysql,(err,data)=>{
resolve(data);
})
})
}
arr = [
fn('select * from article order by id desc limit 0,2'),
fn('select * from comment where articleid')
]
// 2.如果有依賴關係 ,先把沒依賴的取出, 再執行依賴的
Promise.all(arr).then(function(data){
// 數據格式
/*
data = [
[第一條數據結果],
[第二條數據結果]
]
*/
console.log(data);
})
})