feat: 搜索导航

Author: zhongchubing

geekape-nav-admin/src/pages/nav/List/index.tsx

@@ -28,7 +28,6 @@ export default function NavListPage() {
       title: '网站名称',
       dataIndex: 'name',
       width: 180,
-      search: false,
     },
     {
       title: '分类',

geekape-nav-main/components/AppSearch.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="app-search">
+    <el-select
+      v-model="value"
+      filterable
+      remote
+      reserve-keyword
+      placeholder="站内搜索"
+      :remote-method="remoteMethod"
+      @change="onChange"
+      :loading="loading">
+      <el-option
+        v-for="item in options"
+        :key="item.href"
+        :label="item.name"
+        :value="item.href">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import axios from "../plugins/axios";
+import {API_NAV} from "../api";
+
+export default {
+  name: "AppSearch",
+  data() {
+    return {
+      options: [],
+      value: '',
+      list: [],
+      loading: false,
+    }
+  },
+  methods: {
+    async remoteMethod(query) {
+      if (query !== '') {
+        this.loading = true;
+        const res = await axios.get(API_NAV + `?keyword=${query}`)
+        this.loading = false
+        this.options = res?.data
+      } else {
+        this.options = [];
+      }
+    },
+    onChange(url) {
+      window.open(url)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-search {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  .el-select {
+    width: 50%;
+  }
+  .el-input__inner  {
+    border: 1px solid #dfe1e5;
+    box-shadow: none;
+    background: #fff;
+
+  }
+  /deep/ .el-select .el-input .el-input__inner {
+    border-radius: 30px;
+  }
+
+  /deep/ .el-select .el-input.is-focus .el-input__inner {
+    border-color: #dfe1e5;
+    box-shadow: 0 0 20px rgba(#000, .1);
+  }
+}
+</style>

geekape-nav-main/pages/index.vue

@@ -11,9 +11,10 @@
         @showPopup="showPopup = true"
         :isCollapse="isCollapse"
       />
+      <affiche />
+      <app-search />
 
       <section class="main" v-loading="loading">
-        <affiche />
         <div class="website-wrapper" v-for="item in data" :key="item.name">
           <p class="website-title" :id="item._id">{{ item.name }}</p>
           <WebsiteList :list="item.list" />
@@ -37,8 +38,10 @@ import AddNavPopup from "~/components/AddNavPopup";
 import Affiche from "~/components/Affiche";
 
 import api from "~/api";
+import AppSearch from "../components/AppSearch";
 export default {
   components: {
+    AppSearch,
     Affiche,
     AppNavList,
     AddNavPopup,

geekape-nav-main/pages/nav/_id.vue

@@ -64,7 +64,7 @@
               </div>
               <div class="app-card-content">
                 <el-row :gutter="10">
-                  <el-col span="12" v-for="item in randomNavList">
+                  <el-col span="12" v-for="item in randomNavList" :key="item._id">
                     <a class="nav-block" :href="item.href" target="_blank">
                       <img :src="item.logo" alt="" class="nav-logo">
                       <h4 class="nav-name">{{item.name}}</h4>

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

@@ -7,7 +7,7 @@ export default class NavController extends Controller {
     const { ctx } = this
     const { request, model } = ctx
     try {
-      let { pageSize = 10, pageNumber = 1, status = 0, categoryId } = request.query
+      let { pageSize = 10, pageNumber = 1, status = 0, categoryId, name } = request.query
       pageSize = Number(pageSize)
       pageNumber = Number(pageNumber)
       const skipNumber = pageSize * pageNumber - pageSize
@@ -28,6 +28,12 @@ export default class NavController extends Controller {
           $eq: categoryId
         }
       }
+      if (name) {
+        let reg = new RegExp(name,'i');
+        findParam.name = {
+          $regex: reg
+        }
+      }
 
       const [resData, total] = await Promise.all([
         model.Nav.find(findParam).skip(skipNumber).limit(pageSize).sort({_id: -1}),
@@ -137,7 +143,15 @@ export default class NavController extends Controller {
 
   async get() {
     const { ctx } = this
-    const res = await ctx.service.common.get(ctx.query.id, 'Nav');
+    const { id, keyword } = ctx.query
+
+    let res
+
+    if (id) {
+      res = await ctx.service.common.get(ctx.query.id, 'Nav');
+    } else if(keyword) {
+      res = await ctx.service.nav.findName(keyword);
+    }
     this.success(res)
   }
 

geekape-nav-server/app/service/Common.ts

@@ -17,17 +17,19 @@ export default class CommonService extends Service {
     return res;
   }
   async get(id, modelName) {
-    console.log(this.ctx.model);
     const res = await this.ctx.model[modelName].findOne({ _id: id });
     return res;
   }
   async getList(modelName) {
-    console.log(this.ctx.model);
     const res = await this.ctx.model[modelName].find({});
     return res;
   }
   async getRandomData(randomNumber: number = 10, modelName) {
     const res = await this.ctx.model[modelName].aggregate( [ { $sample: { size: randomNumber } } ] );
     return res;
   }
+  async find(findObj, modelName) {
+    const res = await this.ctx.model[modelName].find(findObj);
+    return res;
+  }
 }

geekape-nav-server/app/service/Nav.ts

@@ -2,7 +2,9 @@ import { Service } from 'egg';
 
 
 export default class NavService extends Service {
-  public async sayHi(name: string) {
-    return `hi, ${name}`;
+  async findName(keyword) {
+    let reg = new RegExp(keyword,'i');
+    const res = await this.ctx.model.Nav.find({name: { $regex: reg }})
+    return res
   }
 }