django与vue的组合展示所有html文件
- 前言
- listdir、isdir函数使用
- listdir
- isdir
- 提取html文件的路径和html文件名的名字
- django的视图函数
- vue2的处理
- axios发送get请求
- 绑定src属性
- 效果
- 结束
前言
大家好，我是yma16，
listdir、isdir函数使用
在Python中，os模块中的listdir和isdir函数用于操作文件和目录。
listdir函数返回指定路径下的所有文件和目录的列表。
示例代码：
import os
path = '/path/to/directory'
dir_list = os.listdir(path)
print(dir_list)isdir函数判断指定路径是否为一个目录。
示例代码：
import os
path = '/path/to/directory'
is_dir = os.path.isdir(path)
if is_dir:
print(path, 'is a directory')
else:
print(path, 'is not a directory')listdir
返回目录下一级文件夹或则文件的数组对象
isdir
判断是否为目录，否则为文件，返回true或false
提取html文件的路径和html文件名的名字
思路：遍历目录下的所有路径，遇到目录递归返回函数继续执行，否者判断为文件，当获得文件时，需要判断其后缀是否为html，所以使用到endswith函数
# 读取路径 传入三个参数 分别 路径、路径保存变量、文件名保存变量
def traverse(f,temp,title):
try:
fs = os.listdir(f)
for f1 in fs:
tmp_path = os.path.join(f, f1)
if not os.path.isdir(tmp_path):
print('文件名: %s' % f1)
print('文件: %s' % tmp_path)
s=str(f1)
if s.endswith('html'):#
#路径处理
s_path=str(tmp_path)
print('原始',s_path)
s_get=s_path.replace('\\','/')
print('替换\\',s_path,s_get)
s_get=s_get[1:]
print('切片',s_get)
temp.append(s_get)
#标题处理
#切片
t=s[:len(s)-5]
print(t)
title.append(t)
else:
print('文件夹：%s' % tmp_path)
traverse(tmp_path,temp,title)
# 递归
except Exception as e:
print(e)
finally:
return tempdjango的视图函数
返回json数据类型
from django.http import JsonResponse#json
import os
def html_path(request):
path_data=[]# 路径
title_data = [] # 标题
path = './static/Csslearn'
p_data=traverse(path,path_data,title_data)#路径、标题处理
data={
'code':1,'path':p_data,'title':title_data
}
return JsonResponse(data)
# 读取路径
def traverse(f,temp,title):
try:
fs = os.listdir(f)
for f1 in fs:
tmp_path = os.path.join(f, f1)
if not os.path.isdir(tmp_path):
print('文件名: %s' % f1)
print('文件: %s' % tmp_path)
s=str(f1)
if s.endswith('html'):#
#路径处理
s_path=str(tmp_path)
print('原始',s_path)
s_get=s_path.replace('\\','/')
print('替换\\',s_path,s_get)
s_get=s_get[1:]
print('切片',s_get)
temp.append(s_get)
#标题处理
#切片
t=s[:len(s)-5]
print(t)
title.append(t)
else:
print('文件夹：%s' % tmp_path)
traverse(tmp_path,temp,title)
# 递归
except Exception as e:
print(e)
finally:
return tempvue2的处理
axios发送get请求
axios发送请求给django，得到关于html的json数据格式
data() {
return {
msg: "css练习：",
css_length: "",
baseurl: "http://127.0.0.1:1998",
css_title: [],
css_path: [],
ifreame_content: "",
look_i:'浏览：',
now_title:'',
};
},
methods: {
get_ifreame: function (index) {
let that = this; //that
that.ifreame_content = that.css_path[index];//路径
that.now_title=index+1+'. '+that.css_title[index];//标题
},
getCss: function () {
let that = this;
axios
.get(that.baseurl + "/css/")
.then((res) => {
console.log("get返回", res);
let getdata = res.data;
let css_path = getdata.path;
let css_title = getdata.title;
console.log(css_path, css_title);
// 路径处理
css_path.map((o) => {
let temp = that.baseurl + o;
that.css_path.push(temp);
});
// 标题传递
that.css_title = css_title;
console.log(that.css_path, that.css_title);
// 传递第一个路html路径
that.ifreame_content = that.css_path[0];
// 传递长度
that.css_length = css_title.length;
that.now_title=css_title.length>0? 1+'. '+css_title[0]:'';//标题加序号
})
.catch((error) => {
console.log("get错误！", error);
});
},
},绑定src属性
ifreame 绑定src参数即可
<!-- 绑定src参数 -->
<iframe v-bind:src="ifreame_content"></iframe>效果
结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！
