那些网站可以做团购,你们交学费做网站,昌平区事业单位公共知识培训网站,做采集网站的方法AI 对于开发人员的核心价值
网上会看到很多 AI 的应用介绍或者教程
使用 AI 聊天#xff0c;咨询问题 —— 代替搜索引擎使用 AI 写各种的电商文案#xff08;淘宝、小红书#xff09;使用 AI 做一个聊天机器人 —— 这最多算猎奇、业余爱好、或者搞个套壳产品来收费
以上…AI 对于开发人员的核心价值
网上会看到很多 AI 的应用介绍或者教程
使用 AI 聊天咨询问题 —— 代替搜索引擎使用 AI 写各种的电商文案淘宝、小红书使用 AI 做一个聊天机器人 —— 这最多算猎奇、业余爱好、或者搞个套壳产品来收费
以上这些都不是。AI 对于开发人员的最大价值就是 —— 开发提效
使用 AI 快速生成代码使用 AI 快速解决 bug使用 AI 让你一个人顶三个人的工作效率 —— 这才是老板所期望的同时也是你的竞争力
所以未来可能让你失业的不是 AI 而是你身边懂 AI 的同事 直接看成品 开干
项目需求和设计
需求
ChatGPT 提问 你是互联网行业一名资深的产品经理现在主导设计一个博客产品的需求这个产品是面向编程技术人员的例如简书、博客园、掘金这种网站。要求产品以博客功能为主不要有其他无关功能。你来写这个产品的需求文档先列出需求大纲。 ChatGPT 回复了详细的需求大纲非常专业、全面。 技术选型
自己定没必要交给 ChatGPT
使用 Vue3 Pinia Vue-router使用 ElementPlus
创建 Vue3 开发环境参考官网 https://cn.vuejs.org/guide/quick-start.html
使用 Vue Router使用 Pinia
并安装 ElementPlus https://element-plus.gitee.io/zh-CN/
去掉无用代码
对于 ./assets/main.css 只保留第一行 base.css 其他全部注释掉整理 App.vue AbountView.vue HomeView.vue 为 ChatGPT 切换角色
基于之前的需求和页面继续提问 你现在是一名资深前端工程师精通 vue3 技术栈接下里要根据上面的需求来开发这个项目。 以上需求你能理解吗 路由设计
提问 根据以上需求需要拆分几个页面以及如何配置 vue3 路由 需要你写出 1. 每个页面的名称、介绍、文件目录 2. 路由配置代码 PS路由配置可以不用 import() 语法直接要求 ChatGPT 重写即可
借助 Copilot 快速写代码
根据 ChatGPT 的分析写代码
可以到*等渠道获得 挺便宜的
其中会用到 Copilot 写起来很快
API 设计
提问 根据你对以上需求的理解这个项目需要服务端提供哪些 API 接口 请写出1. 接口地址2.接口描述3.请求数据格式的示例4.返回数据格式的示例 检查这个 API 设计它可能会遗漏一些可以继续提问 你还有一些需求没有考虑到例如博客分类、搜索博客、删除博客、点赞、收藏、评论等。 请再详细分析上面的需求重新给出一个 API 列表 PS设计中尽量保证 API 完善其他再有遗漏的可以开发中继续补充
写 API 相关代码
先安装 axios npm i axios --save
提问 以上接口设计我想用 axios 进行封装要求拆分为 blog comment user 三个模块应该创建哪些 js 文件 先列出文件名称、目录和说明 ChatGPT 列出了四个文件blogAPI commentAPI userAPI 和 axiosInstance
继续提问 根据你的设计先写出 axiosInstance.js 的代码内容。 请求时要带上 token PS重写 response 拦截器可用 Copilot 生成代码
继续提问 再根据上面的 API 设计写出 blogApi.js 的代码内容 它可能考虑不那么全面可继续追问你没有考到了搜索、点赞、收藏。请重新写这份代码。 根据以上方式继续提问其他 API 的代码 可以看到效果还行 路由模板
分析
App.vue顶部栏包含 Logo 导航 搜索 登录网页主体包含 RouterView /
直接写 顶部栏 代码
ChatGPT 提问 请用 vue3 和 ElementPlus 写一个顶部导航栏宽度 100% 。 导航栏分左右两部分。左侧是 logo 和导航菜单。右侧是搜索组件和登录菜单。 导航菜单有三个前端 java 和 python使用 vue-router 实现链接。每个菜单前面加上合适的 icon 把代码贴过来测试效果并不好
ChatGPT 按照你的文字要求写出了代码但这明显不是我们预期的 UI 效果这不是 ChatGPT 的错误而是我们无法准确表达自己心理的想法 人类的语言是抽象的
所以遇到复杂的功能、设计要去拆分任务一步一步去执行 —— 这和你带团队、带项目是一样的
换一种方式
ChatGPT 提问 请用 vue3 和 ElementPlus 写一个组件组件包括两个部分 第一顶部导航栏。宽度 100% 。左右结构左侧是 log 右侧是“登录”链接。 第二主体部分。宽度 1000px 左右居中。主体部分要包含 RouterView / 组件。 写 logo
直接手写
使用 router-link 链接到首页设置样式 text-decoration: none;
修改网页标题
在 index.html 写默认标题 TechBlog自定义修改标题可想 ChatGPT 提问代码参考 hooks/usePageTitle.js 使用 vue3 composition API 写一个 hook 可以在多个组件中使用用来修改网页标题 顶部栏
导航搜索登录/用户信息
导航组件
ChatGPT 提问 使用 vue3 和 ElementPlus 写一个菜单组件包含前端、Java、Python、小程序 要求如下 1. 每个菜单点击时都跳转到首页并加一个 query ?categoryxxx 2. activeMenu 要根据 url query category 参数实时变化默认值是空 3. 使用 vue3 setup script 语法 新建组件 components/NavMenu.vue 把代码贴上。并增加
menu 样式增加 margin-left: 20px导航栏加一个 border-bottomMenu 向下移动 1px 可向 ChatGPT 提问 我想把一个 div 的位置仅往下移动 1px 其他方向不变同时不影响父元素的位置。使用 css 怎么写 代码
position: relative; margin-bottom: -1px;
最后把 NavMenu/ 组件引用到 App.vue
搜索框组件
ChatGPT 提问 使用 vue3 和 ElementPlus 写一个 input search 组件。要求 1. 搜索时跳转到当前 path 并加一个 query ?keywordxxx 且保留现有的 url query 2. 实时监听 url query keyword 并讲内容显示到 input 中 3. 使用 vue3 setup script 语法 新建组件 components/SearchInput.vue 把代码贴上。并增加
input 加一个后缀按钮点击触发 handleSearchinput 回车事件改为 keyup.enter
最后把 SearchInput/ 组件引用到 App.vue
登录/用户信息
新建组件 components/UserInfo.vue
先写一个“登录”链接后面再补充用户信息 注册页面
页面
ChatGPT 提问 使用 vue3 和 ElementPlus 写一个注册页面包含一个标题“注册新用户”和一个表单。要求 1. 页面内容水平垂直居中 2. 注册表单包含用户名必填、密码必填、确认密码、昵称、注册按钮 3. 注册表单要根据 item 数据类型设置校验规则 4. 使用 vue3 setup script 语法 把代码拷贝到 views/UserRegisterView.vue 做如下调整
调整样式 1.标题加 margin-bottom 2.调整 form 宽度; 3.高度太大有滚动条改成 80vh添加登录链接 登录页
关于 JWT
(可画图解释)
登录传入用户名和密码服务端校验校验成功返回 token 加密了用户信息客户端下次请求带着 token 表明用户信息
页面
ChatGPT 提问 使用 vue3 和 ElementPlus 写一个登录页面包含一个标题“用户登录”和一个表单。要求 1. 页面内容水平垂直居中。标题和表单之前有 20px 间隔 2. 登录表单包含用户名必填、密码必填、登录按钮。登录按钮后加一个链接“新用户请注册”点击跳转到注册页 3. 登录表单要根据 item 数据类型设置校验规则 4. 使用 vue3 setup script 语法 遇到问题再继续修改例如 以上代码有两个问题1. form 的 label 宽度没有固定2.页面内容没有垂直居中
把代码拷贝到 views/UserLoginView.vue 并做如下调整
高度太大有滚动条改成 80vhform 加一个属性 label-width100px
获取用户信息
在 App.vue 中请求用户信息并存储到 Pinia在登录、注册页获取用户信息并判断跳转在 components/UserInfo.vue 获取用户信息
介绍 Pinia
简介 | Pinia
Vue3 状态管理库vue-cli 默认推荐比 Vuex 更加简洁如去掉了 mutation module 等能更好的使用 Vue3 Composition API
使用 Copilot 写 Pinia 代码
参考当前的 stores/counter.js 来写即可
首页请求用户信息
先写 mock-server
再写代码参考 App.vue
登录、注册页
使用 watchEffect 监测变化并跳转 —— 可抽离单独的 Hook useNavToLogin.js
【注意】这里没有使用导航守卫有问题 代码参考 router/index.js
使用 router-link 跳转没问题但直接访问 /login 无法第一时间获取到 pinia store
显示用户信息
修改 components/UserInfo.vue 代码
ChatGPT 提问 使用 vue3 和 ElementPlus 写一个下拉菜单标题是 nickname 下拉菜单有两个 1. 创建博客点击跳转到 /create-edit-blog 2. 我的博客点击跳转到 /my-blogs 3. 注销点击执行一个函数 ChatGPT 写的不好再用 Copilot 提问 使用 element-plus 实现一个下拉菜单 也写的不好
最后不得已从官网拷贝 Dropdown 下拉菜单 | Element Plus
另外ElementPlus 的 icon 需要单独安装和注册参考 main.js
完善代码结合 Copilot
使用 v-if v-else 判断显示内容跳转到“我的博客”页面注销清空 store 内容清空 token
首页
梳理需求
博客列表分类搜索分页单个博客显示博客信息点击进入详情页
mock
获取博客列表的接口 /api/blogs
ChatGPT 提问 生成 10 条博客数据JSON 格式用于 mock 服务。 编程技术类博客如前端、Java、Python、小程序等内容要贴近真实的技术博客内容。 每条博客内容如下 - id 唯一不可重复 - 标题 - 简介50-100字 - 分类随机选择前端, java, python, 小程序要和标题、简介对应好 - 作者 - 点赞数量 - 收藏数量 - 评论数量 - 创建时间 - 更新时间 PSChatGPT 可能会使用 JS 函数生成直接停止并要求 不要使用 JS 函数直接生成静态 JSON 数据格式
考虑到分页返回的 data 应该改为 { list: [], total: 100 }
最后分页后 id 也不能重复所以使用 MockJS 来随机生成 id 使用 Random.id()
渲染博客列表
需要考虑的条件
分类 category搜索 keyword分页 page pageSize
第一需要改造一下 blogApi.js 中的 getBlogList 增加参数
第二在首页 HomeView.vue 中请求数据。使用 Copilot 生成代码。
第三渲染博客列表使用 Copilot 生成代码 !-- 遍历显示 blogList 的内容每个 item 使用 div --
博客卡片组件
ChatGPT 提问 用 vue3 和 ElementPlus 写一个博客卡片组件BlogCard.vue用于在博客列表中显示单个博客信息 该组件接受一个属性 blog 是一个 js 对象 该组件的 UI 分为上中下三层结构 - 上层显示博客作者blog.author并在前面加 icon 分类blog.category时间blog.updatedAt - 中层显示博客标题blog.title博客简介blog.summary且点击标题跳转到 /blog/:id - 下层显示点赞数量blog.likes收藏数量blog.favorites、评论数量blog.comments。每个使用合适的 icon 来表示 还要求 - 当鼠标 hover 卡片设置浅灰色背景 - 点击卡片跳转到 /blog/:id - CSS 样式要美观可参考当前博客网站的样式 - 使用 vue3 setup script 语法 新建组件 components/BlogCard.vue 并粘贴相应代码
样式有点问题继续调整一下 你给出的代码非常好。不过有几个样式的地方需要优化 1. 内容和边框的间距太大了再小一些 2. 上层显示的三个信息全部靠左显示中间要有间隙。 3. 上层显示的三个信息“时间”和“分类”使用灰色 代码进行如下调整
卡片之间增加间隙在 HomeView.vue 中增加 margin-bottom修改 icon 未显示的问题代码生成的是老旧写法
处理时间格式新建 utils/date.js 然后用 Copilot 快速生成
分页
ChatGPT 提问 使用 vue3 和 ElementPlus 写一个分页组件水平居中显示 可用的变量有 total page pageSize 使用 vue3 setup script 然后用 Copilot 快速生成 handleCurrentChange 函数代码
博客详情页
梳理需求
展示博客信息点赞、收藏评论 单独讲
mock
获取博客详情接口 /api/blogs/${id}
用 ChatGPT 生成博客内容 用 JSON 格式写一个真实的编程技术博客博客包括 - id - 标题 - 内容要求使用 markdown 格式包含标题、文本、列表、代码块1000 字左右 - 作者 - 分类随机选择前端, java, python, 小程序要和标题、简介对应好 - 点赞数量 - 是否点赞 - 收藏数量 - 是否收藏 - 评论数量 - 创建时间 然后借助 Copilot 在 mock-server 中完善接口
其他接口
点赞取消点赞收藏取消收藏
展示博客内容
根据 id 获取博客数据 —— 使用 Copilot 可快速完成
使用 useTitle 修改博客标题
显示博客信息标题作者时间内容
使用 Copilot 生成 !-- 显示 title author createdAt content 中间留 margin --优化 css 样式修改时间格式
转换 markdown
使用 ChatGPT 提问 用 js 把 markdown 格式转换为 html 格式有没有第三方库可以使用 选择 markdown-it并需要传入字符串格式 toRaw(blogInfo.content)优化代码块样式使用 Copilot /* 优化 pre code 样式 */
点赞和收藏
使用 Copilot 生成模板 !-- 生成一个 div 用于点赞和收藏水平居中显示 --
优化代码
icon显示数量
根据 isLiked 和 isFavorited 判断显示按钮 active 状态。手写即可
添加点击事件执行 点赞/取消点赞收藏/取消收藏。可使用 Copilot 生成代码
// 点赞或取消点赞// 收藏或取消收藏 评论
梳理需求
评论列表展示删除自己的评论发表评论
mock
评论列表接口 不考虑分页
ChatGPT 提问 使用 JSON 格式生成一个编程技术博客的评论列表一共 5 条。评论内容要真实。 每条评论包含 - id - 评论内容 - 创建时间 - 作者用户名 - 作者昵称 然后配合 Copilot 编写 mock 代码
其他接口
使用 Copilot 生成
删除评论发表评论
评论列表
新建一个 views/subviews/CommentView.vue 并引入到 views/BlogDetailView.vue
获取博客列表数据直接使用 Copilot 生成
显示评论列表直接用 Copilot 生成 !-- 评论列表 -- CSS 也可自动生成且样式很好看
最后再加用户名前面加一个 icon
删除自己的评论
前提该一下 mock 数据让一条数据是自己的
获取当年用户名从 pinia store 中引入
删除评论 —— 直接使用 Copilot 生成
显示按钮和样式!-- 如果 comment.username 等于 userInfo.username 则显示一个“删除”按钮点击执行删除 -- CSS 也可以生成删除的方法 // 删除一条评论
发表评论
使用 Copilot 生成
UI !-- 发表评论。左右结构一个输入框一个按钮 -- 以及 CSS方法 // 发表评论 我的博客列表
需求分析
我的博客列表删除一条博客修改一条博客创建博客后面讲
通用功能
修改标题未登录跳转到登录页参考登录页 —— 可使用 Copilot
PS在此生成“创建博客”按钮
mock
mock 增加删除博客。使用 Copilot
在 blogApi.js 获取博客列表加一个 opt my 默认 false 参数传给服务端让服务端处理
博客列表
获取博客列表数据使用 Copilot 生成参考代码的注释 【注意】加上 my: true 表示“我的博客”
显示列表和操作
Copilot 生成模板 !--用 table 显示博客列表包括 title category likes favorites comments createdAt再加两个操作按钮“编辑” “删除”--Copilot 生成编辑代码 // 跳转到编辑页Copilot 生成删除代码 // 删除博客
分页
分页可以把“首页”分页单独抽离一个组件
需要改动
接受两个属性 pageSize total去掉 path: / 不要只考虑首页
创建按钮
使用 Copilot 生成代码在 table 上面写 !-- 左右结构左侧标题“我的博客”右侧“创建”按钮 -- 创建编辑博客
需求梳理
编辑博客内容新建博客
mock
使用 Copilot 生成
创建博客 post更新博客 put
前提
如果用户未登录则跳转到登录页。参考“我的博客”页 —— 可抽离单独的 Hook useNavToLogin.js
判断 创建/更新
使用 Coplit 根据注释生成 第一// 获取 url params id 第二根据 id 获取博客数据。先引入 api 再写 // onMounted 根据 id 获取博客详情页id 为空则不获取 第三修改标题。先引入 hook 再写 // 定义标题有 id 则为编辑否则为创建 和 // 设置网页标题 渲染 UI
第一标题栏和“提交”按钮ChatGPT 生成 使用 vue3 和 ElementPlus 写一个 div 左右结构 左侧是 title 右侧是“提交”按钮点击执行一个事件 使用 vue3 setup script 语法 第二博客标题和类型ChatGPT 生成 使用 vue3 和 ElementPlus 写一个 div 左右结构 左侧一个文字“标题”一个 input v-model 对应 blogDetails.title 右侧一个文字“类型”可选前端、Java、Python、小程序v-model 对应 blogDetails.category 中间要有间隔 使用 vue3 setup script 语法 第三内容 textarea 回车使用 Copilot 直接生成
提交数据
第一confirm 确认是否提交
Copilot 一开始给出的代码不好参考“我的博客”引入 ElMessageBox 以后并修改为 async 函数Copilot 给出的答案就好了
第二验证 title content category 是否为空 —— 使用 Copilot 即可
第三先引入 api然后使用 Copilot 生成代码 // 如果没有 id 则创建博客。没有 id 则更新博客
项目开发 - 总结
目标回顾
使用 ChatGPT 和 Copilot 快速生成代码完成项目开发
内容回顾
路由模板和顶部栏登录和注册获取用户信息首页博客列表博客详情页评论我的博客新建编辑
注意事项
ChatGPT 和 Copolit 配合使用用于不同场景注意 AI 工具的提问技巧能更高效、准确的生成代码AI 工具生成的代码可能还需要自己验证和调试
