目录
1.1 工具 Github Copilot 智能生成代码的使用
1. ChatGPT & Copilot
两个工具：
ChatGPT 3.5 的使用 (4.0 使用方式一致，回答准确度更高，但付费，且每3小时，有次数限制)
正常注册流程 (IP限制，手机号限制)
三方整合产品
谷歌搜索：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 表单重置
