python爬虫_django vue echarts可视化查询所有CSDN用户质量分

文章目录

• • ⭐前言
  • • ⭐ 效果
    • ⭐django简介
    • ⭐vue3简介
    • ⭐vue引入echarts
  • ⭐前后分离实现
  • 💖 django代码层
  • 💖 vue3代码层
  • 结束

⭐前言

大家好，我是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_list
    except 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=想你依然心痛; AU=794; UN=u014727709; BT=1683860533258; p_uid=U010000; Hm_up_6bcd52f51e9b3dce32bec4a3997715ac={"islogin":{"value":"1","scope":1},"isonline":{"value":"1","scope":1},"isvip":{"value":"0","scope":1},"uid_":{"value":"u014727709","scope":1}}; 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~default~CTRLIST~AntiPaid-3-87472365-blog-131064971.235^v38^pc_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://www.csdn.net/qc?utm_source=1966961068; 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_type
    try:
        res = requests.post(url=url, headers=headers, data=params, timeout=10,)
        sorce = res.json()["data"]
        return sorce
    except Exception as e:
        print('grade error',str(e))
        return 0

def serachCsdnUserArticleInfo(username):
    try:
        res = []
        page = 1
        while True:
            data_list = get_post_list_urls(page, username)
            page += 1
            if data_list == 0 or len(data_list) == 0:
                break
            else:
                res += data_list
        data_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_array
    except Exception as e:
        print('username error', str(e))

urls路由的代码：

from django.contrib import admin
from .views import getCsdnGrade
from django.urls import path,include

urlpatterns = [
    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 = true
  axios.post(url, data, { timeout: 100000 }).then(res => {
    state.dataSource = res.data.data
    state.loading = false
    initFirstData()
  }).catch((r) => {
    console.log(r)
    state.loading = false
    state.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.resize
  myChart.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的自动化获取质量分到此结束！

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