# 0225剑桥22计科12-VUE

**Repository Path**: darkTchr/0225jq22jk12-vue

## Basic Information

- **Project Name**: 0225剑桥22计科12-VUE
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-02-25
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 结课报告
- 综合项目：城市生活助手
- 核心概念：通过天气数据影响电商商品推荐（如雨天推荐雨具）
- 技术栈：Vue CLI + 组件化 + 事件总线EventBus + localStorage
![输入图片说明](imgs/%E5%8A%9F%E8%83%BD%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1.png)
### 核心功能
1. 智能天气推荐（原天气面板升级）
用户输入城市后：

显示实时天气（温度、降雨概率）

根据天气自动推荐商品：
```
// 推荐逻辑示例
getRecommendations() {
  if (this.weather.rainProbability > 30) {
    return this.products.filter(p => p.tags.includes('rain'))
  }
  if (this.weather.temp > 28) {
    return this.products.filter(p => p.tags.includes('summer'))
  }
}
```

2. 情景化电商展示（原电商系统升级）
商品数据新增tags字段:
```
products: [
  {
    id: 1,
    name: "折叠雨伞",
    price: 59,
    tags: ["rain"], // 新增情景标签
    recommendText: "雨天必备" // 推荐话术
  },
  {
    id: 2,
    name: "冰镇可乐",
    price: 3,
    tags: ["summer"],
    recommendText: "解暑佳品" 
  }
]
```
3. 联动交互设计
当用户查看某城市天气时：

商品列表自动切换为「天气推荐」模式

商品卡片显示推荐理由标签：
```
<div v-if="isWeatherRecommend" class="recommend-badge">
  {{ item.recommendText }}
</div>
```

### 二、项目结构优化
```
src/
├── components/
│   ├── WeatherPanel/       # 天气模块组件群
│   │   ├── CitySearch.vue
│   │   └── WeatherDisplay.vue
│   ├── Product/
│   │   ├── ProductList.vue 
│   │   └── ProductItem.vue 
│   └── Cart/
│       ├── CartBadge.vue
│       └── CartPopup.vue
├── utils/
│   ├── eventBus.js   
│   └── weatherAPI.js       # 封装天气请求
└── App.vue                 # 主逻辑协调
```

### 三、关键融合技术实现
1. 天气数据与商品列表联动
```
// App.vue
data() {
  return {
    currentWeather: null,
    displayMode: 'all' // 'all'或'recommend'
  }
},
watch: {
  currentWeather() {
    this.displayMode = 'recommend'
  }
}
```
2. 商品列表智能切换
```
<!-- ProductList.vue -->
<template>
  <div>
    <button @click="toggleMode">
      {{ isRecommendMode ? '显示全部' : '只看推荐' }}
    </button>
    
    <ProductItem 
      v-for="item in filteredProducts"
      :key="item.id"
      :data="item"
    />
  </div>
</template>

<script>
export default {
  props: ['recommendMode', 'weatherData'],
  computed: {
    filteredProducts() {
      return this.recommendMode 
        ? this.getRecommendations() 
        : this.allProducts
    }
  }
}
</script>
```
3. 本地数据持久化设计
```
// 保存用户偏好
localStorage.setItem('lastCity', '北京')
localStorage.setItem('cartItems', JSON.stringify(cartData))
```

## 推送远程仓库：
1. 安装git
2. 重启vscode
3. win + r  输入cmd  回车 ，在终端分别执行
    ```
    git config --global user.name "你的用户名"
    git config --global user.email "你绑定的邮箱"
    ```
    执行后没反应是正确的
4. 添加远程仓库地址
    - 打开最外层总文件夹
    - 版本控制页面 源代码管理... -> 远程 -> 添加远程仓库地址
    - 粘贴地址，回车（不要点击其他选项）
    - 输入  origin  回车
5. 创建本地分支
    - 点击 版本控制界面 “填写提交备注”->“提交”按钮
    - 源代码管理... -> 分支 -> 重命名分支。“学号姓名” ：20221234567张三
6. 版本控制界面，点击“同步/推送/发布”，弹出登录框用gitee手机号密码登录