python爬虫+python接口+vue3展示:记录小项目过程

自律君
735 阅读8分钟

今天决定自己从零做一个小项目

提前说明,如果发现该文章有侵权行为,请及时通知作者,作者会第一时间删除文章,该项目只用于个人学习,不产生任何收益.

原因

之前都是由负责人来创建项目,搭建好框架和组件,将需要的文件结构构建好,然后我再去写代码,这样虽然可以让项目快速进行,但是对于我而言,是没有成长的,不利于以后的发展.所以我打算花一个月时间,自己做一个热搜项目,从爬虫,后台到前端,完全由自己一个人来完成,这样的话,既了解爬虫和后台的逻辑和思路,也让自己在前端的知识上得到真正的提升.

技术选型

第一步:就是技术选型了,也不算真正的技术选型,其实就是会什么就用什么,毕竟只有一个人在做.爬虫用python,因为我之前学过python,也做过一两个爬虫的小项目,就是爬接口数据和网页数据,然后写入数据库存储.后台的话,之前想过用node.js,因为容易上手,稍微看看文档和服务相关的库,就可以完成后台的开发了,但是后面觉得,python也可以做后台接口,就不需要多开一个项目来做后台接口,就直接用python做后台了.前端的话,当然是vue3,对于vue3,我只是在项目中运用到,但是还没有真正去从经历过创建项目到完成项目的过程,所以,趁着有时间,去学习和了解vue3,将自己提升到能够熟悉使用vue3完成项目需求的水平.这样无论是主业前端,还是业务水平的爬虫和后台,都可以得到一定的提升,又可以学习到项目的整体思路.

技术选型完成,就可以进入到开发的阶段了.计划是,数据爬虫->数据库设计->后台接口->前端页面.按照这个计划,一步步地执行下去,因为没有用到什么高大上的技术,所以就没有什么技术预研的步骤,至于开发中遇到的问题,就一点点解决就可以了.

爬虫开发部分

第一步就是爬虫了,首先就是找网页数据,百度一搜热搜,一眼就看到微博热搜了,那么就决定是它了. 爬虫,我觉得最重要的部分不是写代码,而是研究爬取的网页数据是怎么来的.不同的网站有不同的反爬机制,所以不能用一套代码来完成所有的爬虫工作,需要针对性地去开发代码,然后做逻辑爬取,而且有时候网页做了更新,就可以做相应的更新,也有数据可以直接从接口拿的,但是接口也有更新的时候,每一个接口也有不同的字段和机制,也不能一套代码去完成所有的工作.所以这部分爬虫工作是每一次爬虫代码开发前都是一定要做的.

下面的步骤以微博热搜榜为例子:
1.知道数据是怎么渲染到页面的

前端分为服务端渲染和客户端渲染

服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；

而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。. 就是服务端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面

以我的理解,两者的区别就是前端是否要使用ajax请求数据回来在页面渲染再展示.

当然,在我这几年的工作经历中,没有真正参与过服务端渲染的项目,所以也有可能是错误的理解.

image.png

在页面渲染的时候,这里是没有ajax请求的,说明这个网页是没有数据在前端这里请求再渲染,那就是服务端渲染了,那这样的话,爬虫的时候,遇到这种渲染方式的话,就无法直接从接口去取数据了.

这种情况下,就需要直接加载整个网页,从网页元素中获取对应的数据.类似于是先下载这个网页的本地文件,然后将网页所需的数据单独筛选出来.

能完成这个需求的,首选就是python的selenium库了,自动化测试库,精准定位元素位置,可以对网页元素进行操作.

2.selenium库的前期准备工作:版本 python3.9 selenium4.3.0

引入

from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium import webdriver  # 自动化测试库,可以模仿网页行为访问网页

使用

browser = webdriver.Edge(executable_path="./driver/edgedriver_win64/msedgedriver.exe")
url = 'https://s.weibo.com/top/summary/summary?cate=entrank'
browser.get(url)

至于driver是如何下载使用的,这里就不多说了,直接去官方文档去研究研究就OK了,再怎么描述都没有官方的详细

使用 WebDriver 自动执行 Microsoft Edge - Microsoft Edge Development | Microsoft Docs

元素定位 image.png

# 获取元素,爬取内容
elements = browser.find_element(By.TAG_NAME, 'tbody').find_elements(By.TAG_NAME, "tr")
print("找到所有的tr元素")

找到了主要的元素,再找子元素,然后筛选里面的内容就可以完成任务了

# 寻找连接地址
a = tr.find_element(By.TAG_NAME, "a")
temp["address"] = a.get_attribute('href')
temp["title"] = a.text

保存

找到了数据,当然就是要保存起来了,可以创建文件存储到本地,也可以存储到数据库.

存储到本地文件

image.png

   with open("resou/" + tail + ".json", 'w', encoding="utf-8") as f_obj:  # 打开模式为可写
            json.dump(aDict, f_obj, ensure_ascii=False)  # 存储文件

存储到数据库

数据库存储会比较麻烦一点,对于没有后端项目经验的人来说.首先就是下载数据库和建表,这两个步骤也不多说了,网上有很多教程,建议有兴趣的人可以去学习学习.navicat可以完成建表.

image.png python的pymysql库可以完成这个需求.PyMySQL · PyPI文档学习

import pymysql
# 连接数据库
db = pymysql.connect(host='localhost', user='root',
                     passwd='密码', db='数据库名字')
# # 使用cursor()方法创建一个游标对象
cursor = db.cursor()

# # 使用execute()方法执行SQL语句
sql = "insert into entrank values(%s,%s,%s,%s)"

cursor.executemany(sql,data)

 # 关闭游标和数据库的连接
cursor.close()
db.commit()

image.png

至此,爬虫工作也就完成了前期一小部分,这只是开始,要爬的数据是很多的,得慢慢来.

后台接口

既然都已经存储到数据库了,那么就可以写接口去获取了,写个简单的接口还是没什么难度的.

这里用到的是python的flask库

import flask
import json
# from flask import request
import pymysql

'''
flask: seb框架，通过flask提供的装饰器@server.route()将普通函数转换为服务
登录接口，需要传入url,username,passwd
'''

# 创建一个服务，把当前这个python文件当做一个服务
server = flask.Flask(__name__)
# 连接数据库
db = pymysql.connect(host='localhost', user='root',
                     passwd='密码', db='数据库名字')

# server.route()可以将普通函数转变为服务　登录接口的路径、请求方式


@server.route('/entrank', methods=['get'])
def entrank():

    # # 使用cursor()方法创建一个游标对象
    cursor = db.cursor()

    # # 使用execute()方法执行SQL语句
    sql = "SELECT * FROM entrank"

    cursor.execute(sql)
    # 获取所有记录列表

    # # 关闭游标和数据库的连接
    cursor.close()
    keyList = ["index", "heat", "address", "title"]
    results = []
    for item in cursor.fetchall():
        temp = {}
        for i in range(0, len(item)):
            temp[keyList[i]] = item[i]
        results.append(temp)

    resu = {'code': 200,  "data": results}
    return json.dumps(resu, ensure_ascii=False)

# db.close()


if __name__ == '__main__':
    # 指定端口,host,0.0.0.0代表不管几个网卡，任何ip都可访问
    server.run(debug=True, port=8888, host='0.0.0.0')

image.png

前端页面

image.png 这里只是做简单的展示,没有去做UI设计什么的,能用就行.因为爬的数据只有一小部分,等后面爬的内容多了,做点UI设计,就可以完美的展示出来了.

前端这里用的是vue3,之前只是参与过一个项目,对vue3的认识也只是在能够做功能的水平上,对于一些特性,还是不怎么了解,如果要我自己搭建一个项目,还是不行.我花了一天时间去尝试封装axios和路由,感觉还是会遇到不少与vue2不一样的地方,搭建起来比较慢,但是这个过程让我学到了不少新东西,也算是一个进步吧.

总结:

这个项目还是会持续下去的,因为还有很多需要完善的地方.例如:

python爬虫需要开多线程去爬取数据和日志记录来debbug修改逻辑,还有就是爬虫如何去尽可能避免报错,因为爬虫需要注意的地方太对,网站更新,数据结构更改,反爬机制升级等等,都会爬取数据失败,这就是要加强的地方了,以前都是做一步看一步,没有很好地去做处理.

后台接口怎么去做优化访问速度,虽然现在数据是很少,但是数据多了起来,还是得去做分页,缓存之类的处理,对于后台的了解比较少,希望这样能够一点点地去入门后端.

数据库设计这一方面也很弱,大学学过基础,都忘了,只会增删改查.

前端算是需要进阶的了,vue3技术和项目搭建,这是需要慢慢去熟悉的了.

avatar
文章
阅读
粉丝