添加 /datasource 路由和对应的页面接口

src/api/spider.js

@@ -0,0 +1,14 @@
+import { get, post } from '@/utils/request'
+
+const videoApi = {
+  videoPostApi: '/api/spider/data/source'
+}
+
+export function cacheDataSource(magnetId) {
+  return post(videoApi.videoPostApi + '/' + magnetId)
+}
+
+// 获取源数据
+export function getDataSource(page) {
+  return get(videoApi.videoPostApi + '?page=' + page)
+}

src/router/index.js

@@ -23,6 +23,7 @@ const DiscoverIndex = () => import('views/home/Discover')
 const BdMap = () => import('views/home/BdMap')
 const AMap = () => import('views/home/AMap')
 const Vip = () => import('views/vip/Vip')
+const DataSource = () => import('views/home/DataSource')
 
 // ********************************************************************************************************************
 // 用户前台主页
@@ -409,6 +410,12 @@ const routes = [
     component: Vip,
     meta: { needAuth: false }
   },
+  {
+    path: '/datasource',
+    name: 'DataSource',
+    component: DataSource,
+    meta: { needAuth: false }
+  },
   {
     path: '/login',
     name: 'Login',

src/views/home/DataSource.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-row>
+    <el-row>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="title"
+          label="Name"
+        >
+          <template slot-scope="scope">
+            <a :href="scope.row.pageUrl" target="_blank">
+              <span>{{ scope.row.title }}</span>
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="magnetUri"
+          label="Link"
+        >
+          <template slot-scope="scope">
+            <a :href="scope.row.magnetUri">
+              <span class="el-icon-link" />
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="size"
+          label="Size"
+        />
+        <el-table-column
+          prop="pubDate"
+          label="Date"
+        />
+        <el-table-column
+          prop="pubDate"
+          label="Cache"
+        />
+        <el-table-column
+          prop="pubDate"
+          label="Feed"
+        />
+        <el-table-column
+          label="操作"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="cache(scope.row)"
+            >缓存</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import { cacheDataSource, getDataSource } from '@/api/spider'
+
+export default {
+  name: 'DataSource',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 20,
+      totalSize: 0,
+      dataList: []
+    }
+  },
+  created() {
+    document.title = '数据源'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      this.dataList = []
+      getDataSource(this.currentPage).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    cache(row) {
+      cacheDataSource(row.magnetId).then(resp => {
+        if (resp.code === 0) {
+          this.$notify({
+            message: row.title + ' 正在缓存中',
+            type: 'warning',
+            duration: 3000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>