使用WAU(Wii Admin UI)

  1. 创建模型
  2. 创建动作
  3. 创建视图
  4. 运行
  5. 总结

本章节介绍如何创建一个让用户提交数据的表单页。该页将显示一个包含 name 输入框和 email 输入框的表单。当提交这两部分信息后,页面将会显示用户所输入的信息。

为了实现这个目标,除了创建一个操作和两个视图外,还需要创建一个模型

通过本教程,你将会学到:

  • 创建一个模型代表用户通过表单输入的数据
  • 声明规则去验证输入的数据
  • 视图中生成一个 HTML 表单

创建模型

模型类 UserDemo 代表从用户那请求的数据,该类如下所示并存储在 models/user/UserDemo.php 文件中。请参考类自动加载章节获取更多关于类命名约定的介绍。

<?php

namespace app\models\user;

class UserDemo extends \wii\mongodb\Model
{
    public static function collectionName()
    {
        return 'tbl_user_demo';
    }

    public function rules()
    {
        return [
            [['name', 'email'], 'required'],
            ['email', 'email']
        ];
    }

}

该类继承自Wii 提供的一个基类 [[wii\mongodb\Model]],该基类用来表示mongodb父类。

UserDemo 类包含 nameemail 两个公共成员,用来储存用户输入的数据。它还包含一个名为 rules() 的方法,用来返回数据验证规则的集合。上面声明的验证规则表示:

  • nameemail 值都是必须的
  • email 的值必须满足email规则验证

创建动作

下面你得在 site 控制器中创建一个 save 操作用于新建的模型。

<?php

namespace app\modules\user\controllers;

use app\models\user\UserDemo;
use wii\web\Response;

class DemoController extends \wii\web\Controller
{

    public function actionSave()
    {
        return $this->renderWau('save');
    }

    public function actionSaveapi()
    {
        try {
            \Wii::$app->response->format = Response::FORMAT_JSON;
            $user = new UserDemo();
            $user->setAttributes(\Wii::$app->request->post());
            $user->save();
            $this->renderData = $user->getAttributes();
            return $this->renderSuccessData();
        } catch (\Exception $e) {
            return $this->renderExceptionData($e);
        }
    }

}

该操作首先创建了一个 UserDemo 对象。然后尝试从 $_POST 搜集用户提交的数据,由 Wii 的 [[wii\web\Request::post()]] 方法负责搜集。如果模型保存成功则会返回用户数组信息,返回的数组保存在$this->renderData变量,保存失败则会抛出异常信息。

信息:表达式 Wii::$app 代表应用实例,它是一个全局可访问的单例。同时它也是一个服务定位器,能提供requestresponsedb 等等特定功能的组件。在上面的代码里就是使用 request 组件来访问应用实例收到的 $_POST 数据。

用户提交表单后,操作将会渲染一个名为 save-confirm 的视图去确认用户输入的数据。如果没填表单就提交,或数据包含错误(译者:如 email 格式不对),save 视图将会渲染输出,连同表单一起输出的还有验证错误的详细信息。

创建视图

最后创建save视图文件。视图文件应该保存在 modules/user/views/demo/save.yml

## wau_header ##
wau_header: !include "@app/views/common/header.yml"

wau_body
  body:
    form:
      action: "/user/demo/saveapi"
      method: "POST"
      content:
        - {model: input, label: "名字", type: text, name: name, placeholder: "请输入名字", value: "{%name%}", validate: {required: required, msg: "请输入正确的名字"} }
        - {model: input, label: "邮箱", type: text, name: email, placeholder: "请输入邮箱", value: "{%email%}", validate: {required: required, maxlength: 30, msg: "请输入正确的邮箱"} }

更多wau内容可参考

wau demo链接

wau文档链接

运行

用浏览器访问下面的 URL 看它能否工作:

http://hostname/user/demo/save

你会看到一个包含两个输入框的表单的页面。每个输入框的前面都有一个标签指明应该输入的数据类型。如果什么都不填就点击提交按钮,或填入格式不正确的 email 地址,将会看到在对应的输入框下显示错误信息。

输入有效的 name 和 email 信息并提交后,将会看到一个显示你所提交数据的确认页面。

效果说明

你可能会好奇 WAU 表单是如何工作的呢,wau_header是头部导航栏,可配置配置logo部分和导航部分。include可以包含外部的yml配置文件。

wau_body页面内容架构, 新增多种组件配合支持, 并且支持按照配置顺序展示功能。

按顺序配置展示是指在 wau_body 以及 wau_body.body 中,组件将根据你的yml配置顺序从上往下展示。

表单页能在wau_body.body.form里面配置提交路径,提交方式,返回路径,按钮以及summary等,提交完后会在页面上显示提交后的效果(会自动识别成功或失败的信息)

信息:Wau提供了相当多容器和组件,能重复灵活使用,大幅加快开发效率。

总结

本章节指南中你接触了 MVC 设计模式的每个部分。学到了如何创建一个模型代表用户数据并验证它的有效性。

你还学到了如何从用户那获取数据并在浏览器上回显给用户。这本来是开发应用的过程中比较耗时的任务,好在 Wii 提供了强大的小部件让它变得如此简单。

在下一章节中,你将学习如何使用数据库,几乎每个应用都需要数据库。

results matching ""

    No results matching ""