Down52PojieCn 项目前端配置详解-优快云博客

Down52PojieCn 项目前端配置详解

down_52pojie_cn A single page file explorer that can be hosted on static website. 吾爱破解论坛爱盘 https://down.52pojie.cn/ 页面的源代码项目地址: https://gitcode.com/gh_mirrors/do/down_52pojie_cn

Down52PojieCn 是一个基于 Vue.js 构建的前端插件项目，它提供了便捷的配置方式来实现文件列表展示功能。本文将详细介绍该项目的配置选项和使用方法。

基础使用方法

要使用 Down52PojieCn 插件，只需在 HTML 文件中添加以下代码：

<div id="app"></div>
<script>
    window.down52PojieCn = new Down52PojieCn();
</script>

这段代码会在页面中创建一个 Vue 应用实例，并使用默认配置加载插件功能。

配置选项详解

默认配置解析

上述基础用法等同于以下完整配置：

window.down52PojieCn = new Down52PojieCn({
    vueElement: '#app',       // Vue 挂载点
    routerMode: 'hash',       // 路由模式
    baseUrl: 'https://down.52pojie.cn',  // 基础URL
    requestType: 'json',      // 请求类型
    jsonUrl: '/list.json',    // JSON数据路径
    cacheTime: 0              // 缓存时间
});

各配置项说明

vueElement：指定 Vue 实例挂载的 DOM 元素，默认为 '#app'
routerMode：路由模式，可选 'hash' 或 'history'
baseUrl：网站基础URL，用于构建完整请求路径
requestType：数据请求方式，支持 'json' 和 'jsonp'
jsonUrl/jsonpUrl：对应请求类型的数据文件路径
cacheTime：缓存时间设置（单位：秒）

高级配置方案

JSONP 请求配置

当需要跨域请求数据时，可以使用 JSONP 方式：

window.down52PojieCn = new Down52PojieCn({
    requestType: 'jsonp'
});

这等价于：

window.down52PojieCn = new Down52PojieCn({
    requestType: 'jsonp',
    jsonpUrl: '/list.js',
    jsonpCallback: '__jsonpCallbackDown52PojieCn'
});

路由模式选择

项目支持两种路由模式：

hash 模式：默认模式，URL 中带有 # 符号
history 模式：需要服务器支持，适合已启用 ngx-fancyindex 的网站

切换路由模式示例：

window.down52PojieCn = new Down52PojieCn({
    routerMode: 'history'
});

重要注意事项

文件路径规范：由于单页应用的特殊性，所有文件路径必须从网站根目录开始写：
- 正确写法：/list.json
- 错误写法：list.json 或 ./list.json
缓存机制：
- 当 cacheTime 设为非 0 值时，会启用缓存
- 请求时会自动添加时间戳参数（如 t=153xxxxxxx）
- 时间戳数值为向 cacheTime 取整后的结果
服务器配置：
- 使用 history 模式需要确保服务器已正确配置
- 对于 Nginx 服务器，需要添加相应的重写规则