Vue3（4）_vue3语音识别-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145631699

一.ChatGPT & Copilot

1.AI的认知 & 两个工具

认知同步：

1.AI 早已不是新事物 (接受) => 语音识别，人脸识别，无人驾驶，智能机器人… (包括 ChatGPT 也是研发了多年的产物)
2.AI 本质是智能工具 (认识) => 人工智能辅助，可以提升效率，但不具备思想意识，无法从零到一取代人类工作
3.AI 一定会淘汰掉一部分人 => 逆水行舟，不进则退；学会拥抱变化，尽早上车

两个工具：

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

2.ChatGPT的基本使用（Prompt优化）

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

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

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

明确提问：
确保问题表述清晰明确，关键字的准确度，决定了AI 对于需求的理解。
细化需求：
将问题拆分成多个小问题，可以帮助AI更具针对性地回答，也利于即时纠错。
添加背景信息：
提供有关问题背景的详细信息，也可以给 AI 预设一个角色，将有助于AI生成更具深度和价值的回答。
适当引导：
比如：“例如”、“请注意”、“请使用”等，来告诉模型你期望它做什么或者不做什么
限制范围：
通过限定回答的范围和长度，可以引导AI生成更精炼的回答
…

案例 - 前端简历

Prompt 优化前：

Prompt1:

前端简历

Prompt 优化后：

Prompt1:

背景：你是一名【具有三年开发经验】的前端开发工程师，这三年期间，前两年，你做的【金融】相关四个项目，最后一年做的是【医疗】相关领域的两个项目，且有一定的管理 10人+ 团队的经验。主要的技术栈：【Vue】和【小程序】。由于你是计算机软件工程专业，所以你具备一些Java后台、Mysql数据库的知识，也掌握一些基础的算法。

问题：你会如何编写你的简历个人技能介绍

要求：8条技能介绍，请注意：你不会 angular。

Prompt2：

基于上文情境，你会如何编写你的项目经验介绍

Prompt3：

你刚才说的方向完全没有问题，但是我想看到更多的项目技术亮点，项目业务解决方案。
请注意：每个项目3个技术亮点，3个业务解决方案。

3.Copilot的基本使用（代码实战，高校编码）

安装步骤

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

使用说明

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

4.个人中心项目实战

（1）个人中心项目实战-基本资料

静态结构 + 校验处理

请基于 elementPlus 和 Vue3 的语法，生成组件代码
要求：
一、表单结构要求
1.组件中包含一个el-form表单，有四行内容，前三行是输入框，第四行是按钮
2.第一行 label 登录名称，输入框禁用不可输入状态
3 第二行 label 用户昵称，输入框可输入
4.第三行 label 用户邮箱，输入框可输入
5.第四行按钮，提交修改

二、校验需求
给昵称和邮箱添加校验
6. 昵称 nickname 必须是2-10位的非空字符串
7. 邮箱 email 符合邮箱格式即可，且不能为空

<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
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>
  <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>

封装接口

封装接口，更新个人信息

1.封装接口

export const userUpdateInfoService = ({ id, nickname, email }) =>
request.put(‘/my/userinfo’, { id, nickname, email })

2.页面中校验后，封装调用

const formRef = ref()
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    await userUpdateInfoService(userInfo.value)
    await getUser()
    ElMessage.success('修改成功')
  }
}

（2）个人中心项目实战 - 更换头像

静态结构

<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
>

上传头像

1.封装接口

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

2.调用接口

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

（3）个人中心项目实战 - 重置密码

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>

封装接口，更新密码信息

1.封装接口

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

2.页面中调用

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()
}