adonis视图——nodejs应用第一季04

版权声明:原创文章,未经博主同意,不得擅自转载! https://blog.csdn.net/qq_36718999/article/details/82391587

1.@each  与  $loop   

{{--$loop 中包含一些属性  --}}

{{-- @each(entity in entities)
<small>
    {{$loop.index + 1}}.
    first: <i>{{$loop.first}}</i>
    last: <i>{{$loop.last}}</i>
    total: <i>{{$loop.total}}</i>
    odd: <i>{{$loop.isOdd}}</i>
    even: <i>{{$loop.isEven}}</i>
</small>
  {{entity.title}}:{{entity.content}}
@endeach --}}

2.@layout  引用模板布局 

{{--@layout 引用模板布局  --}}
@layout('layouts.main')
@section('header')
@super
<h1>{{pageTitle || 'untitle'}}</h1>

@endsection

@section('content')
{{--会  覆盖 默认section中的内容  可以用@super保留默认内容  --}}
@each(entity in entities)
<small>
    {{$loop.index + 1}}.
    first: <i>{{$loop.first}}</i>
    last: <i>{{$loop.last}}</i>
    total: <i>{{$loop.total}}</i>
    odd: <i>{{$loop.isOdd}}</i>
    even: <i>{{$loop.isEven}}</i>
</small>
  {{entity.title}}:{{entity.content}}
@endeach
@endsection

3.@include 引入局部布局 

  //footer.edge
<div class="footer">
  <hr style="border:none;border-bottom:1px solid #eee">
  <small>&copy;xiaoyang</small>
</div>


//main.edge

@include('partials.footer')

4.@component 引用组件并传值 

//index.edge
{{--会  覆盖 默认section中的内容  可以用@super保留默认内容  --}}
{{--@component @endcomponent 与 @!component 自封闭  引入组件  并传递数据--}}
@!component('components.list',{entities:entities,border:true,borderColor:'#ccc'})


//list.edge
@each(entity in entities)
<div class="" style="padding:4px;
@if(!$loop.last && border)
  border-bottom: 1px solid {{borderColor || '#eee'}}
@endif
">
  {{--如果不是最后一个 并且 border为true 添加底边线  --}}

<small>
    {{$loop.index + 1}}.
    first: <i>{{$loop.first}}</i>
    last: <i>{{$loop.last}}</i>
    total: <i>{{$loop.total}}</i>
    odd: <i>{{$loop.isOdd}}</i>
    even: <i>{{$loop.isEven}}</i>
</small>
  {{entity.title}}:{{entity.content}}

  </div>
@endeach

5. @slot ,  @yield

//compontent/list.edge

@yield($slot.notes)
{{-- 设置slot 的默认内容 --}}
<small>Put some notes here.</small>
@endyield


//index.edge
@section('content')
{{--会  覆盖 默认section中的内容  可以用@super保留默认内容  --}}
{{--@component @endcomponent 与 @!component 自封闭  引入组件  并传递数据--}}
@component('components.list',{entities:entities,border:true,borderColor:'#ccc'})
  @slot('notes')
  <small>Eat some fruites</small>
  @endslot
@endcomponent
@endsection

6. 请求相关信息

  <div class="">
    {{--request.originalUrl 包含 查询参数  --}}
    <small>URL:</small>{{request.url()}} <br>
    <small>OriginalURL:</small>{{request.originalUrl()}} <br>
    <small>Method:</small>{{request.method()}} <br>
    <small>Protocol:</small>{{request.protocol()}} <br>
  </div>

7. css 、js、img 资源链接

//public/css/mian.css
//public/js/mian.js
//public/splash.png


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{{pageTitle || 'xiaoyang'}}</title>
{{--css js img 公共资源 都放在 public 下  --}}
{{css('css/mian')}}
  {{script('js/mian')}}
</head>
<body style="background:url({{assetsUrl('splash.png')}})">

猜你喜欢

转载自blog.csdn.net/qq_36718999/article/details/82391587