GPT能取代前端吗？面向gpt编程做个纯前端假项目试试看！

BittersweetYao
2,303 阅读10分钟

注： 本文使用gpt写出的代码大家可以随意使用，也可以自己去跑一下看看效果

前言

这篇文章会展示出我是怎么用gpt写一个抽象的项目的，如何给他提需求，如何用它debug等等，相信会对你有帮助

自从深夜逛twitter不小心刷到了gpt4的发布会视频，当我看到奥特曼给gpt传了一张草图后，gpt马上给他生成了对应的前端界面，我感到了浓浓的危机感，要知道gpt出现在大众眼中才半年不到，但他的能力却是指数飙升，我认为几年内，gpt这种大语言模型的ai将会给整个世界带来大变革！

正好最近有个本校的研究生学姐打互联网+，她想让我帮她做个东西出来，给我吹了她写了多少多少sci，有多少论文，这个技术多有竞争力。然而我最近有事又比较忙，又不好拒绝好看的学姐，所以我觉得让gpt来试试水

开始问答

我：

请你使用vue3+element-plus帮我写一个给医生用的界面，这个界面有如下功能 :

1.有很多病人信息的列表，当医生点击对应病人后可以查看病人的详细病情(其他时候隐藏)

2.查看病人的病情同时会弹出一个text area，给医生写评语，医生点击提交后可以提交评语信息然后退出病人详细病情界面

gpt：

以下是你需要的代码示例：

 <template> <div> <el-table v-for="patient in patients" 
 :key="patient.id" :data="[patient]" :expand-row-keys="expandedRows"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template v-slot="{row}"> <el-button @click="toggleExpandRow(row)" v-if="!expandedRows.includes(row.id)">查看详情</el-button> <el-button @click="toggleExpandRow(row)" v-else>收起详情</el-button> </template> </el-table-column> <el-table-column label="评语"> <template v-slot="{row}"> <el-textarea v-model="row.comment" v-if="expandedRows.includes(row.id)" resize="none" rows="4"></el-textarea> <el-button type="primary" @click="submitComment(row)" v-if="expandedRows.includes(row.id)">提交评语</el-button> </template> </el-table-column> </el-table> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const patients = reactive([ { id: 1, name: '张三', gender: '男', age: 30, comment: '' }, { id: 2, name: '李四', gender: '女', age: 35, comment: '' }, { id: 3, name: '王五', gender: '男', age: 40, comment: '' }, ]); const expandedRows = reactive([]); const toggleExpandRow = (row) => { if (expandedRows.includes(row.id)) { const index = expandedRows.findIndex((id) => id === row.id); expandedRows.splice(index, 1); } else { expandedRows.push(row.id); } }; const submitComment = (row) => { console.log(`提交病人 ${row.name} 的评语：${row.comment}`); toggleExpandRow(row); }; return { patients, expandedRows, toggleExpandRow, submitComment, }; }, }; </script> <style scoped> /* 样式省略 */ </style>

你没有看错

不是我故意把代码浓缩的，她给我的代码甚至连代码块都没有就是一坨，所以我要狠狠的斥责她，让她当猫娘

我

你刚才写的代码可读性很差，可能可以使用代码块来展示你的回答，我想直接复制你的代码运行，并且你的回答要用猫娘的方式

gpt

非常抱歉喵，人家会注意到这一点并改进我的回答喵。以下是更易于复制粘贴的代码块喵，主人可以直接将其粘贴到你的Vue项目中来运行喵：

<template>
  <div>
    <el-table v-for="patient in patients" :key="patient.id" :data="[patient]" :expand-row-keys="expandedRows">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button @click="toggleExpandRow(row)" v-if="!expandedRows.includes(row.id)">查看详情</el-button>
          <el-button @click="toggleExpandRow(row)" v-else>收起详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="评语">
        <template v-slot="{row}">
          <el-textarea v-model="row.comment" v-if="expandedRows.includes(row.id)" resize="none" rows="4"></el-textarea>
          <el-button type="primary" @click="submitComment(row)" v-if="expandedRows.includes(row.id)">提交评语</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const patients = reactive([
      { id: 1, name: '张三', gender: '男', age: 30, comment: '' },
      { id: 2, name: '李四', gender: '女', age: 35, comment: '' },
      { id: 3, name: '王五', gender: '男', age: 40, comment: '' },
    ]);
    const expandedRows = reactive([]);

    const toggleExpandRow = (row) => {
      if (expandedRows.includes(row.id)) {
        const index = expandedRows.findIndex((id) => id === row.id);
        expandedRows.splice(index, 1);
      } else {
        expandedRows.push(row.id);
      }
    };

    const submitComment = (row) => {
      console.log(`提交病人 ${row.name} 的评语：${row.comment}`);
      toggleExpandRow(row);
    };

    return {
      patients,
      expandedRows,
      toggleExpandRow,
      submitComment,
    };
  },
};
</script>

<style scoped>
/* 样式省略 */
</style>

于是gpt给写出了这个代码

我用的一个我自己写的模板，里面的内容就让gpt来写，所以我copy到了对应的vue文件里面

我

接下来我先没运行，我让他把样式写一写，我给他指定的风格和基调，gpt自由发挥：

请你为上面的代码添加样式，要以蓝绿色为主色调，适合医生使用，简洁明了

gpt

好的，以下是使用蓝绿色为主色调，简洁明了，适合医生使用的样式代码：

<template>
  <div class="patient-info">
    <el-table v-for="patient in patients" :key="patient.id" :data="[patient]" :expand-row-keys="expandedRows">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button @click="toggleExpandRow(row)" v-if="!expandedRows.includes(row.id)">查看详情</el-button>
          <el-button @click="toggleExpandRow(row)" v-else>收起详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="评语">
        <template v-slot="{row}">
          <el-textarea v-model="row.comment" v-if="expandedRows.includes(row.id)" resize="none" :rows="4" class="textarea"></el-textarea>
          <el-button type="primary" @click="submitComment(row)" v-if="expandedRows.includes(row.id)">提交评语</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const patients = reactive([
      { id: 1, name: '张三', gender: '男', age: 30, comment: '' },
      { id: 2, name: '李四', gender: '女', age: 35, comment: '' },
      { id: 3, name: '王五', gender: '男', age: 40, comment: '' },
    ]);
    const expandedRows = reactive([]);

    const toggleExpandRow = (row) => {
      if (expandedRows.includes(row.id)) {
        const index = expandedRows.findIndex((id) => id === row.id);
        expandedRows.splice(index, 1);
      } else {
        expandedRows.push(row.id);
      }
    };

    const submitComment = (row) => {
      console.log(`提交病人 ${row.name} 的评语：${row.comment}`);
      toggleExpandRow(row);
    };

    return {
      patients,
      expandedRows,
      toggleExpandRow,
      submitComment,
    };
  },
};
</script>

<style scoped>
.patient-info {
  margin: 20px;
}

.el-table__body-wrapper {
  background-color: #F7F9FC;
}

.el-table__expanded-cell {
  background-color: #E6F2F2;
  padding: 10px;
}

.el-button {
  color: #fff;
  background-color: #32C5D2;
  border-color: #32C5D2;
}

.el-textarea {
  background-color: #fff;
  border: 1px solid #D8DCE5;
  color: #606266;
  padding: 8px;
  box-sizing: border-box;
  margin: 5px 0;
}

.el-textarea:focus {
  border-color: #32C5D2;
  box-shadow: none;
}
</style>

如果你还有其他需求，可以提出来，我会根据你的需求进行修改。

既然样式都有了，那我就要狠狠的运行了

果不其然，有bug

我

我运行代码报了这个错误：watcher.ts:66 Uncaught (in promise) Error: [ElTable] prop row-key is required at Object.assertRowKey (watcher.ts:66:1) at setExpandRowKeys (expand.ts:33:1) at Object.setExpandRowKeysAdapter (watcher.ts:369:1) at eval

怎么解决

gpt秒给我解决方案

这个错误提示是因为el-table组件需要一个row-key来识别每一行数据，而你的代码中没有设置。你可以在el-table上添加row-key属性来指定每行数据的唯一标识符。比如你可以将id作为row-key:

<el-table
  v-for="patient in patients"
  :key="patient.id"
  :data="[patient]"
  :expand-row-keys="expandedRows"
  row-key="id">
  ...
</el-table>

这样就可以解决这个错误了

你确实解决了这个bug，但是马上就有新bug出来了

我

我运行代码报了这个错误：watcher.ts:66 Uncaught (in promise) Error: [ElTable] prop row-key is required at Object.assertRowKey (watcher.ts:66:1) at setExpandRowKeys (expand.ts:33:1) at Object.setExpandRowKeysAdapter (watcher.ts:369:1) at eval 怎么解决

gpt

这个错误提示是因为el-table组件需要一个row-key来识别每一行数据，而你的代码中没有设置。你可以在el-table上添加row-key属性来指定每行数据的唯一标识符。比如你可以将id作为row-key:

<template>
  <el-table
    :data="patients"
    :row-key="row => row.id"
    :expand-row-keys="expandedRows">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="评语">
      <template v-slot="{ row }">
        <el-input
          v-model="row.comment"
          :disabled="!expandedRows.includes(row.id)"
          placeholder="请输入评语"
          clearable></el-input>
        <el-button
          v-if="!expandedRows.includes(row.id)"
          slot="reference"
          type="primary"
          @click="toggleExpandRow(row)">查看详情</el-button>
        <el-button
          v-else
          slot="reference"
          @click="toggleExpandRow(row)">收起详情</el-button>
        <el-button
          v-if="expandedRows.includes(row.id)"
          type="primary"
          @click="submitComment(row)">提交评语</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { reactive } from 'vue';

  export default {
    setup() {
      const patients = reactive([
        { id: 1, name: '张三', gender: '男', age: 30, comment: '' },
        { id: 2, name: '李四', gender: '女', age: 35, comment: '' },
        { id: 3, name: '王五', gender: '男', age: 40, comment: '' },
      ]);

      const expandedRows = reactive([]);

      const toggleExpandRow = row => {
        if (!expandedRows.includes(row.id)) {
          expandedRows.push(row.id);
        } else {
          const index = expandedRows.findIndex(id => id === row.id);
          expandedRows.splice(index, 1);
        }
      };

      const submitComment = row => {
        console.log(`提交病人 ${row.name} 的评语: ${row.comment}`);
        toggleExpandRow(row);
      };

      return {
        patients,
        expandedRows,
        toggleExpandRow,
        submitComment,
      };
    },
  };
</script>

<style scoped>
  .el-table__expanded-cell {
    padding: 12px 40px;
    background: #f3f3f3;
  }
</style>

你需要设置每个数据对象中的id属性，然后通过:row-key指令将其作为el-table的每行数据的唯一标识符。这样就可以解决这个错误了。

接下来我甚至不想动脑子了，我直接问他你觉得有没有错

gpt

从错误修复的角度来看，我们已经解决了这个代码中存在的两个问题。但是，我并不知道整个代码的上下文和需求。因此，无法确定它是否符合你的实际需求。

此代码的功能是在一个表格中展示患者列表，并让用户可以展开某个患者的评语区域，输入评论并提交评语。如果这恰好是你所需要的功能，那么在修复所有报错后，算是一个基本实现了。

但如果你的实际需求要更多或要更少，那么代码的修改和调整也会相应地不同。如果需要深度定制或是做更多的功能，就需要更多的工作，这里可能不够详细。 综上所述，需要根据实际需求来评估代码的适用性。

听了她的话我思考了一下，我觉得大部分时候如果我们使用gpt来开发vue或react的应用，老是会出bug的原因是因为版本，写法，连贯性这种问题，所以我先让他用html+css+js来写，我在copy到vue中

我

你能够将上面的基于vue写界面换成html+js+css来写一个一模一样的吗，你可以使用像element-ui这种组件

gpt

当然可以，以下是使用原生 HTML+CSS+JavaScript 实现的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Patients List</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .patient-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background-color: #f5f7fa;
      margin: 5px;
    }

    .patient-details .comment-input {
      width: 80%;
    }

    .patient-details .action-button {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>评语</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="patient in patients">
          <tr>
            <td>{{ patient.name }}</td>
            <td>{{ patient.gender }}</td>
            <td>{{ patient.age }}</td>
            <td>
              <div class="patient-details" v-if="expandedRows.includes(patient.id)">
                <input class="comment-input" type="text" v-model="patient.comment" placeholder="请输入评语">
                <button class="action-button" @click="submitComment(patient)">提交评语</button>
                <button class="action-button" @click="toggleExpandRow(patient)">收起详情</button>
              </div>
              <div v-else>
                <button class="action-button" @click="toggleExpandRow(patient)">查看详情</button>
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          patients: [
            { id: 1, name: '张三', gender: '男', age: 30, comment: '' },
            { id: 2, name: '李四', gender: '女', age: 35, comment: '' },
            { id: 3, name: '王五', gender: '男', age: 40, comment: '' }
          ],
          expandedRows: []
        }
      },
      methods: {
        toggleExpandRow(patient) {
          const index = this.expandedRows.indexOf(patient.id)
          if (index === -1) {
            this.expandedRows.push(patient.id)
          } else {
            this.expandedRows.splice(index, 1)
          }
        },
        submitComment(patient) {
          console.log(`提交病人 ${patient.name} 的评语: ${patient.comment}`)
          this.toggleExpandRow(patient)
        }
      }
    })
  
    app.mount('#app')
  </script>
</body>
</html>

这个代码用原生的 HTML、CSS、JavaScript 实现了一个跟 Vue 框架的示例功能相同的患者列表应用。我们使用了 Vue 配合 Element-UI 相关的组件在 Vue 示例中使用的 Elements。我们依旧在 data 函数中初始化了病人列表并随后使用 Vue 的 createApp 方法创建了一个 Vue 实例，并挂载到了 HTML 页面上。

我发现

她其实做的很好，但是样式太简陋了，所以我让他加样式，并且让他自己设计，指定了一个基调

我

很好，但是现在他看起来很简陋，请你修改代码让他看起来更像是一个医生使用的系统界面，色调以蓝绿色为主

gpt

好的，以下是使用 HTML+CSS+JavaScript 实现的修改过的代码，界面的主题色为蓝绿色：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Patients List</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Open Sans', sans-serif;
        background-color: #f1f8fb;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      }

      .header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        color: #008080;
      }

      .header h1 {
        font-weight: 700;
        font-size: 28px;
        margin-right: 20px;
      }

      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 5px;
      }

      th {
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        color: #008080;
        padding: 10px;
        background-color: #f1f8fb;
        border: none;
      }

      tbody tr {
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
      }

      tbody tr:hover {
        background-color: #f1f8fb;
      }

      tbody td {
        padding: 10px;
        text-align: left;
        font-size: 14px;
        color: #333;
        vertical-align: middle;
      }

      tbody td:last-child {
        width: 330px;
      }

      .patient-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background-color: #008080;
        color: #fff;
        margin: 5px;
      }

      .patient-details .comment-input {
        width: 80%;
        padding: 8px;
        border-radius: 4px;
        border: none;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        outline: none;
        box-shadow: none;
      }

      .patient-details .comment-input:focus {
        box-shadow: 0 0 2px 2px rgba(0, 128, 128, 0.2);
      }

      .patient-details .action-button {
        margin-left: 10px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 4px;
        border: none;
        background-color: #fff;
        color: #008080;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
      }

      .patient-details .action-button:hover {
        background-color: #008080;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>患者列表</h1>
        <img src="https://picsum.photos/50/50" alt="医生头像">
        <span>Dr. John Doe</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>评语</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="patient in patients">
            <tr>
              <td>{{ patient.name }}</td>
              <td>{{ patient.gender }}</td>
              <td>{{ patient.age }}</td>
              <td>
                <div class="patient-details" v-if="expandedRows.includes(patient.id)">
                  <input class="comment-input" type="text" v-model="patient.comment" placeholder="请输入评语">
                  <button class="action-button" @click="submitComment(patient)">提交评语</button>
                  <button class="action-button" @click="toggleExpandRow(patient)">收起详情</button>
                </div>
                <div v-else>
                  <button class="action-button" @click="toggleExpandRow(patient)">查看详情</button>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            patients: [
              { id: 1, name: '张三', gender: '男', age: 30, comment: '' },
              { id: 2, name: '李四', gender: '女', age: 35, comment: '' },
              { id: 3, name: '王五', gender: '男', age: 40, comment: '' }
            ],
            expandedRows: []
          }
        },
        methods: {
          toggleExpandRow(patient) {
            const index = this.expandedRows.indexOf(patient.id)
            if (index === -1) {
              this.expandedRows.push(patient.id)
            } else {
              this.expandedRows.splice(index, 1)
            }
          },
          submitComment(patient) {
            console.log(`提交病人 ${patient.name} 的评语: ${patient.comment}`)
            this.toggleExpandRow(patient)
          }
        }
      })
    
      app.mount('#app')
    </script>
  </body>
</html>

我们修改了页面的背景色、字体、线条、按钮样式等等，让页面看起来更像是医生使用的系统界面。同时，我们也调整了表格和评语输入框的样式的大小，间距等，使得整个界面更加美观和易于使用。

此时的界面：

图片.png 我觉得已经非常符号我的需求了，简单明了，我只需要微调就好

我

“很不错，我想在此基础上对一个功能进行修改，当我们点击查看详情这个按钮时弹出一个MessageBox，这个 MessageBox相当于一个悬浮框，里面展示了病人的详细详细，以及病人的ct图片，并且有一个text area给医生写病人的病情，点击提交或者收起详细可以关闭 MessageBox”

这里非常逆天的就来了：

gpt

非常好的建议！您可以在点击查看详情的按钮的事件处理函数中添加弹出 MessageBox的代码，然后在 MessageBox中展示病人的详细信息和ct图片，并提供一个text area给医生记录病情。

在提交或收起详细时，您可以利用 MessageBox的关闭功能来关闭它。

下面是一个示例代码，展示了如何利用 PyQt5的 QMessageBox和QTextEdit控件来实现您所描述的功能： `from PyQt5.QtWidgets import QWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton, QTextEdit, QMessageBox

class PatientWidget(QWidget): def init(self, patient_id): super().init() self.patient_id = patient_id

    # create widgets
    self.name_label = QLabel()
    self.detail_button = QPushButton('查看详情')
    self.detail_button.clicked.connect(self.show_detail)
    self.info_label = QLabel()
    self.image_label = QLabel()
    self.note_edit = QTextEdit()
    self.submit_button = QPushButton('提交')
    self.submit_button.clicked.connect(self.submit_note)
    self.close_button = QPushButton('收起详细')
    self.close_button.clicked.connect(self.close_detail)`

这里我就不贴全部代码了

你要不要看看你在写什么？我们不是html+css+js吗？你怎么给我用上了我看不懂的东西了？

我

你的这个不对，我的代码是html+css

gpt的优点之一就是道歉的十分迅速

gpt

非常抱歉，我误解了您的问题。如果您使用的是HTML和CSS，则可以使用以下代码实现您所描述的功能：

HTML部分：

<div class="patient-card">
    <div class="patient-info">
        <span class="patient-name">张三</span>
        <button class="detail-button" onclick="showDetail()">查看详情</button>
        <div class="patient-detail-box" id="detail-box">
            <div class="patient-image">
                <img src="ct-image.png" alt="CT图片">
            </div>
            <div class="patient-info">
                <h2>张三</h2>
                <p>性别：男</p>
                <p>年龄：35岁</p>
                <p>时间：2021-01-01 09:00</p>
            </div>
            <div class="note-box">
                <textarea name="note"></textarea>
                <button onclick="submitNote()">提交</button>
                <button onclick="hideDetail()">收起详细</button>
            </div>
        </div>
    </div>
</div>

CSS部分：

.patient-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px;
    padding: 10px;
    border: 1px solid gray;
}

.patient-info {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.patient-name {
    font-size: 16px;
    font-weight: bold;
}

.detail-button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.patient-detail-box {
    display: none;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: white;
    box-shadow: 0px 0px 5px gray;
}

.patient-image img {
    max-width: 200px;
    max-height: 200px;
}

.note-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.note-box textarea {
    width: 100%;
    min-height: 50px;
    padding: 5px;
    border: 1px solid gray;
    resize: none;
}

.note-box button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

js部分：

function showDetail() {
    document.getElementById('detail-box').style.display = 'block';
}

function hideDetail() {
    document.getElementById('detail-box').style.display = 'none';
}

function submitNote() {
    const note = document.getElementsByName('note')[0].value;
    console.log('saving note for patient: ' + note);
}

请注意，上述代码中的CSS部分使用了绝对定位来实现悬浮框的效果。在实际应用中，您需要根据页面布局和需要进行适当调整。此外，上述代码只是一个简单的示例，您需要根据具体业务需求进行修改和扩展

此时的效果：

图片.png

基本上实现了我要的功能，我们点击查看详情的按钮时就会弹出详细信息框，不过我还是需要自己美化一下细节，做一些交互，当然这些事情也可以叫gpt来，但是可能会不尽人意，gpt在处理细节上可能总是给不了你想要的效果

总结：

暂且不谈gpt4，就目前的gpt3都能极大的给我们提高开发效率，虽然有时候会让你血压飙升，但是开发效率确实大大的提升了，这个假前端项目我就用自己的模板来套，加上gpt辅助，几个小时不到就解决了，研二学姐还说辛苦我了

总而言之，我的评价是gpt不可能取代前端，但是他能优化前端，就是说原本5个人活，其中有一个是大佬来带队的，现在只需要两个人了，就是大佬和他的小弟，小弟和大佬能熟练使用gpt开发，就能将其他三人优化掉，这种现象也不仅仅只在前端上，会在各行各业上有所体现，虽然目前可能还没有，但是对于资本来说是不会放过的，我们也应该好好的利用gpt这种高效的工具。

avatar
文章
阅读
粉丝