Blog

Blog

PHODAL

最小物联网系统(五)——Laravel RESTful模板化

下面这部分来自于之前的博客,这里就不多加论述了。

这个也就是我们要的模板,

修改Create()

public function create()
    {
        $maxid=Athomes::max('id');
        return View::make('athome.create')->with('maxid',$maxid);
    }

这里需要在app/views/创建一个athome里面创建一个create.blade.php,至于maxid,暂时还不需要,后面会用到show。如果只需要模板,可以简化为

 public function create()
    {
        return View::make('athome.create');
    }


这里只是对其中代码的进行一下说明。

创建表单

创建表单之前

由于使用到了bootstrap以及bootstrap-select,记得添加css。

 <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
 <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />


以及javascript

<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
<script>
  $('.selectpicker').selectpicker();
</script>


创建表单

这里用到的是之前提到的那个作者写下的,稍微修改了一下。

  <div class="row-fluid">
    {{ HTML::ul($errors->all()) }}
    {{ Form::open(array('url' => 'athome')) }}
       <div class="form-group">
            {{ Form::label('led1', '开关1') }}
            {{ Form::select('led1',array('关','开'),$selected=NULL,array('class'=>'selectpicker')) }}
        </div>
        <div class="form-group">
            {{ Form::label('sensors1', 'sensors1') }}
            {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
        </div>
        <div class="form-group">
            {{ Form::label('sensors2', 'sensors2') }}
            {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
        </div>
        <div class="form-group">
            {{ Form::label('temperature', 'temperature') }}
            {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
        </div>
        {{ Form::submit('Create!', array('class' => 'btn btn-primary')) }}
    {{ Form::close() }}
    </div>


开关一开始打算用checkbox,加上bootstrap-switch实现

<div id="dimension-switch" class="make-switch has-switch">
    <div class="switch-animate switch-on">
        <span class="switch-left">ON</span><label> </label><span class="switch-right">OFF</span>
    </div>
</div>

弱弱地觉得还是没掌握好的节奏,所以最后用select来实现。
还需要修改一下之前的create(),添加一行
return Redirect::to('athome');

也就是添加完后,重定向到首页查看,最后例子给出的create如下

  public function store()
    {
        $rules = array(
            'led1'=>'required',
            'sensors1' => 'required|numeric|Min:-50|Max:80',
            'sensors2' => 'required|numeric|Min:-50|Max:80',
            'temperature' => 'required|numeric|Min:-50|Max:80'
        );
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails()) {
            return Redirect::to('athome/create')
                ->withErrors($validator);
        } else {
            // store
            $nerd = new Athomes;
            $nerd->sensors1       = Input::get('sensors1');
            $nerd->sensors2       = Input::get('sensors2');
            $nerd->temperature    = Input::get('temperature');
            $nerd->led1            = Input::get('led1');
            $nerd->save();
        Session::flash('message', 'Successfully created athome!');
        return Redirect::to('athome');
    }
}

编辑edit

完整的blade模板文件

<!DOCTYPE html lang="zh-cn">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="">
        <title>@yield('title')</title>
        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap.min.css') ?>" />
        <link rel="stylesheet" type="text/css" href="<?= url('css/bootstrap-select.min.css') ?>" />
        <link rel="stylesheet" href="<?= url('css/justified-nav.css') ?>" type="text/css" media="screen" />
    </head>
<body>
<div class="container">
<div class="container">
  <div class="row-fluid">
<h1>Edit {{ $athome->id }}</h1>
<!-- if there are creation errors, they will show here -->
{{ HTML::ul($errors->all()) }}
{{ Form::model($athome, array('route' => array('athome.update', $athome->id), 'method' => 'PUT')) }}
        <div class="form-group">
            {{ Form::label('led1', '开关1') }}
            {{ Form::select('led1',array('关','开'),$selected=NULL,array('class'=>'selectpicker')) }}
        </div>
        <div class="form-group">
            {{ Form::label('sensors1', '传感器1') }}
            {{ Form::text('sensors1', Input::old('sensors1'), array('class' => 'form-control')) }}
        </div>
        <div class="form-group">
            {{ Form::label('sensors2', '传感器2') }}
            {{ Form::text('sensors2', Input::old('sensors2'), array('class' => 'form-control')) }}
        </div>
        <div class="form-group">
            {{ Form::label('temperature', '温度传感器') }}
            {{ Form::text('temperature', Input::old('temperature'), array('class' => 'form-control')) }}
        </div>
    {{ Form::submit('Edit the Nerd!', array('class' => 'btn btn-primary')) }}
{{ Form::close() }}
    </div>
</div>
<div class="footer">
        <p>© Company 2013</p>
      </div>
</div>
</div>
<script type="text/javascript" src="<?= url('js/jquery.min.js')?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?= url('js/bootstrap-select.min.js') ?>"></script>
<script>
 $('.selectpicker').selectpicker();
 </script>
<script type="text/javascript" src="<?= url('js/log.js') ?>"></script>
</body>
</html>


关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签