My Study Blog个人项目难点总结复盘
1.Weather-Web
简介:
这是一款基于vue3项目开发的一个网站
所用技术栈:
html css js vue3 axio数据交互
主要功能 :
获取所查地区的天气状况 天气各参数 指数
实现思路**😗*
- 页面布局参考的是外国天气网站,布局采用的主要还是以
flex伸缩盒子为主,百分比单位 - icon图标引入 动态icon使用vue3的双向绑定
- 数据来源:免费天气API接口|天气预报接口|全球天气API接口|气象预警|空气质量 (tianqiapi.com)
- 页面渲染 对于多条不同数据 相同布局 利用v-for 遍历渲染
在线预览:
https://static-mp-6fd3fe59-0851-4b8a-ba75-a0bc8cbb282c.next.bspapp.com/dist/index.html
效果图展示:
总结项目难点(个人不熟练):
第一个需求:
父子组件传递参数
我在App.vue 父组件 通过点击父组件的一个按钮将当前页面的一个变量修改之后 然后传给子组件使用,并且让子组件苟能检测到这个变量的修改
每次在父组件点击按钮发送参数的时候 子组件可以监听到该参数的变化,进行下一步的处理 比如 参数作为api接口的参数 根据参数的不同 请求回来的数据不同 在页面的展示也截然不同
解决方案:
父组件
使用ref函数在父组件常见一个引用
const myRef = ref(null)将这个引用变量 传递给父组件
<template>
<div>
<button @click = "onClikc">Click me</button>
<weaWeek :myRef="myRef" />
</div>
</template>点击按钮向子组件传递数据 就是把本页面的cityName的值给要传递值的值
const cityName = ref()
const onClick = ()=>{
myRef.value = cityName.value
}子组件
<template>
<div>
{{myValue}}
</div>
</template>使用toRef函数将传递过来的引用值转换为一个响应式引用
import { ref, onMounted, toRef, watch } from "vue";
const myRef = toRef(props, "myRef");
const props = defineProps({
myRef: {
// type: Object,
required: true,
},检测变量的变化使用watch函数
watch(myRef, (newValue, oldValue) => {
console.log("myRef changed from", oldValue, "to", newValue);
getWeatherData();
// execute request function here
});其中watch 第一个参数是监测的参数 myRef,后面两个参数是
旧值 新值
在监测函数中只要myRef的值发生了改变 就重新执行请求资源函数getWeatherData
而myRef的值变化 是来源于父组件点击事件的发生进行传递子组件参数的赋值触发的
监听输入框 事件 在里面改变 cityname 的值 点击发送数据按钮执行请求资源函数的执行 在请求之前 再把cityName的值赋值给传递引用变量myRef.value 接着cityname的值传递给请求url的参数,
子组件监听到myRef的值的变化 重新进行请求,其中请求url的参数 改为``myRef.value`
总体来说就是
input.value => cityName => myRef
其中 cityName.value 作为app.vue 请求资源函数url地址的参数
myRef.value 作为子组件weather-week.vue 请求资源函数url地址的参数
核心代码:
app.vue
// 获取数据
const getWeatherData = () => {
let url = `https://www.yiketianqi.com/free/day?appid=29743578&appsecret=VwMog7CP&unescape=1&city=${cityName.value}`;
// 单击按钮的时候修改传给子组件数据的值
myRef.value = cityName.value;
// axios 发送get请求 获取资源
axios.get(url).then((d) => {
adress.value = d.data.city;
nowDate.value = d.data.date;
nowTem.value = d.data.tem;
weatherSitua.value = d.data.wea;
updateTime.value = d.data.update_time;
});
};weather.vue
const getWeatherData = () => {
let url = `https://www.yiketianqi.com/free/week?unescape=1&appid=29743578&appsecret=VwMog7CP&city=${myRef.value}`;
axios.get(url).then((d) => {
dateArr.value = d.data.data;
});
};
// 页面dom元素挂载完毕执行默认的渲染 默认url地址参数是北京 也就是页面渲染的数据是北京的
onMounted(() => {
getWeatherData();
});
// vue3 监测函数
watch(myRef, (newValue, oldValue) => {
console.log("myRef changed from", oldValue, "to", newValue);
getWeatherData();
});第二个需求(简单):
毛玻璃的实现效果(CSS)
.NowInfo {
width: 800px;
height: 220px;
padding: 20px 20px 10px 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}