# 8.4 主頁展示與下載文件功能 ##1、主頁展示 >客戶端 web前端通過Ajax動態想后臺請求頁面。 http請求方式GET 請求url為/data 傳輸協議以json數據格式為例： ```json { "cmd":"newFile", "fromId":"0", "count":"8" } ``` >服務端 首先應該在nginx.conf里面設置好對/data 的url處理的模塊. ```php location = /data { fastcgi_pass 127.0.0.1:8085; fastcgi_index data.cgi; include fastcgi.conf; } ``` 當然同時fastCGI對應的data.cgi要在后臺啟動起來 后臺服務進程解析json數據，得到cmd，fromId，count等參數 隨后從redis數據庫中取出每個文件的信息返回給前端。 還是以json格式傳輸。 ```json { "games": [ { "id": "group1/M00/00/00/wKgCbFepUHGAUTOhAP_fjuN0kbA670.pdf", "kind": 2, "title_m": "python-網絡爬蟲.pdf", "title_s": "文件title_s", "descrip": "2016-08-09 11:39:24", "picurl_m": "http://172.16.0.148/static/file_png/pdf.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepUHGAUTOhAP_fjuN0kbA670.pdf", "pv": 1, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepT0SAOBCtACjizOQy1fU405.rar", "kind": 2, "title_m": "階段測試_STL_數據結構.rar", "title_s": "文件title_s", "descrip": "2016-08-09 11:34:23", "picurl_m": "http://172.16.0.148/static/file_png/rar.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepT0SAOBCtACjizOQy1fU405.rar", "pv": 1, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepTp2AUnd1AFRAAvu2TSg259.mp3", "kind": 2, "title_m": "黃昏.mp3", "title_s": "文件title_s", "descrip": "2016-08-09 11:31:35", "picurl_m": "http://172.16.0.148/static/file_png/mp3.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepTp2AUnd1AFRAAvu2TSg259.mp3", "pv": 5, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepTmGAQvuXAAEYXfRAMkc937.png", "kind": 2, "title_m": "01-nginx-市場占有率.png", "title_s": "文件title_s", "descrip": "2016-08-09 11:30:35", "picurl_m": "http://172.16.0.148/static/file_png/png.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepTmGAQvuXAAEYXfRAMkc937.png", "pv": 2, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepSKeASREwAAapfc9k6Rc011.jpg", "kind": 2, "title_m": "小貓5.jpg", "title_s": "文件title_s", "descrip": "2016-08-09 11:06:10", "picurl_m": "http://172.16.0.148/static/file_png/jpg.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepSKeASREwAAapfc9k6Rc011.jpg", "pv": 1, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepSKeAOkV4AAY7zSGunKE058.jpg", "kind": 2, "title_m": "小貓6.jpg", "title_s": "文件title_s", "descrip": "2016-08-09 11:06:09", "picurl_m": "http://172.16.0.148/static/file_png/jpg.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepSKeAOkV4AAY7zSGunKE058.jpg", "pv": 0, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepSKeARhoLAAXsKfNoK_k046.jpg", "kind": 2, "title_m": "貓4.jpg", "title_s": "文件title_s", "descrip": "2016-08-09 11:06:09", "picurl_m": "http://172.16.0.148/static/file_png/jpg.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepSKeARhoLAAXsKfNoK_k046.jpg", "pv": 0, "hot": 0 }, { "id": "group1/M00/00/00/wKgCbFepSKeAADFfAAbuwxC1bYU619.jpg", "kind": 2, "title_m": "貓2.jpg", "title_s": "文件title_s", "descrip": "2016-08-09 11:06:09", "picurl_m": "http://172.16.0.148/static/file_png/jpg.png", "url": "http://192.168.2.108/group1/M00/00/00/wKgCbFepSKeAADFfAAbuwxC1bYU619.jpg", "pv": 0, "hot": 0 } ] } ``` 其中每個文件對應id、kind、title_m、title_s、descrip、picurl_m、url、pv、hot等字段。 `id`為通過fastDFS保存文件所返回的分布式最終的file_id字符串，用了記錄文件唯一標識的key。 `kind`應該是文件類型。 `title_m` 文件的名稱 `title_s` 暫時沒有用上。 `descrip` 存放文件上傳的時間。 `picurl_m` 存放文件的的圖標文件路徑 `url` 存放文件存放在fastdfs分布式存儲服務器的url地址。 `pv` 文件當前的下載量 `hot` 該文件是否是火爆文件。 然后前端根據文件數據，通過js將文件內容展示出來。即可。 ##2、文件下載 文件下載實際上比較容易，因為頁面上展示的“下載文件”就已經將封裝好的url展示出來，下載文件全部基于瀏覽器對文件的自動解析，如果是圖片那就是展示出來，如果是rar等，那就直接下載。