{"id":304,"date":"2026-03-21T22:55:44","date_gmt":"2026-03-21T14:55:44","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=304"},"modified":"2026-03-21T22:55:44","modified_gmt":"2026-03-21T14:55:44","slug":"day-30-%e9%a1%b9%e7%9b%ae6-%e5%a4%a9%e6%b0%94%e6%9f%a5%e8%af%a2%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=304","title":{"rendered":"Day-30-\u9879\u76ee6-\u5929\u6c14\u67e5\u8be2\u5e94\u7528"},"content":{"rendered":"

Day 30: \u9879\u76ee6-\u5929\u6c14\u67e5\u8be2\u5e94\u7528<\/h1>\n

\ud83c\udfaf \u9879\u76ee\u6982\u8ff0<\/h2>\n

\u6211\u4eec\u5c06\u7efc\u5408\u8fd0\u7528\u524d29\u5929\u5b66\u5230\u7684\u6240\u6709\u77e5\u8bc6\uff0c\u6784\u5efa\u4e00\u4e2a\u529f\u80fd\u5b8c\u6574\u3001\u754c\u9762\u7cbe\u7f8e\u7684\u5929\u6c14\u67e5\u8be2\u5e94\u7528<\/strong>\u3002\u8fd9\u662f\u7f16\u7a0b\u5165\u95e8\u6559\u7a0b\u7684\u7ec8\u6781\u9879\u76ee<\/strong>\uff0c\u4e5f\u662f\u4f60JavaScript\u5f00\u53d1\u80fd\u529b\u7684\u7efc\u5408\u68c0\u9a8c\u3002<\/p>\n

\u9879\u76ee\u7279\u70b9<\/h3>\n
    \n
  • \u2705 \u771f\u5b9eAPI\u96c6\u6210<\/strong>\uff1a\u4f7f\u7528OpenWeatherMap API\u83b7\u53d6\u5b9e\u65f6\u5929\u6c14<\/li>\n
  • \u2705 \u5b8c\u6574CRUD\u64cd\u4f5c<\/strong>\uff1a\u57ce\u5e02\u589e\u5220\u6539\u67e5<\/li>\n
  • \u2705 \u672c\u5730\u5b58\u50a8<\/strong>\uff1a\u4fdd\u5b58\u504f\u597d\u8bbe\u7f6e\u548c\u5386\u53f2\u8bb0\u5f55<\/li>\n
  • \u2705 \u5f02\u6b65\u7f16\u7a0b<\/strong>\uff1afetch + async\/await<\/li>\n
  • \u2705 \u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong>\uff1a\u9002\u914d\u684c\u9762\u548c\u79fb\u52a8\u8bbe\u5907<\/li>\n
  • \u2705 \u52a8\u753b\u6548\u679c<\/strong>\uff1a\u6d41\u7545\u7684UI\u4ea4\u4e92<\/li>\n
  • \u2705 \u9519\u8bef\u5904\u7406<\/strong>\uff1a\u53cb\u597d\u7684\u9519\u8bef\u63d0\u793a<\/li>\n
  • \u2705 \u4ee3\u7801\u89c4\u8303<\/strong>\uff1a\u6a21\u5757\u5316\u3001\u53ef\u7ef4\u62a4<\/li>\n<\/ul>\n

    \ud83c\udfa8 \u9879\u76ee\u9884\u89c8<\/h2>\n

    \u529f\u80fd\u6e05\u5355<\/h3>\n
      \n
    1. \n

      \u5b9e\u65f6\u5929\u6c14\u67e5\u8be2<\/strong><\/p>\n

        \n
      • \u652f\u6301\u57ce\u5e02\u540d\u79f0\u641c\u7d22<\/li>\n
      • \u663e\u793a\u5f53\u524d\u6e29\u5ea6\u3001\u5929\u6c14\u72b6\u51b5<\/li>\n
      • \u6e7f\u5ea6\u3001\u98ce\u901f\u3001\u6c14\u538b\u7b49\u8be6\u7ec6\u4fe1\u606f<\/li>\n
      • \u5929\u6c14\u56fe\u6807\u52a8\u6001\u663e\u793a<\/li>\n<\/ul>\n<\/li>\n
      • \n

        \u591a\u57ce\u5e02\u7ba1\u7406<\/strong><\/p>\n

          \n
        • \u6dfb\u52a0\/\u5220\u9664\u5e38\u7528\u57ce\u5e02<\/li>\n
        • \u57ce\u5e02\u5217\u8868\u5feb\u901f\u5207\u6362<\/li>\n
        • \u641c\u7d22\u5386\u53f2\u8bb0\u5f55<\/li>\n<\/ul>\n<\/li>\n
        • \n

          \u6570\u636e\u6301\u4e45\u5316<\/strong><\/p>\n

            \n
          • LocalStorage\u4fdd\u5b58\u8bbe\u7f6e<\/li>\n
          • \u81ea\u52a8\u6062\u590d\u4e0a\u6b21\u72b6\u6001<\/li>\n<\/ul>\n<\/li>\n
          • \n

            \u7528\u6237\u4f53\u9a8c<\/strong><\/p>\n

              \n
            • \u52a0\u8f7d\u52a8\u753b<\/li>\n
            • \u9519\u8bef\u63d0\u793a<\/li>\n
            • \u56de\u8f66\u5feb\u6377\u641c\u7d22<\/li>\n
            • \u9632\u6296\u4f18\u5316<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

              \ud83d\udcc1 \u9879\u76ee\u7ed3\u6784<\/h2>\n
              weather-app\/\n\u251c\u2500\u2500 index.html          # \u4e3b\u9875\u9762\n\u251c\u2500\u2500 css\/\n\u2502   \u251c\u2500\u2500 styles.css      # \u4e3b\u6837\u5f0f\n\u2502   \u2514\u2500\u2500 animations.css  # \u52a8\u753b\u6548\u679c\n\u251c\u2500\u2500 js\/\n\u2502   \u251c\u2500\u2500 api.js          # API\u8bf7\u6c42\u5c01\u88c5\n\u2502   \u251c\u2500\u2500 storage.js      # \u672c\u5730\u5b58\u50a8\u7ba1\u7406\n\u2502   \u251c\u2500\u2500 ui.js           # UI\u4ea4\u4e92\u903b\u8f91\n\u2502   \u2514\u2500\u2500 app.js          # \u4e3b\u5e94\u7528\u903b\u8f91\n\u2514\u2500\u2500 assets\/\n    \u2514\u2500\u2500 icons\/          # \u5929\u6c14\u56fe\u6807\n<\/code><\/pre>\n
              \ud83d\udcbb \u5b8c\u6574\u4ee3\u7801\u5b9e\u73b0<\/h2>\n
              1. HTML\u7ed3\u6784 (index.html)<\/h3>\n
              <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>\u5929\u6c14\u67e5\u8be2\u5e94\u7528<\/title>\n  <link rel="stylesheet" href="css\/styles.css">\n  <link rel="stylesheet" href="css\/animations.css">\n<\/head>\n<body>\n  <div class="container">\n    <!-- \u5934\u90e8 -->\n    <header class="header">\n      <h1 class="title">\ud83c\udf24\ufe0f \u5929\u6c14\u67e5\u8be2<\/h1>\n      <p class="subtitle">\u5b9e\u65f6\u5929\u6c14\u4fe1\u606f\u67e5\u8be2<\/p>\n    <\/header>\n\n    <!-- \u641c\u7d22\u533a\u57df -->\n    <section class="search-section">\n      <div class="search-box">\n        <input\n          type="text"\n          id="cityInput"\n          class="search-input"\n          placeholder="\u8f93\u5165\u57ce\u5e02\u540d\u79f0..."\n          autocomplete="off"\n        >\n        <button id="searchBtn" class="search-btn">\n          <span class="btn-text">\u67e5\u8be2<\/span>\n          <span class="btn-icon">\ud83d\udd0d<\/span>\n        <\/button>\n      <\/div>\n      <div class="search-tips">\n        \ud83d\udca1 \u63d0\u793a\uff1a\u652f\u6301\u4e2d\u82f1\u6587\u57ce\u5e02\u540d\uff0c\u5982"\u5317\u4eac"\u3001"Tokyo"\n      <\/div>\n    <\/section>\n\n    <!-- \u52a0\u8f7d\u52a8\u753b -->\n    <div id="loading" class="loading hidden">\n      <div class="spinner"><\/div>\n      <p>\u52a0\u8f7d\u4e2d...<\/p>\n    <\/div>\n\n    <!-- \u9519\u8bef\u63d0\u793a -->\n    <div id="error" class="error-message hidden"><\/div>\n\n    <!-- \u5929\u6c14\u4fe1\u606f\u5361\u7247 -->\n    <section id="weatherCard" class="weather-card hidden">\n      <!-- \u57ce\u5e02\u548c\u5929\u6c14\u56fe\u6807 -->\n      <div class="weather-header">\n        <div>\n          <h2 class="city-name" id="cityName">--<\/h2>\n          <p class="weather-date" id="weatherDate">--<\/p>\n        <\/div>\n        <div class="weather-icon" id="weatherIcon">\ud83c\udf21\ufe0f<\/div>\n      <\/div>\n\n      <!-- \u6e29\u5ea6 -->\n      <div class="temperature-section">\n        <span class="temperature" id="temperature">--\u00b0<\/span>\n        <span class="weather-description" id="description">--<\/span>\n      <\/div>\n\n      <!-- \u8be6\u7ec6\u4fe1\u606f\u7f51\u683c -->\n      <div class="weather-details">\n        <div class="detail-item">\n          <div class="detail-icon">\ud83d\udca7<\/div>\n          <div class="detail-info">\n            <div class="detail-label">\u6e7f\u5ea6<\/div>\n            <div class="detail-value" id="humidity">--%<\/div>\n          <\/div>\n        <\/div>\n\n        <div class="detail-item">\n          <div class="detail-icon">\ud83d\udca8<\/div>\n          <div class="detail-info">\n            <div class="detail-label">\u98ce\u901f<\/div>\n            <div class="detail-value" id="windSpeed">-- m\/s<\/div>\n          <\/div>\n        <\/div>\n\n        <div class="detail-item">\n          <div class="detail-icon">\ud83c\udf21\ufe0f<\/div>\n          <div class="detail-info">\n            <div class="detail-label">\u4f53\u611f\u6e29\u5ea6<\/div>\n            <div class="detail-value" id="feelsLike">--\u00b0<\/div>\n          <\/div>\n        <\/div>\n\n        <div class="detail-item">\n          <div class="detail-icon">\ud83d\udd35<\/div>\n          <div class="detail-info">\n            <div class="detail-label">\u6c14\u538b<\/div>\n            <div class="detail-value" id="pressure">-- hPa<\/div>\n          <\/div>\n        <\/div>\n\n        <div class="detail-item">\n          <div class="detail-icon">\ud83d\udc41\ufe0f<\/div>\n          <div class="detail-info">\n            <div class="detail-label">\u80fd\u89c1\u5ea6<\/div>\n            <div class="detail-value" id="visibility">-- km<\/div>\n          <\/div>\n        <\/div>\n\n        <div class="detail-item">\n          <div class="detail-icon">\u2601\ufe0f<\/div>\n          <div class="detail-info">\n            <div class="detail-label">\u4e91\u91cf<\/div>\n            <div class="detail-value" id="clouds">--%<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- \u64cd\u4f5c\u6309\u94ae -->\n      <div class="weather-actions">\n        <button id="saveCityBtn" class="action-btn">\n          \u2b50 \u4fdd\u5b58\u57ce\u5e02\n        <\/button>\n        <button id="refreshBtn" class="action-btn">\n          \ud83d\udd04 \u5237\u65b0\n        <\/button>\n      <\/div>\n    <\/section>\n\n    <!-- \u5df2\u4fdd\u5b58\u7684\u57ce\u5e02 -->\n    <section class="saved-cities-section">\n      <h3 class="section-title">\ud83d\udccd \u5df2\u4fdd\u5b58\u7684\u57ce\u5e02<\/h3>\n      <div id="savedCities" class="saved-cities-list">\n        <p class="empty-message">\u6682\u65e0\u4fdd\u5b58\u7684\u57ce\u5e02<\/p>\n      <\/div>\n    <\/section>\n\n    <!-- \u641c\u7d22\u5386\u53f2 -->\n    <section class="history-section">\n      <h3 class="section-title">\ud83d\udcdc \u641c\u7d22\u5386\u53f2<\/h3>\n      <div id="searchHistory" class="history-list">\n        <p class="empty-message">\u6682\u65e0\u641c\u7d22\u5386\u53f2<\/p>\n      <\/div>\n      <button id="clearHistoryBtn" class="clear-btn">\n        \ud83d\uddd1\ufe0f \u6e05\u7a7a\u5386\u53f2\n      <\/button>\n    <\/section>\n\n    <!-- \u9875\u811a -->\n    <footer class="footer">\n      <p>\u6570\u636e\u6765\u6e90\uff1a<a href="https:\/\/openweathermap.org\/" target="_blank">OpenWeatherMap<\/a><\/p>\n      <p>&copy; 2026 \u5929\u6c14\u67e5\u8be2\u5e94\u7528 | \u7f16\u7a0b\u5165\u95e8\u6559\u7a0b Day 30<\/p>\n    <\/footer>\n  <\/div>\n\n  <!-- JavaScript\u6a21\u5757 -->\n  <script type="module" src="js\/app.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
              2. CSS\u6837\u5f0f (css\/styles.css)<\/h3>\n
              \/* ==================== \u5168\u5c40\u6837\u5f0f ==================== *\/\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n:root {\n  --primary-color: #667eea;\n  --secondary-color: #764ba2;\n  --accent-color: #f093fb;\n  --text-dark: #2d3748;\n  --text-light: #718096;\n  --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  --card-bg: rgba(255, 255, 255, 0.95);\n  --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n  --radius: 16px;\n}\n\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  background: var(--bg-gradient);\n  min-height: 100vh;\n  padding: 20px;\n  color: var(--text-dark);\n  line-height: 1.6;\n}\n\n.container {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n\/* ==================== \u5934\u90e8\u6837\u5f0f ==================== *\/\n.header {\n  text-align: center;\n  margin-bottom: 40px;\n  color: white;\n}\n\n.title {\n  font-size: 2.5em;\n  margin-bottom: 10px;\n  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.subtitle {\n  font-size: 1.1em;\n  opacity: 0.9;\n}\n\n\/* ==================== \u641c\u7d22\u533a\u57df ==================== *\/\n.search-section {\n  background: var(--card-bg);\n  padding: 30px;\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  margin-bottom: 30px;\n}\n\n.search-box {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 15px;\n}\n\n.search-input {\n  flex: 1;\n  padding: 15px 20px;\n  border: 2px solid #e2e8f0;\n  border-radius: 10px;\n  font-size: 16px;\n  transition: all 0.3s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.search-btn {\n  padding: 15px 30px;\n  background: var(--bg-gradient);\n  color: white;\n  border: none;\n  border-radius: 10px;\n  font-size: 16px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.search-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n}\n\n.search-btn:active {\n  transform: translateY(0);\n}\n\n.search-tips {\n  font-size: 14px;\n  color: var(--text-light);\n  text-align: center;\n}\n\n\/* ==================== \u52a0\u8f7d\u548c\u9519\u8bef ==================== *\/\n.loading {\n  text-align: center;\n  padding: 40px;\n  color: white;\n}\n\n.spinner {\n  border: 4px solid rgba(255, 255, 255, 0.3);\n  border-top: 4px solid white;\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  animation: spin 1s linear infinite;\n  margin: 0 auto 20px;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.error-message {\n  background: #fed7d7;\n  color: #c53030;\n  padding: 15px 20px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  border-left: 4px solid #c53030;\n}\n\n\/* ==================== \u5929\u6c14\u5361\u7247 ==================== *\/\n.weather-card {\n  background: var(--card-bg);\n  padding: 40px;\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  margin-bottom: 30px;\n}\n\n.weather-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 30px;\n}\n\n.city-name {\n  font-size: 2em;\n  color: var(--text-dark);\n  margin-bottom: 5px;\n}\n\n.weather-date {\n  color: var(--text-light);\n  font-size: 0.9em;\n}\n\n.weather-icon {\n  font-size: 4em;\n}\n\n.temperature-section {\n  text-align: center;\n  margin-bottom: 40px;\n}\n\n.temperature {\n  font-size: 4em;\n  font-weight: bold;\n  background: var(--bg-gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.weather-description {\n  font-size: 1.5em;\n  color: var(--text-light);\n  text-transform: capitalize;\n  margin-top: 10px;\n}\n\n.weather-details {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.detail-item {\n  background: #f7fafc;\n  padding: 20px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  gap: 15px;\n  transition: transform 0.2s;\n}\n\n.detail-item:hover {\n  transform: translateY(-3px);\n  background: #edf2f7;\n}\n\n.detail-icon {\n  font-size: 2em;\n}\n\n.detail-label {\n  font-size: 0.85em;\n  color: var(--text-light);\n  margin-bottom: 5px;\n}\n\n.detail-value {\n  font-size: 1.2em;\n  font-weight: bold;\n  color: var(--text-dark);\n}\n\n.weather-actions {\n  display: flex;\n  gap: 15px;\n}\n\n.action-btn {\n  flex: 1;\n  padding: 15px;\n  background: var(--bg-gradient);\n  color: white;\n  border: none;\n  border-radius: 10px;\n  font-size: 16px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n\n.action-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n}\n\n\/* ==================== \u5df2\u4fdd\u5b58\u57ce\u5e02 ==================== *\/\n.saved-cities-section,\n.history-section {\n  background: var(--card-bg);\n  padding: 30px;\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  margin-bottom: 20px;\n}\n\n.section-title {\n  font-size: 1.3em;\n  margin-bottom: 20px;\n  color: var(--text-dark);\n}\n\n.saved-cities-list,\n.history-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.city-tag,\n.history-tag {\n  background: #edf2f7;\n  padding: 10px 20px;\n  border-radius: 25px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.city-tag:hover,\n.history-tag:hover {\n  background: #e2e8f0;\n  transform: translateY(-2px);\n}\n\n.city-tag .delete-btn {\n  background: none;\n  border: none;\n  color: #e53e3e;\n  cursor: pointer;\n  font-size: 16px;\n  padding: 0;\n  margin-left: 5px;\n}\n\n.city-tag .delete-btn:hover {\n  color: #c53030;\n}\n\n.empty-message {\n  color: var(--text-light);\n  font-style: italic;\n}\n\n.clear-btn {\n  margin-top: 15px;\n  padding: 10px 20px;\n  background: #fed7d7;\n  color: #c53030;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n\n.clear-btn:hover {\n  background: #fc8181;\n  color: white;\n}\n\n\/* ==================== \u9875\u811a ==================== *\/\n.footer {\n  text-align: center;\n  color: white;\n  padding: 20px;\n  opacity: 0.9;\n}\n\n.footer a {\n  color: white;\n  text-decoration: underline;\n}\n\n\/* ==================== \u5de5\u5177\u7c7b ==================== *\/\n.hidden {\n  display: none !important;\n}\n\n\/* ==================== \u54cd\u5e94\u5f0f\u8bbe\u8ba1 ==================== *\/\n@media (max-width: 600px) {\n  .title {\n    font-size: 2em;\n  }\n\n  .search-box {\n    flex-direction: column;\n  }\n\n  .temperature {\n    font-size: 3em;\n  }\n\n  .weather-details {\n    grid-template-columns: 1fr;\n  }\n\n  .weather-actions {\n    flex-direction: column;\n  }\n}\n<\/code><\/pre>\n
              3. JavaScript\u6a21\u5757 (js\/api.js)<\/h3>\n
              \/\/ ==================== API\u914d\u7f6e ====================\nconst API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY'; \/\/ \u66ff\u6362\u4e3a\u4f60\u7684API\u5bc6\u94a5\nconst API_BASE = 'https:\/\/api.openweathermap.org\/data\/2.5\/weather';\n\n\/\/ ==================== API\u8bf7\u6c42\u5c01\u88c5 ====================\n\n\/**\n * \u83b7\u53d6\u5929\u6c14\u6570\u636e\n * @param {string} city - \u57ce\u5e02\u540d\u79f0\n * @returns {Promise<Object>} \u5929\u6c14\u6570\u636e\n *\/\nexport async function getWeather(city) {\n  const url = `${API_BASE}?q=${encodeURIComponent(city)}&units=metric&lang=zh_cn&appid=${API_KEY}`;\n\n  const response = await fetch(url);\n\n  if (!response.ok) {\n    if (response.status === 404) {\n      throw new Error('\u672a\u627e\u5230\u8be5\u57ce\u5e02\uff0c\u8bf7\u68c0\u67e5\u57ce\u5e02\u540d\u79f0');\n    } else if (response.status === 401) {\n      throw new Error('API\u5bc6\u94a5\u65e0\u6548');\n    } else {\n      throw new Error(`\u8bf7\u6c42\u5931\u8d25: ${response.status}`);\n    }\n  }\n\n  return await response.json();\n}\n\n\/**\n * \u83b7\u53d6\u591a\u4e2a\u57ce\u5e02\u7684\u5929\u6c14\n * @param {string[]} cities - \u57ce\u5e02\u5217\u8868\n * @returns {Promise<Object[]>} \u5929\u6c14\u6570\u636e\u6570\u7ec4\n *\/\nexport async function getWeatherForCities(cities) {\n  const promises = cities.map(city => getWeather(city));\n  return Promise.allSettled(promises);\n}\n<\/code><\/pre>\n
              4. JavaScript\u6a21\u5757 (js\/storage.js)<\/h3>\n
              \/\/ ==================== \u672c\u5730\u5b58\u50a8\u7ba1\u7406 ====================\n\nconst STORAGE_KEYS = {\n  SAVED_CITIES: 'weatherapp_saved_cities',\n  SEARCH_HISTORY: 'weatherapp_search_history',\n  LAST_CITY: 'weatherapp_last_city'\n};\n\n\/**\n * \u4fdd\u5b58\u57ce\u5e02\u5217\u8868\n * @param {string[]} cities - \u57ce\u5e02\u5217\u8868\n *\/\nexport function saveCities(cities) {\n  localStorage.setItem(STORAGE_KEYS.SAVED_CITIES, JSON.stringify(cities));\n}\n\n\/**\n * \u83b7\u53d6\u4fdd\u5b58\u7684\u57ce\u5e02\u5217\u8868\n * @returns {string[]} \u57ce\u5e02\u5217\u8868\n *\/\nexport function getSavedCities() {\n  const data = localStorage.getItem(STORAGE_KEYS.SAVED_CITIES);\n  return data ? JSON.parse(data) : [];\n}\n\n\/**\n * \u6dfb\u52a0\u57ce\u5e02\u5230\u4fdd\u5b58\u5217\u8868\n * @param {string} city - \u57ce\u5e02\u540d\u79f0\n *\/\nexport function addCity(city) {\n  const cities = getSavedCities();\n  if (!cities.includes(city)) {\n    cities.push(city);\n    saveCities(cities);\n  }\n}\n\n\/**\n * \u4ece\u4fdd\u5b58\u5217\u8868\u4e2d\u5220\u9664\u57ce\u5e02\n * @param {string} city - \u57ce\u5e02\u540d\u79f0\n *\/\nexport function removeCity(city) {\n  const cities = getSavedCities().filter(c => c !== city);\n  saveCities(cities);\n}\n\n\/**\n * \u4fdd\u5b58\u641c\u7d22\u5386\u53f2\n * @param {string} city - \u57ce\u5e02\u540d\u79f0\n *\/\nexport function addToHistory(city) {\n  const history = getSearchHistory();\n  \/\/ \u79fb\u9664\u91cd\u590d\u9879\n  const filtered = history.filter(c => c !== city);\n  \/\/ \u6dfb\u52a0\u5230\u5f00\u5934\n  filtered.unshift(city);\n  \/\/ \u9650\u5236\u6570\u91cf\n  const limited = filtered.slice(0, 10);\n  localStorage.setItem(STORAGE_KEYS.SEARCH_HISTORY, JSON.stringify(limited));\n}\n\n\/**\n * \u83b7\u53d6\u641c\u7d22\u5386\u53f2\n * @returns {string[]} \u641c\u7d22\u5386\u53f2\n *\/\nexport function getSearchHistory() {\n  const data = localStorage.getItem(STORAGE_KEYS.SEARCH_HISTORY);\n  return data ? JSON.parse(data) : [];\n}\n\n\/**\n * \u6e05\u7a7a\u641c\u7d22\u5386\u53f2\n *\/\nexport function clearHistory() {\n  localStorage.removeItem(STORAGE_KEYS.SEARCH_HISTORY);\n}\n\n\/**\n * \u4fdd\u5b58\u6700\u540e\u67e5\u8be2\u7684\u57ce\u5e02\n * @param {string} city - \u57ce\u5e02\u540d\u79f0\n *\/\nexport function saveLastCity(city) {\n  localStorage.setItem(STORAGE_KEYS.LAST_CITY, city);\n}\n\n\/**\n * \u83b7\u53d6\u6700\u540e\u67e5\u8be2\u7684\u57ce\u5e02\n * @returns {string|null} \u57ce\u5e02\u540d\u79f0\n *\/\nexport function getLastCity() {\n  return localStorage.getItem(STORAGE_KEYS.LAST_CITY);\n}\n<\/code><\/pre>\n
              5. JavaScript\u6a21\u5757 (js\/ui.js)<\/h3>\n
              \/\/ ==================== DOM\u5143\u7d20 ====================\nconst elements = {\n  cityInput: document.getElementById('cityInput'),\n  searchBtn: document.getElementById('searchBtn'),\n  loading: document.getElementById('loading'),\n  error: document.getElementById('error'),\n  weatherCard: document.getElementById('weatherCard'),\n  cityName: document.getElementById('cityName'),\n  weatherDate: document.getElementById('weatherDate'),\n  weatherIcon: document.getElementById('weatherIcon'),\n  temperature: document.getElementById('temperature'),\n  description: document.getElementById('description'),\n  humidity: document.getElementById('humidity'),\n  windSpeed: document.getElementById('windSpeed'),\n  feelsLike: document.getElementById('feelsLike'),\n  pressure: document.getElementById('pressure'),\n  visibility: document.getElementById('visibility'),\n  clouds: document.getElementById('clouds'),\n  saveCityBtn: document.getElementById('saveCityBtn'),\n  refreshBtn: document.getElementById('refreshBtn'),\n  savedCities: document.getElementById('savedCities'),\n  searchHistory: document.getElementById('searchHistory'),\n  clearHistoryBtn: document.getElementById('clearHistoryBtn')\n};\n\n\/\/ ==================== \u5929\u6c14\u56fe\u6807\u6620\u5c04 ====================\nconst weatherIcons = {\n  '01d': '\u2600\ufe0f', '01n': '\ud83c\udf19',\n  '02d': '\u26c5', '02n': '\u2601\ufe0f',\n  '03d': '\u2601\ufe0f', '03n': '\u2601\ufe0f',\n  '04d': '\u2601\ufe0f', '04n': '\u2601\ufe0f',\n  '09d': '\ud83c\udf27\ufe0f', '09n': '\ud83c\udf27\ufe0f',\n  '10d': '\ud83c\udf26\ufe0f', '10n': '\ud83c\udf27\ufe0f',\n  '11d': '\u26c8\ufe0f', '11n': '\u26c8\ufe0f',\n  '13d': '\u2744\ufe0f', '13n': '\u2744\ufe0f',\n  '50d': '\ud83c\udf2b\ufe0f', '50n': '\ud83c\udf2b\ufe0f'\n};\n\n\/\/ ==================== UI\u64cd\u4f5c\u51fd\u6570 ====================\n\n\/**\n * \u663e\u793a\u52a0\u8f7d\u72b6\u6001\n *\/\nexport function showLoading() {\n  elements.loading.classList.remove('hidden');\n  elements.error.classList.add('hidden');\n  elements.weatherCard.classList.add('hidden');\n}\n\n\/**\n * \u9690\u85cf\u52a0\u8f7d\u72b6\u6001\n *\/\nexport function hideLoading() {\n  elements.loading.classList.add('hidden');\n}\n\n\/**\n * \u663e\u793a\u9519\u8bef\u4fe1\u606f\n * @param {string} message - \u9519\u8bef\u4fe1\u606f\n *\/\nexport function showError(message) {\n  elements.error.textContent = message;\n  elements.error.classList.remove('hidden');\n  elements.weatherCard.classList.add('hidden');\n}\n\n\/**\n * \u663e\u793a\u5929\u6c14\u4fe1\u606f\n * @param {Object} data - \u5929\u6c14\u6570\u636e\n *\/\nexport function showWeather(data) {\n  const { main, weather, wind, visibility, clouds, name } = data;\n\n  \/\/ \u66f4\u65b0\u57fa\u672c\u4fe1\u606f\n  elements.cityName.textContent = name;\n  elements.weatherDate.textContent = formatDate();\n\n  \/\/ \u66f4\u65b0\u5929\u6c14\u56fe\u6807\n  const iconCode = weather[0].icon;\n  elements.weatherIcon.textContent = weatherIcons[iconCode] || '\ud83c\udf21\ufe0f';\n\n  \/\/ \u66f4\u65b0\u6e29\u5ea6\n  elements.temperature.textContent = `${Math.round(main.temp)}\u00b0C`;\n  elements.description.textContent = weather[0].description;\n\n  \/\/ \u66f4\u65b0\u8be6\u7ec6\u4fe1\u606f\n  elements.humidity.textContent = `${main.humidity}%`;\n  elements.windSpeed.textContent = `${wind.speed} m\/s`;\n  elements.feelsLike.textContent = `${Math.round(main.feels_like)}\u00b0C`;\n  elements.pressure.textContent = `${main.pressure} hPa`;\n  elements.visibility.textContent = `${(visibility \/ 1000).toFixed(1)} km`;\n  elements.clouds.textContent = `${clouds.all}%`;\n\n  \/\/ \u663e\u793a\u5929\u6c14\u5361\u7247\n  elements.error.classList.add('hidden');\n  elements.weatherCard.classList.remove('hidden');\n}\n\n\/**\n * \u683c\u5f0f\u5316\u65e5\u671f\n * @returns {string} \u683c\u5f0f\u5316\u7684\u65e5\u671f\u5b57\u7b26\u4e32\n *\/\nfunction formatDate() {\n  const now = new Date();\n  const options = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n    weekday: 'long',\n    hour: '2-digit',\n    minute: '2-digit'\n  };\n  return now.toLocaleDateString('zh-CN', options);\n}\n\n\/**\n * \u66f4\u65b0\u5df2\u4fdd\u5b58\u57ce\u5e02\u5217\u8868\n * @param {string[]} cities - \u57ce\u5e02\u5217\u8868\n * @param {Function} onCityClick - \u57ce\u5e02\u70b9\u51fb\u56de\u8c03\n * @param {Function} onDeleteClick - \u5220\u9664\u6309\u94ae\u70b9\u51fb\u56de\u8c03\n *\/\nexport function updateSavedCities(cities, onCityClick, onDeleteClick) {\n  if (cities.length === 0) {\n    elements.savedCities.innerHTML = '<p class="empty-message">\u6682\u65e0\u4fdd\u5b58\u7684\u57ce\u5e02<\/p>';\n    return;\n  }\n\n  elements.savedCities.innerHTML = cities.map(city => `\n    <div class="city-tag" data-city="${city}">\n      <span>${city}<\/span>\n      <button class="delete-btn" data-city="${city}">\u00d7<\/button>\n    <\/div>\n  `).join('');\n\n  \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\n  elements.savedCities.querySelectorAll('.city-tag').forEach(tag => {\n    tag.addEventListener('click', (e) => {\n      if (!e.target.classList.contains('delete-btn')) {\n        onCityClick(tag.dataset.city);\n      }\n    });\n  });\n\n  elements.savedCities.querySelectorAll('.delete-btn').forEach(btn => {\n    btn.addEventListener('click', (e) => {\n      e.stopPropagation();\n      onDeleteClick(btn.dataset.city);\n    });\n  });\n}\n\n\/**\n * \u66f4\u65b0\u641c\u7d22\u5386\u53f2\n * @param {string[]} history - \u641c\u7d22\u5386\u53f2\n * @param {Function} onHistoryClick - \u5386\u53f2\u9879\u70b9\u51fb\u56de\u8c03\n *\/\nexport function updateSearchHistory(history, onHistoryClick) {\n  if (history.length === 0) {\n    elements.searchHistory.innerHTML = '<p class="empty-message">\u6682\u65e0\u641c\u7d22\u5386\u53f2<\/p>';\n    return;\n  }\n\n  elements.searchHistory.innerHTML = history.map(city => `\n    <div class="history-tag" data-city="${city}">\n      ${city}\n    <\/div>\n  `).join('');\n\n  \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\n  elements.searchHistory.querySelectorAll('.history-tag').forEach(tag => {\n    tag.addEventListener('click', () => {\n      onHistoryClick(tag.dataset.city);\n    });\n  });\n}\n\n\/**\n * \u5bfc\u51faDOM\u5143\u7d20\n *\/\nexport { elements };\n<\/code><\/pre>\n
              6. JavaScript\u4e3b\u5e94\u7528 (js\/app.js)<\/h3>\n
              import { getWeather } from '.\/api.js';\nimport * as storage from '.\/storage.js';\nimport * as ui from '.\/ui.js';\nimport { elements } from '.\/ui.js';\n\n\/\/ ==================== \u9632\u6296\u51fd\u6570 ====================\nfunction debounce(func, delay) {\n  let timeoutId;\n  return function(...args) {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => {\n      func.apply(this, args);\n    }, delay);\n  };\n}\n\n\/\/ ==================== \u67e5\u8be2\u5929\u6c14 ====================\nasync function searchWeather(city) {\n  if (!city || city.trim() === '') {\n    ui.showError('\u8bf7\u8f93\u5165\u57ce\u5e02\u540d\u79f0');\n    return;\n  }\n\n  ui.showLoading();\n\n  try {\n    const data = await getWeather(city);\n    ui.showWeather(data);\n    storage.addToHistory(city);\n    storage.saveLastCity(city);\n    updateUI();\n  } catch (error) {\n    ui.showError(error.message);\n  } finally {\n    ui.hideLoading();\n  }\n}\n\n\/\/ ==================== \u4fdd\u5b58\u57ce\u5e02 ====================\nfunction saveCurrentCity() {\n  const city = elements.cityName.textContent;\n  if (city && city !== '--') {\n    storage.addCity(city);\n    updateUI();\n  }\n}\n\n\/\/ ==================== \u5220\u9664\u57ce\u5e02 ====================\nfunction deleteCity(city) {\n  storage.removeCity(city);\n  updateUI();\n}\n\n\/\/ ==================== \u6e05\u7a7a\u5386\u53f2 ====================\nfunction clearHistory() {\n  if (confirm('\u786e\u5b9a\u8981\u6e05\u7a7a\u641c\u7d22\u5386\u53f2\u5417\uff1f')) {\n    storage.clearHistory();\n    updateUI();\n  }\n}\n\n\/\/ ==================== \u66f4\u65b0UI ====================\nfunction updateUI() {\n  \/\/ \u66f4\u65b0\u5df2\u4fdd\u5b58\u57ce\u5e02\n  const savedCities = storage.getSavedCities();\n  ui.updateSavedCities(savedCities, searchWeather, deleteCity);\n\n  \/\/ \u66f4\u65b0\u641c\u7d22\u5386\u53f2\n  const history = storage.getSearchHistory();\n  ui.updateSearchHistory(history, searchWeather);\n}\n\n\/\/ ==================== \u4e8b\u4ef6\u76d1\u542c ====================\nelements.searchBtn.addEventListener('click', () => {\n  const city = elements.cityInput.value.trim();\n  searchWeather(city);\n});\n\n\/\/ \u56de\u8f66\u952e\u641c\u7d22\nelements.cityInput.addEventListener('keypress', (e) => {\n  if (e.key === 'Enter') {\n    searchWeather(elements.cityInput.value.trim());\n  }\n});\n\n\/\/ \u4fdd\u5b58\u57ce\u5e02\nelements.saveCityBtn.addEventListener('click', saveCurrentCity);\n\n\/\/ \u5237\u65b0\u5929\u6c14\nelements.refreshBtn.addEventListener('click', () => {\n  const city = elements.cityName.textContent;\n  if (city && city !== '--') {\n    searchWeather(city);\n  }\n});\n\n\/\/ \u6e05\u7a7a\u5386\u53f2\nelements.clearHistoryBtn.addEventListener('click', clearHistory);\n\n\/\/ ==================== \u521d\u59cb\u5316 ====================\nfunction init() {\n  updateUI();\n\n  \/\/ \u6062\u590d\u4e0a\u6b21\u67e5\u8be2\u7684\u57ce\u5e02\n  const lastCity = storage.getLastCity();\n  if (lastCity) {\n    elements.cityInput.value = lastCity;\n    searchWeather(lastCity);\n  }\n\n  \/\/ \u805a\u7126\u8f93\u5165\u6846\n  elements.cityInput.focus();\n}\n\n\/\/ \u542f\u52a8\u5e94\u7528\ninit();\n<\/code><\/pre>\n
              \u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n
              1. API\u5bc6\u94a5\u5b89\u5168<\/h3>\n
              \u26a0\ufe0f \u4e0d\u8981\u5728\u524d\u7aef\u4ee3\u7801\u4e2d\u786c\u7f16\u7801API\u5bc6\u94a5\uff01<\/strong><\/p>\n
              \u8fd9\u4e2a\u9879\u76ee\u4e3a\u4e86\u6f14\u793a\u65b9\u4fbf\uff0c\u76f4\u63a5\u5728\u4ee3\u7801\u4e2d\u4f7f\u7528\u4e86API\u5bc6\u94a5\u3002\u4f46\u5728\u751f\u4ea7\u73af\u5883\u4e2d\uff0c\u4f60\u5e94\u8be5\uff1a<\/p>\n
                \n
              1. \u4f7f\u7528\u4ee3\u7406\u670d\u52a1\u5668<\/strong><\/li>\n<\/ol>\n
                \/\/ \u524d\u7aef\nconst response = await fetch('\/api\/weather?city=Beijing');\n\n\/\/ \u540e\u7aef\uff08Node.js\uff09\napp.get('\/api\/weather', async (req, res) => {\n  const city = req.query.city;\n  const apiKey = process.env.OPENWEATHERMAP_API_KEY; \/\/ \u4ece\u73af\u5883\u53d8\u91cf\u8bfb\u53d6\n  const url = `${API_BASE}?q=${city}&appid=${apiKey}`;\n  const response = await fetch(url);\n  const data = await response.json();\n  res.json(data);\n});\n<\/code><\/pre>\n
                2. \u9519\u8bef\u5904\u7406<\/h3>\n
                \u5173\u952e\u9519\u8bef\u573a\u666f<\/strong>\uff1a<\/p>\n