Bagaimana untuk menggunakan Vue untuk melaksanakan halaman carian seperti JD.com?-View.js-php.cn

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular hari ini. Ia boleh membantu kami membina antara muka pengguna yang cekap dan cantik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan halaman carian seperti JD.com.

Pertama, kita perlu menyediakan alatan dan teknologi berikut:

Vue CLI: digunakan untuk memulakan projek Vue dengan cepat.
axios: digunakan untuk menghantar permintaan HTTP dan memproses respons.
Vuex: digunakan untuk mengurus keadaan aplikasi.
UI Elemen: digunakan untuk menyediakan pelbagai komponen UI.

Initialize Vue project

Menggunakan Vue CLI untuk memulakan projek baharu adalah sangat mudah, cuma laksanakan arahan berikut pada baris arahan:

vue create jd-search

Salin selepas log masuk

Arahan ini akan mencipta fail bernamadalam direktori semasa jd -cariprojek dan pasang secara automatik kebergantungan yang diperlukan.jd-search的项目，并自动安装所需的依赖项。

添加 Element UI

安装 Element UI 非常简单，只需要在命令行中执行以下命令即可：

npm install element-ui

Salin selepas log masuk

安装完成后，在main.js中引入 Element UI：

import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

Salin selepas log masuk

创建搜索组件

在src/components目录下创建一个名为Search.vue的组件。这个组件包含一个输入框和一个搜索按钮，代码如下：

Salin selepas log masuk

这个组件包含一个keyword数据属性，用于保存用户输入的关键词。当用户点击搜索按钮或按下回车键时，会触发search方法，将当前的keyword值作为参数传递给父组件。

创建商品列表组件

在src/components目录下创建一个名为ProductList.vue的组件。这个组件会显示搜索结果的商品列表，代码如下：

Salin selepas log masuk

这个组件接收一个名为products的属性，用于显示搜索结果。它使用 Element UI 的el-card和el-image组件显示商品列表，使用 CSS Grid 实现自适应布局。

创建状态管理模块

使用 Vuex 管理应用程序的状态非常方便。在src/store目录下创建一个名为search.js的模块。这个模块包含以下状态、操作和 getters：

const state = { keyword: '', products: [], }; const mutations = { updateKeyword(state, keyword) { state.keyword = keyword; }, updateProducts(state, products) { state.products = products; }, }; const actions = { async search({ commit }, keyword) { const response = await this.$axios.get('/api/search', { params: { keyword }, }); commit('updateProducts', response.data); }, }; const getters = {}; export default { namespaced: true, state, mutations, actions, getters, };

Salin selepas log masuk

这个模块包含一个名为search的异步操作，用于发送搜索请求并更新搜索结果。它还包含一个名为keyword的状态和一个名为products的状态，用于保存用户输入的关键词和搜索结果。

创建搜索页面

创建一个名为SearchPage.vue的页面，它会包含Search和ProductList组件，并通过 Vuex 管理它们之间的交互。代码如下：

Salin selepas log masuk

这个页面包含Search和ProductList组件，并使用 Vuex 的mapState和mapActions映射products属性和search操作。当用户输入关键词并点击搜索按钮或按下回车键时，会触发search操作，从后端 API 获取搜索结果，并更新 Vuex 中的products状态。

发送搜索请求

在src/main.js中配置 Axios，代码如下：

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) axios.defaults.baseURL = 'http://localhost:3000'

Salin selepas log masuk

这个配置使得我们可以在应用程序中使用$axios对象发送 HTTP 请求。现在，我们可以在search

main.js: rrreeeBuat komponen carianBuat fail bernama Search.vuedalam
        src/componentsdirektori > komponen. Komponen ini mengandungi kotak input dan butang carian Kod adalah seperti berikut: rrreeeKomponen ini mengandungi atribut data
        
         kata kunci
        
       , yang digunakan untuk menyimpan kata kunci yang dimasukkan oleh pengguna. Apabila pengguna mengklik butang carian atau menekan kekunci Enter, kaedah
       searchakan dicetuskan, menghantar nilai
       keywordsemasa sebagai parameter kepada komponen induk.
       
        Buat komponen senarai produkBuat komponen bernama
        ProductList.vuedalam direktori
        src/components. Komponen ini akan memaparkan senarai produk hasil carian Kod adalah seperti berikut: rrreeeKomponen ini menerima atribut bernama
        productsuntuk memaparkan hasil carian. Ia menggunakan komponen
        el-carddan
        el-imageUI untuk memaparkan senarai produk dan menggunakan Grid CSS untuk melaksanakan reka letak penyesuaian.
        
         Buat modul pengurusan negeriSangat mudah untuk menggunakan Vuex untuk mengurus status permohonan anda. Buat modul bernama
         search.jsdalam direktori
         src/store. Modul ini mengandungi keadaan, operasi dan getter berikut: rrreee Modul ini mengandungi operasi tak segerak yang dipanggil
         searchyang menghantar permintaan carian dan mengemas kini hasil carian. Ia juga mengandungi keadaan bernama
         kata kuncidan keadaan bernama
         productsuntuk menyimpan kata kunci dan hasil carian yang dimasukkan oleh pengguna.
         
          Buat halaman carianBuat halaman bernama
          SearchPage.vue, yang akan mengandungi
          Caridan
          ProductList / kod> komponen dan menguruskan interaksi antara mereka melalui Vuex. Kodnya adalah seperti berikut: rrreeeHalaman ini mengandungi komponen Caridan
          ProductListserta menggunakan
          mapStatedan
          mapActionsVuex. > memetakan atribut
          productsdan operasi
          search. Apabila pengguna memasukkan kata kunci dan mengklik butang carian atau menekan kekunci Enter, operasi
          searchakan dicetuskan, hasil carian akan diperoleh daripada API bahagian belakang dan
          products dalam Vuex akan dikemas kini. Hantar permintaan carianKonfigurasikan Axios dalam src/main.js, kodnya adalah seperti berikut: rrreeeKonfigurasi ini membolehkan kami menggunakannya dalam application$axios
         menghantar permintaan HTTP. Kini kami boleh menghantar permintaan carian dalam tindakan
         search. Pada ketika ini, kami telah menyelesaikan pelaksanaan halaman carian seperti JD.com. Halaman ini menggunakan teknologi seperti Vue, UI Elemen, Axios dan Vuex serta mengikuti amalan terbaik untuk aplikasi satu halaman moden.
        

       

       Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan halaman carian seperti JD.com?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!