Comment implémenter une conception de page de type dictionnaire Youdao dans Vue ?

Vue est un framework JavaScript très populaire pour créer des applications Web modernes et performantes. Dans Vue, l'utilisation du développement basé sur des composants pour créer des pages rend très pratique la mise en œuvre de diverses conceptions d'interface utilisateur complexes. Cet article explique comment utiliser Vue pour implémenter une conception de page similaire au dictionnaire Youdao.

1. Conception de page

Avant de commencer la mise en œuvre de Vue, jetons un coup d'œil à la conception de page de l'imitation du dictionnaire Youdao. La conception est divisée en trois parties principales : la barre de navigation supérieure, le champ de recherche et la liste des résultats de recherche.

Barre de navigation supérieure : Elle se compose d'un logo et de deux liens de navigation. On peut cliquer sur le logo pour revenir à la page d'accueil. Les liens de navigation incluent généralement « Accueil » et « Traduction ».

Boîte de recherche : comprend une zone de saisie et un bouton de recherche. Les utilisateurs peuvent saisir le mot ou l'expression qu'ils souhaitent interroger dans la zone de saisie et cliquer sur le bouton de recherche pour interroger.

Liste des résultats de recherche : les résultats de la requête sont présentés sous forme de liste et chaque résultat de la requête comprend la définition et des exemples de phrases du mot ou de l'expression.

2. Division des composants

Selon la conception de la page, la page entière peut être divisée en trois composants : un composant de barre de navigation, un composant de champ de recherche et un composant de résultat de recherche.

Composant de la barre de navigation : principalement responsable du style et de la logique de la barre de navigation supérieure.

Composant du champ de recherche : principalement responsable du style et de la logique du champ de recherche.

Composant de résultat de recherche : principalement responsable de l'affichage du style et de la logique des résultats de la requête.

3. Implémentation des composants

1. Composant de barre de navigation

Tout d'abord, il doit être dans Vue App.vue Présentation du composant de barre de navigation.

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  name: 'App',
  components: {
    NavBar
  }
}
</script>

<style>
/* 全局样式 */
</style>

Ensuite, créez le composant NavBar.vue et définissez le style et la logique de la barre de navigation.

<template>
  <div id="nav-bar">
    <div class="nav-left">
      <img src="./assets/logo.png" alt="logo" @click="backToHome">
      <div class="nav-link" @click="$router.push('/')">首页</div>
      <div class="nav-link" @click="$router.push('/translate')">翻译</div>
    </div>
    <div class="nav-right">
      <!-- 登录按钮等右侧组件 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  methods: {
    backToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style>
/* 导航栏样式 */
</style>

2. Composant de zone de recherche

Le composant de zone de recherche contient une zone de saisie et un bouton de recherche, et l'utilisateur saisit le mot à interroger dans la zone de saisie ou la phrase, cliquez sur le bouton de recherche pour effectuer une requête. Semblable au composant de barre de navigation, introduisez d’abord le composant de champ de recherche dans App.vue.

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <search-box></search-box>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox
  }
}
</script>

<style>
/* 全局样式 */
</style>

Ensuite, créez le composant SearchBox.vue et définissez le style et la logique du champ de recherche.

<template>
  <div id="search-box">
    <input type="text" class="search-input" v-model="searchWord">
    <button class="search-btn" @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  data() {
    return {
      searchWord: ''
    }
  },
  methods: {
    search() {
      // 跳转到搜索结果页面，将searchWord作为查询参数
      this.$router.push({path: '/search', query: {word: this.searchWord}})
    }
  }
}
</script>

<style>
/* 搜索框样式 */
</style>

3. Composant de résultat de recherche

Le composant de résultat de recherche est principalement responsable de l'affichage du style et de la logique des résultats de requête. Introduisez d’abord le composant de résultat de recherche dans App.vue.

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <search-box></search-box>
    <search-result v-if="$route.path === '/search'"></search-result>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'
import SearchResult from './components/SearchResult.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox,
    SearchResult
  }
}
</script>

<style>
/* 全局样式 */
</style>

Ensuite, créez le composant SearchResult.vue pour définir le style et la logique des résultats de recherche. Obtenez le mot du paramètre de requête dans le hook de cycle créé et obtenez les résultats de la requête en appelant l'API externe.

<template>
  <div id="search-result">
    <div v-if="resultLoading" class="result-loading">正在查询...</div>
    <ul v-else class="result-list">
      <li v-for="(item, index) in resultList" :key="index">
        <h3 class="result-word">{{item.word}}</h3>
        <p class="result-translation">{{item.translation}}</p>
        <p class="result-example">{{item.example}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SearchResult',
  data() {
    return {
      resultLoading: true,
      resultList: []
    }
  },
  created() {
    const query = this.$route.query
    if (query.word) {
      // 调用API查询结果
      this.resultLoading = false
      this.resultList = [...]
    }
  }
}
</script>

<style>
/* 搜索结果样式 */
</style>

Ici, nous ne présentons que brièvement la méthode d'implémentation du composant. Dans le développement réel, il doit être ajusté et amélioré en fonction des besoins spécifiques.

4. Résumé

La méthode de développement basée sur les composants de Vue est très flexible et peut facilement mettre en œuvre diverses conceptions d'interface utilisateur complexes. Cet article explique comment utiliser Vue pour implémenter une application de recherche de haute qualité en imitant la conception des pages du dictionnaire Youdao. En plus des trois composants ci-dessus, des fonctions telles que des enregistrements historiques et des manuels de vocabulaire peuvent également être ajoutées pour améliorer l'expérience utilisateur. J'espère que cet article sera utile aux lecteurs qui découvrent Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!