闲云旅游网02（基于vue+element ui）

首页开发

项目GitHub地址：https://github.com/q2419068625/xianyun

新建公共组件

1. 在components中新建应用统一的头部组件和页脚组件。
2. 在默认布局中layouts/default.vue中导入公共组件。
3. 实现步骤

头部组件

在components文件夹中新建头部组件components/header.vue。

        
        

            
                
            
        

        
        
            首页
            旅游攻略
            酒店
            国内机票  
        

        
        

            
            
                
                    
                        
                        用户名
                    
                    
                
                
                    
                       个人中心
                    
                    
                        
退出
 
                    
                
            

            
            
                登录 / 注册 
            
        
    

页脚组件

在components文件夹中新建头部组件components/footer.vue。

首页轮播图

实现步骤

新增轮播图布局

把pages/index.vue内容替换成以下代码：

请求后端接口数据

接下来使用接口数据来替换本地的静态数据
接口地址：http://157.122.54.189:9095/scenics/banners

mounted() {
      this.$axios({
        url:'http://157.122.54.189:9095/scenics/banners'
      }).then(res=>{
        // console.log(res.data);
        this.banners = res.data.data
      })
    },

替换template的图片地址为$axios.defaults.baseURL，因为接口返回的图片链接是相对链接

搜索跳转

思路

1. 添加搜索框布局

2. 搜索框tab切换执行不同的操作

3. 搜索跳转

实现步骤

搜索框布局

把搜索框定位在轮播图上，在pages/index.vue的template新增以下代码

在pages/index.vue的script替换如下：

tab栏操作

实现切换效果，并且判断如果切换的机票tab，那么直接跳转到机票首页

编辑methods下的handleOption方法

// 切换tab栏时候触发
handleOption(index){
    // 设置当前tab
    this.currentOption = index;

    // 如果切换的机票tab，那么直接跳转到机票首页
    const item = this.options[index];
    if(item.name === "机票"){
        return this.$router.push(item.pageUrl);
    }
},

搜索跳转

确定搜索时候会跳转到当前tab的pageUrl页面路径，并且在url上携带上输入框的值

// 搜索时候触发
handleSearch(){
    const item = this.options[this.currentOption];
    // 跳转时候给对应的页面url加上搜索内容参数
    this.$router.push(item.pageUrl + this.searchValue);
}

总结

1. 先把搜索框定位在轮播图上。
2. 给tab添加切换效果，并且判断如果是机票tab，直接跳转到机票首页。
3. 实现搜索跳转，注意跳转的链接来自当前选中的tab的pageUrl属性，并且附带上参数