当前位置：首页 > news >正文

wordpress epix v1.2深圳白帽优化

news 2025/10/15 1:09:14

wordpress epix v1.2,深圳白帽优化,wordpress定时发布文章0点,wordpress要哪些运行库1. 核心框架：Vue Vue 以其轻量、易用、响应式数据绑定的特点，非常适合快速构建这类小型界面组件。即使是直接通过 CDN 引入，也能高效开发，降低项目复杂度，无需搭建完整工程化环境。 2. 网络请求：Axios 用于…

1. 核心框架：Vue
Vue 以其轻量、易用、响应式数据绑定的特点，非常适合快速构建这类小型界面组件。即使是直接通过 CDN 引入，也能高效开发，降低项目复杂度，无需搭建完整工程化环境。
2. 网络请求：Axios
用于发送 HTTP 请求获取天气接口数据，它在浏览器端使用简洁，支持 Promise 语法，能方便地和 Vue 结合处理异步数据获取。
3. CDN 替换
一开始用的 cdn.jsdelivr.net 可能存在访问不稳定情况，替换为 cdnjs.cloudflare.com，保障资源可靠加载。

4. 最终效果
在这里插入图片描述

上代码, 复制保存为HTML直接打开就可以看到效果

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气卡片</title><style>.weather-card{margin:50px auto;width:300px;background: rgb(213,243,255);
background: linear-gradient(360deg, rgba(213,243,255,1) 0%, rgba(248,253,255,1) 100%);border-radius:8px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,0.1);font-family:sans-serif}.location{display:flex;align-items:center}.location svg{width:24px;height:24px;margin-right:8px;fill:#fdb813}.temp{font-size:48px;font-weight:bold;margin:8px 0;width:65%}.desc{color:#666;width:35%;text-align:right;margin:15px 0 0}</style>
</head>
<body><div id="app"><div class="weather-card"><div class="location"><svg t="1753281034305" style="width:24px;height: 24px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8458" width="32" height="32"><path d="M920.25920987 329.59374532a24.69356705 24.69356705 0 0 0-23.87821341-1.63070726l-79.32226019 36.34147603-46.59163593 21.60687116c-0.75711409 3.61085178-1.45598862 7.16346402-2.3295818 10.77431581-25.21772295 102.44335951-200.16931588 315.77481255-220.02900069 339.76950506-9.14360855 11.00727399-22.59694343 32.84710333-36.92387148 32.84710333s-27.72202338-21.83982933-36.86563193-32.84710333c-19.74320572-23.87821341-192.19049822-234.58888693-219.44660526-337.78936053-19.68496619-10.54135763-32.38118697-17.47186349-32.49766606-17.47186348a24.69356705 24.69356705 0 0 0-31.04167743-3.96028906l-87.35931738 54.51221405a24.69356705 24.69356705 0 0 0-11.64790898 21.02447572v428.17713423a24.7518066 24.7518066 0 0 0 35.29316421 22.36398525l228.47373472-113.45063349L628.77028755 931.3247234a24.6353275 24.6353275 0 0 0 23.29581798 0l266.73711572-143.85167594a24.69356705 24.69356705 0 0 0 13.04565806-21.7815898v-415.24795527a24.81004614 24.81004614 0 0 0-11.58966944-20.84975707z" fill="#8a8a8a" p-id="8459"></path><path d="M511.06816728 101.70240606a231.79338878 231.79338878 0 0 0-231.56043059 231.56043059 234.2976892 234.2976892 0 0 0 6.69754767 55.56052585c23.81997387 96.73588411 205.70207265 317.23080117 213.44793212 326.54912835a14.67636532 14.67636532 0 0 0 11.64790898 5.35803814 14.85108396 14.85108396 0 0 0 11.64790898-5.35803814c7.74585947-9.31832718 189.62795825-229.81324424 213.44793213-326.60736789a231.73514923 231.73514923 0 0 0-225.32879929-287.0627169z m0 311.17388849a79.6134579 79.6134579 0 1 1 79.6134579-79.6134579A79.6134579 79.6134579 0 0 1 511.06816728 412.99277364z" fill="#F8D247" p-id="8460"></path></svg><span>{{ city }}</span></div><div style="display: flex;"><div class="temp">{{ temperature }}<span style="font-size:16px;vertical-align: text-top;">°C</span><span style="font-size:16px;float:left;"><img :src="wea_img" style="width:50px; margin: 6px 5px 0 0;"/></span></div><div class="desc">{{ weatherDesc }}<br>湿度 {{ humidity }}</div></div><div style="margin-top:8px; text-align: center;"><a href="javascript:;" @click="viewFull" style="color: #333;text-decoration: none;">查看完整预报</a></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script><script>new Vue({el: '#app',data: {city: '',temperature: '',weatherDesc: '',humidity: '',isLoading: true},created() {this.fetchWeatherData();},methods: {async fetchWeatherData() {try {// get接口里使用的appid和key请自行前往天气api注册const response = await axios.get('http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=55556666&appsecret=12341234');this.city = response.data.city;this.temperature = response.data.tem;this.weatherDesc = response.data.wea;this.wea_img = 'http://dps.tianqiapi.com/static/skin/apple/' + response.data.wea_img + '.png';this.humidity = response.data.humidity;this.isLoading = false;document.title = response.data.city + '天气卡片'} catch (error) {console.error('获取天气数据失败', error);this.isLoading = false;}},viewFull() {document.location.href='http://tianqiapi.com'}}});</script>
</body></html>