半小时的工作我5分钟就搞定了！

原创已于 2024-09-03 21:10:28 修改 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ai

于 2024-08-22 22:02:30 首次发布

根据原型图生成前端代码

以若依的界面作为演示效果，

在通义千问中截图并提问，根据vue+element框架生成代码。这个提问方式是要精确一些，这里我需要的是vue+element生成代码，有的可能是使用React的，那就更改一下表述即可。

之后，可以看到生成的代码如下

具体代码如下

<template>
  <div class="user-management">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-input v-model="searchKey" placeholder="请输入登录名称或手机号码"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="statusFilter" placeholder="请选择用户状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            ></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="选择开始日期"
          style="width: 100%"
          >
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="选择结束日期"
          style="width: 100%"
          >
        </el-date-picker>
      </el-col>
      <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button icon="el-icon-refresh-right" @click="resetForm('form')">重置</el-button>
    </el-row>

    <el-table :data="users" stripe highlight-current-row border>
      <el-table-column label="用户ID" prop="id" width="80"></el-table-column>
      <el-table-column label="登录名称" prop="loginName"></el-table-column>
      <el-table-column label="用户名称" prop="username"></el-table-column>
      <el-table-column label="部门" prop="department"></el-table-column>
      <el-table-column label="手机" prop="phone"></el-table-column>
      <el-table-column label="用户状态" :formatter="formatStatus">
        <el-switch
          v-model="user.status"
          active-value="1"
          inactive-value="2"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleChange(user.id, user.status)"
          :disabled="user.id === '1'"
          />
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="text" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteUser(scope.row.id)">删除</el-button>
          <el-button type="text" @click="exportData(scope.row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
      ></el-pagination>
  </div>
</template>

<script>
  import { ref, reactive } from "vue";

  export default {
    name: "UserManagement",
    data() {
      return {
        searchKey: "",
        statusFilter: "",
        startDate: "",
        endDate: "",
        users: [],
        total: 0,
        pageSize: 10,
        statusOptions: [
        { value: "1", label: "正常" },
        { value: "2", label: "禁用" }
        ],
        form: {},
        };
        },
        methods: {
        handleSearch() {
        // 搜索逻辑...
        },
    resetForm() {
      // 重置表单逻辑...
    },
    handleChange(id, status) {
      // 切换用户状态逻辑...
    },
    editUser(row) {
      // 编辑用户逻辑...
    },
    deleteUser(id) {
      // 删除用户逻辑...
    },
    exportData(row) {
      // 导出数据逻辑...
    },
    handlePageChange(page) {
      // 分页逻辑...
    },
  },
};
</script>

<style scoped>
.user-management {
  /* 自定义样式 */
}
</style>

当然仍然是还有一些问题的，例如变量问题，以及接口对接等等。这个也是可以进行快速优化的，例如：我们可以拿到数据库表的结构语句，结构语句中有注释以及字段名称，就可以让其帮我们替换掉。
然后在使用的体验中，发现OpenAI根据图片生成代码的效果会更好一些，不过OpenAI有一定额度，使用完之后就要收费。
不是制造焦虑，只是分享，大模型的到来，会为我们带来很大的影响，不要去抗拒它，也不要无线的吹捧它，但还是需要学习和应用，将其称为我们提高效率的武器。