前端Vue项目：旅游App-（14）home+search：搜索按钮及其路由跳转分组数据的网络请求request数据存储store和动态显示

Posted 2023-02-16 karshey

文章目录

• • 目标
  • 过程与代码
  • • 搜索部分：
    • 搜索按钮
    • 点击搜索按钮路由跳转并传数据
    • search页面隐藏TabBar
    • 分类部分：
    • 数据请求：request、store
    • 显示数据
    • 分类的样式
  • 总代码
  • • 修改或添加的文件
    • common.css
    • router的index.js
    • service的home.js
    • store的home.js
    • home-categories.vue
    • home.vue
    • search.vue
    • App.vue
  • 参考

本项目博客总结：【前端】Vue项目：旅游App-博客总结

目标

• 搜索按钮，点击后跳转至search页面（只是跳转）
• 动态显示下面的分类，数据来自123.207.32.32:1888/api/home/categories

过程与代码

搜索部分：

搜索按钮

在common.css中设置按钮的渐变色：

/* 渐变色 */
--theme-linear-gradient:linear-gradient(90deg,#fa8c1d,#fcaf3f);

html：

<div class="searchBtn">
    开始搜索
</div>

css：

.searchBtn
    display: flex;
    justify-content: center;
    align-items: center;

    height: 38px;
    font-size: 18px;
    // 渐变色要用image
    background-image:var(--theme-linear-gradient);
    color: #fff;

    border-radius: 20px;
    margin: 20px 20px;

效果：

点击搜索按钮路由跳转并传数据

先写一个search.vue：

<template>
    <div class="search">
        <h2>search</h2>
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>

</style>

注册路由：

   path:'/search',
   component:()=>import("@/views/search/search.vue")

在按钮的地方监听点击：

<div class="searchBtn" @click="searchBtnClick()">
   开始搜索
</div>

对应js：

import  useRouter  from 'vue-router'
const router = useRouter()
// 搜索按钮跳转
function searchBtnClick() 
    router.push(
        path:'/search'
    )

到这里，点击了之后就可以跳转至search页面了。

一般来说，点击后的跳转会携带一些数据，我们这里用query属性来携带数据。

在home.vue传送数据：

// 搜索按钮跳转
function searchBtnClick() 
    router.push(
        path:'/search',
        query:
            // 因为是响应式
            startDay:startDay.value,
            endDay:endDay.value
        
    )

在search页面用$route.query显示数据：

<div class="search">
    <h2>search</h2>
    <h2> $route.query.startDay 
         $route.query.endDay </h2>
</div>

效果：

search页面隐藏TabBar

在之前的博客中我们写了两种隐藏TabBar的方法。前面用的是第二种，这里我们用第一种。

ps：两种方法都可以，工作中具体看哪种更方便就选哪种，这里只是练习。

在路由处设置meta：

    path: '/search',
    component: () => import("@/views/search/search.vue"),
    meta: 
        hideTabBar: true
    

在App.vue处增加v-if的判断：

<tab-bar v-if="!$route.meta.hideTabBar"></tab-bar>

js：引入route

import  useRoute  from 'vue-router'

const route=useRoute()

效果：可以隐藏。

分类部分：

数据请求：request、store

在本项目中已经进行了两次数据请求，因此具体步骤不再赘述。

接口：123.207.32.32:1888/api/home/categories

在service/home中：

export function getCategories() 
    // request的index导出的是一个对象
    return HYRequest.get(
        // 参数也是一个对象
        url: '/home/categories'
    )

在store/home中：

const useHomeStore = defineStore('home', 
    state: () => 
        return 
            hotSuggest: [],
            categories:[]
        
    ,
    actions: 
        // 网络请求,由于返回一个promise,要异步async await
        async fetchHotSuggest() 
            const res = await getHotSuggest()
            this.hotSuggest = res.data
            // console.log(res)
        ,
        async fetchCategories()
            const res = await getCategories()
            this.categories = res.data
        
    
)

控制台输出一下数据：

数据请求成功。

显示数据

home-categories组件：

<template>
    <div class="home-categories">
        <!-- 一般有id就让key绑定id -->
        <template v-for="(item, index) in categoriesData" :key="item.id">
            <div class="item">
                <img :src=item.pictureUrl alt="">
                <div class="text"> item.title </div>
            </div>
        </template>
    </div>
</template>

<script setup>
import  storeToRefs  from 'pinia';
import useHomeStore from '../../../store/modules/home';

const homeStore = useHomeStore()
homeStore.fetchCategories()
const  categories  = storeToRefs(homeStore)
const categoriesData = categories
</script>

<style lang="less" scoped>

</style>

效果：能显示，但要加些样式

分类的样式

注意：让左右可以滚动但滚动条不显示的方法：

// 滚动条
overflow-x: auto;

// 滚动条不显示
&::-webkit-scrollbar 
    display: none;

整体css：

.home-categories 
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 20px;
    margin-left: -10px;
    margin-bottom: 10px;
    height: 65px;

    // 滚动条
    overflow-x: auto;

    // 滚动条不显示
    &::-webkit-scrollbar 
        display: none;
    

    .item 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 12px;

        img 
            width: 32px;
            height: 32px;
        

        .text 
            height: 20px;
            width: 56px;
            text-align: center;
        
    

效果：

总代码

修改或添加的文件

common.css

添加渐变色。

:root 
    /* 渐变色 */
    --theme-linear-gradient:linear-gradient(90deg,#fa8c1d,#fcaf3f);

router的index.js

添加search页面的路由。

   path: '/search',
   component: () => import("@/views/search/search.vue"),
   meta: 
       hideTabBar: true
   

service的home.js

添加对分类数据categories的网络请求。

export function getCategories() 
    // request的index导出的是一个对象
    return HYRequest.get(
        // 参数也是一个对象
        url: '/home/categories'
    )

store的home.js

添加对分类数据categories的store数据存储。

// home.vue页面所有的进行网络请求和数据都封装到这里

import  defineStore  from "pinia";
import  getHotSuggest,getCategories  from '@/service'

const useHomeStore = defineStore('home', 
    state: () => 
        return 
            hotSuggest: [],
            categories:[]
        
    ,
    actions: 
        // 网络请求,由于返回一个promise,要异步async await
        async fetchHotSuggest() 
            const res = await getHotSuggest()
            this.hotSuggest = res.data
            // console.log(res)
        ,
        async fetchCategories()
            const res = await getCategories()
            this.categories = res.data
        
    
)

export default useHomeStore

home-categories.vue

封装了分类数据categories页面的组件。

<template>
    <div class="home-categories">
        <!-- 一般有id就让key绑定id -->
        <template v-for="(item, index) in categoriesData" :key="item.id">
            <div class="item">
                <img :src=item.pictureUrl alt="">
                <div class="text"> item.title </div>
            </div>
        </template>
    </div>
</template>

<script setup>
import  storeToRefs  from 'pinia';
import useHomeStore from '../../../store/modules/home';

const homeStore = useHomeStore()
homeStore.fetchCategories()
const  categories  = storeToRefs(homeStore)
const categoriesData = categories
</script>

<style lang="less" scoped>
.home-categories 
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 20px;
    margin-left: -10px;
    margin-bottom: 10px;
    height: 65px;

    // 滚动条
    overflow-x: auto;

    // 滚动条不显示
    &::-webkit-scrollbar 
        display: none;
    

    .item 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 12px;

        img 
            width: 32px;
            height: 32px;
        

        .text 
            height: 20px;
            width: 56px;
            text-align: center;
        
    

</style>

home.vue

增加了search和categories的显示。

<template>
    <div class="home">
        <div class="nav-bar">
            <div class="title">旅游App</div>
            <div class="banner">
                <img src="@/assets/img/home/banner.webp" alt="">
            </div>
        </div>
        <div class="search-box">
            <div class="section location">
                <div class="city">
                    <router-link to="/city"> cityStore.currentCity.cityName </router-link>
                </div>
                <div class="position">
                    <div class="text">我的位置</div>
                    <img src="@/assets/img/home/icon_location.png" alt="">
                </div>
            </div>

            <div class="section time-range" :value="date" @click="showCalendar = true">
                <div class="start">
                    <span>入住</span>
                    <div class="time">
                         startDay 
                    </div>
                </div>
                <div class="stay">共 date 晚</div>
                <div class="end">
                    <span>离店</span>
                    <div class="time">
                         endDay 
                    </div>
                </div>
            </div>

            <!-- 日历 -->
            <van-calendar :round="false" v-model:show="showCalendar" type="range" @confirm="onConfirm"
                :show-confirm="false" />

            <!-- 价格人数 -->
            <div class="price-counter section">
                <div class="left">价格不限</div>
                <div class="right">人数不限</div>
            </div>

            <!-- 关键字 -->
            <div class="keyword section">
                <span>关键字/位置/民宿名</span>
            </div>

            <!-- 热门推荐 -->
            <div class="hotSuggest section">
                <template v-for="(item, index) in hotSuggestData" :key=以上是关于前端Vue项目：旅游App-（14）home+search：搜索按钮及其路由跳转分组数据的网络请求request数据存储store和动态显示的主要内容，如果未能解决你的问题，请参考以下文章
 
 前端Vue项目：旅游App-（13）home：热门数据的网络请求store和显示
 前端Vue项目：旅游App-（13）home：热门数据的网络请求store和显示
 前端Vue项目：旅游App-（17）home：页面滚动显示搜索栏节流时间同步
 前端Vue项目：旅游App-（20）home：点击跳转至带参数的动态路由
 前端Vue项目：旅游App-（16）home+hooks：窗口滚动到底部动态加载新数据抽取到hook
 前端Vue项目：旅游App-（16）home+hooks：窗口滚动到底部动态加载新数据抽取到hook