VBEN API对接、表格、弹窗与后端权限修改技巧

2023-07-01 07:16:26

VBEN 进阶：API 对接、表格、弹窗和后端权限管理

API 对接

VBEN 允许开发人员通过 API 接口与后端进行通信。要配置 API，请在 vite.config.ts 文件中添加以下代理设置：

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}

表格

VBEN 提供了各种表格组件，用于展示和操作数据。v-table 组件可用于创建具有分页、排序和筛选等功能的数据列表。

弹窗

VBEN 还提供了用于创建模态弹窗的 v-modal 组件。弹窗可用于显示详细信息或进行表单编辑。

后端权限

为了实现权限控制，可以在后端接口中实施权限检查。当用户登录时，后端可以返回用户的权限信息。前端可以根据这些信息判断用户是否具有访问特定功能的权限。

代码示例：表格

<template>
  <v-table :data="tableData" :columns="tableColumns" :pagination="true" :loading="isLoading">
    <template #cell(action)="record">
      <v-button @click="handleEdit(record)">编辑</v-button>
      <v-button @click="handleDelete(record)">删除</v-button>
    </template>
  </v-table>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tableData = ref([])
    const tableColumns = ref([
      { title: 'ID', key: 'id' },
      { title: '姓名', key: 'name' },
      { title: '年龄', key: 'age' },
      { title: '操作', key: 'action', width: '150px' }
    ])
    const isLoading = ref(false)

    // 获取表格数据
    const fetchTableData = async () => {
      isLoading.value = true
      const res = await fetch('/api/users')
      tableData.value = await res.json()
      isLoading.value = false
    }

    // 编辑记录
    const handleEdit = (record) => {
      // ... 编辑操作
    }

    // 删除记录
    const handleDelete = (record) => {
      // ... 删除操作
    }

    // 初始化表格数据
    fetchTableData()

    return {
      tableData,
      tableColumns,
      isLoading,
      handleEdit,
      handleDelete
    }
  }
}
</script>

代码示例：弹窗

<template>
  <v-modal v-model="showModal" title="编辑用户" @ok="handleOk" @cancel="handleClose">
    <div>
      <v-input v-model="form.name" label="姓名" />
      <v-input v-model="form.age" label="年龄" />
    </div>
  </v-modal>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const showModal = ref(false)
    const form = ref({
      name: '',
      age: ''
    })

    // 保存数据
    const handleOk = async () => {
      // ... 保存操作
    }

    // 关闭弹窗
    const handleClose = () => {
      showModal.value = false
    }

    return {
      showModal,
      form,
      handleOk,
      handleClose
    }
  }
}
</script>