创新实训博客（40）——Web爬取任务管理界面设计以及用户接口调用

最新推荐文章于 2022-10-21 19:28:58 发布

一位不愿意透露姓名的热心网友

最新推荐文章于 2022-10-21 19:28:58 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/sinat_41868837/article/details/106969695

版权

界面设计布局

主界面

添加功能

api部分接口对接

export function adminGetCrawlList() {
  return request({
    url: '/admin/crawl/list',
    method: 'get'
  })
}

export function adminAddCrawl(id) {
  return request({
    url: '/admin/crawl/add/' + id,
    method: 'get'
  })
}

前端html代码

<template>
  <div class="app-container" style="margin-left: 8%; width: 84%">
    <el-row>
      <el-col :span="6" style="margin: 8px">
        <el-input v-model="searchItem" placeholder="请输入内容" size="small">
          <el-button slot="append" size="small" icon="el-icon-search" />
        </el-input>
      </el-col>
      <el-col :span="4" style="margin: 8px">
        <el-button type="plain" size="small" icon="el-icon-plus" @click="addBlog">添加任务</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      stripe
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="博客id" width="120%" prop="id" />
      <el-table-column align="center" label="博客名称" prop="title" />
      <el-table-column align="center" label="博客链接" prop="url" />
      <el-table-column align="center" label="订阅链接" prop="feed" />
      <el-table-column align="center" label="文章数量" width="120%" prop="articleCount" />
      <el-table-column align="center" label="管理" width="120%">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="addFormVisible" title="添加任务">
      <el-form label-width="80px" style="margin: 8px">
        <el-form-item label="博客id"><el-input v-model="addBlogId" placeholder="请输入博客待抓取的博客id：xxx" /></el-form-item>
        <el-form-item>
          <div style="float: right">
            <el-button @click="addFormVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmAdd">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

js接口调用代码

    handleCurrentChange() {
      var that = this
      that.listLoading = true
      adminGetCrawlList().then(response => {
        const { data } = response
        that.list = data
        that.listLoading = false
      })
    },
    addBlog() {
      this.addFormVisible = true
    },
    confirmAdd() {
      var that = this
      adminAddCrawl(that.addBlogId).then(response => {
        that.addBlogId = 0
        that.addFormVisible = false
        that.handleCurrentChange()
      }).catch(error => {
        console.log(error)
      })
    },

修改用户的博主服务，添加爬取按钮

            <el-button v-if="isDev" type="info" :loading="crawlLoading" size="medium" @click="startCrawl">抓取</el-button>

设置爬取按钮函数

    startCrawl() {
      var that = this
      that.crawlLoading = true
      userAddCrawl(that.basicInfo.id).then(response => {
        that.crawlLoading = true
      })
    }