如何實現訪問apache時的目錄瀏覽功能（apache file list view）

阿新 • • 發佈：2019-01-16

我用apache做了一個檔案分享功能的站點(如下圖），可以實現了http模式的檔案檢視和下載。有的朋友看到了奇怪問這是怎麼做到的，這其實只是一些appche伺服器的基本功能，搞前端的coder也要了解一下伺服器才好；下面來說具體的操作：
很簡單
這裡寫圖片描述

1.實現原理
通過apache的一個模組：mod_autoindex 這個模組的主要功能是自動對目錄中的內容生成列表，這樣當我們對伺服器地址進行訪問時在瀏覽器端可以看到訪問目錄下檔案列表，點選它瀏覽器能開啟的則開啟檢視，不能開啟的則彈出是否儲存的對話方塊，當然也可以右鍵連結另存為，這樣就實現了訪問下載檔案的功能，對於mod_autoindex更多知識可以檢視金步國apache手冊翻譯
(

http://www.jinbuguo.com/apache/menu22/mod/mod_autoindex.html)

如果需要可以點選下載apache中文手冊
(http://download.csdn.net/detail/chen_gong1992/9700259)
2.配置httpd.conf檔案
apache 的目錄索引樣式用的mod_autoindex模組一般預設為開啟狀態
找到httpd.conf檔案，查詢下面的內容如果有#號註釋則去掉，沒有這句話就補上去。這樣就開啟了mod_autoindex
LoadModule autoindex_module modules/mod_autoindex.so
另外檢查一下訪問許可權，如果發現下面有deny from all 請註釋掉改成allow from all。
這裡寫圖片描述

3.設定請求目錄
當從伺服器請求一個目錄的時候，可能來自：
    mod_dir的DirectoryIndex指定首頁
    mod_autoindex目錄
    如果你想直接訪問mod_autoindex目錄列表，那就刪除伺服器目錄下的mod_dir的DirectoryIndex指定首頁，或者在配置檔案httpd.conf中修改。我在我的伺服器目錄C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs下放了一些檔案，接下來在瀏覽器視窗輸入http://127.0.0.1或者localhost進行本地訪問下看看效果
這裡寫圖片描述

是不是感覺真醜和上面圖片顯示差別太大了，別急接下來我們對目錄顯示進行優化。

4.優化顯示
將下面的程式碼加到httpd.conf檔案中

    Options Indexes FollowSymLinks
    IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble HTMLTable
    IndexOptions Charset=utf-8 IconHeight=16 IconWidth=16 SuppressRules
    IndexIgnore web header.html footer.html actions defects
    HeaderName /web/header.html
    ReadmeName /web/footer.html
    Include conf/extra/httpd-autoindex.conf
    IndexOrderDefault Ascending Date
    ServerSignature Off

下面對上面的配置程式碼進行解讀:

Indexes 索引預設是開啟索引瀏覽如果不想開啟前面加個- ，-Indexes就是禁止目錄瀏覽

IndexOptions FancyIndexing 開啟富樣式索引，
這裡說一下：IndexOptions指令的FancyIndexing選項可以讓列表頭部增加可以產生按Name,Lastmodified,Size,Description排序產生的目錄列，跟在後面的命令這個主要是美化樣式顯示。

FoldersFirst 顧名思義資料夾優先，這裡指讓目錄中的資料夾排在前面

NameWidth和DescriptionWidth是檔名和描述文字的長度，這裡*表示長度自適應，當然預設的情況下是沒有描述的，需要使用AddDescription指令新增描述SuppressHTMLPreamble 是去掉APACHE自動生成一些HTML程式碼例如 Index/of

ofHTMLTable 是啟用HTML表格樣式，以表格的方式展示列表
Charset=utf-8設定字符集建議用utf-8 用GB2312會亂碼
IconHeight和IconWidth 設定圖示的大小
SuppressRules 在FancyIndexing開啟的情況下取消hr下劃線
IgnoreCase：排序不區分大小寫
IndexIgnore 設定哪些型別的檔案不顯示出來如
IndexIgnore README .htaccess *.bak *~
HeaderName /web/header.html 這個是標頭檔案注意是絕對路徑
ReadmeName /web/footer.html 這個結尾的檔案
appache如果發現了這些檔案，就在檔案列表之前首先顯示這些檔案的內容，可以看出，其實個性化的原理就是把Apache的目錄列表嵌在了header.htm與footer.html中間的表格中，兩個檔案的其他部分都可以自定義內容的。

Include conf/extra/httpd-autoindex.conf
載入apache目錄下的extra/httpd-autoindex.conf檔案為檔案新增小圖示，httpd-autoindex.conf檔案裡有關於小圖示的設定，這裡就不展開了。
這裡寫圖片描述
IndexOrderDefault Ascending Date 預設按檔案的建立時間排序；
ServerSignature Off 防止伺服器的資訊洩露這個不用管，off掉就行
header.html：

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mr.CG的站點</title>
<style type="text/css">

p{
    font-family: "微軟雅黑";
    color: #0080FF;
    font-weight: bolder;
    font-size:36px;
    text-align: center;
}
h3{
    width: 79%;
    margin: 0 auto;
    text-align: right;
    color: #757575;
}
table {
    width:80%;
    border-collapse:collapse;
    border:1px #858585 solid;
    margin:0 auto
}
table td { 
    line-height:17px;
    font-size:15px;
    text-align:left;
    border:1px #858585 solid;
}
table td:nth-child(1){ 
    width:20px;
    text-align:right;
}
table tr:nth-child(odd){ 
    background:#f0f0f0;
}
table tr:hover{
    background:#ACD6FF;
    color:#990000;
}
table th {
    background:#999999;
    line-height:17px;
}
table th  a:link {
    text-decoration: none; 
    color:#FFFFFF;
}
table th  a:visited {
    color:#FFFFFF;
}
table th  a:hover {
    color:#FFFF00;
}
-->
</style>
</head>
<p>訪問成功，請下載檔案！</p>
<body>

footer.html：

<h3> Power by Mr.CG<h3>
</body>
</html>

配置完成後我們再次測試一下，效果如下

這裡寫圖片描述

如何實現訪問apache時的目錄瀏覽功能（apache file list view）

如何實現訪問apache時的目錄瀏覽功能（apache file list view）

關於Apache的目錄瀏覽功能

問題7：如何實現用戶的歷史記錄功能（最多n條）

啟用apache目錄瀏覽功能二（賬號驗證、IP網段限制）

啟動Nginx目錄瀏覽功能及讓使用者通過使用者名稱密碼認證訪問web站點

nginx,apache開啟檔案目錄瀏覽功能

給文件右擊菜單增加7-ZIP瀏覽功能（用註冊表設置Shell調用預覽命令）

打開關閉tomcat的目錄瀏覽功能

Struts2+Spring+Hibernate實現員工管理增刪改查功能（一）之ssh框架整合

日常學習隨筆-用鏈表的形式實現普通二叉樹的新增、查找、遍歷（前、中、後序）等基礎功能（側重源碼+說明）

Apache配置站點詳細講解（apache目錄結構介紹）

Nginx開啟目錄瀏覽功能_2018_lcf

小程式購物車功能（支援手動輸入數量）以及側邊欄和列表欄聯動的實現

nginx關閉目錄瀏覽功能

PHP實現微信開發中提現功能（企業付款到使用者零錢）

【Nginx】Nginx開啟目錄瀏覽功能(autoindex)

mvp實現Xrecyclerview的上下拉和購物車功能（仿餓了麼）

vue+elementUI實現類似瀏覽器開啟網頁的功能（頁籤功能）

利用tkinter實現簡單計算器功能（不使用eval函式）

react + antd 實現列印功能（踩了不少坑）

如何實現訪問apache時的目錄瀏覽功能（apache file list view）

相關推薦