標(biāo)題略顯浮夸...大家不要介意@_@

最近要去上海打工，網(wǎng)上查了一下，很多人說(shuō)豆瓣租房小組租房子挺靠譜的，于是就百度了一下，點(diǎn)進(jìn)去的界面是這樣的...

豆瓣租房小組首頁(yè)

帖子詳情頁(yè)

看到首頁(yè)的時(shí)候就感覺(jué)有點(diǎn)頭大，有種零幾年逛貼吧論壇的感覺(jué)，就直接羅列標(biāo)題，沒(méi)有縮略圖，你要點(diǎn)進(jìn)去才能查看具體的房源信息，房子圖片，有點(diǎn)麻煩。

為了方便瀏覽，我決定利用所學(xué)知識(shí)對(duì)該界面進(jìn)行優(yōu)化，把純文字的界面轉(zhuǎn)化成這種“標(biāo)題+圖片的形式”，瀏覽信息更直觀方便一些，下面先上效果圖，圖中沒(méi)有圖片的地方是因?yàn)樵N就沒(méi)有圖片。

豆瓣租房?jī)?yōu)化.png

1. 思路

先解釋一下，我說(shuō)的優(yōu)化的意思不是寫(xiě)個(gè)瀏覽器腳本或插件，然后打開(kāi)這個(gè)網(wǎng)頁(yè)會(huì)自動(dòng)轉(zhuǎn)化，這種技術(shù)對(duì)于我來(lái)說(shuō)太難了......

我的想法是，先爬取這個(gè)網(wǎng)頁(yè)的關(guān)鍵數(shù)據(jù)，保存成json文件，然后再寫(xiě)一個(gè)靜態(tài)網(wǎng)頁(yè)展示這些數(shù)據(jù)，當(dāng)然一些鏈接也會(huì)爬取下來(lái)，所以最后即使我做的是靜態(tài)網(wǎng)頁(yè)，但點(diǎn)擊相應(yīng)的帖子，我也能跳轉(zhuǎn)到原貼的詳情頁(yè)，營(yíng)造出一種真實(shí)網(wǎng)站的感覺(jué)

2. 涉及的技術(shù)

Python：要爬取網(wǎng)頁(yè)信息，這里我選擇用Python，同時(shí)使用到了requests庫(kù)和lxml庫(kù)。

前端技術(shù)：HTML、CSS，JavaScript素質(zhì)三連，為了便于展示數(shù)據(jù)我用到了Vue2.0，懶得寫(xiě)分頁(yè)，所以也用到了Bootstrap的分頁(yè)組件。

3. 代碼實(shí)現(xiàn)

3.1 爬取網(wǎng)頁(yè)信息

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('**********寫(xiě)入成功**********')

except EnvironmentError:

print('寫(xiě)入失敗')

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, '頁(yè)')

self.next_page()

page_num -= 1

self.save_files('./data.json', json_data)

s = spider()

s.run(5) # 爬取5頁(yè)

純粹的笨方法爬取，沒(méi)有多線程也沒(méi)有異步，下面解釋一下代碼：

get_html(url)：獲取原始網(wǎng)頁(yè)，整理成樹(shù)結(jié)構(gòu)，方便xpath語(yǔ)法解析。

get_img(href)：獲取帖子中的圖片地址。

get_data()：獲取title文本，鏈接，發(fā)布時(shí)間等信息，return返回json數(shù)據(jù)。

next_page(url)：爬取下一頁(yè)，觀察url信息，發(fā)現(xiàn)每下一頁(yè)，url中的某個(gè)參數(shù)遞增50，所以直接+50。

save_files(filename, array)：把json數(shù)據(jù)保存成data.json文件。

run(page_num)：設(shè)定爬取的頁(yè)數(shù)，然后執(zhí)行。

運(yùn)行后爬取到data.json文件:

data.json文件.png

3.2 用靜態(tài)網(wǎng)頁(yè)展示

html代碼

豆瓣租房小組

豆瓣租房小組圖片預(yù)覽

• {{ index + 1 + (curPage - 1) * 15}}{{ info.title }}

  {{ info.time }}

• 上一頁(yè)
• {{ n }}
• 下一頁(yè)

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: [], // 租房信息數(shù)據(jù)

num: 0, //多少條數(shù)據(jù)

pageNum: [], //總頁(yè)數(shù)轉(zhuǎn)化成列表

pageSize: 15, //每一頁(yè)的數(shù)量

totalPage: 1, //總頁(yè)數(shù)

curPage: 1, //當(dāng)前頁(yè)數(shù)

showPageList: 0, //當(dāng)前顯示的頁(yè)面

},

// 監(jiān)聽(tīng)器

watch: {

json_data(newData){

this.pageNum = []; // 若數(shù)據(jù)更新，頁(yè)碼先清零

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: {

// 點(diǎn)擊觸發(fā)選擇文件按鈕

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); // 讀取的是字符串，轉(zhuǎn)換數(shù)組

}

},

// 頁(yè)數(shù)轉(zhuǎn)換成數(shù)組

change_list: function(){

for (let i = 1; i <= this.totalPage; i++) {

this.pageNum.push(i)

}

},

// 獲取當(dāng)前頁(yè)應(yīng)展示的數(shù)據(jù)

getShowPageList: function(data, index){

let begin = (index - 1) * this.pageSize;

let end = index * this.pageSize;

this.showPageList = data.slice(begin, end);

},

// 上一頁(yè)

prevPage: function(e){

if(this.curPage != 1){

this.curPage --;

}

},

// 下一頁(yè)

nextPage: function(e){

if(this.curPage != this.totalPage){

this.curPage ++;

}

},

// 點(diǎn)擊頁(yè)面跳轉(zhuǎn)

link_curPage: function(e){

console.log(e.target.text);

let num = parseInt(e.target.text);

this.curPage = num;

}

}

})

最后我是用js的FileReader接口讀取的json文件，查資料的時(shí)候有人說(shuō)可以用Ajax讀取，但我試了一下發(fā)現(xiàn)會(huì)產(chǎn)生跨域。手動(dòng)導(dǎo)入文件顯得太笨了......沒(méi)辦法，能力有限，后續(xù)有空再嘗試優(yōu)化一下這個(gè)問(wèn)題。

代碼就不解釋了，思路就是讀取json文件，本質(zhì)上這些json數(shù)據(jù)都是數(shù)組，使用Vue可以輕松的展示這些數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的豆瓣小组html模板,用前端的方式打开豆瓣租房小组的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。