AI 极客低代码平台快速上手 -- 生成Vuetify代码

1.批量初始化页面：

在侧栏菜单页面设计板块下，选择“会员页面”菜单，然后点击“批量初始化”按钮，自动根据后端设计的接口(接口标记已完成)批量初始化页面，如下图所示：

2.可选择增量模式或全量模式，然后点击“确认”按钮：

全量模式会清空之前可能存在的页面，然后批量初始化页面。增量模式会比较已生成的页面，追加还未生成的页面。第一次初始化页面时，两个模式效果一致。

3.生成后会根据分组展示页面清单，如下图所示：

4.完善接口调用配置：

在上图中修改订单表单页和列表页红色高亮提示“需完善接口调用”，是因为，目前修改表单页仅绑定了修改接口，通常修改表单需要先调用详情接口，从后端获取当前的旧数据，绑定到页面组件上，用户看到原数据后才开始修改为新数据。所以，这里需要前端开发人员点击"需完善接口调用"高亮提示后的"API"图标，选择该表单需要调用的详情接口。

5.点击接口列表页右上角的“新增接口”按钮：

6.选择订单资源类，然后选择订单详情接口，点击“确认”按钮：

7.使用相同方法，为列表页面补充对应的删除数据接口，现在所有页面的接口状况高亮提示都消失了：

8.生成Vuetify代码：

点击侧栏菜单代码生成模块下的“Vuetify”，然后点击代码预览区右上角的“代码魔法棒”图标，在弹出的确认面板中点击“确认”按钮。

在“深色模式”下预览完整的Vuetify网页项目：

展示部分代码。新增页面：

<script setup lang='ts'>
import { ref } from 'vue'
import router from '@/router'
import { create } from '@/api/OrderResource'
import { SnackbarStore } from '@/stores/SnackbarStore'

const snackbarStore = SnackbarStore()

// 表单初始状态
const isLoading = ref(false)
const isSubmitDisabled = ref(false)
const error = ref(false)
const errorMessages = ref("")

// 消除错误提示
const resetErrors = () => {
  error.value = false
  errorMessages.value = ""
}

const refForm = ref()
const isFormValid = ref(true)
const params = reactive({
  orderNum: "",
  amount: "",
  memo: ""
})

const orderNumRules = ref([
  (v: any) => typeof v === 'string' && !!v.trim() || "订单号:不能为空",
  (v: string) => v.length <= 50 || "订单号:最长不能超过50个字符",
])
const amountRules = ref([
  (v: any) => v !== null || "订单金额:不能为null",
  (v: number) => v >= 0.00 || "订单金额:必须大于或等于0.00",
  (v: number) => v <= 100.00 || "订单金额:必须小于或等于100.00",
  (v: string) => {
    const integerPart = 10
    const fractionPart = 2
    const regExp = new RegExp(`^\\d{1,${integerPart}}(\\.\\d{0,${fractionPart}})?$`)
    return regExp.test(v) || "订单金额:数字的值只允许在10位整数和2位小数范围内"
  }
])
const memoRules = ref([
  (v: any) => typeof v === 'string' && !!v.trim() || "订单描述:不能为空",
  (v: string) => v.length <= 50 || "订单描述:最长不能超过50个字符",
])

// 提交新增订单的请求
const handleCreate = async () => {
  const { valid } = await refForm.value.validate()
  if (valid) {
    isLoading.value = true
    isSubmitDisabled.value = true

    const res = await create(params)

    isLoading.value = false
    isSubmitDisabled.value = false

    if (!res.data.error) {
      snackbarStore.showSuccessMessage("成功创建订单！")
      setTimeout(() => {
        router.back()
      }, 1000)
    }
  }
}

// 返回列表
const handleReturn = () => {
  router.back()
}

</script>

<template>
  <v-sheet elevation="0" class="mx-auto" color="transparent" max-width="1800">
    <v-card class="mb-5">
      <v-card-title class="py-4 font-weight-bold">
        新增订单
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="pa-7">
        <v-form
          ref="refForm"
          class="text-left"
          v-model="isFormValid"
          lazy-validation
        >
          <v-row>

            <v-col cols="12" sm="4">
              <v-label class="font-weight-medium mb-2"><span class="text-red mr-2">*</span>订单号</v-label>
              <v-text-field
                v-model="params.orderNum"
                :rules="orderNumRules"
                :error="error"
                :error-messages="errorMessages"
                color="primary"
                placeholder="请输入订单号"
                density="compact"
                variant="outlined"
                clearable
                type="text"
                validateOn="blur"
                @change="resetErrors"
              />
            </v-col>

            <v-col cols="12" sm="4">
              <v-label class="font-weight-medium mb-2"><span class="text-red mr-2">*</span>订单金额</v-label>
              <v-text-field
                v-model="params.amount"
                :rules="amountRules"
                :error="error"
                :error-messages="errorMessages"
                color="primary"
                placeholder="请输入订单金额"
                density="compact"
                variant="outlined"
                clearable
                type="text"
                validateOn="blur"
                @change="resetErrors"
              />
            </v-col>

            <v-col cols="12" sm="4">
              <v-label class="font-weight-medium mb-2"><span class="text-red mr-2">*</span>订单描述</v-label>
              <v-text-field
                v-model="params.memo"
                :rules="memoRules"
                :error="error"
                :error-messages="errorMessages"
                color="primary"
                placeholder="请输入订单描述"
                density="compact"
                variant="outlined"
                clearable
                type="text"
                validateOn="blur"
                @change="resetErrors"
              />
            </v-col>

          </v-row>
        </v-form>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions class="pa-5">
        <v-spacer></v-spacer>
        <v-btn
          class="px-5 mr-4"
          color="primary"
          elevation="1"
          variant="elevated"
          @click="handleReturn"
        >
          返回列表
        </v-btn>
        <v-btn
          :loading="isLoading"
          :disabled="isSubmitDisabled"
          class="px-5"
          color="primary"
          elevation="1"
          variant="elevated"
          @click="handleCreate"
        >
          保存信息
        </v-btn>
        <v-spacer></v-spacer>
      </v-card-actions>
    </v-card>
  </v-sheet>
</template>

<style scoped lang="scss"></style>

Api接口层代码：

/**
 * 领域类 Order(订单) 的资源访问层
 * @author 极客学院
 * @date 2025/03/20
 */
import { DemoAuthInstance as AuthInstance, Query } from "@/configs/api"

// 提交新增订单的请求
export const create = (data: any) => {
  return AuthInstance.post(`/demo/order/user/create`, data)
}

// 提交修改订单的请求
export const modify = (data: any) => {
  return AuthInstance.put(`/demo/order/user/modify`, data)
}

// 显示一条订单的信息详情
export const detail = (orderId: number) => {
  return AuthInstance.get(`/demo/order/user/detail/${orderId}`)
}

// 订单列表
export const list = (query: Query) => {
  return AuthInstance.get(`/demo/order/user/list`, { params: query })
}

// 删除一条订单信息(非物理删除)
export const remove = (orderId: number) => {
  return AuthInstance.delete(`/demo/order/user/remove/${orderId}`)
}