2021-07-04

山东大学暑假项目实训（三）

因为一些想法然后我重新分配到了项目的前端部分，想要试试。
任务是尝试做一个类库的搜索界面

<template>
  <div id="example">
    <input type="text" v-model="searchData" placeholder="请输入文字" />
    <el-divider></el-divider>
      <div v-for="(item,index) in Newitems" :key="index">
        <img :src="item.path" />
      </div>
      
  </div>
</template>
<script>
export default {
  name: "Cluster2",
  data() {
    return {
      searchData: "",
      items: [
        {name:"龙山8-1",path:require("@/assets/龙山8-1.png")},
        {name:"龙山8-2",path:require("@/assets/龙山8-2.png")},
        {name:"龙山8-3",path:require("@/assets/龙山8-3.png")},
        {name:"龙山8-4",path:require("@/assets/龙山8-4.png")},
        {name:"龙山8-5",path:require("@/assets/龙山8-5.png")}
        
      ]
    };
  },
  computed: {
    Newitems() {
      var _this = this;
      var Newitems = [];
      _this.items.map(function(item) {
        if (
          item.name.search(_this.searchData) != -1
        ) {
          Newitems.push(item);
        }
      });
      return Newitems;
    }
  }
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
input {
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-indent: 5px;
}
ul li {
  list-style: none;
}
ul li span {
  margin: 0 30px;
  line-height: 30px;
}
img {
  height: 100px;
  width: 100px;
  float:left;
}
</style>

一个简单的搜索框，然后根据搜索框中的搜索字简单的匹配库中图片的名字，进行展示。
只不过是作为前端的初步设计，那么图片库也并没有连接数据库，在items中定义了图片的名字和路径，这里是使用的项目下的assets文件夹下的图片，用的是相对路径。

怎么说呢，下方的图片展示区域如果加一点边缘，下方显示其名字的话，感觉会更加好。得知明确的需求后改的时间太短了，并没有得到团队同学们的认可

然后便是两天尝试前端的深刻痛彻觉悟，原先课程前端知识我完全不够，例如html，css和javaweb这些，同时还不是很新。学习了几天vue框架，然后是gitee的多人合作模式的见识，让我感觉到我现在触及的东西都过于的陈旧了。