豆瓣小组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模板,用前端的方式打开豆瓣租房小组相关推荐
- php框架中什么是渲染,thinkPHP5框架渲染模板的3种方式简述
本文实例讲述了thinkPHP5框架渲染模板的3种方式.分享给大家供大家参考,具体如下: 默认情况下,控制器的输出全部采用return的方式,无需进行任何的手动输出,系统会自动完成渲染内容的输出. 在 ...
- Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式 在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render ...
- 用微前端的方式搭建类单页应用
前言 微前端由ThoughtWorks 2016年提出,将后端微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用. 美团已经是一家拥有几万人规模的大型互 ...
- 关于类的静态的模板函数的使用方式
关于类的静态的模板函数的使用方式 工作中遇到如下形式的模板使用: #include <iostream>class my{public:template <typename A> ...
- 过滤豆瓣租房小组中介贴之 python 实现余弦相似度(转)
为什么80%的码农都做不了架构师?>>> 前几天做了个微信找房机器人, 爬取豆瓣租房小组的时候发现很多伪装的中介帖,如下这种格式: 可月付 无中介 方庄地铁附近 芳城园一区单间 ...
- 豆瓣八卦小组html失败,养活无数营销号的豆瓣小组,到底在聊什么?
编者按:本文来自微信公众号"FUNJI种瓜基地"(ID:FUNJIdata),作者 FUNJI种瓜基地,36氪经授权发布. 在10月初被"雪藏"的两大豆瓣娱乐小 ...
- Mogrt教程 简单粗暴的PR动态图形模板Mogrt替换logo方式
很多用户反馈Mogrt文件需要用AE打开替换图片才能使用,"这根本就是AE模板",体验太差了! 这确实是个问题,我们也希望Adobe官方可以更新下.mogrt可以在PR软件中直接替 ...
- 前端文件下载的打开方式
前端文件下载的打开方式 1.a标签 2.window.open 3.location.href 4.location.其他属性 5.XMLHttpRequest 1.a标签 <a href=&q ...
- PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流,前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...
- 如何在豆瓣租房小组快速找到满意的房子
这几天忙着找房子,没怎么更新公众号,新浪本来是提供人才公寓的,可惜我错过了. 在大城市租房真的是一把辛酸泪,至今不知道搬家多少次了,今天就分享下我在北京租房找房的经历,或许对你找房子(不限于北京)有点 ...
最新文章
- JAVA中0 结果_Java练习题-求1000!的结果中包含多少个0
- 序列联配(alignment)和数据库搜索方法简介
- 算法--微软面试题:求一个整数数组元素间最小差值
- 【 HRBUST - 1055】Single(模拟,dp,打表)(总结)
- java map用二叉树_HashMap
- Pytorch——常用的神经网络层、激活函数
- VS2019MSDN的下载安装和使用
- 南方cass计算表面积_CASS在工程中的应用“计算表面积”的方法
- 分享一个手写轮播图的学习案例
- html 画excel表格边框,只需五分钟!用Excel做出美观的表格
- PHP遍历数组,分别将内容加入到table表格中
- Fresher的特殊求和
- atmega128 单片机 20以内加减法训练机 做的过程
- Masking操作,即只关注图像的一部分
- 基于STM32的有限词条语音识别与对话模块
- Java基于ssm的超市多商家系自提系统
- <华为VRP系统>ENSP模拟器安装:
- 重建控制文件,并且不干净的关闭数据库测试
- STM32智能小车循迹教程
- 百度站长平台使用教程:索引量