diff --git a/package-lock.json b/package-lock.json
index 0b8b43517373b88249bbc5cdf1a00ffb3e4f60e2..9a8f5fcdc612a3a8947373a19a65821a3c36596a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "version": "0.1.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -22298,15 +22298,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
-      "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -22376,6 +22367,15 @@
         "define-properties": "^1.1.3"
       }
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
+      "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.0",
       "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-6.0.0.tgz",
@@ -23170,6 +23170,87 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.2.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
diff --git a/src/api/search.js b/src/api/search.js
new file mode 100644
index 0000000000000000000000000000000000000000..1e75cb33a2974014d9d38bb87e0d12fca8fc7ab9
--- /dev/null
+++ b/src/api/search.js
@@ -0,0 +1,13 @@
+import request from '@/util/request'
+
+export function searchByKeyword(query){
+    return request({
+        url: '/search',
+        method: 'get',
+        params:{
+            keyword: query.keyword,
+            pageNum: query.pageNum,
+            pageSize: query.pageSizeS
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 52c5cb26870bda6a6cdc65bfca254ac416394651..924bfeee21b964555c33794f301850724bc883bc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -46,6 +46,15 @@ const routes = [{
     }
   },
   {
+    name: 'search',
+    path: '/search',
+    component: () => import('@/view/Search'),
+    meta: {title: '检索'}
+  },
+  {
+      path: '*',
+      redirect: '/404',
+      hidden : true
     path: "/post/:id",
     name: "post-detail",
     component: () => import('@/view/post/Detail'),
diff --git a/src/view/Search.vue b/src/view/Search.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2014962e3b81d341d9012f139c8cdb40595b3bee
--- /dev/null
+++ b/src/view/Search.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <el-card shadow="never">
+      <div slot="header" class="clearfix">
+        检索到 <code>{{ list.length }}</code>
+        条关于 <code class="has-text-info">{{ query.keyword }}</code> 的记录
+      </div>
+      <div>
+        <article v-for="(item, index) in list" :key="index" class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`"> 
+            </figure>
+          </div>
+          <div class="media-content">
+            <div class="">
+              <p class="ellipsis is-ellipsis-1">
+                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <router-link :to="{name:'post-detail',params:{id:item.id}}">
+                    <span class="is-size-6">{{ item.title }}</span>
+                  </router-link>
+                </el-tooltip>
+              </p>
+            </div>
+            <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
+              <div class="level-left">
+                <div class="level-left">
+                  <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
+                    {{ item.alias }}
+                  </router-link>
+
+                  <span class="mr-1">
+                    发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
+                  </span>
+
+                  <span
+                    v-for="(tag, index) in item.tags"
+                    :key="index"
+                    class="tag is-hidden-mobile is-success is-light mr-1"
+                  >
+                    <router-link :to="{ name: 'tag', params: { name: tag.name } }">
+                      {{ "#" + tag.name }}
+                    </router-link>
+                  </span>
+
+                  <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
+                </div>
+              </div>
+            </nav>
+          </div>
+          <div class="media-right" />
+        </article>
+      </div>
+
+      <!--分页-->
+      <pagination
+        v-show="query.total > 0"
+        :total="query.total"
+        :page.sync="query.pageNum"
+        :limit.sync="query.pageSize"
+        @pagination="fetchList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { searchByKeyword } from '@/api/search'
+import Pagination from '@/component/Pagination'
+
+export default {
+  name: 'Search',
+  components: { Pagination },
+  watch: {
+    "$route": {
+      handler(route) {
+        this.query.keyword = route.query.key;
+        this.fetchList();
+      }
+    }
+  },
+  data() {
+    return {
+      list: [],
+      query: {
+        keyword: this.$route.query.key,
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.fetchList()
+  },
+  methods: {
+    fetchList() {
+      searchByKeyword(this.query).then(value => {
+        const { data } = value
+        this.list = data.records
+        this.query.total = data.total
+        this.query.pageSize = data.size
+        this.query.pageNum = data.current
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>