目录

1. ChatGPT & Copilot

1.1 工具 Github Copilot 智能生成代码的使用

2. 个人中心项目实战 - 基本资料

2.1 静态结构

2.2 校验处理

2.3 封装接口，更新个人信息

3. 个人中心项目实战 - 更换头像

3.1 静态结构

3.2 选择预览图片

3.3 上传头像

4. 个人中心项目实战 - 重置密码

4.1 静态结构

4.2 校验处理

4.3 封装接口，更新密码信息

4.4 表单重置

---

1. ChatGPT & Copilot

两个工具：

• ChatGPT 3.5 的使用 (4.0 使用方式一致，回答准确度更高，但付费，且每3小时，有次数限制)

  • 正常注册流程 (IP限制，手机号限制)

  • 三方整合产品

    • 推荐：https://github.com/LiLittleCat/awesome-free-chatgpt

    • 谷歌搜索：chatgpt 免费网站列表

• 工具 Github Copilot 智能生成代码（付费，免费使用30天）

1.1 工具 Github Copilot 智能生成代码的使用

① 安装步骤

• 登录 github，试用 Copilot

• 打开 vscode， 搜索并安装插件 Copilot

② 使用说明

• 删除键：不接受

• Tab键：接收

• Ctrl + enter： 查看更多方案

说明：

• 提高开发效率，但是还是多写多练。（免费试用30天）

2. 个人中心项目实战 - 基本资料

2.1 静态结构

<template>
  <PageContainer title="基本资料" style="height: 80%">
    <template #default>
      <el-form
        :model="formData"
        :rules="rules"
        label-width="100px"
        ref="formRef"
      >
        <el-form-item label="登录名称" prop="username">
          <el-input
            style="width: 30%"
            disabled
            v-model="formData.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input style="width: 30%" v-model="formData.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input style="width: 30%" v-model="formData.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交修改</el-button>
        </el-form-item>
      </el-form>
    </template>
  </PageContainer>
</template>

2.2 校验处理

import { ref } from 'vue'
import { useUserStore } from '@/stores'
const rules = {
  nickname: [
    {
      required: true,
      message: '请输入用户昵称',
      trigger: 'blur'
    },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱地址',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: '邮箱格式不正确',
      trigger: ['blur', 'change']
    }
  ]
}
const userStore = useUserStore()
const userInfo = userStore.userInfo

const formData = ref({ ...userInfo })

2.3 封装接口，更新个人信息

① 封装接口

② 页面中校验后，封装调用

3. 个人中心项目实战 - 更换头像

3.1 静态结构

<template>
  <PageContainer title="更换头像" style="height: 80%">
    <template #default>
      <el-upload
        ref="uploadRef"
        class="avatar-uploader"
        :show-file-list="false"
        :on-change="onUploadFile"
        :auto-upload="false"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <br />
      <el-button type="primary" :icon="Plus" @click="selectImage"
        >选择图片</el-button
      >
      <el-button type="success" :icon="Upload" @click="onSubmit"
        >上传头像</el-button
      >
    </template>
  </PageContainer>
</template>

3.2 选择预览图片

3.3 上传头像

① 封装接口

② 接口调用

③ 视图更新

• 调用之前 pinia 里面获取用户信息的方法，存入仓库

4. 个人中心项目实战 - 重置密码

4.1 静态结构

<template>
  <PageContainer title="重置密码" style="height: 80%">
    <template #default>
      <el-form
        :model="formData"
        :rules="rules"
        label-width="100px"
        ref="formRef"
      >
        <el-form-item label="原密码" prop="old_pwd">
          <el-input
            style="width: 30%"
            v-model="formData.old_pwd"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new_pwd">
          <el-input
            style="width: 30%"
            type="password"
            v-model="formData.new_pwd"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="re_pwd">
          <el-input
            style="width: 30%"
            type="password"
            v-model="formData.re_pwd"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改密码</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </PageContainer>
</template>

4.2 校验处理

const formData = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})

// 自定义新密码校验规则函数
const checkOldSame = (rule, value, cb) => {
  if (value === formData.value.old_pwd) {
    cb(new Error('原密码和新密码不能一样。'))
  } else {
    cb()
  }
}
// 自定义再次输入新密码校验规则函数
const checkNewSame = (rule, value, cb) => {
  if (value !== formData.value.new_pwd) {
    cb(new Error('新密码和再次确认输入的密码不一致。'))
  } else {
    cb()
  }
}
// 校验规则
const rules = {
  old_pwd: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    }
  ],
  new_pwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    {
      validator: checkOldSame,
      trigger: 'blur'
    }
  ],
  re_pwd: [
    {
      required: true,
      message: '请再次确认新密码',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/,
      message: '密码长度必须是6-15位的非空字符串',
      trigger: 'blur'
    },
    {
      validator: checkNewSame,
      trigger: 'blur'
    }
  ]
}

4.3 封装接口，更新密码信息

① 封装接口

② 页面中调用

4.4 表单重置