快速上手

前期准备

• 首先你需要一个数据库，并在该项目.env 文件中配置相关信息

• 确保你的运行环境条件满足

• 确保项目在本地环境或线上环境中的nginx里配置解析

创建一个用户数据管理页面

建立路由信息

如：访问 admin/user 路径可看到用户数据的页面

则在对应 ui/src/router/components/other/admin/index.ts 里下的路由文件中添加 user

const routeKeys = [
    'home',
    'admin',
    'admin-group',
    'admin-log',
    'user',// 添加
];

此处路由信息具体参考 路由

假设

• 前端设置路由：admin/user，

• 后台yii2代码中：admin/user 控制器中的方法

其两者并不冲突

• 前者为url访问资源路径

• 后台为api数据调用

因此在设定路由的时候可以自行配置无需对应匹配。

完善路由 vue 文件

<template>
    <TableData :subHeight="240" :search="search" ref="tables"
        @view="openModal({ id: $event.id, isEdit: false }, 'formModal')" #查看按钮回调
        @edit="openModal({ id: $event.id, isEdit: true }, 'formModal')"  #编辑按钮
        url="admin/api/user/index" #请求接口数据库
        :handle="_handleBtn">  #按钮参数配置
        <!-- 搜索条件开始 -->
        <n-input v-model:value="search.nickName" filterable placeholder="用户昵称" />
        <n-input v-model:value="search.name" filterable placeholder="姓名" />
        <n-input v-model:value="search.phone" filterable placeholder="手机号码" />
        <!-- 搜索条件结束 -->
    </TableData>
</template>

<script lang="ts">
import TableData from "@/components/common/TableData.vue";

export default defineComponent({
    name: "USER",
    components: { TableData },

    setup() {
        // 搜索条件参数
        // 在开发中尽量使用search参数包含所有条件
        let search = reactive({
            name: '',
        } as any)
        return {
            search
        }
    },
})
</script>

php user 实例模型

使用gii 工具生成文件在在对应路径 src/common/models/other/ 下

<?php

    namespace app\common\models\other;

    use Yii;

    /**
     * This is the model class for table "{{%user}}".
     *
     * @property int         $id
     * @property string|null $nickName   用户昵称
     * @property string|null $name       用户姓名
     * @property string|null $_hash      HASH地址
     * @property string|null $openId     微信openId
     * @property string|null $phone      手机号码
     * @property int|null    $integral   积分数据
     * @property string|null $password   密码
     * @property string|null $avatar     头像
     * @property int|null    $status     账号状态
     * @property string|null $auth_key   权限token，登录TOKEN
     * @property int|null    $gender     性别:1男2女
     * @property int|null    $is_del     是否删除
     * @property string|null $created_at 创建时间
     * @property string|null $updated_at 更新时间
     */
    class User extends \app\common\models\Model
    {
        public $tableImageColumn = ['avatar'];

        /**
         * {@inheritdoc}
         */
        public static function tableName()
        {
            return '{{%user}}';
        }

        /**
         * {@inheritdoc}
         */
        public function rules()
        {
            return [
                [['integral', 'status', 'gender', 'is_del'], 'integer'],
                [['created_at', 'updated_at'], 'safe'],
                [['nickName', 'name', 'phone'], 'string', 'max' => 20],
                [['_hash', 'openId', 'password', 'avatar', 'auth_key'], 'string', 'max' => 255],
            ];
        }

        /**
         * {@inheritdoc}
         */
        public function attributeLabels()
        {
            return [
                'id'         => 'ID',
                'nickName'   => '用户昵称',
                'name'       => '用户姓名',
                '_hash'      => 'HASH地址',
                'openId'     => '微信openId',
                'phone'      => '手机号码',
                'integral'   => '积分数据',
                'password'   => '密码',
                'avatar'     => '头像',
                'status'     => '账号状态',
                'auth_key'   => '权限token，登录TOKEN',
                'gender'     => '性别:1男2女',
                'is_del'     => '是否删除',
                'created_at' => '创建时间',
                'updated_at' => '更新时间',
            ];
        }
    }

php 文件 控制器

<?php
    namespace app\modules\backend\api\controllers;

    use app\modules\backend\api\Controller;
    use app\modules\backend\api\models\other\User;

    class UserController extends Controller
    {
        // 数据列表
        public function actionIndex()
        {
            $get      = $this->get;
            $andWhere = [
                ['like', 'nickName', $get['nickName'] ?? ''],
                ['like', 'name', $get['name'] ?? ''],
                ['like', 'phone', $get['phone'] ?? ''],
            ];
            return User::page()->andWhere($andWhere)->toTableDataArray();
        }

        // 创建、修改、删除
        // ...
    }

以上访问 admin/user 页面即可得到如下效果：

admin/user 数据页面