数据库课程作业笔记 - 编写公共 Blade 模板

MARTINPOTTER 的个人博客 / 526 / 0 / 创建于 4年前 / 更新于 4年前

Blade 模板

参考资料 Blade 模板文档

现成的组件模板 MagicBox

链接地址蓝鲸MagicBox

这里提供了众多的后台管理界面组件的封装并且可以直接使用，而我们只需要将他们拿过来结合我们的数据做一些绑定就可以正常使用了

这里主要介绍一些细节

由于时间关系就不一一介绍了

在 resources\views 文件夹下新建 homework2 文件夹用来保存作业相关视图，新建 layouts 文件夹用来保存布局相关视图, 新建 shared 文件夹用于保存公共视图

错误提示

数据库课程作业笔记 - 编写公共Blade模板
当验证错误需要添加错误提示，这里使用蓝鲸提供的错误提示视图参考链接

在layouts 文件夹下新建 _message.balde.php

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">

@if (Session::has('message'))
    <div class="king-notice2 king-notice-info notice-borders">
        <i class="fa fa-info-circle"></i>
        <div class="notice-text">
            <p>{{ Session::get('message') }}</p>
        </div>
    </div>
@endif

@if (Session::has('success'))
    <div class="king-notice2 king-notice-success notice-borders">
        <i class="fa fa-check-circle"></i>
        <div class="notice-text">
            <p>{{ Session::get('success') }}</p>
        </div>
    </div>
@endif

@if (Session::has('danger'))
    <div class="king-notice2 king-notice-danger notice-borders">
        <i class="fa fa-exclamation-triangle"></i>
        <div class="notice-text">
            <p>{{ Session::get('danger') }}</p>
        </div>
    </div>
@endif

新增与修改表的复用

判断是否有ID属性来指定路由

@if(isset($id))
    <form method="POST" action="{{route('product.update',$id)}}" accept-charset="UTF-8">
    <input type="hidden" name="_method" value="PUT">
@else
    <form method="POST" action="{{route('product.store')}}" accept-charset="UTF-8">
@endif

数据保持

通过 !empty(old('name')) 来确保是否存在旧数据，这里 old() 函数是框架内用来返回旧数据的函数，原理是闪存的 Session，由于新增时还要判断 isset() 不然会由于新增没有传参而报错，这里可以通过新增时后台传参解决，这里选择加一个判断解决这个问题，如果觉得麻烦也可以采用其他办法。

<div class="form-group">
  <label for="inputCount3">产品名称：</label>
  <input type="text" class="form-control" name="pname"
         value="{{ !empty(old('pname')) ? old('pname') : (isset($pname) ? $pname : '') }}"
        placeholder="输入产品姓名">
  </div>

嵌入选择框

由于有些涉及关联选择的选项如果没有去查询其他的表而直接提供输入框会造成误输入而且很麻烦，所以提供一个选择框去选择可以进行更加友好的交互，但是这对于前端知识薄弱的学生来说并不简单，所以这里使用一种考虑不周全的方法将选项动态渲染为静态界面来实现。真时情况下应该提供带搜索的接口，前端动态访问这些接口从后台获取搜索结果数据再进行选择，但是由于作业涉及数据不多就取巧了。

    <div class="form-group">
        <label for="inputPassword3">供应商：</label>
        <p></p>
        <div>
            <div class="king-block-content clearfix">
                <div class="plugin3_demo" id="supplier_selector" style="display:inline-block;">
                  <select class="select2_box" style="width:300px;" name="sid">
                     <option value=""></option>
                     @foreach($list as $item)
                        <option value="{{$item['id']}}"
                            {{(empty(old('sid')) ?
                                (isset($sid) ?
                                   ($sid == $item['id'] ? ' selected="selected' : '')
                                       : '')
                                       : (old('sid') == $item['id'] ? ' selected="selected' : ''))
                                                }}>
                                                {{$item['text']}}
                                            </option>
                                        @endforeach
                   </select>
                </div>
            </div>
        </div>
    </div>  
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.css" rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
    <script type="text/javascript">
      $("#supplier_selector .select2_box").select2({
            placeholder: '请选择供应商'
      });
    </script>

使用模板复用

由于展示表基本一样，所以通过数据控制就能很好地重用，这里应该做分页，但因为数据不多所以偷偷懒啦

@extends('layouts.base',['array' => ['menu_3' => '1']])

@section('content')
    {{--<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">--}}
    {{--<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">--}}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <div class="king-layout2-main mt15" style="width:960px;">
        <div class="king-instruction  king-instruction-info ">
            <h5>提示说明</h5>
            这里是数据表下的列表
            <ol>
                <li>点击新增可以新增记录</li>
                <li>点击编辑可以编辑相应选项</li>
                <li>点击删除可以删除相应记录</li>
            </ol>
            <b>注意：删除仅在没有级联删除条件下完成，删除不成功请检查相关表内容</b>
        </div>
        <p></p>
        @include('layouts._message')
        <p></p>
        <div class="panel panel-default pannel-overflow panel-tables table7_demo">
            <div class="panel-heading"> {{$title}}</div>
            <div class="panel-body panel-search-body">
                <a  href="{{route('hw2')}}" class="king-btn king-radius king-default" title="添加变量">返回</a>
                <a  href="{{route($create)}}" class="king-btn king-radius king-primary" title="添加变量">新增数据</a>
            </div>
            <div class="panel-body">
                <table class="table" id="table_demo2">
                    <thead>
                    <tr>
                        <th style="width: 7%">序号</th>
                        @foreach($columns as $column)
                            <th>{{$column}}</th>
                        @endforeach
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $item)
                        <tr>
                        @foreach($item as $key => $value)
                                <td>{{$value}}</td>
                        @endforeach
                        <td>
                            <a  href="{{route($edit, $item['id'])}}">
                                <button class="btn btn-xs btn-primary" title="编辑">
                                    <i class="glyphicon glyphicon-edit"></i>
                                </button>
                            </a>
                            <a>
                                <button class="btn btn-xs btn-danger" title="删除" onclick="delete_item('{{route($delete, $item['id'])}}')">
                                    <i class="glyphicon glyphicon-remove" id="{{'button_'.$item['id']}}"></i>
                                </button>
                            </a>
                        </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                <!-- 设置面板End -->
            </div>
        </div>
        <script type="text/javascript">
            function delete_item(url) {
                if (confirm('确定要删除？')) {
                    $.post(url,{_method:'DELETE'}, function (result) {
                        $(document).find("html").html(result)
                    })
                }
            }
        </script>
    </div>

@stop

渲染时需要传入对应的属性，这里使用一个删除确认复用的方法，因为前端不太会出此下册，希望更强的朋友能帮我做一些改进吧。
其他面页参考github，接下来我们完成控制器

作业数据库 laravel 课程