黑马 大事件项目 笔记

学习视频：黑马 Vue2+3 课程

在线演示：https://fe-bigevent-web.itheima.net/login

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835

接口根路径： http://big-event-vue-api-t.itheima.net

本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOquE6qb-1693121158082)(assets/image-20230711003405635.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2HPDqHw-1693121279346)(assets/image-20230706205300370.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOOMivHe-1693121279346)(assets/image-20230706210947086.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1zYhksR-1693121279347)(assets/image-20230706211055251.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Lu5m6J0-1693121279347)(assets/image-20230706211033589.png)]

一些优势：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

创建项目：

补充：
创建项目方法2：

创建项目方法3：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyEzUEqg-1693121279347)(assets/image-20230710172832242.png)]

ESLint 关注于规范
prettier 关注于美观度

环境同步：

1. 安装了插件 ESlint，开启保存自动修复
2. 禁用了插件 Prettier，并关闭保存自动格式化

配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

   1. 单引号

   2. 不使用分号

   3. 每行宽度至多80字符

   4. 不加对象|数组最后逗号

   5. 换行符号不限制（win mac 不一致）

2. vue组件名称多单词组成（忽略index.vue）

3. props解构（关闭）

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

1. git初始化 git init

2. 初始化 husky 工具配置 https://typicode.github.io/husky/

3. 修改 .husky/pre-commit 文件

问题： 默认进行的是全量检查，耗时问题，历史问题。

所以，要这样做,就只看暂存区的代码：
lint-staged 配置

1. 安装

2. 配置

3. 修改 .husky/pre-commit 文件

默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是两个工作：

• 删除初始化的默认文件
• 修改剩余代码内容
• 新增调整我们需要的目录结构
• 拷贝初始化资源文件，安装预处理器插件

1. 删除文件

2. 修改内容

3. 新增需要目录 api utils

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UX3UvT0z-1693121279347)(assets/image-20230710215822678.png)]

4. 将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

• 安装 sass 依赖

App.vue

基础代码解析

import.meta.env.base_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html

在vite.config.js

官方文档： https://element-plus.org/zh-CN/

• 安装

自动按需：

1. 安装插件

2. 然后把下列代码插入到你的 或 的配置文件中,在vite.config.js

3. 直接使用,（其余啥也不用做，就好像全部引入一样方便

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntmCPVQ6-1693121279347)(assets/image-20230710225018162.png)]

彩蛋： 默认 components 下的文件也会被自动注册~

建仓库

App.vue

user.js

持久化

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1. 安装插件 pinia-plugin-persistedstate

2. 使用 main.js

3. 配置 stores/user.js

pinia 独立维护

- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

main.js

stores / index.js

仓库 统一导出

- 现在：使用一个仓库 import { useUserStore } from 不同仓库路径不一致

- 优化：由 stores/index.js 统一导出，导入路径统一 ，而且仓库维护在 stores/modules 中

stores / index.js

App.vue

store / modules / counter.js

1. 创建 axios 实例

们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

1. 安装 axios

2. 新建 封装 axios 模块

   利用 axios.create 创建一个自定义的 axios 来使用

   http://www.axios-js.com/zh-cn/docs/#axios-create-config

utils / request.js

2. 完成 axios 基本配置

utils / request.js

实现目标:

• 完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
• 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
• 我们需要搭建嵌套路由

目标：

• 把项目中所有用到的组件及路由表, 约定下来

约定路由规则

明确了路由规则，可以全部配完，也可以边写边配。

router / index.js

App.vue

1. 安装 element-plus 图标库

2. 静态结构准备

实现注册校验

【需求】注册页面基本校验

1. 用户名非空，长度校验5-10位
2. 密码非空，长度校验6-15位
3. 再次输入密码，非空，长度校验6-15位

1. 结构相关
   el-row表示一行，一行分成24份
   el-col表示列
   (1) :span=“12” 代表在一行中，占12份 (50%)
   (2) :span=“6” 表示在一行中，占6份 (25%)
   (3) :offset=“3” 代表在一行中，左侧margin份数

2. 校验相关
   (1) el-form => :model=“ruleForm” 绑定的整个form的数据对象 { xxx, xxx, xxx }
   (2) el-form => :rules=“rules” 绑定的整个rules规则对象 { xxx, xxx, xxx }
   (3) 表单元素 => v-model=“ruleForm.xxx” 给表单元素，绑定form的子属性
   (4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)

整个表单的校验规则

1. 非空校验 required: true message消息提示， trigger触发校验的时机 blur change
2. 长度校验 min:xx, max: xx
3. 正则校验 pattern: 正则规则 S 非空字符
4. 自定义校验 => 自己写逻辑校验 (校验函数)
   validator: (rule, value, callback)
   (1) rule 当前校验规则相关的信息
   (2) value 所校验的表单元素目前的表单值
   (3) callback 无论成功还是失败，都需要 callback 回调
   - callback() 校验成功
   - callback(new Error(错误信息)) 校验失败

注意：

1. model 属性绑定 form 数据对象

2. v-model 绑定 form 数据对象的子属性

3. rules 配置校验规则

4. prop 绑定校验规则

prop绑在el-form-item上

注册前的预校验

需求：点击注册按钮，注册之前，需要先校验

1. 通过 ref 获取到 表单组件

2. 注册之前进行校验

封装 api 实现注册功能

需求：封装注册api，进行注册，注册成功切换到登录

1. 新建 api/user.js 封装

2. 页面中调用

3. eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

实现登录校验

【需求说明】给输入框添加表单校验

1. 用户名不能为空，用户名必须是5-10位的字符，失去焦点 和 修改内容时触发校验
2. 密码不能为空，密码必须是6-15位的字符，失去焦点 和 修改内容时触发校验

操作步骤：

1. model 属性绑定 form 数据对象，直接绑定之前提供好的数据对象即可

2. rules 配置校验规则，共用注册的规则即可

3. v-model 绑定 form 数据对象的子属性

4. prop 绑定校验规则

5. 切换的时候重置

登录前的预校验 & 登录成功

【需求说明1】登录之前的预校验

• 登录请求之前，需要对用户的输入内容，进行校验
• 校验通过才发送请求

【需求说明2】登录功能

1. 封装登录API，点击按钮发送登录请求
2. 登录成功存储token，存入pinia 和 持久化本地storage
3. 跳转到首页，给提示

【测试账号】

• 登录的测试账号: shuaipeng

• 登录测试密码: 123456

PS: 每天账号会重置，如果被重置了，可以去注册页，注册一个新号

实现步骤：

1. 注册事件，进行登录前的预校验 (获取到组件调用方法)

2. 封装接口 API

3. 调用方法将 token 存入 pinia 并 自动持久化本地

架子组件列表：

el-container

• el-aside 左侧

  • el-menu 左侧边栏菜单

• el-container 右侧

  • el-header 右侧头部
    • el-dropdown
  • el-main 右侧主体
    • router-view

el-menu 整个菜单组件
:default-active=“$route.path” 配置默认高亮的菜单项
router router选项开启，el-menu-item 的 index 就是点击跳转的路径
el-menu-item 菜单项
index=“/article/channel” 配置的是访问的跳转路径，配合default-active的值，实现高亮

需求：只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问

router / index.js

1. 封装接口

2. stores/modules/user.js 定义数据

3. 页面中调用

4. 动态渲染

1. 注册点击事件

2. 添加退出功能

3. pinia user.js 模块 提供 setUser 方法

LayoutContainer.vue

1. 基本结构样式，用到了 el-card 组件

2. 考虑到多个页面复用，封装成组件
   • props 定制标题
   • 默认插槽 default 定制内容主体
   • 具名插槽 extra 定制头部右侧额外的按钮

3. 页面中直接使用测试 ( unplugin-vue-components 会自动注册)

• 文章分类测试：

• 文章管理测试：

封装API - 请求获取表格数据

1. 新建 封装获取频道列表的接口

2. 页面中调用接口，获取数据存储

el-table 表格动态渲染

views / article / ArticleChannel.vue

el-table 表格 loading 效果

1. 定义变量，v-loading绑定

2. 发送请求前开启，请求结束关闭

el-empty 空状态

点击显示弹层

1. 准备弹层

2. 点击事件

封装弹层组件 ChannelEdit

添加 和 编辑，可以共用一个弹层，所以可以将弹层封装成一个组件

, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑
open调用后，可以打开弹窗

1. open({ }) => 添加操作，添加表单初始化无数据
2. open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

1. 封装组件
   因为它是属于当前模块的组件，所以不要建在外面，就直接建在当前文件article 里面，最开始看写好的代码，还以为是解构建错了，原来components是很灵活的，不一定要建在公共滴

向外暴露：

2. 通过 ref 绑定

3. 点击调用方法显示弹窗

准备弹层表单

1. 准备数据 和 校验规则

2. 准备表单

3. 编辑需要回显，表单数据需要初始化

4. 基于传过来的表单数据，进行标题控制，有 id 的是编辑

确认提交

1. 封装请求 API

2. 页面中校验，判断，提交请求

3. 通知父组件进行回显

4. 父组件监听 success 事件，进行调用回显

1. 封装接口 api

2. 页面中添加确认框，调用接口进行提示

基本架子搭建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFyaMsjc-1693121279348)(assets/image-20230724224754131.png)]

1. 搜索表单

2. 表格准备，模拟假数据渲染

中英国际化处理

默认是英文的，由于这里不涉及切换， 所以在 App.vue 中直接导入设置成中文即可，

文章分类选择

为了便于维护，直接拆分成一个小组件 ChannelSelect.vue

1. 新建 article/components/ChannelSelect.vue

2. 页面中导入渲染

3. 调用接口，动态渲染下拉分类，设计成 v-model 的使用方式

4. 父组件定义参数绑定

5. 发布状态，也绑定一下，便于将来提交表单

封装 API 接口，请求渲染

没有数据，可以登录已完成的系统，添加几条数据

1. 封装接口

2. 页面中调用保存数据

3. 新建 封装格式化日期函数

4. 导入使用

分页渲染 [element-plus 分页]

1. 分页组件

2. 提供分页修改逻辑

添加 loading 处理

1. 准备数据

2. el-table上面绑定

3. 发送请求时添加 loading

搜索 和 重置功能

1. 注册事件

2. 绑定处理

点击显示抽屉

1. 准备数据

2. 准备抽屉容器

3. 点击修改布尔值显示抽屉

封装抽屉组件 ArticleEdit

添加 和 编辑，可以共用一个抽屉，所以可以将抽屉封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

1. open({ }) => 添加操作，添加表单初始化无数据
2. open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

1. 封装组件

2. 通过 ref 绑定

3. 点击调用方法显示弹窗

完善抽屉表单结构

1. 准备数据

2. 准备 form 表单结构

3. 一打开默认重置添加的 form 表单数据

4. 扩展 下拉菜单 width props

上传文件 [element-plus - 文件预览]

1. 关闭自动上传，准备结构

2. 准备数据 和 选择图片的处理逻辑

3. 样式美化

富文本编辑器 [ vue-quill ]

官网地址：https://vueup.github.io/vue-quill/

1. 安装包

2. 注册成局部组件

3. 页面中使用绑定

4. 样式美化

添加文章功能

1. 封装添加接口

2. 注册点击事件调用

3. 父组件监听事件，重新渲染

添加完成后的内容重置

编辑文章回显

如果是编辑操作，一打开抽屉，就需要发送请求，获取数据进行回显

1. 封装接口，根据 id 获取详情数据

2. 页面中调用渲染

chatGPT prompt：封装一个函数，基于 axios， 网络图片地址，转 file 对象， 请注意：写中文注释

编辑文章功能

1. 封装编辑接口

2. 提交时调用

1. 封装删除接口

2. 页面中添加确认框调用

认知同步：

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 智能生成代码

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

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

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

• 明确提问：

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

• 细化需求：

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

• 添加背景信息：

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

• 适当引导：

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

• 限制范围：

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

​ …

案例 - 前端简历

prompt 优化前：

prompt1:

prompt 优化后：

prompt1:

prompt2：

prompt3：

安装步骤

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

使用说明

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

静态结构 + 校验处理

chatgpt prompt 提示词参考：

参考目标代码：

封装接口，更新个人信息

1. 封装接口

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

静态结构

选择预览图片

上传头像

1. 封装接口

2. 调用接口

chatgpt prompt

静态结构 + 校验处理

封装接口，更新密码信息

1. 封装接口

2. 页面中调用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOLfe49D-1693121158082)(assets/image-20230706205300370.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x92Vo6DE-1693121158083)(assets/image-20230706210947086.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iegInSCC-1693121158083)(assets/image-20230706211055251.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S3hjWtf4-1693121158083)(assets/image-20230706211033589.png)]

一些优势：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

创建项目：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KiDk8AcK-1693121158084)(assets/image-20230710172832242.png)]

环境同步：

1. 安装了插件 ESlint，开启保存自动修复
2. 禁用了插件 Prettier，并关闭保存自动格式化

配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

   1. 单引号

   2. 不使用分号

   3. 每行宽度至多80字符

   4. 不加对象|数组最后逗号

   5. 换行符号不限制（win mac 不一致）

2. vue组件名称多单词组成（忽略index.vue）

3. props解构（关闭）

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

1. git初始化 git init

2. 初始化 husky 工具配置 https://typicode.github.io/husky/

3. 修改 .husky/pre-commit 文件

**问题：**默认进行的是全量检查，耗时问题，历史问题。

lint-staged 配置

1. 安装

2. 配置

3. 修改 .husky/pre-commit 文件

默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是两个工作：

• 删除初始化的默认文件
• 修改剩余代码内容
• 新增调整我们需要的目录结构
• 拷贝初始化资源文件，安装预处理器插件

1. 删除文件

2. 修改内容

3. 新增需要目录 api utils

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uFhnwQNc-1693121158084)(assets/image-20230710215822678.png)]

4. 将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

• 安装 sass 依赖

基础代码解析

import.meta.env.base_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html

官方文档： https://element-plus.org/zh-CN/

• 安装

自动按需：

1. 安装插件

2. 然后把下列代码插入到你的 或 的配置文件中

3. 直接使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zF35W98L-1693121158084)(assets/image-20230710225018162.png)]

**彩蛋：**默认 components 下的文件也会被自动注册~

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1. 安装插件 pinia-plugin-persistedstate

2. 使用 main.js

3. 配置 stores/user.js

pinia 独立维护

- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

- 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库 统一导出

- 现在：使用一个仓库 import { useUserStore } from 不同仓库路径不一致

- 优化：由 stores/index.js 统一导出，导入路径统一 ，而且仓库维护在 stores/modules 中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cm4oFHOA-1693121158084)(assets/image-20230711071913061.png)]

1. 创建 axios 实例

们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

1. 安装 axios

2. 新建 封装 axios 模块

   利用 axios.create 创建一个自定义的 axios 来使用

   http://www.axios-js.com/zh-cn/docs/#axios-create-config

2. 完成 axios 基本配置

实现目标:

• 完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
• 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
• 我们需要搭建嵌套路由

目标：

• 把项目中所有用到的组件及路由表, 约定下来

约定路由规则

明确了路由规则，可以全部配完，也可以边写边配。

1. 安装 element-plus 图标库

2. 静态结构准备

实现注册校验

【需求】注册页面基本校验

1. 用户名非空，长度校验5-10位
2. 密码非空，长度校验6-15位
3. 再次输入密码，非空，长度校验6-15位

【进阶】再次输入密码需要自定义校验规则，和密码框值一致（可选）

注意：

1. model 属性绑定 form 数据对象

2. v-model 绑定 form 数据对象的子属性

3. rules 配置校验规则

4. prop 绑定校验规则

注册前的预校验

需求：点击注册按钮，注册之前，需要先校验

1. 通过 ref 获取到 表单组件

2. 注册之前进行校验

封装 api 实现注册功能

需求：封装注册api，进行注册，注册成功切换到登录

1. 新建 api/user.js 封装

2. 页面中调用

3. eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

实现登录校验

【需求说明】给输入框添加表单校验

1. 用户名不能为空，用户名必须是5-10位的字符，失去焦点 和 修改内容时触发校验
2. 密码不能为空，密码必须是6-15位的字符，失去焦点 和 修改内容时触发校验

操作步骤：

1. model 属性绑定 form 数据对象，直接绑定之前提供好的数据对象即可

2. rules 配置校验规则，共用注册的规则即可

3. v-model 绑定 form 数据对象的子属性

4. prop 绑定校验规则

5. 切换的时候重置

登录前的预校验 & 登录成功

【需求说明1】登录之前的预校验

• 登录请求之前，需要对用户的输入内容，进行校验
• 校验通过才发送请求

【需求说明2】登录功能

1. 封装登录API，点击按钮发送登录请求
2. 登录成功存储token，存入pinia 和 持久化本地storage
3. 跳转到首页，给提示

【测试账号】

• 登录的测试账号: shuaipeng

• 登录测试密码: 123456

PS: 每天账号会重置，如果被重置了，可以去注册页，注册一个新号

实现步骤：

1. 注册事件，进行登录前的预校验 (获取到组件调用方法)

2. 封装接口 API

3. 调用方法将 token 存入 pinia 并 自动持久化本地

架子组件列表：

el-container

• el-aside 左侧

  • el-menu 左侧边栏菜单

• el-container 右侧

  • el-header 右侧头部
    • el-dropdown
  • el-main 右侧主体
    • router-view

需求：只有登录页，可以未授权的时候访问，其他所有页面，都需要先登录再访问

1. 封装接口

2. stores/modules/user.js 定义数据

3. 页面中调用

4. 动态渲染

1. 注册点击事件

2. 添加退出功能

3. pinia user.js 模块 提供 setUser 方法

1. 基本结构样式，用到了 el-card 组件

2. 考虑到多个页面复用，封装成组件
   • props 定制标题
   • 默认插槽 default 定制内容主体
   • 具名插槽 extra 定制头部右侧额外的按钮

3. 页面中直接使用测试 ( unplugin-vue-components 会自动注册)

• 文章分类测试：

• 文章管理测试：

封装API - 请求获取表格数据

1. 新建 封装获取频道列表的接口

2. 页面中调用接口，获取数据存储

el-table 表格动态渲染

el-table 表格 loading 效果

1. 定义变量，v-loading绑定

2. 发送请求前开启，请求结束关闭

点击显示弹层

1. 准备弹层

2. 点击事件

封装弹层组件 ChannelEdit

添加 和 编辑，可以共用一个弹层，所以可以将弹层封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

1. open({ }) => 添加操作，添加表单初始化无数据
2. open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

1. 封装组件

2. 通过 ref 绑定

3. 点击调用方法显示弹窗

准备弹层表单

1. 准备数据 和 校验规则

2. 准备表单

3. 编辑需要回显，表单数据需要初始化

4. 基于传过来的表单数据，进行标题控制，有 id 的是编辑

确认提交

1. 封装请求 API

2. 页面中校验，判断，提交请求

3. 通知父组件进行回显

4. 父组件监听 success 事件，进行调用回显

1. 封装接口 api

2. 页面中添加确认框，调用接口进行提示

基本架子搭建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bbsxxyl-1693121158085)(assets/image-20230724224754131.png)]

1. 搜索表单

2. 表格准备，模拟假数据渲染

中英国际化处理

默认是英文的，由于这里不涉及切换， 所以在 App.vue 中直接导入设置成中文即可，

文章分类选择

为了便于维护，直接拆分成一个小组件 ChannelSelect.vue

1. 新建 article/components/ChannelSelect.vue

2. 页面中导入渲染

3. 调用接口，动态渲染下拉分类，设计成 v-model 的使用方式

4. 父组件定义参数绑定

5. 发布状态，也绑定一下，便于将来提交表单

封装 API 接口，请求渲染

没有数据，可以登录已完成的系统，添加几条数据

1. 封装接口

2. 页面中调用保存数据

3. 新建 封装格式化日期函数

4. 导入使用

分页渲染 [element-plus 分页]

1. 分页组件

2. 提供分页修改逻辑

添加 loading 处理

1. 准备数据

2. el-table上面绑定

3. 发送请求时添加 loading

搜索 和 重置功能

1. 注册事件

2. 绑定处理

点击显示抽屉

1. 准备数据

2. 准备抽屉容器

3. 点击修改布尔值显示抽屉

封装抽屉组件 ArticleEdit

添加 和 编辑，可以共用一个抽屉，所以可以将抽屉封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

1. open({ }) => 添加操作，添加表单初始化无数据
2. open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

1. 封装组件

2. 通过 ref 绑定

3. 点击调用方法显示弹窗

完善抽屉表单结构

1. 准备数据

2. 准备 form 表单结构

3. 一打开默认重置添加的 form 表单数据

4. 扩展 下拉菜单 width props

上传文件 [element-plus - 文件预览]

1. 关闭自动上传，准备结构

2. 准备数据 和 选择图片的处理逻辑

3. 样式美化

富文本编辑器 [ vue-quill ]

官网地址：https://vueup.github.io/vue-quill/

1. 安装包

2. 注册成局部组件

3. 页面中使用绑定

4. 样式美化

添加文章功能

1. 封装添加接口

2. 注册点击事件调用

3. 父组件监听事件，重新渲染

添加完成后的内容重置

编辑文章回显

如果是编辑操作，一打开抽屉，就需要发送请求，获取数据进行回显

1. 封装接口，根据 id 获取详情数据

2. 页面中调用渲染

chatGPT prompt：封装一个函数，基于 axios， 网络图片地址，转 file 对象， 请注意：写中文注释

编辑文章功能

1. 封装编辑接口

2. 提交时调用

1. 封装删除接口

2. 页面中添加确认框调用

认知同步：

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 智能生成代码

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

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

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

• 明确提问：

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

• 细化需求：

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

• 添加背景信息：

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

• 适当引导：

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

• 限制范围：

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

​ …

案例 - 前端简历

prompt 优化前：

prompt1:

prompt 优化后：

prompt1:

prompt2：

prompt3：

安装步骤

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

使用说明

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

静态结构 + 校验处理

chatgpt prompt 提示词参考：

参考目标代码：

封装接口，更新个人信息

1. 封装接口

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

静态结构

选择预览图片

上传头像

1. 封装接口

2. 调用接口

chatgpt prompt

静态结构 + 校验处理

封装接口，更新密码信息

1. 封装接口

2. 页面中调用