Vue笔记（十）

一、AI的基本认知

二、ChatGPT的基本使用

三、AI插件--Copilot入门

1.Copilot是由OpenAI和GitHub合作开发的AI编程辅助插件，基于大量代码训练，能根据上下文自动生成代码建议。
2.安装与配置：在常用代码编辑器（如Visual Studio Code）的插件市场搜索“Copilot”进行安装；安装后可能需登录GitHub账号完成授权配置，以激活使用权限。
基本使用方法：在编辑器中输入代码时，Copilot会实时分析上下文，以灰色字体显示代码补全建议，按Tab键可快速插入；支持多种编程语言，在不同语言项目中都能依据语法和常见代码模式给出合适建议。
3.在Vue开发中的应用：在Vue组件中，能快速生成模板代码、数据定义、方法声明等；比如创建新Vue组件时，自动生成 <template> 、 <script> 、 <style> 标签结构，甚至根据功能描述生成特定业务逻辑代码。

<template>
  <div>
    <!-- 这里是组件内容 -->
  </div>
</template>
 
 
输入 <script> ，可能补全为：
 
<script>
export default {
  data() {
    return {
      // 数据属性
    };
  },
  methods: {
    // 方法定义
  }
};
</script>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      userList: []
    };
  },
  methods: {
    async getUserList() {
      try {
        const response = await axios.get('/api/users');
        this.userList = response.data;
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    }
  }
};
</script>

四、个人中心

（一）基本资料

<template>
  <div class="user-profile">
    <img :src="userInfo.avatarUrl" alt="头像" class="avatar">
    <div class="info-section">
      <p>昵称：{{ userInfo.nickname }}</p>
      <p>性别：{{ userInfo.gender }}</p>
      <p>联系方式：{{ userInfo.contact }}</p>
      <button @click="editProfile">编辑</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo() {
      try {
        // 假设使用axios进行数据请求
        const response = await axios.get('/api/user/profile');
        this.userInfo = response.data;
      } catch (error) {
        console.error('获取用户信息失败', error);
      }
    },
    editProfile() {
      // 这里可以添加逻辑，如跳转到编辑页面或切换到编辑状态
      console.log('进入编辑模式');
    }
  }
};
</script>
.user-profile {
  display: flex;
  align-items: center;
  padding: 20px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}
.info-section {
  flex: 1;
}
button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #1e90ff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

（二）更换头像--静态布局

<template>
  <div class="avatar-change-page">
    <!-- 头部区域 -->
    <div class="header">
      <button @click="goBack">返回</button>
      <h2>更换头像</h2>
    </div>
    <!-- 主体区域 -->
    <div class="main">
      <div class="current-avatar">
        <img :src="currentAvatarUrl" alt="当前头像">
      </div>
      <div class="upload-section">
        <input type="file" @change="handleFileChange" accept="image/*">
        <button @click="uploadAvatar">上传头像</button>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="footer">
      <button @click="saveChanges">保存</button>
      <button @click="cancelChanges">取消</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentAvatarUrl: 'default-avatar-url.jpg', // 当前头像的URL，需根据实际获取
      selectedFile: null // 选择的新头像文件
    };
  },
  methods: {
    goBack() {
      // 实现返回上一页的逻辑，可能是路由跳转
      console.log('返回上一页');
    },
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadAvatar() {
      if (this.selectedFile) {
        // 实现上传头像到服务器的逻辑
        console.log('上传头像', this.selectedFile);
      }
    },
    saveChanges() {
      // 保存更换头像的操作，可能涉及向服务器发送请求
      console.log('保存更改');
    },
    cancelChanges() {
      // 取消更换头像操作，可能恢复原来的头像
      console.log('取消更改');
    }
  }
};
</script>
.avatar-change-page {
  display: flex;
  flex-direction: column;
  height: 100vh;

 .header {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;

    button {
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    h2 {
      flex: 1;
      text-align: center;
      margin: 0;
    }
  }

 .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

   .current-avatar {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 20px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

   .upload-section {
      display: flex;
      flex-direction: column;
      align-items: center;

      input[type="file"] {
        margin-bottom: 10px;
      }

      button {
        background-color: #1e90ff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }

 .footer {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #f0f0f0;

    button {
      background-color: #1e90ff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

（三）预览和上传头像

1.头像预览：利用FileReader对象读取选择的图片文件，将其转换为Data URL格式，从而在页面上实现头像的实时预览。这样用户在上传前就能确认所选图片是否正确。

2.上传头像：涉及与后端服务器的交互，通常会使用FormData对象来组装包含图片文件的表单数据，并通过HTTP请求（如POST方法）将数据发送到服务器指定的接口。服务器接收到数据后进行处理和存储。

3.错误处理：在预览和上传过程中，可能会遇到各种错误，如文件格式不支持、网络连接问题、服务器响应错误等。需要了解如何在前端捕获这些错误，并给用户提供友好的提示信息。

<template>
  <div>
    <input type="file" @change="handleFileSelect">
    <img v-if="previewUrl" :src="previewUrl" alt="头像预览">
    <button @click="uploadAvatar">上传头像</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
      selectedFile: null
    };
  },
  methods: {
    handleFileSelect(event) {
      const file = event.target.files[0];
      if (file) {
        this.selectedFile = file;
        const reader = new FileReader();
        reader.onload = (e) => {
          this.previewUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    async uploadAvatar() {
      if (!this.selectedFile) {
        console.log('请先选择图片');
        return;
      }
      const formData = new FormData();
      formData.append('avatar', this.selectedFile);
      try {
        // 假设使用axios库发送请求
        const response = await axios.post('/api/upload-avatar', formData, {
          headers: {
            'Content-Type':'multipart/form-data'
          }
        });
        if (response.status === 200) {
          console.log('头像上传成功');
          // 可在此处添加更新本地头像显示或通知服务器更新用户头像信息的逻辑
        }
      } catch (error) {
        console.error('头像上传失败', error);
        // 根据错误类型给用户不同提示，如网络问题、服务器错误等
      }
    }
  }
};
</script>

（四）重置密码

在Vue组件中，HTML部分构建重置密码的表单结构，包含旧密码、新密码、确认新密码的输入框及提交按钮。CSS用于美化表单样式，增强用户体验。JavaScript则处理表单提交事件，验证密码格式，调用后端API传递数据，如使用 fetch 或 axios 库发起HTTP请求

<template>
  <div>
    <form @submit.prevent="resetPassword">
      <label for="oldPassword">旧密码:</label>
      <input type="password" id="oldPassword" v-model="oldPassword" required>
      <label for="newPassword">新密码:</label>
      <input type="password" id="newPassword" v-model="newPassword" required minlength="8">
      <label for="confirmPassword">确认新密码:</label>
      <input type="password" id="confirmPassword" v-model="confirmPassword" required>
      <button type="submit">重置密码</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  },
  methods: {
    async resetPassword() {
      if (this.newPassword!== this.confirmPassword) {
        alert('两次输入的新密码不一致');
        return;
      }
      try {
        const response = await axios.post('/api/resetPassword', {
          oldPassword: this.oldPassword,
          newPassword: this.newPassword
        });
        if (response.data.success) {
          alert('密码重置成功');
        } else {
          alert('密码重置失败，请检查旧密码是否正确');
        }
      } catch (error) {
        console.error('重置密码时出错:', error);
        alert('网络错误，请稍后重试');
      }
    }
  }
};
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
}
label {
  margin-top: 10px;
}
input {
  margin-top: 5px;
  padding: 5px;
}
button {
  margin-top: 10px;
  padding: 5px 10px;
}
</style>