制作web端的图片搜索站点（看冰冰）

vue2制作图片搜索引擎

• • 前言
  • 预览
  • 背景
  • • 技术选型
    • 思路
  • ui框架
  • • 结束
  • 结束

前言

大家好，我是yma16，本文分享制作web端的图片搜索站点。
antdeisgnvue image用法
代码嵌入：

<template><a-image:width="200"src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>

预览

发布链接：http://yongma16.xyz/emoji/index/
pc端

手机端

github地址：点击传送

例：搜索央视主持人王冰冰则出现冰冰的图片（可选择缩放）

背景

有时候聊天，斗图找不到图片以级想欣赏精致的五官和风景放松心情，同时近期又在使用vue3+antd，所以想制作一个图片搜索引擎的站点。

技术选型

前端：vue3+antd+axios
后端：django的爬虫制作接口（模拟百度搜索图片返回搜索结果的json数据）

思路

前端：
目录结构

trickers前端项目           
├─public
│      favicon.ico
│      index.html
│      
└─src│  App.vue│  main.js│  tricher.txt│  ├─assets│      background.png│      happy.gif│      ├─components│      Home.vue│      ├─emoji│      Emoji.vue│      └─servicesgetEmojiApi.js

后端：

ui框架

ant-design-vue

主要代码块：

<template><div class="emoji"><a-spin :spinning="spinning" :delay="delay" class="home-emoji-loading"><div class="emoji-img"><a-card :title="searchTitle ? '关键词：' + searchTitle : '欢迎搜索图片与表情包'"><template v-for="(item, index) in showEmoji.showImg" :key="index"><!-- <a-card-grid class="grid-img-class"> --><a-image :src="item" class="card-img-image" /><!-- </a-card-grid> --></template></a-card></div><!-- 分页 --><div class="emoji-page"><a-paginationv-model:current="pageData.crurentPage":page-size="pageData.splitNum"@change="gotoCurrentPage(pageData.crurentPage, pageData.total)":total="pageData.total":show-total="(total) => `总共 ${total} 记录`"/></div></a-spin></div>
</template><script>
import { reactive, onMounted, toRefs, watch } from "vue";
export default {name: "Emoji",props: {spinning: Boolean,delay: Number,emojiData: Array,emojiTotal: Number,searchWords: String,searchTitle: String,},setup(props) {const { emojiData } = toRefs(props);const cardTitle = reactive({title: "搜索结果",});const pageData = reactive({crurentPage: 1,total: emojiData.value.length,splitNum: 15,});// 展示数据const showEmoji = reactive({showImg: [],});// 制作一个分页，一页有十张图片function pageSplit() {if (emojiData && emojiData !== []) {// 存在pageData.crurentPage = 1;showEmoji.showImg = [];pageData.total = props.emojiTotal;if (props.pageTotal <= pageData.splitNum) {// 开始分页showEmoji.showImg = emojiData;} else {for (let imgLoc = 0; imgLoc < pageData.splitNum; ++imgLoc) {showEmoji.showImg.push(props.emojiData[imgLoc]);}}}}onMounted(() => {// 分页pageSplit();});watch(() => {props.emojiData;},() => {console.log(props.searchTitle, "emoji组件渲染图片");pageSplit();},{immediate: false,deep: true,});//点击分页跳转watch(() => {pageData;},() => {pageSplit();const page = (pageData.crurentPage = 1);const pageSize = (pageData.total = props.emojiTotal);gotoCurrentPage(page, pageSize);},{immediate: true,deep: true,});function gotoCurrentPage(page, pageSize) {console.log("翻页", page);let length = pageSize;showEmoji.showImg = [];for (let imgLoc = pageData.splitNum * (page - 1);imgLoc < pageData.splitNum * page && imgLoc < length;++imgLoc) {//showEmoji.showImg.push(props.emojiData[imgLoc]);}}return {...props,cardTitle,showEmoji,pageData,gotoCurrentPage,};},
};
</script><style scoped>
.emoji {position: relative;display: block;left: 50%;transform: translateX(-50%);width: 80%;overflow: auto;box-sizing: border-box;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.18);
}
.emoji-img {position: relative;width: 100%;
}
.emoji-page {margin-top: 5px;text-align: right;
}
.grid-img-class {width: 20%;height: 200px;text-align: center;overflow: auto;align-content: center;justify-items: center;
}.grid-img-class::-webkit-scrollbar-track {border-radius: 2px;background: #b46868;
}/* 滚动条的滑轨背景颜色 */.grid-img-class::-webkit-scrollbar-thumb {height: 5px;border-radius: 2px;background: rgba(17, 227, 255, 0.2);
}/* 滑块颜色 */.grid-img-class::-webkit-scrollbar-button {border-radius: 2px;background: #ffa581;
}/* 滑轨两头的监听按钮颜色 */.grid-img-class::-webkit-scrollbar-corner {border-radius: 2px;background: rgb(81, 255, 226);
}/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
.card-img-image {position: relative;height: 110px;
}@media only screen and (max-width: 600px) {.grid-img-class {width: 100%;}.emoji {overflow: auto;}.card-img-image {height: auto;}
}
</style>

结束

感谢阅读！

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！