如何用GPT開發vue代碼

来源:https://www.cnblogs.com/CarlJohnson9527/p/18095938
-Advertisement-
Play Games

提到這個 %20，想必大家都見過，熟悉一點編碼的人，還會知道這玩意就是空格轉換而來！ 那麼我們一起破解， 如何編碼而來？ ...


1、首先配置左側菜單欄children、路由、添加components裡面的文件夾和頁面noise.vue略）
2、安裝插件vue vscode vbase

3、按UI設計圖編寫頁面的div排版

 4、前提：先簡單寫了一些靜態的數據到靜態頁面上，包括getNoiseList函數和setCharts函數，然後再問編寫詢問GPT的語句，儘量包含上下文

一、有mysql表和數據如下： CREATE TABLE `meteorological_data` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主鍵', `date` date NOT NULL COMMENT '日期', `pm25` decimal(10,2) DEFAULT NULL COMMENT 'PM2.5', `pm25_standard` decimal(10,2) DEFAULT NULL COMMENT 'PM2.5國控值', `pm10` decimal(10,2) DEFAULT NULL COMMENT 'PM10', `pm10_standard` decimal(10,2) DEFAULT NULL COMMENT 'PM10國控值', `tsp` decimal(10,2) DEFAULT NULL COMMENT 'TSP', `noise` decimal(10,2) DEFAULT NULL COMMENT '噪音', `noise_threshold` decimal(10,2) DEFAULT NULL COMMENT '噪音閾值', `warning_status` varchar(255) DEFAULT NULL COMMENT '預警狀態', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4 COMMENT='噪音實況監測表';
INSERT INTO `meteorological_data` VALUES (45, '2024-03-23 00:00:00', 65.41, NULL, 116.74, NULL, 45.63, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (46, '2024-03-22 23:00:00', 66.54, NULL, 124.00, NULL, 50.79, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (47, '2024-03-26 22:00:00', 57.34, NULL, 106.82, NULL, 51.02, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (48, '2024-03-26 21:00:00', 55.14, NULL, 101.47, NULL, 51.95, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (49, '2024-03-22 20:00:00', 61.35, NULL, 93.82, NULL, 52.08, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (50, '2024-03-22 19:00:00', 58.92, NULL, 89.12, NULL, 54.42, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (51, '2024-03-22 18:00:00', 57.17, NULL, 85.24, NULL, 56.77, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (52, '2024-03-22 17:00:00', 57.59, NULL, 90.16, NULL, 57.32, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (53, '2024-03-22 16:00:00', 56.78, NULL, 84.98, NULL, 57.72, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (54, '2024-03-22 15:00:00', 57.22, NULL, 82.46, NULL, 58.06, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (55, '2024-03-26 14:00:00', 55.11, NULL, 80.07, NULL, 57.25, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (56, '2024-03-22 13:00:00', 55.64, NULL, 82.66, NULL, 54.98, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (57, '2024-03-22 12:00:00', 52.81, NULL, 80.69, NULL, 54.89, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (58, '2024-03-26 11:00:00', 62.68, NULL, 97.51, NULL, 57.75, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (59, '2024-03-22 09:00:00', 79.89, NULL, 129.67, NULL, 58.35, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (60, '2024-03-22 08:00:00', 86.17, NULL, 145.80, NULL, 59.20, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (61, '2024-03-22 07:00:00', 102.47, NULL, 157.71, NULL, 53.09, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (62, '2024-03-22 06:00:00', 109.46, NULL, 165.56, NULL, 47.72, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (63, '2024-03-22 05:00:00', 105.12, NULL, 159.32, NULL, 44.76, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (64, '2024-03-22 04:00:00', 95.14, NULL, 149.62, NULL, 43.61, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (65, '2024-03-26 03:00:00', 92.45, NULL, 148.59, NULL, 43.31, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (66, '2024-03-22 02:00:00', 89.08, NULL, 146.72, NULL, 42.86, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (67, '2024-03-22 01:00:00', 81.92, NULL, 139.78, NULL, 43.08, NULL, NULL, NULL); INSERT INTO `meteorological_data` VALUES (68, '2024-03-26 00:00:00', 76.01, NULL, 128.69, NULL, 44.23, NULL, NULL, NULL);
二、有vue代碼如下： <template> <div> <div> <div class="header flex jb" style="height: 1.67vw"> <bluetitle name="噪音實況分析" /> <div style="gap: 0.52vw" class="flex"> <bluetabs :tabList="tablist" :active="activeTab" @tabchange="tabchange" /> <bluetabs :tabList="tablists" :active="activeTabSub" @tabchange="tabchanges" /> </div> </div> <div id="main" style=" width: 60.63vw; height: 22.29vw; margin-top: 1.04vw; width: 100%; background: #282828; margin-bottom: 1.04vw; "></div> <div class="flex jb"> <bluetitle name="噪音實況記錄" /> </div> <t-table rowKey="index" :data="tableDatas" :columns="tableheaders" table-layout="fixed" :pagination="pagination" @page-change="onPageChange"> </t-table> </div> </div> </template>
<script> import * as echarts from "echarts"; export default { name: "indexenviron", data() { return { pagination: { current: 1, pageSize: 10, total: 0, showJumper: true, }, timevalue: "", tablist: [ { label: "PM2.5", value: 1 }, { label: "PM10", value: 2 }, { label: "TSP", value: 3 }, { label: "噪音", value: 4 }, ], tablists: [ { label: "當天", value: 1 }, { label: "近七日", value: 2 }, { label: "近一月", value: 3 }, { label: "近一年", value: 4 }, ], activeTab: 1, // 預設選中"PM2.5" activeTabSub: 1, // 預設選中"當天" tableheaders: [], tableDatas: [], }; }, mounted() { this.setCharts(this.data); // this.get(); this.getNoiseList(); }, methods: { async onPageChange(e) { this.pagination = e; let str = `?pageNum=${e.current}&pageSize=${e.pageSize}`; }, tabchange(value) { this.activeTab = value; this.getNoiseList(); }, tabchanges(e) { this.pagination.current = 1; this.getNoiseList(); }, //噪音實況表 async getNoiseList() { let params = { primaryTab: this.activeTab, secondaryTab: this.activeTabSub, pageNum: this.pagination.current, pageSize: this.pagination.pageSize, }; let res = await this.$https.post(this.$url.environ.noise.list, params); if (res.code == 200) { const processedRows = res.rows.map(row => { // 假設row.date格式為"2024-02-27 10:30:12" const regex = /(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})/; const match = row.date.match(regex); if (match) { return { ...row, dateOnly: match[1], // 匹配到的日期部分 timeOnly: match[2] // 匹配到的時間部分 }; } return row; // 如果沒有匹配到，則返回原始行 }); (this.tableheaders = [ { title: "序號", colKey: "id" }, { title: "日期", colKey: "dateOnly" }, { title: "時間", colKey: "timeOnly" }, { title: "PM2.5", colKey: "pm25" }, { title: "PM2.5國控值", colKey: "pm25Standard" }, { title: "PM10", colKey: "pm10" }, { title: "PM10國控值", colKey: "pm10Standard" }, { title: "TSP", colKey: "tsp" }, { title: "噪音", colKey: "noise" }, { title: "噪音閾值", colKey: "noiseThreshold" }, { title: "預警狀態", colKey: "warningStatus" }, ]), this.tableDatas = processedRows; // 使用處理後的數據 this.pagination.total = res.total; } else { this.tableDatas = []; } },
async setCharts(data) { var myChart = echarts.init(document.getElementById("main")); // 生成橫坐標數組，表示0點到23點 const hours = Array.from({ length: 24 }, (_, index) => `${index}:00`); let params = { primaryTab: this.activeTab, secondaryTab: this.activeTabSub, pageNum: this.pagination.current, pageSize: this.pagination.pageSize, }; let res = await this.$https.post(this.$url.environ.noise.list, params); console.log("res"+res); let option = { tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#6a7985", }, }, }, xAxis: { type: "category", boundaryGap: false, data: hours, }, yAxis: { type: "value", }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", areaStyle: {}, }, ], }; myChart.setOption(option); }, }, }; </script>
<style lang="scss" scoped>
</style>
三、查詢後端介面this.$https.post(this.$url.environ.noise.list, params)時返回obj的res如下：

{
"total": 24,
"rows": [
{
"id": 45,
"date": "2024-03-23 00:00:00",
"pm25": 65.41,
"pm25Standard": null,
"pm10": 116.74,
"pm10Standard": null,
"tsp": 45.63,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 46,
"date": "2024-03-22 23:00:00",
"pm25": 66.54,
"pm25Standard": null,
"pm10": 124.0,
"pm10Standard": null,
"tsp": 50.79,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 47,
"date": "2024-03-26 22:00:00",
"pm25": 57.34,
"pm25Standard": null,
"pm10": 106.82,
"pm10Standard": null,
"tsp": 51.02,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 48,
"date": "2024-03-26 21:00:00",
"pm25": 55.14,
"pm25Standard": null,
"pm10": 101.47,
"pm10Standard": null,
"tsp": 51.95,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 49,
"date": "2024-03-22 20:00:00",
"pm25": 61.35,
"pm25Standard": null,
"pm10": 93.82,
"pm10Standard": null,
"tsp": 52.08,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 50,
"date": "2024-03-22 19:00:00",
"pm25": 58.92,
"pm25Standard": null,
"pm10": 89.12,
"pm10Standard": null,
"tsp": 54.42,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 51,
"date": "2024-03-22 18:00:00",
"pm25": 57.17,
"pm25Standard": null,
"pm10": 85.24,
"pm10Standard": null,
"tsp": 56.77,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 52,
"date": "2024-03-22 17:00:00",
"pm25": 57.59,
"pm25Standard": null,
"pm10": 90.16,
"pm10Standard": null,
"tsp": 57.32,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 53,
"date": "2024-03-22 16:00:00",
"pm25": 56.78,
"pm25Standard": null,
"pm10": 84.98,
"pm10Standard": null,
"tsp": 57.72,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
},
{
"id": 54,
"date": "2024-03-22 15:00:00",
"pm25": 57.22,
"pm25Standard": null,
"pm10": 82.46,
"pm10Standard": null,
"tsp": 58.06,
"noise": null,
"noiseThreshold": null,
"warningStatus": null
}
],
"code": 200,
"msg": "查詢成功"
}


四、問：根據後端返回數據生成列表和折線圖，折線圖中如果後端返回的date不是系統的日期，則沒有折線數據，有整點的數據就標上折線，比如：如果有3點、11點的數據，那折線圖就只有這兩個點；如果當天沒有任何時間點的數據，則沒有折線數據。我改如何改寫上面的代碼使其滿足要求。最後得到修改後的代碼如下：

最後前臺顯示如圖：

總結：現在GPT對CSS支持還沒那麼好，但是已經對JS支持非常完善，在自己寫靜態頁面後，去和後端調測介面並修改頁面顯示完全可以用上GPT，當然用GPT的原則是用新不用舊。
現在已經有一些AI能直接通過傳入UI設計圖自動生成靜態頁面，但是感覺不太友好（比如CSS的命名是XX1到XX1000，無法人工修改），能夠部分節約開發者的時間也是一件好事兒。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 分散式資料庫技術的演進和發展方向
    這些年大家都在談分散式資料庫，各大企業也紛紛開始做資料庫的分散式改造。那麼，所謂的分散式資料庫到底是什麼？採用什麼架構？優勢在哪？為什麼越來越多企業選擇它？分散式資料庫技術會向什麼方向發展？帶著這些疑問，一探究竟吧！參與文末的話題互動，更有機會贏取精美獎品~ 分散式資料庫的架構演進 隨著數據量的爆發 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（mediaquery）
    一、mediaquery 1.概述 媒體查詢（mediaquery）它允許根據設備的不同特性（如屏幕大小、屏幕方向、解析度、顏色深度等）來動態地調整網頁的樣式和佈局。 通過媒體查詢，可以為不同的設備定義不同的樣式規則，以適應不同的屏幕大小和解析度。這樣就可以實現響應式設計，使頁面在不同設備上 ...
  • Android Studio 模擬器 安卓12 安裝Magisk
    本文腳本修改自github上的一個腳本。 環境為Mac OS-Arm版 1. 創建一個目錄 mkdir magisk-sh 2. 下載Magisk apk 可以去github上下載，鏈接：https://github.com/topjohnwu/Magisk/releases 本文采用v26.1版本 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（GridRow/GridCol）
    一、GridRow/GridCol 1.概述 柵格佈局是一種通用的輔助定位工具，可以幫助開發人員解決多尺寸多設備的動態佈局問題。通過將頁面劃分為等寬的列數和行數，柵格佈局提供了可循的規律性結構，方便開發人員對頁面元素進行定位和排版。 此外，柵格佈局還提供了一種統一的定位標註，幫助保證不同設備 ...
  • 網頁圖像漸變的方法（HTML+CSS） (漸變與切換)
    網頁圖像漸變的方法（HTML+CSS）（漸變與切換） Date: 2024.03.27 參考 色彩 runoob-漸變色工具 漸變 - 水平多圖 效果 HTML <div class="conBox pubCon"> <div class="imgBox"> <img class="img1" sr ...
  • 如何理解CDN？說說實現原理？
    一、是什麼 CDN (全稱 Content Delivery Network)，即內容分髮網絡 構建在現有網路基礎之上的智能虛擬網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網路擁塞，提高用戶訪問響應速度和命中率。CDN 的關鍵技術主 ...
  • DNS協議 是什麼？說說DNS 完整的查詢過程?
    一、是什麼 DNS（Domain Names System），功能變數名稱系統，是互聯網一項服務，是進行功能變數名稱和與之相對應的 IP 地址進行轉換的伺服器 簡單來講，DNS相當於一個翻譯官，負責將功能變數名稱翻譯成ip地址 IP 地址：一長串能夠唯一地標記網路上的電腦的數字 功能變數名稱：是由一串用點分隔的名字組成的 Int ...
  • 一周是一年的2%
    今天讀到阮一峰的293期周刊，其中有句話很讓我震動——“一周是一年的2%”。 過去的時間里，我都沒有在意時間的流逝，過的好的時候就覺得一周過的好快，周三一過這周也就過去了，過的不好的時候就感覺很漫長。 確實，我們沒有幾周可以虛度的，多浪費幾周，一年就過去了。 我努力將每一周過好，那麼這2%就有價值了 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類