Vue全家桶—项目实战_3

1、用git管理项目

• git init （初始化）
• git add .  （添加对应文件）
• git commit -m "项目第一天"   （提交）

2、后台管理系统，版本依赖的问题 (HY-VUE3-TS-CMS)

• vue的版本与element-plus 所依赖的版本不一致
• 进行强制安装 npm install --force
• 运行 npm run serve
• 账号密码 coderdemo 123456 / coderwhy

---

3、把home.vue中的城市与位置封装到home-search-box.vue

<!-- 位置信息 -->

    <div class="location bottom-gray-line ">

      <div class="city" @click="cityClick">{{ currentCity.cityName }}</div>

      <div class="position" @click="positionClick">

        <span class="text">我的位置</span>

        < img src="@/assets/img/home/icon_location.png" alt="">

      </div>

    </div>

---

• 首先监听位置的点击（获取位置）

<div class="position" @click="positionClick">

获取当前位置的API    navigator.geolocation.getCurrentPosition

// 位置/城市

const positionClick = () => {

  navigator.geolocation.getCurrentPosition(res => {

    console.log("获取位置成功:", res)

  }, err => {

    console.log("获取位置失败:", err)

  }, {

    enableHighAccuracy: true,

    timeout: 5000,

    maximumAge: 0

  })

}

---

• 监听城市点击 跳转到新的页面

<div class="city" @click="cityClick">{{ currentCity.cityName }}</div>

• 新建一个city.vue文件  views/city中
• 去路由里面配置（router中的index.js）

{

      path: "/city",

      component: () => import("@/views/city/city.vue"),

    }

• 设置路由跳转

const router = useRouter()

const cityClick = () => {

  router.push("/city")

}

• 隐藏tab-bar文件

方法1    在app.vue中配合路由index.js使用

配置路由中添加一个meta

 {

      path: "/city",

      component: () => import("@/views/city/city.vue"),

      meta: {

        hideTabBar: true

      }

    }

app.vue中

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

 

const route = useRoute()

 

方法2    设置div样式

.city{
  position: relative;
  z-index: 9;
  height: 100pvh;
  background-color: #fff;
  overflow: auto;
}

当其他页面也需要这种效果的时候也可以把样式放入common.css样式中  （开发技巧） .top-page    class名字应用

---

4、搭建city.vue页面

• 搜索框，进行双向绑定

<!-- 1.搜索框 -->

<van-search 
        v-model="searchValue" 
        placeholder="城市/区域/位置"
        shape="round"
        show-action
        @cancel="cancelClick"
      />

// 搜索框功能

const searchValue = ref("")

在common.css中

/* 全局修改: 修改search样式 */
  --van-search-left-icon-color: var(--primary-color) !important;

监听取消按钮点击返回界面

const router = useRouter()

const cancelClick = () => {

  router.back()

}

---

• tab的切换

<!-- 2.tab的切换 -->

<van-tabs v-model:active="tabActive ">

  <van-tab title="标签 1">内容 1</van-tab>

  <van-tab title="标签 2">内容 2</van-tab>

</van-tabs>

 

// tab的切换

const tabActive = ref()

 

————优化

 

• 安装axios库

npm install axios    （从服务器里拿东西）

封装好request文件  services/request/config.js

export const BASE_URL = "http://123.207.32.32:1888/api"

// export const BASE_URL = "http://codercba.com:1888/api"

export const TIMEOUT = 10000 

---

在services/request/index.js

import axios from 'axios'

import { BASE_URL, TIMEOUT } from './config'

class HYRequest {
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }

  request(config) {
    return new Promise((resolve, reject) => {
      this.instance.request(config).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }

  get(config) {
    return this.request({ ...config, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
}

export default new HYRequest(BASE_URL, TIMEOUT)

---

services/modules/city.js封装好city里面要用的请求

import hyRequest from '../request'

export function getCityAll() {

  return hyRequest.get({

    url: "/city/all"

  })

}

---

在services中新建index.js（集中导出文件）

export * from "./modules/city"
export * from './modules/home'

---

在city.vue中引入

import { getCityAll } from "@/services"

// 网络请求: 请求城市的数据

getCityAll().then(res => {

 

})

---

5、网络请求获取数据并展示到浏览器上

const allCity = ref({})

getCityAll().then(res => {

  allCity.value = res.data

})

 

<van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">

        <template v-for="(value, key, index) in allCity" :key="key">

          <van-tab :title="value.title"></van-tab>

        </template>

      </van-tabs>

在city.vue中发送网络请求的缺点

/**
 * 这个位置发送网络请求有两个缺点:
 *   1.如果网络请求太多, 那么页面组件中就包含大量的对于网络请求和数据的处理逻辑
 *   2.如果页面封装了很多的子组件, 子组件需要这些数据, 我们必须一步步将数据传递过去(props)
 */

---

• 把网络请求封装好 （进一步优化）

在stores文件夹中新建modules/city.js

import { getCityAll } from "@/services";

import { defineStore } from "pinia";

 

const useCityStore = defineStore("city", {

  state: () => ({

    allCities: {},

 

      }),

  actions: {

    async fetchAllCitiesData() {

      const res = await getCityAll()

      this.allCities = res.data

    }

  }

})

 

export default useCityStore

 

在city.vue中使用

import useCityStore from '@/stores/modules/city';

import { storeToRefs } from 'pinia';

 

// 从Store中获取数据

const cityStore = useCityStore()

cityStore.fetchAllCitiesData()//内部自己发送网络请求

const { allCities } = storeToRefs(cityStore)

 

<!-- tabActive默认索引 -->

      <van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">

        <template v-for="(value, key, index) in allCities" :key="key">

          <van-tab :title="value.title" :name="key"></van-tab>

        </template>

      </van-tabs>

---

6、城市展示

方法：局部滚动

<div class="content">

      <template v-for="(value, key, index) in allCities">

        <city-group v-show="tabActive === key" :group-data="value" />

      </template>

    </div>

 

 // 布局滚动

  .content {

    height: calc(100vh - 98px);

    overflow-y: auto;

  }

 

// 目的: 获取选中标签后的数据
// 1.获取正确的key: 将tabs中绑定的tabAction正确绑定
// 2.根据key从allCities获取数据, 默认直接获取的数据不是响应式的, 所以必须包裹computed

const currentGroup = computed(() => allCities.value[tabActive.value])

---

最后效果图  首页

点击广州  选取其他城市  city.vue页面