简介

完整项目资源链接：https://download.csdn.net/download/m0_46573428/87796553

项目详细信息请看：https://blog.csdn.net/m0_46573428/article/details/130071302

词条检索的部分，在搜索框中输入实体名称，即可检索数据库中的与输入的名称相似度最高的实体的简介、图片以及属性。主要的工作量在前端的部分，后端检索并提供实体的数据。

功能设计：在搜索框输入实体名称，点击搜索，后台返回相关数据。

注：由于J事数据的敏感性，特做此处理。

主要代码

前端

Html

这段代码是一个Vue.js模板(template)，负责渲染一个搜索框和搜索结果的页面视图。

具体而言，该模板包含以下内容：

1. 一个带有样式的<div>元素，用于布局搜索框和搜索结果，其中包括：

  • searchBar类的子<div>元素，用于包含输入框、放大镜图标和Logo，点击图标后会触发detailSearch()函数。
  • 一个绑定到query属性上的<input>元素，用于接受用户输入查询关键词。
  • 一个<img>元素，用于展示网站的Logo。
  • bg类的子<div>元素，用于包含实体的详细信息。

2. 一个条件渲染指令v-if，判断query_ans对象是否为空，如果为空则显示“请输入关键词进行搜索”提示；否则，渲染搜索结果。

3. 如果query_ans不为空，则在容器中呈现：

  • 实体名称与描述信息<h1>元素和<p>元素。
  • 实体图片元素<img>，使用:src属性绑定到处理后的图片路径。
  • 实体性能表格信息。使用v-for和<p>元素循环展示每个参数的值，并使用key属性指示唯一性。
  <div style="padding-top: 5%; width: 70%; margin-left: 205px">
    <!-- 搜索框 -->
    <div class="searchBar">
      <!-- 放大镜logo，点击后触发函数 -->
      <img
        @click="detailSearch()"
        class="img1"
        src="../assets/scope.svg"
        alt="scope"
      />
      <input v-model="query" type="text" placeholder="J事装备搜索" />
      <img class="img2" src="../assets/logo.png" alt="logo" />
    </div>
    <!-- 主体 -->
    <div class="bg">
      <!-- 如果变量query_ans为空，则打印“请输入关键词进行搜索” -->
      <div v-if="Object.keys(query_ans).length <= 0" class="TiXing">
        请输入关键词进行搜索
      </div>
      <!-- 如果变量query_ans不为空，则渲染请求到的该实体的数据 -->
      <div v-if="Object.keys(query_ans).length > 0">
        <!-- 实体名称 -->
        <h1>{{ query_ans.名称 }}</h1>

        <div style="width: 94%; float: left">
          <p>{{ query_ans.简介 }}</p>
          <img
            :src="`../../static/pic/${query_ans.pic_path}`"
            alt="图片暂无收录"
          />
        </div>
        <div style="width: 94%; float: left">
          <h1 style="margin-top: 40px; font-size: 35px">性能</h1>
          <div class="biaoGe">
            <p v-for="(item, key, index) in query_ans2" :key="index">
              <span>{{ key }}：{{ item }}</span>
            </p>

            <div style="height: 60px; width: 100%; float: left"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

 Js

这段代码是一个Vue.js组件（默认导出），顶部定义了该组件的名称为Search，其中包含以下部分：

  1. 组件的属性(props)为空对象。
  2. 在data()函数中定义组件的局部数据对象，包括查询关键词(query)、提示信息(query_is_null)和查询结果(query_ans、query_ans2)。
  3. 定义一个名为detailSearch()的方法，其行为包括：
  • 使用axios.get()函数向后端请求实体的详细数据，将查询关键词作为查询参数添加到URL中。
  • 请求成功后，将返回的数据分别存储到query_ans和query_ans2两个变量中，然后进行不必要的属性对象删除处理(delete)，并在控制台打印输出两个变量。
  • 如果简介为空，则将肖像改为"暂无简介"。
export default {
  name: "Search",
  props: {},
  data() {
    return {
      query: "",
      query_is_null: "",
      query_ans: {},
      query_ans2: {},
    };
  },
  methods: {
    detailSearch: function () {
    // 向后端请求实体的详细数据：简介、图片、属性
      this.axios
        .get("http://localhost:8000/DetailSearch?aim=" + this.query)
        .then((res) => {
          this.query_ans = res.data;

          console.log(this.query_ans);

          if (this.query_ans.简介 == "") {
            this.query_ans.简介 = "暂无简介";
          }
        })
        .catch((error) => {
          alert("DetailSearch failed！");
        });
      this.axios
        .get("http://localhost:8000/DetailSearch?aim=" + this.query)
        .then((res) => {
          this.query_ans2 = res.data;
          delete this.query_ans2._id;
          delete this.query_ans2.简介;
          delete this.query_ans2.图片;
          delete this.query_ans2.pic_path;
          console.log(this.query_ans2);
        })
        .catch((error) => {
          alert("DetailSearch failed！");
        });
    },
  },
};

Css

* {
  color: white;
  font-size: 20px;
}

.TiXing {
  line-height: 500px;
  text-align: center;
  font-size: 50px;
  margin-left: -50px;
}

.bg {
  width: 100%;
  background-color: #8cae81;
  opacity: 0.8;
  color: white;
  padding-left: 60px;
  padding-top: 50px;
  border-radius: 20px;
  float: left;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 50px;
  box-shadow: rgb(0 0 0 / 20%) 0px 3px 10px;
}
h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.searchBar {
  float: right;
  margin-top: 30px;
  /*margin-right: 130px;*/
}

.img2 {
  width: 30px;
  float: right;
  margin-right: 15px;
  margin-top: 2px;
}

.img1 {
  width: 20px;
  float: right;
  margin-left: 10px;
  margin-top: 5px;
}

.img1 :hover {
  cursor: pointer;
}

.searchBar > input {
  width: 250px;
  float: right;
  border: 1px #ddd solid;
  padding: 5px 10px 5px 10px;
  border-radius: 10px;
  outline: none;
  font-size: 16px;
  color: #777;
}

.bg > div > div > p {
  margin-top: 30px;
  width: 550px;
  float: left;
  line-height: 30px;
}

.bg > div > div > img {
  margin-top: 30px;
  width: 350px;
  float: right;
}
.biaoGe {
  width: 100%;
  margin-top: 30px;
}
.biaoGe > p {
  float: left;
  border-bottom: #ddd dotted 3px;
  width: 50%;
  line-height: 50px;
}

.biaoGe > p > span {
  width: 100%;
  float: left;
}

后端

所有实体的图片都预先存在了【..\code\Vue3\static\pic】中。

变量【openkgdata_root】是源数据的路径，该数据是JSON格式。

这段代码是一个名为DetailSearch(node_name)的Python函数，其作用是：

  1. 根据输入的搜索目标名称，在数据库中匹配相似度最高的实体。
  2. 输出所有匹配到的实体信息以及对应图片的路径。

具体而言，该函数包含以下内容：

  1. 通过打开含有全部节点数据的JSON格式文件，并逐行读入其中的每一组数据，传递给变量data_json。
  2. 对于每一个实体数据，使用string_similar()函数进行名称相似度比对，得到相似度评分（similar_ratio）。
  3. 如果相似度评分超过了0.5并且高于之前的匹配值，则将该实体存储到变量possible_node中，同时更新相似度匹配值tmp。
  4. 对于所有匹配到的实体，在实体信息中添加名为pic_path的属性，将其值设为实体名字加上'.jpg'的字符串，并将其中的'/'字符替换为'-'字符（原因是由于图片路径导致）。
  5. 如果没有匹配到任何实体，则返回“该词条暂未收录”提示信息；否则，返回所有匹配到的实体信息和对应图片的路径。同时在控制台输出“DetailSearch成功”的信息，表示函数执行完毕。
# 匹配搜索目标和数据库，进行名称相似度比对，输出相似度实体最高的所有信息
def DetailSearch(node_name):
    """
    作用：匹配搜索目标和数据库，进行名称相似度比对，输出相似度实体最高的所有信息
    输入：搜索目标名称
    输出：数据库中匹配到的实体的所有信息与对应图片的路径
    """
    possible_node = {}
    tmp = 0
    for data in open(openkgdata_root, encoding='utf-8'):
        data_json = json.loads(data)
        similar_ratio = string_similar(node_name, data_json['名称'])
        if similar_ratio >= 0.5 and similar_ratio > tmp:
            tmp = similar_ratio
            # 替换名称的符号是因为在爬取图片时因为路径问题所以将名称中的‘/’全部替换为‘-’，所以这里也做相应的改动
            data_json['pic_path'] = data_json['名称'].replace('/', '-') + '.jpg'
            possible_node = data_json
    if len(possible_node) == 0:
        print('DetailSearch', '成功')
        return '该词条暂未收录'
    else:
        print('DetailSearch', '成功')
        return possible_node

openkgdata_root 数据部分展示

{ "_id" : { "oid" : "5cc9308f831b973d657f0f4e" }, "名称" : "XX战机", "产国" : "中国", "图片" : "http://XXX.jpg", "简介" : "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "首飞时间" : "XXX", "研发单位" : "XXX", "气动布局" : "XXX", "发动机数量" : "XXX", "飞行速度" : "XXX", "关注度" : "XXX", "乘员" : "XXX", "机长" : "XXX", "翼展" : "XXX", "大类" : "XXX", "类型" : "XXX" } 
{ "_id" : { "oid" : "5cc9308f831b973d657f0f4f" }, "名称" : "XX攻击机", "产国" : "中国", "图片" : "http://XXX.jpg", "简介" : "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "首飞时间" : "XXX", "服役时间" : "XXX", "研发单位" : "XXX", "生产单位" : "XXX", "气动布局" : "XXX", "发动机数量" : "XXX", "飞行速度" : "XXX", "关注度" : "XXX", "乘员" : "XXX", "机长" : "XXX", "大类" : "XXX", "类型" : "XXX" }

# 知识图谱 # fastapi
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

大数据毕业设计选题推荐-基于大数据的农作物产量数据分析与可视化系统-Hadoop-Spark-数据可视化-BigData

avatar 魔乐社区
cover

大模型推理适配实战：手把手带你完成vLLM Ascend迁移实操

avatar 魔乐社区
cover

基于python大数据的汽车数据分析系统设计与实现

avatar 魔乐社区