AI 對(duì)于開發(fā)人員的核心價(jià)值

網(wǎng)上會(huì)看到很多 AI 的應(yīng)用介紹或者教程

• 使用 AI 聊天，咨詢問題 —— 代替搜索引擎
• 使用 AI 寫各種的電商文案（淘寶、小紅書）
• 使用 AI 做一個(gè)聊天機(jī)器人 —— 這最多算獵奇、業(yè)余愛好、或者搞個(gè)套殼產(chǎn)品來(lái)收費(fèi)

以上這些都不是。AI 對(duì)于開發(fā)人員的最大價(jià)值就是?——?開發(fā)提效

• 使用 AI 快速生成代碼
• 使用 AI 快速解決 bug
• 使用 AI 讓你一個(gè)人頂三個(gè)人的工作效率 —— 這才是老板所期望的，同時(shí)也是你的競(jìng)爭(zhēng)力

所以，未來(lái)可能讓你失業(yè)的不是 AI ，而是你身邊懂 AI 的同事

直接看成品：

開干：

項(xiàng)目需求和設(shè)計(jì)

需求：

ChatGPT 提問：

你是互聯(lián)網(wǎng)行業(yè)一名資深的產(chǎn)品經(jīng)理，現(xiàn)在主導(dǎo)設(shè)計(jì)一個(gè)博客產(chǎn)品的需求，這個(gè)產(chǎn)品是面向編程技術(shù)人員的，例如簡(jiǎn)書、博客園、掘金這種網(wǎng)站。要求產(chǎn)品以博客功能為主，不要有其他無(wú)關(guān)功能。你來(lái)寫這個(gè)產(chǎn)品的需求文檔，先列出需求大綱。

ChatGPT 回復(fù)了詳細(xì)的需求大綱，非常專業(yè)、全面。

?

技術(shù)選型

自己定，沒必要交給 ChatGPT

• 使用 Vue3 Pinia Vue-router
• 使用 ElementPlus

創(chuàng)建 Vue3 開發(fā)環(huán)境，參考官網(wǎng)?https://cn.vuejs.org/guide/quick-start.html

• 使用 Vue Router
• 使用 Pinia

并安裝 ElementPlus?https://element-plus.gitee.io/zh-CN/

去掉無(wú)用代碼

• 對(duì)于?./assets/main.css?，只保留第一行?base.css?，其他全部注釋掉
• 整理 App.vue AbountView.vue HomeView.vue

為 ChatGPT 切換角色

基于之前的需求和頁(yè)面，繼續(xù)提問

你現(xiàn)在是一名資深前端工程師，精通 vue3 技術(shù)棧，接下里要根據(jù)上面的需求來(lái)開發(fā)這個(gè)項(xiàng)目。 以上需求你能理解嗎？

路由設(shè)計(jì)

提問：

根據(jù)以上需求，需要拆分幾個(gè)頁(yè)面？以及如何配置 vue3 路由？ 需要你寫出： 1. 每個(gè)頁(yè)面的名稱、介紹、文件目錄； 2. 路由配置代碼；

PS：路由配置可以不用?import()?語(yǔ)法，直接要求 ChatGPT 重寫即可

借助 Copilot 快速寫代碼

根據(jù) ChatGPT 的分析，寫代碼

（可以到*??等渠道獲得? 挺便宜的）

其中會(huì)用到 Copilot?，寫起來(lái)很快

API 設(shè)計(jì)

提問

根據(jù)你對(duì)以上需求的理解，這個(gè)項(xiàng)目需要服務(wù)端提供哪些 API 接口？ 請(qǐng)寫出：1. 接口地址；2.接口描述；3.請(qǐng)求數(shù)據(jù)格式的示例；4.返回?cái)?shù)據(jù)格式的示例；

檢查這個(gè) API 設(shè)計(jì)，它可能會(huì)遺漏一些，可以繼續(xù)提問：

你還有一些需求沒有考慮到，例如博客分類、搜索博客、刪除博客、點(diǎn)贊、收藏、評(píng)論等。 請(qǐng)?jiān)僭敿?xì)分析上面的需求，重新給出一個(gè) API 列表

PS：設(shè)計(jì)中盡量保證 API 完善，其他再有遺漏的，可以開發(fā)中繼續(xù)補(bǔ)充

寫 API 相關(guān)代碼

先安裝 axios?npm i axios --save

提問：

以上接口設(shè)計(jì)，我想用 axios 進(jìn)行封裝，要求拆分為 blog comment user 三個(gè)模塊，應(yīng)該創(chuàng)建哪些 js 文件？ 先列出文件名稱、目錄和說(shuō)明

ChatGPT 列出了四個(gè)文件：blogAPI commentAPI userAPI 和 axiosInstance

繼續(xù)提問：

根據(jù)你的設(shè)計(jì)，先寫出 axiosInstance.js 的代碼內(nèi)容。 請(qǐng)求時(shí)要帶上 token

PS：重寫 response 攔截器，可用 Copilot 生成代碼

繼續(xù)提問：

再根據(jù)上面的 API 設(shè)計(jì)，寫出 blogApi.js 的代碼內(nèi)容 （它可能考慮不那么全面，可繼續(xù)追問：你沒有考到了搜索、點(diǎn)贊、收藏。請(qǐng)重新寫這份代碼。）

根據(jù)以上方式，繼續(xù)提問其他 API 的代碼

可以看到效果還行：

路由模板

分析

• App.vue
• 頂部欄，包含 Logo 導(dǎo)航 搜索 登錄
• 網(wǎng)頁(yè)主體，包含?<RouterView />

直接寫 頂部欄 代碼

ChatGPT 提問：

請(qǐng)用 vue3 和 ElementPlus 寫一個(gè)頂部導(dǎo)航欄，寬度 100% 。 導(dǎo)航欄分左右兩部分。左側(cè)是 logo 和導(dǎo)航菜單。右側(cè)是搜索組件和登錄菜單。 導(dǎo)航菜單有三個(gè)：前端 java 和 python，使用 vue-router 實(shí)現(xiàn)鏈接。每個(gè)菜單前面加上合適的 icon

把代碼貼過(guò)來(lái)測(cè)試，效果并不好

• ChatGPT 按照你的文字要求寫出了代碼
• 但這明顯不是我們預(yù)期的 UI 效果
• 這不是 ChatGPT 的錯(cuò)誤，而是我們無(wú)法準(zhǔn)確表達(dá)自己心理的想法 （人類的語(yǔ)言是抽象的）

所以，遇到復(fù)雜的功能、設(shè)計(jì)，要去拆分任務(wù)，一步一步去執(zhí)行?——?這和你帶團(tuán)隊(duì)、帶項(xiàng)目是一樣的

換一種方式

ChatGPT 提問：

請(qǐng)用 vue3 和 ElementPlus 寫一個(gè)組件，組件包括兩個(gè)部分： 第一，頂部導(dǎo)航欄。寬度 100% 。左右結(jié)構(gòu)，左側(cè)是 log ，右側(cè)是“登錄”鏈接。 第二，主體部分。寬度 1000px ，左右居中。主體部分要包含 <RouterView /> 組件。

寫 logo

直接手寫

• 使用?<router-link>?鏈接到首頁(yè)
• 設(shè)置樣式?text-decoration: none;

修改網(wǎng)頁(yè)標(biāo)題

• 在?index.html?寫默認(rèn)標(biāo)題 TechBlog
• 自定義修改標(biāo)題，可想 ChatGPT 提問，代碼參考?hooks/usePageTitle.js

使用 vue3 composition API 寫一個(gè) hook ，可以在多個(gè)組件中使用，用來(lái)修改網(wǎng)頁(yè)標(biāo)題

頂部欄

• 導(dǎo)航
• 搜索
• 登錄/用戶信息

導(dǎo)航組件

ChatGPT 提問

使用 vue3 和 ElementPlus 寫一個(gè)菜單組件，包含：前端、Java、Python、小程序 要求如下： 1. 每個(gè)菜單點(diǎn)擊時(shí)，都跳轉(zhuǎn)到首頁(yè)，并加一個(gè) query `?category=xxx` 2. activeMenu 要根據(jù) url query `category` 參數(shù)實(shí)時(shí)變化，默認(rèn)值是空 3. 使用 vue3 setup script 語(yǔ)法

新建組件?components/NavMenu.vue?，把代碼貼上。并增加：

• menu 樣式增加?margin-left: 20px
• 導(dǎo)航欄，加一個(gè)?border-bottom
• Menu 向下移動(dòng) 1px ，可向 ChatGPT 提問：

我想把一個(gè) div 的位置僅往下移動(dòng) 1px （其他方向不變），同時(shí)不影響父元素的位置。使用 css 怎么寫？

代碼

position: relative; margin-bottom: -1px;

最后，把?<NavMenu/>?組件引用到 App.vue

搜索框組件

ChatGPT 提問

使用 vue3 和 ElementPlus 寫一個(gè) input search 組件。要求： 1. 搜索時(shí)跳轉(zhuǎn)到當(dāng)前 path ，并加一個(gè) query `?keyword=xxx` ，且保留現(xiàn)有的 url query 2. 實(shí)時(shí)監(jiān)聽 url query `keyword` 并講內(nèi)容顯示到 input 中 3. 使用 vue3 setup script 語(yǔ)法

新建組件?components/SearchInput.vue?，把代碼貼上。并增加

• input 加一個(gè)后綴按鈕，點(diǎn)擊觸發(fā) handleSearch
• input 回車事件改為?@keyup.enter

最后，把?<SearchInput/>?組件引用到 App.vue

登錄/用戶信息

新建組件?components/UserInfo.vue

先寫一個(gè)“登錄”鏈接，后面再補(bǔ)充用戶信息

注冊(cè)頁(yè)面

頁(yè)面

ChatGPT 提問

使用 vue3 和 ElementPlus 寫一個(gè)注冊(cè)頁(yè)面，包含一個(gè)標(biāo)題“注冊(cè)新用戶”和一個(gè)表單。要求： 1. 頁(yè)面內(nèi)容水平垂直居中 2. 注冊(cè)表單包含：用戶名（必填）、密碼（必填）、確認(rèn)密碼、昵稱、注冊(cè)按鈕 3. 注冊(cè)表單要根據(jù) item 數(shù)據(jù)類型設(shè)置校驗(yàn)規(guī)則 4. 使用 vue3 setup script 語(yǔ)法

把代碼拷貝到?views/UserRegisterView.vue?做如下調(diào)整：

• 調(diào)整樣式： 1.標(biāo)題加?margin-bottom； 2.調(diào)整 form 寬度; 3.高度太大，有滾動(dòng)條，改成?80vh；
• 添加登錄鏈接

登錄頁(yè)

關(guān)于 JWT

(可畫圖解釋)

• 登錄，傳入用戶名和密碼，服務(wù)端校驗(yàn)
• 校驗(yàn)成功返回 token 加密了用戶信息
• 客戶端下次請(qǐng)求帶著 token 表明用戶信息

頁(yè)面

ChatGPT 提問

使用 vue3 和 ElementPlus 寫一個(gè)登錄頁(yè)面，包含一個(gè)標(biāo)題“用戶登錄”和一個(gè)表單。要求： 1. 頁(yè)面內(nèi)容水平垂直居中。標(biāo)題和表單之前有 20px 間隔 2. 登錄表單包含：用戶名（必填）、密碼（必填）、登錄按鈕。登錄按鈕后加一個(gè)鏈接“新用戶請(qǐng)注冊(cè)”，點(diǎn)擊跳轉(zhuǎn)到注冊(cè)頁(yè) 3. 登錄表單要根據(jù) item 數(shù)據(jù)類型設(shè)置校驗(yàn)規(guī)則 4. 使用 vue3 setup script 語(yǔ)法

遇到問題再繼續(xù)修改，例如?以上代碼有兩個(gè)問題：1. form 的 label 寬度沒有固定；2.頁(yè)面內(nèi)容沒有垂直居中；

把代碼拷貝到?views/UserLoginView.vue?并做如下調(diào)整：

• 高度太大，有滾動(dòng)條，改成?80vh；
• form 加一個(gè)屬性?label-width="100px"

獲取用戶信息

• 在?App.vue?中請(qǐng)求用戶信息，并存儲(chǔ)到 Pinia
• 在登錄、注冊(cè)頁(yè)獲取用戶信息，并判斷跳轉(zhuǎn)
• 在?components/UserInfo.vue?獲取用戶信息

介紹 Pinia

簡(jiǎn)介 | Pinia

• Vue3 狀態(tài)管理庫(kù)，vue-cli 默認(rèn)推薦
• 比 Vuex 更加簡(jiǎn)潔，如去掉了 mutation module 等
• 能更好的使用 Vue3 Composition API

使用 Copilot 寫 Pinia 代碼

參考當(dāng)前的?stores/counter.js?來(lái)寫即可

首頁(yè)請(qǐng)求用戶信息

先寫 mock-server

再寫代碼，參考 App.vue

登錄、注冊(cè)頁(yè)

使用?watchEffect?監(jiān)測(cè)變化，并跳轉(zhuǎn)?——?可抽離單獨(dú)的 Hook?useNavToLogin.js

【注意】這里沒有使用導(dǎo)航守衛(wèi)，有問題?（代碼參考?router/index.js）

• 使用?<router-link>?跳轉(zhuǎn)，沒問題
• 但直接訪問?/login?，無(wú)法第一時(shí)間獲取到 pinia store

顯示用戶信息

修改?components/UserInfo.vue?代碼

ChatGPT 提問：

使用 vue3 和 ElementPlus 寫一個(gè)下拉菜單，標(biāo)題是 `nickname` 下拉菜單有兩個(gè)： 1. 創(chuàng)建博客，點(diǎn)擊跳轉(zhuǎn)到 `/create-edit-blog` 2. 我的博客，點(diǎn)擊跳轉(zhuǎn)到 `/my-blogs` 3. 注銷，點(diǎn)擊執(zhí)行一個(gè)函數(shù)

ChatGPT?寫的不好，再用 Copilot 提問?使用 element-plus 實(shí)現(xiàn)一個(gè)下拉菜單?，也寫的不好

最后不得已從官網(wǎng)拷貝?Dropdown 下拉菜單 | Element Plus

另外，ElementPlus 的 icon 需要單獨(dú)安裝和注冊(cè)，參考?main.js

完善代碼（結(jié)合 Copilot）

• 使用?v-if?v-else?判斷顯示內(nèi)容
• 跳轉(zhuǎn)到“我的博客”頁(yè)面
• 注銷，清空 store 內(nèi)容，清空 token

首頁(yè)

梳理需求

• 博客列表：分類，搜索，分頁(yè)
• 單個(gè)博客：顯示博客信息，點(diǎn)擊進(jìn)入詳情頁(yè)

mock

獲取博客列表的接口?/api/blogs

ChatGPT 提問

生成 10 條博客數(shù)據(jù)，JSON 格式，用于 mock 服務(wù)。 編程技術(shù)類博客，如前端、Java、Python、小程序等，內(nèi)容要貼近真實(shí)的技術(shù)博客內(nèi)容。 每條博客內(nèi)容如下： - id （唯一，不可重復(fù)） - 標(biāo)題 - 簡(jiǎn)介（50-100字） - 分類（隨機(jī)選擇：前端, java, python, 小程序）要和標(biāo)題、簡(jiǎn)介對(duì)應(yīng)好 - 作者 - 點(diǎn)贊數(shù)量 - 收藏?cái)?shù)量 - 評(píng)論數(shù)量 - 創(chuàng)建時(shí)間 - 更新時(shí)間

PS：ChatGPT 可能會(huì)使用 JS 函數(shù)生成，直接停止，并要求?不要使用 JS 函數(shù)，直接生成靜態(tài) JSON 數(shù)據(jù)格式

考慮到分頁(yè)，返回的?data?應(yīng)該改為?{ list: [], total: 100 }

最后，分頁(yè)后 id 也不能重復(fù)，所以使用 MockJS 來(lái)隨機(jī)生成 id?，使用?Random.id()

渲染博客列表

需要考慮的條件：

• 分類 category
• 搜索 keyword
• 分頁(yè) page pageSize

第一，需要改造一下 blogApi.js 中的?getBlogList?，增加參數(shù)

第二，在首頁(yè) HomeView.vue 中請(qǐng)求數(shù)據(jù)。使用 Copilot 生成代碼。

第三，渲染博客列表，使用 Copilot 生成代碼?<!-- 遍歷顯示 blogList 的內(nèi)容，每個(gè) item 使用 div -->

博客卡片組件

ChatGPT 提問

用 vue3 和 ElementPlus 寫一個(gè)博客卡片組件（BlogCard.vue），用于在博客列表中顯示單個(gè)博客信息 該組件接受一個(gè)屬性 blog ，是一個(gè) js 對(duì)象 該組件的 UI 分為上中下三層結(jié)構(gòu)： - 上層顯示：博客作者（blog.author）并在前面加 icon ，分類（blog.category），時(shí)間（blog.updatedAt） - 中層顯示：博客標(biāo)題（blog.title），博客簡(jiǎn)介（blog.summary），且點(diǎn)擊標(biāo)題跳轉(zhuǎn)到 `/blog/:id` - 下層顯示：點(diǎn)贊數(shù)量（blog.likes），收藏?cái)?shù)量（blog.favorites）、評(píng)論數(shù)量（blog.comments）。每個(gè)使用合適的 icon 來(lái)表示 還要求： - 當(dāng)鼠標(biāo) hover 卡片，設(shè)置淺灰色背景 - 點(diǎn)擊卡片跳轉(zhuǎn)到 `/blog/:id` - CSS 樣式要美觀，可參考當(dāng)前博客網(wǎng)站的樣式 - 使用 vue3 setup script 語(yǔ)法

新建組件?components/BlogCard.vue?并粘貼相應(yīng)代碼

樣式有點(diǎn)問題，繼續(xù)調(diào)整一下：

你給出的代碼非常好。不過(guò)有幾個(gè)樣式的地方需要優(yōu)化： 1. 內(nèi)容和邊框的間距太大了，再小一些 2. 上層顯示的三個(gè)信息，全部靠左顯示，中間要有間隙。 3. 上層顯示的三個(gè)信息，“時(shí)間”和“分類”使用灰色

代碼進(jìn)行如下調(diào)整

• 卡片之間增加間隙，在 HomeView.vue 中增加?margin-bottom
• 修改 icon 未顯示的問題（代碼生成的是老舊寫法）

處理時(shí)間格式，新建?utils/date.js?，然后用 Copilot 快速生成

分頁(yè)

ChatGPT 提問

使用 vue3 和 ElementPlus 寫一個(gè)分頁(yè)組件，水平居中顯示 可用的變量有 total page pageSize 使用 vue3 setup script

然后用 Copilot 快速生成?handleCurrentChange?函數(shù)代碼

博客詳情頁(yè)

梳理需求

• 展示博客信息
• 點(diǎn)贊、收藏
• 評(píng)論 （單獨(dú)講）

mock

獲取博客詳情接口?/api/blogs/${id}

用 ChatGPT 生成博客內(nèi)容

用 JSON 格式寫一個(gè)真實(shí)的編程技術(shù)博客，博客包括： - id - 標(biāo)題 - 內(nèi)容，要求：使用 markdown 格式，包含標(biāo)題、文本、列表、代碼塊，1000 字左右 - 作者 - 分類（隨機(jī)選擇：前端, java, python, 小程序）要和標(biāo)題、簡(jiǎn)介對(duì)應(yīng)好 - 點(diǎn)贊數(shù)量 - 是否點(diǎn)贊 - 收藏?cái)?shù)量 - 是否收藏 - 評(píng)論數(shù)量 - 創(chuàng)建時(shí)間

然后借助 Copilot 在 mock-server 中完善接口

其他接口：

• 點(diǎn)贊
• 取消點(diǎn)贊
• 收藏
• 取消收藏

展示博客內(nèi)容

根據(jù) id 獲取博客數(shù)據(jù)?——?使用 Copilot 可快速完成

使用?useTitle?修改博客標(biāo)題

顯示博客信息：標(biāo)題，作者，時(shí)間，內(nèi)容

• 使用 Copilot 生成?<!-- 顯示 title author createdAt content ，中間留 margin -->
• 優(yōu)化 css 樣式
• 修改時(shí)間格式

轉(zhuǎn)換 markdown

使用 ChatGPT 提問

用 js 把 markdown 格式轉(zhuǎn)換為 html 格式？有沒有第三方庫(kù)可以使用？

• 選擇?markdown-it
• 并需要傳入字符串格式?toRaw(blogInfo.content)
• 優(yōu)化代碼塊樣式，使用 Copilot?/* 優(yōu)化 pre code 樣式 */

點(diǎn)贊和收藏

使用 Copilot 生成模板?<!-- 生成一個(gè) div ，用于點(diǎn)贊和收藏，水平居中顯示 -->

優(yōu)化代碼

• icon
• 顯示數(shù)量

根據(jù)?isLiked?和?isFavorited?判斷，顯示按鈕 active 狀態(tài)。手寫即可

添加點(diǎn)擊事件，執(zhí)行 點(diǎn)贊/取消點(diǎn)贊，收藏/取消收藏。可使用 Copilot 生成代碼

• // 點(diǎn)贊或取消點(diǎn)贊
• // 收藏或取消收藏

評(píng)論

梳理需求

• 評(píng)論列表展示
• 刪除自己的評(píng)論
• 發(fā)表評(píng)論

mock

評(píng)論列表接口 （不考慮分頁(yè)）

ChatGPT 提問：

使用 JSON 格式，生成一個(gè)編程技術(shù)博客的評(píng)論列表，一共 5 條。評(píng)論內(nèi)容要真實(shí)。 每條評(píng)論包含： - id - 評(píng)論內(nèi)容 - 創(chuàng)建時(shí)間 - 作者用戶名 - 作者昵稱

然后配合 Copilot 編寫 mock 代碼

其他接口

使用 Copilot 生成

• 刪除評(píng)論
• 發(fā)表評(píng)論

評(píng)論列表

新建一個(gè)?views/subviews/CommentView.vue?，并引入到?views/BlogDetailView.vue

獲取博客列表數(shù)據(jù)，直接使用 Copilot 生成

顯示評(píng)論列表，直接用 Copilot 生成?<!-- 評(píng)論列表 -->
CSS 也可自動(dòng)生成，且樣式很好看

最后，再加用戶名前面加一個(gè) icon

刪除自己的評(píng)論

前提：該一下 mock 數(shù)據(jù)，讓一條數(shù)據(jù)是自己的

獲取當(dāng)年用戶名：從 pinia store 中引入

刪除評(píng)論?——?直接使用 Copilot 生成

• 顯示按鈕（和樣式）<!-- 如果 comment.username 等于 userInfo.username ，則顯示一個(gè)“刪除”按鈕，點(diǎn)擊執(zhí)行刪除 -->?CSS 也可以生成
• 刪除的方法?// 刪除一條評(píng)論

發(fā)表評(píng)論

使用 Copilot 生成

• UI?<!-- 發(fā)表評(píng)論。左右結(jié)構(gòu)，一個(gè)輸入框，一個(gè)按鈕 -->?（以及 CSS）
• 方法?// 發(fā)表評(píng)論

我的博客列表

需求分析

• 我的博客列表
• 刪除一條博客
• 修改一條博客
• 創(chuàng)建博客（后面講）

通用功能

• 修改標(biāo)題
• 未登錄，跳轉(zhuǎn)到登錄頁(yè)（參考登錄頁(yè)） —— 可使用 Copilot

PS：在此生成“創(chuàng)建博客”按鈕

mock

mock 增加：刪除博客。使用 Copilot

在?blogApi.js?獲取博客列表，加一個(gè) opt?my?默認(rèn)?false
參數(shù)傳給服務(wù)端，讓服務(wù)端處理

博客列表

獲取博客列表數(shù)據(jù)，使用 Copilot 生成，參考代碼的注釋
【注意】加上?my: true?表示“我的博客”

顯示列表和操作

• Copilot 生成模板?<!--用 table 顯示博客列表，包括 title category likes favorites comments createdAt，再加兩個(gè)操作按鈕“編輯” “刪除”-->
• Copilot 生成編輯代碼?// 跳轉(zhuǎn)到編輯頁(yè)
• Copilot 生成刪除代碼?// 刪除博客

分頁(yè)

分頁(yè)：可以把“首頁(yè)”分頁(yè)，單獨(dú)抽離一個(gè)組件

需要改動(dòng)

• 接受兩個(gè)屬性 pageSize total
• 去掉?path: '/'?，不要只考慮首頁(yè)

創(chuàng)建按鈕

使用 Copilot 生成代碼，在 table 上面寫?<!-- 左右結(jié)構(gòu)，左側(cè)標(biāo)題“我的博客”，右側(cè)“創(chuàng)建”按鈕 -->

創(chuàng)建編輯博客

需求梳理

• 編輯博客內(nèi)容
• 新建博客

mock

使用 Copilot 生成

• 創(chuàng)建博客 post
• 更新博客 put

前提

如果用戶未登錄，則跳轉(zhuǎn)到登錄頁(yè)。參考“我的博客”頁(yè)?——?可抽離單獨(dú)的 Hook?useNavToLogin.js

判斷 創(chuàng)建/更新

使用 Coplit 根據(jù)注釋生成

第一，// 獲取 url params id

第二，根據(jù) id 獲取博客數(shù)據(jù)。先引入 api?，再寫?// onMounted 根據(jù) id 獲取博客詳情頁(yè)，id 為空則不獲取

第三，修改標(biāo)題。先引入 hook?，再寫?// 定義標(biāo)題，有 id 則為編輯，否則為創(chuàng)建?和?// 設(shè)置網(wǎng)頁(yè)標(biāo)題

渲染 UI

第一，標(biāo)題欄（和“提交”按鈕），ChatGPT 生成

使用 vue3 和 ElementPlus 寫一個(gè) div ，左右結(jié)構(gòu) 左側(cè)是 `title` ，右側(cè)是“提交”按鈕，點(diǎn)擊執(zhí)行一個(gè)事件 使用 vue3 setup script 語(yǔ)法

第二，博客標(biāo)題和類型，ChatGPT 生成

使用 vue3 和 ElementPlus 寫一個(gè) div ，左右結(jié)構(gòu) 左側(cè)：一個(gè)文字“標(biāo)題”，一個(gè) input ，v-model 對(duì)應(yīng) `blogDetails.title` 右側(cè)：一個(gè)文字“類型”（可選：前端、Java、Python、小程序），v-model 對(duì)應(yīng) `blogDetails.category` 中間要有間隔 使用 vue3 setup script 語(yǔ)法

第三，內(nèi)容 textarea?，回車使用 Copilot 直接生成

提交數(shù)據(jù)

第一，confirm 確認(rèn)是否提交

• Copilot 一開始給出的代碼不好
• 參考“我的博客”，引入?ElMessageBox?以后（并修改為?async?函數(shù)），Copilot 給出的答案就好了

第二，驗(yàn)證 title content category 是否為空?——?使用 Copilot 即可

第三，（先引入 api）然后使用 Copilot 生成代碼?// 如果沒有 id ，則創(chuàng)建博客。沒有 id 則更新博客

項(xiàng)目開發(fā) - 總結(jié)

目標(biāo)回顧

使用 ChatGPT 和 Copilot 快速生成代碼，完成項(xiàng)目開發(fā)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-742072.html

內(nèi)容回顧

• 路由模板和頂部欄
• 登錄和注冊(cè)，獲取用戶信息
• 首頁(yè)（博客列表）
• 博客詳情頁(yè)，評(píng)論
• 我的博客，新建，編輯

注意事項(xiàng)

• ChatGPT 和 Copolit 配合使用，用于不同場(chǎng)景
• 注意 AI 工具的提問技巧，能更高效、準(zhǔn)確的生成代碼
• AI 工具生成的代碼可能還需要自己驗(yàn)證和調(diào)試

到了這里，關(guān)于ChatGPT和Copilot協(xié)助Vue火速搭建博客網(wǎng)站的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！