AI 综合实践AI的基本认知认知同步 AI 早已不是新事物 (接受) 语音识别，人脸识别，无人驾驶，智能机器人...

AI的基本认知

认知同步

AI 早已不是新事物 (接受)

语音识别，人脸识别，无人驾驶，智能机器人... (包括 ChatGPT 也是研发了多年的产物)
AI 本质是智能工具 (认识)

人工智能辅助，可以提升效率，但不具备思想意识，无法从零到一取代人类工作
AI 一定会淘汰掉一部分人

但会衍生出新的职业方向

两个工具：

ChatGPT 3.5 的使用 (4.0 使用方式一致，回答准确度更高，但付费，且每3小时，有次数限制)
1. 正常注册流程 (IP限制，手机号限制)
2. 三方整合产品
  - 谷歌搜索：chatgpt 免费网站列表
  - github.com/LiLittleCat…
工具 Github Copilot 智能生成代码

ChatGPT 的基本使用 - Prompt 优化

AI 互动的过程中，容易出现的问题：

AI未能理解问题的核心要点
AI的回答过于宽泛或过于具体
AI提供了错误的信息或观点
AI未能提供有价值的建议或解决方案

在识别了问题所在之后，我们可以尝试以下策略来优化我们的Prompt：

明确提问：

确保问题表述清晰明确，关键字的准确度，决定了AI 对于需求的理解。
细化需求：

将问题拆分成多个小问题，可以帮助AI更具针对性地回答，也利于即时纠错。
添加背景信息：

提供有关问题背景的详细信息，也可以给 AI 预设一个角色，将有助于AI生成更具深度和价值的回答。
适当引导：

比如：“例如”、“请注意”、“请使用”等，来告诉模型你期望它做什么或者不做什么
限制范围：

通过限定回答的范围和长度，可以引导AI生成更精炼的回答

...

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

安装步骤

登录 github，试用 Copilot
打开 vscode，搜索并安装插件 Copilot

使用说明

删除键：不接受
Tab键：接收
Ctrl + enter：查看更多方案

个人中心项目实战

基本资料

chatgpt prompt 提示词参考：

基于 elementPlus 和 Vue3 的语法，生成组件代码

要求：

一、表单结构要求

组件中包含一个el-form表单，有四行内容，前三行是输入框，第四行是按钮

第一行 label 登录名称，输入框禁用不可输入状态

第二行 label 用户昵称，输入框可输入

第三行 label 用户邮箱，输入框可输入

第四行按钮，提交修改

二、校验需求

给昵称和邮箱添加校验

昵称 nickname 必须是2-10位的非空字符串
邮箱 email 符合邮箱格式即可，且不能为空

代码：

<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import {useUserStore} from '@/stores'

const formRef = ref()

//是在使用仓库中数据的初始值（无需响应式）解构无问题，所以要使用仓库中的数据
const {
  user: { username, nickname, email, id }
} = useUserStore()

const userInfo = ref({ username, nickname, email, id })

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' }
  ]
}
</script>

//template #default 默认为插槽
<template>
  <page-container title="基本资料">
    <el-row>
      <el-col :span="12">
        <el-form
          :model="userInfo"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-form-item label="登录名称">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
</template>

封装接口，更新个人信息

封装接口

//更新用户基本信息
export const userUpdateInfoService = ({ id, nickname, email }) =>
  request.put('/my/userinfo', { id, nickname, email })

页面中校验后，封装调用

const formRef = ref()
const onSubmit = async () => {
//等待校验结果

  const valid = await formRef.value.validate()
  if (valid) {
  //提交修改
    await userUpdateInfoService(userInfo.value)
  //通知user 模块，进行数据的更新
    await getUser()
    ElMessage.success('修改成功')
  }
}

更换头像

静态结构

<script setup>
import { ref } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

const imgUrl = ref(userStore.user.user_pic)
const onUploadFile = (file) => {
  console.log(file)
}
</script>

<template>
  <page-container title="更换头像">
    <el-row>
      <el-col :span="12">
        <el-upload
          ref="uploadRef"
          class="avatar-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onUploadFile"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <img v-else src="@/assets/avatar.jpg" width="278" />
        </el-upload>
        <br />
        <el-button type="primary" :icon="Plus" size="large">
          选择图片
        </el-button>
        <el-button type="success" :icon="Upload" size="large">
          上传头像
        </el-button>
      </el-col>
    </el-row>
  </page-container>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>

选择预览图片

const uploadRef = ref()
const imgUrl = ref(userStore.user.user_pic)
const onUploadFile = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imgUrl.value = reader.result
  }
}
<el-upload ref="uploadRef"></el-upload> 
<el-button
  @click="uploadRef.$el.querySelector('input').click()"
  type="primary"
  :icon="Plus"
  size="large"
  >选择图片</el-button
>

上传头像

封装接口

export const userUploadAvatarService = (avatar) => request.patch('/my/update/avatar', { avatar })

调用接口

const onUpdateAvatar = async () => {
  await userUploadAvatarService(imgUrl.value)
  await userStore.getUser()
  ElMessage({ type: 'success', message: '更换头像成功' })
}

重置密码

chatgpt prompt

请基于 elementPlus 和 Vue3 的语法，生成组件代码

要求：

一、表单结构要求

组件中包含一个el-form表单，有四行内容，前三行是表单输入框，第四行是两个按钮

第一行 label 原密码

第二行 label 新密码

第三行 label 确认密码

第四行两个按钮，修改密码和重置

二、form绑定字段如下： const pwdForm = ref({ old_pwd: '', new_pwd: '', re_pwd: '' })

三、校验需求所有字段，都是 6-15位非空自定义校验1：原密码和新密码不能一样自定义校验2：新密码和确认密码必须一样

静态结构 + 校验处理

<script setup>
import { ref } from 'vue'
const pwdForm = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})

const checkOldSame = (rule, value, cb) => {
  if (value === pwdForm.value.old_pwd) {
    cb(new Error('原密码和新密码不能一样!'))
  } else {
    cb()
  }
}

const checkNewSame = (rule, value, cb) => {
//校验确认密码必须和新密码一样
  if (value !== pwdForm.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' }
  ]
}
</script>
<template>
  <page-container title="重置密码">
    <el-row>
      <el-col :span="12">
        <el-form
          :model="pwdForm"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          size="large"
        >
          <el-form-item label="原密码" prop="old_pwd">
            <el-input v-model="pwdForm.old_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="new_pwd">
            <el-input v-model="pwdForm.new_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="re_pwd">
            <el-input v-model="pwdForm.re_pwd" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit" type="primary">修改密码</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
</template>

封装接口，更新密码信息

封装接口

export const userUpdatePassService = ({ old_pwd, new_pwd, re_pwd }) =>
  request.patch('/my/updatepwd', { old_pwd, new_pwd, re_pwd })

页面中调用

const formRef = ref()
const router = useRouter()
const userStore = useUserStore()
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await userUpdatePassService(pwdForm.value)
    ElMessage({ type: 'success', message: '更换密码成功' })
    userStore.setToken('')
    userStore.setUser({})
    router.push('/login')
  }
}
const onReset = () => {
  formRef.value.resetFields()
}