根据原型图生成前端代码
以若依的界面作为演示效果,
在通义千问中截图并提问,根据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有一定额度,使用完之后就要收费。
不是制造焦虑,只是分享,大模型的到来,会为我们带来很大的影响,不要去抗拒它,也不要无线的吹捧它,但还是需要学习和应用,将其称为我们提高效率的武器。