refactor: 前台输入链接自动爬取优化

Author: zhongchubing

geekape-nav-main/api/index.js

@@ -14,6 +14,7 @@ function objToQuery(obj) {
 }
 
 export const API_NAV = '/api/nav'
+export const API_NAV_REPTILE = '/api/nav/reptile'
 export const API_NAV_RANDOM = '/api/nav/random'
 export const API_NAV_FIND = '/api/nav/find'
 export const API_CATEGORY_LIST = '/api/category/list'

geekape-nav-main/components/AddNavPopup.vue

@@ -8,14 +8,10 @@
       @close="$emit('update:show', false)"
     >
       <el-form ref="ruleForm" label-width="100px" :model="form" :rules="rules">
-        <el-form-item label="网站名称" prop="name" v-if="isMoreForm">
-          <el-input placeholder="输入网站名称" v-model="form.name" />
-        </el-form-item>
-        <el-form-item label="网站描述" prop="desc" v-if="isMoreForm">
-          <el-input placeholder="输入网站描述" v-model="form.desc" />
-        </el-form-item>
+
         <el-form-item label="网站链接" prop="url">
-          <el-input placeholder="http://www.baidu.com/" v-model="form.url"  :disabled="type === 'update'" />
+          <el-input placeholder="http://www.baidu.com/" v-model="form.url"  :disabled="type === 'update'" @blur="getNavInfo" />
+          <span style="color: red">输入链接自动爬取信息</span>
         </el-form-item>
 
         <el-form-item label="网站分类" prop="categoryId">
@@ -34,6 +30,16 @@
             </el-option-group>
           </el-select>
         </el-form-item>
+        <el-form-item label="网站名称" prop="name">
+          <el-input placeholder="输入网站名称" v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="网站logo" prop="name">
+          <el-input placeholder="输入网站logo" v-model="form.logo" />
+          <img :src="form.logo" />
+        </el-form-item>
+        <el-form-item label="网站描述" prop="desc">
+          <el-input type="textarea" placeholder="输入网站描述" v-model="form.desc" />
+        </el-form-item>
         <el-form-item label="作者名称" prop="authorName">
           <el-input placeholder="填写你推广的名称" v-model="form.authorName" />
         </el-form-item>
@@ -52,6 +58,9 @@
 </template>
 
 <script>
+import axios from "../plugins/axios";
+import {API_NAV, API_NAV_RANDOM, API_NAV_REPTILE} from "../api";
+
 export default {
   props: {
     show: {
@@ -74,6 +83,7 @@ export default {
         url: '',
         categoryId: '',
         name: '',
+        logo: '',
         desc: '',
         authorName: '',
         authorUrl: ''
@@ -89,8 +99,9 @@ export default {
         categoryId: [
           { required: true, message: '请选择分类', trigger: 'blur' },
         ],
-        name: [],
-        desc: [],
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' },],
+        desc: [{ required: true, message: '请输入描述', trigger: 'blur' },],
+        logo: [{ required: true, message: '请输入logo', trigger: 'blur' },],
         authorUrl: [
           {
             pattern: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/,
@@ -143,6 +154,15 @@ export default {
         }
       })
     },
+    async getNavInfo() {
+      const { url } = this.form
+      if (!url) return
+      const { data } = await axios.get(API_NAV_REPTILE + `?url=${url}`)
+
+      this.form.logo = `${url}/favicon.ico`
+      this.form.name = data?.name
+      this.form.desc = data?.desc
+    }
   },
   watch: {
     item(ite) {

geekape-nav-server/app/controller/nav.ts

@@ -2,6 +2,12 @@ import Controller from './common';
 const request = require('request');
 const cheerio = require('cheerio');
 
+enum NAV_STATUS {
+  wait,
+  pass,
+  refuse,
+}
+
 export default class NavController extends Controller {
   async list() {
     const { ctx } = this
@@ -65,45 +71,38 @@ export default class NavController extends Controller {
     const { ctx } = this
     const { request: req, model } = ctx
     try {
-      const { url, name } = req.body
       req.body.status = 1
-      req.body.logo = `https://www.google.com/s2/favicons?domain=${url}`
-      req.body.href = url
-      req.body.submitTime = new Date()
-
-      // if (req.isLogin) {
-      //   // 已经登录了，提交网站直接审核通过
-      //   req.body.status = 0
-      // }
-
-      // 手动输入
-      if (name) {
-        model.Nav.create(req.body, (_err, doc) => {
-          this.success(doc)
-        })
-        return
-      }
+      req.body.createTime = new Date()
+      const res = model.Nav.create(req.body);
+      this.success(res)
+    } catch (error) {
+      this.error(error.message)
+    }
+  }
 
+  async reptile() {
+    const { ctx } = this
+    const { url } = ctx.query
+    const that = this
+    const res = await new Promise((resolve)=> {
       request(url, (error, requestData, body) => {
         if (!error && requestData.statusCode == 200) {
           const $ = cheerio.load(body)
           const name = $('title').text()
           const desc = $('meta[name="description"]').attr('content')
-          model.Nav.create({
-            ...req.body,
+
+          resolve({
             name,
             desc,
             href: url,
-          }, (_err, doc) => {
-            this.success(doc)
           })
         } else {
-          this.error('爬虫爬取失败')
+          that.error('爬虫爬取失败')
         }
       })
-    } catch (error) {
-      this.error(error.message)
-    }
+    })
+
+    this.success(res)
   }
 
   async del() {
@@ -114,6 +113,10 @@ export default class NavController extends Controller {
 
   async edit() {
     const { body } = this.ctx.request
+
+    if (body.status === NAV_STATUS.pass || body.status === NAV_STATUS.refuse) {
+      body.auditTime = new Date()
+    }
     const res = this.ctx.service.common.update(body, 'Nav')
     this.success(res);
   }

geekape-nav-server/app/model/nav.ts

@@ -10,7 +10,7 @@ module.exports = app => {
     logo: String,
     authorName: String,
     authorUrl: String,
-    submitTime: Date,
+    auditTime: Date,
     createTime: Date,
     view: {
       type: Number,

geekape-nav-server/app/router.ts

@@ -13,6 +13,7 @@ export default (app: Application) => {
   router.get("/api/nav/list", controller.nav.list)
   router.post("/api/nav", controller.nav.add)
   router.get("/api/nav", controller.nav.get)
+  router.get("/api/nav/reptile", controller.nav.reptile)
   router.get("/api/nav/random", controller.nav.random)
   router.delete("/api/nav", controller.nav.del)
   router.put("/api/nav", controller.nav.edit)

geekape-nav-server/config/config.default.ts

@@ -39,6 +39,7 @@ export default (appInfo: EggAppInfo) => {
         "/api/nav",
         "/api/nav/random",
         "/api/nav/find",
+        "/api/nav/reptile",
         "/api/login",
         "/api/index",
         "/api/category/list"