使用Vue制作小说网站

日常练习作业记录 

要求：

1、实现搜索功能，模糊查询

2、使用数据接口将数据渲染到页面

3、网站的功能模块不能低于3个.

效果图：

 

 代码：

<template>
  <div class="container">
    <div class="top">
      <!-- logo -->
   <div>
    <img src="	https://rcode.zongheng.com/v2018/images/logo_main.png" alt="" style="width: 223px;height: 65px;">
   </div>


    <!-- 顶部搜索区 -->
    <div class="search">
      <input type="text" placeholder="请输入小说关键字" v-model.trim="keyWord" />
      <button @click="search"><svg t="1687076593163" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2465" width="16" height="16"><path d="M949.28 899.568L760.992 711.264a392.88 392.88 0 0 0 91.088-252.128C852.08 241.264 675.456 64.64 457.6 64.64 239.728 64.64 63.104 241.28 63.104 459.136c0 217.856 176.624 394.48 394.496 394.48a392.912 392.912 0 0 0 254.368-92.96l188.112 188.112c6.8 6.8 15.696 10.192 24.608 10.192a34.8 34.8 0 0 0 24.608-59.392zM457.6 784.032a323.904 323.904 0 0 1-229.744-95.168 323.904 323.904 0 0 1-95.168-229.744 323.904 323.904 0 0 1 95.168-229.744A323.904 323.904 0 0 1 457.6 134.24a323.904 323.904 0 0 1 229.744 95.168 323.92 323.92 0 0 1 95.152 229.728 323.904 323.904 0 0 1-95.168 229.744A323.904 323.904 0 0 1 457.6 784.032z" fill="#ffffff" p-id="2466"></path></svg></button>
    </div>

     <!-- 登录界面 -->
     
     <router-link class="login" :to="{path:'/login'}">登录</router-link>
    </div>
   

    <!-- 搜索结果显示 -->
    <div v-if="storyList.length!==0">
      <h3>搜索结果</h3>
      <hr>
      <div class="story_box">
        <div class="item" v-for="item in storyList" :key="item" @click="goChapter(item.fictionId)">
          <!-- 左侧图片 -->
          <img :src="item.cover" alt="">
          <!-- 右侧介绍 -->
          <div class="item_right">
            <!-- 标题 -->
            <div class="title">{{ item.title }}</div>
            <!-- 内容 -->
            <div class="content">{{ item.descs }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 没有找到内容 -->
    <div v-else  style="margin-top:30px;" class="no_content">
      <div>{{ title }}</div>
      暂无更新内容,试试输入关键词吧！
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import instance from '@/api/request.js' 

const router = useRouter()
const keyWord = ref('')
const storyList = ref([])
const title = ref('')
const route = useRoute()

// 搜索
const search = async () => {
  const res = await instance.get('/fiction/search/title/' + `${keyWord.value}`)
  storyList.value = res.data.data
  // storyList.value.title = res.data.data.title

}
// 目录
const goChapter = fictionId => {
  router.push({
    path: '/chapter',
    query: {
      fictionId
    }
  })

}
</script>

<style scoped>
hr{
  border: 0.8px solid #fff;
}
/* 顶部部分 */
.top{
  display: flex;
  justify-content: space-between;
  margin-top:20px ;
}
.login{
  margin-top:40px ;
  text-decoration: none;
  color: #fff;
}
/* 没有内容的样式 */
.no_content{
  background: #fff;
  height: 70%;
  color: #727171;
}
/* 顶部搜索区 */
.search{
 text-align: center;
 margin-top:40px ;
}
/* input样式 */
input{
  border-top:4px solid #fff;
  border-bottom:1px solid #fff;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
  outline: none;
  width: 200px;
}
/* 按钮样式 */
button{
  background: rgb(241, 109, 0);
  border:0;
  width: 30px;
}
button>svg{
  line-height: 16px;
}
.container {
  width: 70%;
  margin: 0 auto;
}
.story_box {
  display: flex;
  flex-wrap: wrap;
}
.story_box .item {
  display: flex;
  justify-content: space-between;
  width: 25%;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 5px;
  cursor: pointer;
}
.title {
  text-align: center;
}
.content {
  overflow: hidden;
  /* text-overflow: ellipsis; */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* padding-left: 10px; */

  margin:10px;
  font-size:8px;
}
.story_box .item img {
  width: 50%;
  height: 150px;
  object-fit: cover;
}
</style>