# 快速上手

## 前期准备

* 首先你需要一个数据库，并在该项目.env 文件中配置相关信息
* 确保你的运行环境条件满足
* 确保项目在本地环境或线上环境中的nginx里配置解析

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

### 建立路由信息

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

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

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

{% hint style="info" %}
此处路由信息具体参考 [路由](https://yaa.docs.speaks.life/he-xin-gong-neng/shu-ju-biao-ge/lu-you)

假设 

* 前端设置路由：admin/user，
* 后台yii2代码中：admin/user 控制器中的方法

其两者并不冲突

* 前者为url访问资源路径
* 后台为api数据调用

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

### 完善路由 vue 文件

```html
<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
<?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
<?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` 页面即可得到如下效果：

<figure><img src="https://2758645993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYuF2vg_Wo3dzz4TGqf%2Fuploads%2FLlk8tBoCVk6WSbLkXEgA%2Fimage.png?alt=media&#x26;token=f4410261-69af-4cea-a8eb-29f1b176323d" alt=""><figcaption><p>admin/user 数据页面</p></figcaption></figure>