Laraform
made with Vuejs

Laraform

这是一个Laravel和Vue.js的表单生成器

相关问答
暂无相关问题
查看全部
简介及使用教程

Laraform是一个Laravel和Vue.js的表单生成器:永远不要再次编写表单代码! Laraform是Web开发人员的完整堆栈库,可增强并标准化整个表单构建过程。Laraform解决了以方便开发人员友好的方式创建表单的所有步骤。

您可以创建一个单独的类,其中包含表单的所有详细信息,包括表单的元素,验证规则,自定义处理逻辑,数据库模型等。

安装

前端

安装laraform

npm i laraform 

安装其他依赖

npm i axios lodash moment vue --save

后端

安装依赖

composer require laraform/laraform-laravel

发布

php artisan vendor:publish

使用

app\Forms\FirstForm.php创建表单

<?php

namespace App\Forms;

class FirstForm extends \Laraform
{
  public function schema() {
    return [
      'hello_world' => [
        'type' => 'text',
        'label' => 'Hello',
        'default' => 'World'
      ]
    ];
  }
}

路由routes/web.php

Route::get('/', function () {
  return view('welcome', [
    'form' => app('App\Forms\FirstForm')
  ]);
});

前端模板 resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel</title>

    <link rel="stylesheet" type="text/css" href="/css/app.css">
  </head>
  <body>
    <div id="app">
      {!! $form->render() !!}
    </div>

    <script src="/js/app.js"></script>
  </body>
</html>

前端注册resources/js/app.js

require('./bootstrap');

import Vue from 'vue'
import Laraform from 'laraform'

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
})

引入bootstrap

// Bootstrap 4's main theme file
@import 'bootstrap/scss/bootstrap';

// Laraform's theme file created for Bootstrap 4
@import 'laraform/src/themes/bs4/scss/theme.scss';

运行

前端

npm run dev

后端

php artisan serve

示例

image.png

image.png

作者

相关项目

这是一个面向开发人员的简单进程管理器。
这是一个使用Vue组件编写歌曲的工具。
这是一个经过Podcast优化的、基于HTML5的音频播放器。
这是一个Vue错误跟踪插件。
这是一个自动报告未捕获的JS异常的Vue插件。
这是一个使用Vue和NativeScript的生成原生移动APP的插件。