⭐前言

大家好，我是yma16，本文分享关于前后分离django+vue+echarts可视化查询CSDN用户质量分。
该系列文章：
python爬虫_基本数据类型
python爬虫_函数的使用
python爬虫_requests的使用
python爬虫_selenuim可视化质量分

⭐ 效果

项目部署在inscode上：https://yma16.inscode.cc/
表格展示文章评分

echarts图表点击可跳转博文：

gif演示：

⭐django简介

Django是一个开源Python web框架，由Django Software Foundation负责维护。它采用了“MTV”（模型、模板、视图）的设计架构，以使代码的复用、维护和可扩展性更加容易。Django包括许多内置的功能，如ORM（对象关系映射），表单处理，会话管理和身份验证等。它还支持许多插件和扩展，如REST框架和CMS（内容管理系统）。Django被广泛应用于构建高度可伸缩的Web应用程序，包括社交网络、博客、电子商务应用程序等。

⭐vue3简介

Vue3是最新版本的Vue.js框架，是Vue.js的第三个主要版本。Vue3兼容Vue2，并且进行了几个重要的改进。最大的改进是对组合API的引入，组合API可以让开发者更轻松地抽象出可复用的逻辑，提高代码的组合性和可重用性。Vue3还引入了更快速的虚拟DOM和编译器，带来更快的渲染速度和更小的应用程序大小。另外，Vue3还提供了更好的TypeScript支持，使得开发者更容易编写类型安全的代码。总之，Vue3是一个更加强大和灵活的框架，具有更好的性能和更好的开发体验。

⭐vue引入echarts

要在Vue中使用Echarts，需要先安装Echarts：

npm install echarts --save

然后，在Vue3中引入Echarts：

import * as echarts from 'echarts'export default {name: 'MyChart',data() {return {chartInstance: null,}},mounted() {this.initChart()},methods: {function initChart() {// 获取容器元素const container = this.$refs.chartContainer// 初始化Echarts实例this.chartInstance = echarts.init(container)// 设置图表配置项const option = {...}// 渲染图表this.chartInstance.setOption(option)}},
}

在模板中，需要添加一个容器元素来容纳图表：

<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

这样就可以在Vue3中使用Echarts了。如果需要使用Vue3的Composition API来管理图表逻辑，可以将上面的代码封装成一个自定义Hook来重用。

⭐前后分离实现

思路：
后端：django抓取用户的接口数据暴露
前端： vue3+antd调用接口数据实现可视化用户质量分

💖 django代码层

view视图代码：

from django.http import JsonResponse
import openai,requests,json
import js2py
import json
# CSDN个人博文质量查询
import requests
from requests_toolbelt import MultipartEncoder# 获取文章列表
def get_post_list_urls(page, username):headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0"}lb_params = {"page": page,"size": "20","businessType": "blog","orderby": "","noMore": "false","year": "","month": "","username": username,}urls = "https://blog.csdn.net/community/home-api/v1/get-business-list"try:res = requests.get(url=urls, headers=headers, params=lb_params)data_list = res.json()["data"]["list"]return data_listexcept Exception as e:print('page error', str(e))return 0# 查询质量分数
def get_sorce(article_url):url = "https://bizapi.csdn.net/trends/api/v1/get-article-score"headers = {"accept": "application/json, text/plain, */*","accept-encoding": "gzip, deflate, br","accept-language": "zh-CN,zh;q=0.9","content-length": "218","content-type": "multipart/form-data; boundary=----WebKitFormBoundarymKS9dpHZYkkMHZWj","cookie": "uuid_tt_dd=10_37086218120-1683187755910-896626; __bid_n=187e5d0cbaf89d1f724207; __gads=ID=3fcd1ab266c84bd9-220bdd6894e0004c:T=1683187762:RT=1683187762:S=ALNI_MbszTpjyvTAnMd5pG5eE3Ol6jpbVw; __gpi=UID=00000c0178601530:T=1683187762:RT=1683857695:S=ALNI_Mb7KrJygTsLQRFePHRA1tpMIbjBqA; UserName=u014727709; UserInfo=836a27b06b334117be2e4e851dd7733c; UserToken=836a27b06b334117be2e4e851dd7733c; UserNick=%E6%83%B3%E4%BD%A0%E4%BE%9D%E7%84%B6%E5%BF%83%E7%97%9B; AU=794; UN=u014727709; BT=1683860533258; p_uid=U010000; Hm_up_6bcd52f51e9b3dce32bec4a3997715ac=%7B%22islogin%22%3A%7B%22value%22%3A%221%22%2C%22scope%22%3A1%7D%2C%22isonline%22%3A%7B%22value%22%3A%221%22%2C%22scope%22%3A1%7D%2C%22isvip%22%3A%7B%22value%22%3A%220%22%2C%22scope%22%3A1%7D%2C%22uid_%22%3A%7B%22value%22%3A%22u014727709%22%2C%22scope%22%3A1%7D%7D; FPTOKEN=KFhOagH01mR+lE0zk/9/4AZwdybQP4pJ9q4URSqGTcW3XgmQAKRP4XtCWpwF+xPBRetpgJyJFG2D0s49i9WhPT9JgHOJHov85Eg6St4WHj3G1zbPbra/SUcnnYPxRE0NO8mKry4LEVT/QetTZ24R3KXbnEX3agAt6UFFWLVFgBb62Ay1YlJtNXrFkIVbk5AeVNR9Bx6M8d8k9s2FmAAE44V1cRUjFunOpnmtwhHvH+CUoBgMptgWVDxl110YHcOm3auS61uCROqlmB/TWa1/wBOjoOVw9weCASapZAIB0D+Jth2cPKzPsDEQMBRVsFqlaCb1dRjByej6jwzW8JKkotUxHVnhG2ad2Sl2zMGgbP3LtwOocyYbd7aaccpYiIj/ICbWPhQpBi6bfOau6eenzQ==|Ux1hTZK4ogvPMjCnvaBGyetqQq0EbCbGSZMQzvU1HfI=|10|338abfb0d23c89b679ee1ded400a352b; ssxmod_itna=Yq+h7I4AxjxG2xlbr+eKD5KdxgGC0j7/jDBwDAIYDZDiqAPGhDC34FxT80OYcxqGkQZMGpNlixnx3mQVC7Yu1rDCPGnDBF+orDee=D5xGoDPxDeDABPiTDYSQDEDeKDRDWKGyR3NcOP5B0OU1PDR15DwxD15BIxvxG1DQ5Dsp4p44DCazEqDm+ohpHzDCKDj1yODmWFY4GdrQG4IYkeMYRD=E053mb37CG4TCi3qenDkYr4QDBD4abPbe=DirGqaQGP4D===; ssxmod_itna2=Yq+h7I4AxjxG2xlbr+eKD5KdxgGC0j7/D8LCBkDGNGk81DFEiIAZ0OPApwX74QV7jqi=qI1BHL+oNii72w58ECv4+2ten9UQ27AD3XG3bRpyrPhXjkDwjXNHYMuuDv6zAt45ojzEtWguOWZHHVYIOaEqFRC0x5FqGoawzo6HaR07F3j+=2jyGqrW7SA0FdP4AfWpxx6H46tGIYiPkKicz3n5G/Z8OVn0tjfcQeWWiu39DoPHXZZqKMCg8e6+IIEyDXRG6YCjtb6lQ2Y=IZxOB2GPkfutGLcvz2Z/0uWwgoHvcSby+/pPg6qDSmVrp+Ov0GwVZKGcUBBjxKqkEvv7IzrtUleOn+4BE7WqYgqQ2KpEw6QmKD34QApn+b=Dz64KlmZWXFlfdDpNiLSODjetWgE7PUFSETx33n3PG=WSExWf5c3+DWwe6E6hsCeQnwxSGGedenIzlPumU7bpt/NQYqPYfxt5yCaTZKk2N4Yqo6+Iapx0UdSEy7TAYyicHsAHF/PADusie0EuZBn0EEyzbix7Q1tFjEduvE=ba9tQWTLt8xunPpSZWvvxfYR8ir2Lxf7IEa/93HpKmmwimHj+OcY5H4DQ9U82i0kFGD1YuDbUvj7u1bi005D08DiQ5YD=; log_Id_view=5351; c_dl_fref=https://blog.csdn.net/qq_45157635/article/details/131064971; c_dl_prid=1687150160923_424595; c_dl_rid=1687150175427_591440; c_dl_fpage=/download/qq_47632786/85622911; c_dl_um=distribute.pc_relevant.none-task-download-2%7Edefault%7ECTRLIST%7EAntiPaid-3-87472365-blog-131064971.235%5Ev38%5Epc_relevant_default_base3; c_utm_source=1966961068; c_first_ref=default; c_segment=2; dc_sid=1b9e8213caa5348d865241cd9435a5e9; Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac=1687824698,1687911255,1687956527,1687997637; firstDie=1; dc_session_id=10_1688013171909.840541; c_page_id=default; log_Id_click=1268; c_pref=default; c_ref=default; c_first_page=https%3A//www.csdn.net/qc%3Futm_source%3D1966961068; c_dsid=11_1688015643395.788238; utm_source=1966961068; log_Id_pv=1605; Hm_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1688015644; dc_tos=rx017i","origin": "https://www.csdn.net","referer": "https://www.csdn.net/qc?utm_source=1966961068","sec-fetch-mode": "cors","sec-fetch-site": "same-site","user-agent": "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36","x-ca-key": "203930474","x-ca-nonce": "c604c7f2-88ec-4cbf-aa7c-3aec9803c515","x-ca-signature": "AzzRQ6mYf0LscPig+ksIdjHUNjlA7T3WGEdx08cS96U=","x-ca-signature-headers": "x-ca-key,x-ca-nonce","x-ca-signed-content-type": "multipart/form-data"}params = MultipartEncoder({"url": article_url})headers["Content-Type"] = params.content_typetry:res = requests.post(url=url, headers=headers, data=params, timeout=10,)sorce = res.json()["data"]return sorceexcept Exception as e:print('grade error',str(e))return 0def serachCsdnUserArticleInfo(username):try:res = []page = 1while True:data_list = get_post_list_urls(page, username)page += 1if data_list == 0 or len(data_list) == 0:breakelse:res += data_listdata_array = []for data in res:article_url = data["url"]grade_dict = get_sorce(article_url)article_title=data['title']article_vieCount=data['viewCount']article_commentCount=data['commentCount']article_collectCount=data['collectCount']article_postTime=data['postTime']grade_message=grade_dict['message']grade_score=grade_dict['score']data_array.append({'title':article_title,'url':article_url,'viewCount':article_vieCount,'commentCount':article_commentCount,'collectCount':article_collectCount,'message':grade_message,'score':grade_score,'postTime':article_postTime})return data_arrayexcept Exception as e:print('username error', str(e))

urls路由的代码：

from django.contrib import admin
from .views import getCsdnGrade
from django.urls import path,includeurlpatterns = [path(r'getCsdnGrade/', getCsdnGrade),
]

💖 vue3代码层

前端代码层：

<script setup>
import axios from 'axios';
import * as echarts from 'echarts';import { onMounted, reactive, onUnmounted } from 'vue';
const state = reactive({loading: false,searchValue: 'qq_38870145',firstChart: null,columns: [{title: '文章名称',dataIndex: 'title',fixed:true}, {title: '链接',dataIndex: 'url',sorter: true,}, {title: '浏览量',dataIndex: 'viewCount',sorter: true,}, {title: '收藏量',dataIndex: 'collectCount',sorter: true,}, {title: '分数',dataIndex: 'score',sorter: true,}, {title: '建议',dataIndex: 'message',}, {title: '发文时间',dataIndex: 'postTime',}],dataSource: []
})
const getCsdnData = (uId) => {const url = 'https://yongma16.xyz/common-api/getCsdnGrade/'const data = {uId}state.loading = trueaxios.post(url, data, { timeout: 100000 }).then(res => {state.dataSource = res.data.datastate.loading = falseinitFirstData()}).catch((r) => {console.log(r)state.loading = falsestate.dataSource = []initFirstData()})
}
onMounted(() => {onSearch()
})
const onSearch = () => {if (!state.searchValue) {return window.alert('请输入用户id')}getCsdnData(state.searchValue)
}function initFirstData() {// 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('first'));const option = {title: {text: 'csdn 质量分柱状图 点击跳转到对应的文章'},toolbox: {show: true,feature: {saveAsImage: {}}},dataZoom: [{id: 'dataZoomX',type: 'slider',xAxisIndex: [0],filterMode: 'filter'},{id: 'dataZoomY',type: 'slider',yAxisIndex: [0],filterMode: 'empty'}],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},xAxis: {type: 'category',data: state.dataSource.map(item => item.postTime)},yAxis: {type: 'value'},tooltip: {formatter: function (params) {console.log('params', params)const findItem = state.dataSource.find(item => {return item.postTime == params.name})return `<span style='color:blue'>-<span> 博客标题：${params.name}  <br><span style='color:green'>-<span> 博客质量：${params.value} <br><span style='color:red'>-<span> 博客建议：${findItem.message}<br><span style='color:blue'>-<span> 博客地址：${findItem.url}<br>`},},series: [{data: state.dataSource.map(item => item.score),type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'},label: { //柱体上显示数值show: true,//开启显示position: 'center',//在上方显示textStyle: {//数值样式fontSize: '2px',color: 'white'}},markPoint: {data: [{ type: 'max', name: '最高分' },{ type: 'min', name: '最低分' }]},markLine: {data: [{ type: 'average', name: '平均分' }]}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 监听state.firstChart = myChart;window.onresize = myChart.resizemyChart.on('click', function (params) {const findItem = state.dataSource.find(item => {return item.postTime == params.name})if (params.name) {window.open(findItem.src, '_blank')}});onUnmounted(() => {window.onresize = null})
}
</script><template><div class="container"><div><a-input-search v-model:value="state.searchValue" :disabled="state.loading" placeholder="输入用户id" enter-button@search="onSearch" /></div><br><div><a-table :scroll="{ x: 800 }" :columns="state.columns" :data-source="state.dataSource" :loading="state.loading"></a-table></div><div><div id="first" style="width:800px;max-height:900px;"></div></div></div>
</template><style scoped></style>

inscode代码如下:

搜索用户id查询：

结束

本文分享python的自动化获取质量分到此结束！

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 感谢你的阅读！