豆瓣小组html模板,用前端的方式打开豆瓣租房小组
標題略顯浮夸...大家不要介意@_@
最近要去上海打工，網上查了一下，很多人說豆瓣租房小組租房子挺靠譜的，于是就百度了一下，點進去的界面是這樣的...
豆瓣租房小組首頁
帖子詳情頁
看到首頁的時候就感覺有點頭大，有種零幾年逛貼吧論壇的感覺，就直接羅列標題，沒有縮略圖，你要點進去才能查看具體的房源信息，房子圖片，有點麻煩。
為了方便瀏覽，我決定利用所學知識對該界面進行優化，把純文字的界面轉化成這種“標題+圖片的形式”，瀏覽信息更直觀方便一些，下面先上效果圖，圖中沒有圖片的地方是因為原貼就沒有圖片。
豆瓣租房優化.png
1. 思路
先解釋一下，我說的優化的意思不是寫個瀏覽器腳本或插件，然后打開這個網頁會自動轉化，這種技術對于我來說太難了......
我的想法是，先爬取這個網頁的關鍵數據，保存成json文件，然后再寫一個靜態網頁展示這些數據，當然一些鏈接也會爬取下來，所以最后即使我做的是靜態網頁，但點擊相應的帖子，我也能跳轉到原貼的詳情頁，營造出一種真實網站的感覺
2. 涉及的技術
Python：要爬取網頁信息，這里我選擇用Python，同時使用到了requests庫和lxml庫。
前端技術：HTML、CSS，JavaScript素質三連，為了便于展示數據我用到了Vue2.0，懶得寫分頁，所以也用到了Bootstrap的分頁組件。
3. 代碼實現
3.1 爬取網頁信息
import json
import requests
from lxml import html
class spider:
def __init__(self):
self.page = 0
self.url = 'https://www.douban.com/group/search?start={}&cat=1013&group=146409&sort=time&q=%E9%97%B5%E8%A1%8C'.format(self.page)
self.headers = {
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36",
}
def get_html(self, url):
response = requests.get(url, headers=self.headers).text
html_tree = html.fromstring(response)
return html_tree
def get_img(self, href):
html_data = self.get_html(href)
img = html_data.xpath('//*[@id="link-report"]//*[@class="image-wrapper"]/img/@src')[:4]
return img
def save_files(self, filename, array):
try:
with open(filename, 'w', encoding='utf-8') as json_data:
json.dump(array, json_data, ensure_ascii=False)
print('**********寫入成功**********')
except EnvironmentError:
print('寫入失敗')
def get_data(self):
json_data = []
data = {}
html_data = self.get_html(self.url)
title_list = html_data.xpath('//*[@class="olt"]/tbody/tr/td[1]/a/@title')
href_list = html_data.xpath('//*[@class="olt"]/tbody/tr/td[1]/a/@href')
time_list = html_data.xpath('//*[@class="olt"]/tbody/tr/td[2]/@title')
for title, href, time in zip(title_list, href_list, time_list):
img = self.get_img(href)
data['title'] = title
data['href'] = href
data['img'] = img
data['time'] = time
json_data.append(data)
print('已獲取： ' + title)
data = {}
return json_data
def next_page(self):
self.page += 50
self.url = 'https://www.douban.com/group/search?start={}&cat=1013&group=146409&sort=time&q=%E9%97%B5%E8%A1%8C'.format(self.page)
def run(self, page_num):
json_data = []
flag = page_num
while page_num > 0:
json_data += self.get_data()
print('已獲取第', flag - page_num + 1, '頁')
self.next_page()
page_num -= 1
self.save_files('./data.json', json_data)
s = spider()
s.run(5) # 爬取5頁
純粹的笨方法爬取，沒有多線程也沒有異步，下面解釋一下代碼：
get_html(url)：獲取原始網頁，整理成樹結構，方便xpath語法解析。
get_img(href)：獲取帖子中的圖片地址。
get_data()：獲取title文本，鏈接，發布時間等信息，return返回json數據。
next_page(url)：爬取下一頁，觀察url信息，發現每下一頁，url中的某個參數遞增50，所以直接+50。
save_files(filename, array)：把json數據保存成data.json文件。
run(page_num)：設定爬取的頁數，然后執行。
運行后爬取到data.json文件:
data.json文件.png
3.2 用靜態網頁展示
html代碼
豆瓣租房小組豆瓣租房小組圖片預覽
- {{ index + 1 + (curPage - 1) * 15}}{{ info.title }}
{{ info.time }}
- 上一頁
- {{ n }}
- 下一頁
CSS代碼
body {
border: 1px solid #ddd;
margin: auto;
width: 1080px;
box-shadow: 2px 2px 10px 2px #ccc;
}
#header {
margin-bottom: 5em;
text-align: center;
}
#fileImport {
font-size: 18px;
}
#content ul {
margin: 0;
padding: 0;
}
#content ul li {
list-style: none;
margin: 1em 0.5em;
padding: 1em 0;
border-top: 1px solid #999;
}
.info-list .title-list {
display: flex;
}
.info-list .title-list span {
display: inline-block;
width: 3em;
font-style: italic;
font-size: 1.5em;
color: #eb5f00;
text-align: center;
}
.info-list .title-list a {
text-decoration: none;
font-size: 1.5em;
color: black;
}
.info-list .title-list a:hover {
color: #e79600;
}
.info-list .img-box {
display: flex;
margin-left: 4em;
}
.info-list .img-box img {
margin: 0.5em;
width: 200px;
height: 200px;
}
.info-list .release-time {
margin-left: 4em;
padding-top: 1em;
font-size: 16px;
color: #999;
}
js代碼
const index = new Vue({
el: '#content',
data: {
json_data: [], // 租房信息數據
num: 0, //多少條數據
pageNum: [], //總頁數轉化成列表
pageSize: 15, //每一頁的數量
totalPage: 1, //總頁數
curPage: 1, //當前頁數
showPageList: 0, //當前顯示的頁面
},
// 監聽器
watch: {
json_data(newData){
this.pageNum = []; // 若數據更新，頁碼先清零
this.num = newData.length;
this.totalPage = Math.ceil(this.num / this.pageSize);
this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
this.change_list();
this.getShowPageList(newData, this.curPage);
},
curPage(newPage){
this.getShowPageList(this.json_data, newPage);
}
},
// 事件處理方法
methods: {
// 點擊觸發選擇文件按鈕
files_click: function(){
$("#files").click();
},
// 讀取json文件
get_json_data: function(e){
var self = this; // 保存外部作用域
var selectedFile = e.target.files[0];
var reader = new FileReader();
reader.readAsText(selectedFile);
reader.onload = function () {
self.json_data = JSON.parse(this.result); // 讀取的是字符串，轉換數組
}
},
// 頁數轉換成數組
change_list: function(){
for (let i = 1; i <= this.totalPage; i++) {
this.pageNum.push(i)
}
},
// 獲取當前頁應展示的數據
getShowPageList: function(data, index){
let begin = (index - 1) * this.pageSize;
let end = index * this.pageSize;
this.showPageList = data.slice(begin, end);
},
// 上一頁
prevPage: function(e){
if(this.curPage != 1){
this.curPage --;
}
},
// 下一頁
nextPage: function(e){
if(this.curPage != this.totalPage){
this.curPage ++;
}
},
// 點擊頁面跳轉
link_curPage: function(e){
console.log(e.target.text);
let num = parseInt(e.target.text);
this.curPage = num;
}
}
})
最后我是用js的FileReader接口讀取的json文件，查資料的時候有人說可以用Ajax讀取，但我試了一下發現會產生跨域。手動導入文件顯得太笨了......沒辦法，能力有限，后續有空再嘗試優化一下這個問題。
代碼就不解釋了，思路就是讀取json文件，本質上這些json數據都是數組，使用Vue可以輕松的展示這些數據
總結
以上是生活随笔為你收集整理的豆瓣小组html模板,用前端的方式打开豆瓣租房小组的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云课堂智慧职教答案python_云课堂智
- 下一篇： HTML前端数据管理,前端数据管理