构建实时句子搜索应用 | Vue.js、JSON、网页开发

介绍

在这个项目中，你将学习如何构建一个 Web 应用程序，该应用程序允许用户实时搜索并显示文学作品中的优美语句。该应用程序将从 JSON 文件中获取数据，并使用 Vue.js 实现搜索功能并显示结果。

👀 预览

Web 应用搜索界面预览

实时搜索结果显示

🎯 任务

在这个项目中，你将学习：

如何设置项目并理解提供的文件和目录
如何实现数据请求以从data.json文件中获取数据
如何实现实时搜索功能以显示匹配的语句
如何通过对网页进行样式设计为项目添加一些收尾工作

🏆 成果

完成这个项目后，你将能够：

使用 HTML、CSS 和 JavaScript 设置一个 Web 开发项目
使用 Vue.js 构建一个响应式且交互式的 Web 应用程序
从 JSON 文件中获取数据并在网页上显示
实现实时搜索功能并突出显示匹配的关键词
使用 CSS 对网页进行样式设计以改善整体外观和用户体验

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── vue.min.js

其中：

css/style.css 是样式文件。
index.html 是主页。
data.json 是项目中将会使用到的数据。
js/vue.min.js 是项目中使用的 vue2.x 版本文件。
js/axios.min.js 是 axios 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

实现数据请求

在这一步中，你将完成数据请求，以便从 data.json 文件中获取数据。

在 index.html 文件中，在 <script> 部分找到 TODO 注释。
在 data() 函数内部，添加以下代码以从 data.json 文件中获取数据：

data() {
  return {
    list: [],
    search: ""
  };
},
mounted() {
  this.getData();
},
methods: {
  async getData() {
    const res = await axios({ url: "./data.json" });
    this.list = res.data;
  }
}

这段代码设置了初始数据属性 list 和 search，然后在 mounted() 钩子中调用 getData() 方法来从 data.json 文件中获取数据。

保存 index.html 文件并刷新网页。现在你应该能看到从 data.json 文件加载的初始数据。

实现实时搜索功能

在这一步中，你将实现实时搜索功能，以便根据用户输入显示匹配的语句。

在 index.html 文件中，在 <div class="search-form"> 部分找到 TODO 注释。
将 <div class="search-form"> 元素内的内容替换为以下代码：

<input
  type="text"
  id="search"
  class="search"
  v-model="search"
  placeholder="Title Sentence Author"
/>
<ul class="suggestions">
  <li v-for="item in filterList">
    <span v-html="hightLight(item.poetry_content)" class="poet"></span>
    <span class="title">
      <span v-html="hightLight(item.title)"></span>
      -
      <span v-html="hightLight(item.author)"></span>
    </span>
  </li>
</ul>

这段代码使用 Vue.js 指令根据用户输入动态渲染匹配语句的列表。

接下来，在 mounted() 的同级添加以下代码：

mounted() {
  this.getData();
},
computed: {
  hightLight() {
    return (text) => {
      if (this.search) {
        const reg = new RegExp(this.search, "g");
        return text.replace(
          reg,
          `<span class='highlight'>${this.search}</span>`
        );
      }
      return text;
    };
  },
  filterList() {
    let { search, list } = this;
    let str = search.trim();
    if (str.length == 0) {
      return [];
    } else {
      return search
       ? list.filter(
            (item) =>
              item.title.includes(search) ||
              item.author.includes(search) ||
              item.poetry_content.includes(search)
          )
        : [];
    }
  }
},

hightLight 计算属性是一个函数，它将匹配的关键词包裹在 <span class='highlight'> 标签中。filterList 计算属性根据搜索框中的用户输入过滤语句的 list。

保存 index.html 文件并刷新网页。现在你应该能看到实时搜索功能正常工作，显示出匹配的语句并突出显示关键词。

完成后，最终页面效果如下：

图片描述

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

使用 Vue.js 进行实时句子搜索

介绍