Laavel 및 Vuetable - 2에서 페이지 태그가 있는 테이블 사용

18360 단어 LaravelVuetable-2Vue.js

Laavel 및 Vuetable - 2에서 페이지 태그가 있는 테이블 사용



Vue용 고기능 테이블 구성 요소vuetable-2를 찾았기 때문에 Laavel을 백엔드로 사용한 샘플입니다.

프로젝트 작성


우선 적당한 이름으로 프로젝트를 만든다.
laavel 명령을 사용하면 아래의 느낌을 눌러주세요.
laravel new laravel-vuetable-2

테이블 작성


원래 존재하는 xxxx_create_users_table를 수정하고 이름, 메일, 주소 필드를 포함하는 users 표를 만듭니다.
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->string('address');
            $table->timestamps();
        });
    }

php artisan migrate
User모형은 최초의 물건을 직접 사용한다.

가상 데이터 생성


Laavel 번들Faker로 가짜 데이터 1000개 만들기database/seeds/DatabaseSeeder.php의 run 방법에 추가합니다.
    public function run()
    {
        DB::table('users')->delete();
        $faker = Faker\Factory::create('ja_JP');
        for ($i = 0; $i < 1000; $i++) {
            User::create([
                'name' => $faker->name,
                'email' => $faker->email,
                'address' => $faker->address,
            ]);
        }
    }

php artisan db:seed

vuetable-2 가져오기


vuetable-2npm로 가져옵니다.
npm i vuetable-2 -D

목록 테이블 표시


우선, 어쨌든 일람표를 보여 주세요.

API


목록에 표시된 API 섹션을 생성합니다.routes/api.php 기존 노선을 덮어씁니다.
<?php
use Illuminate\Http\Request;

Route::middleware('api')->get('/user', function(Request $request) {
    return App\User::paginate((int)$request->per_page);
});
차트를 가져오는지 확인하려면 api/user를 방문하십시오.
  • per_page는 Vuetable에서 얻은 페이지당 줄 수입니다.

    • Vue 구성 요소


    이번에는 원래resources/assets/js/components/Example.vue에 덮었다.
    새로 제작된 부품도 물론 가능합니다.
    <template>
  <vuetable
    api-url="api/user"
    :fields="['name', 'email', 'address']"
  ></vuetable>
</template>

<script>
import Vuetable from 'vuetable-2'

export default {
  components: {
    Vuetable
  }
}
</script>
  • api-url 속성은 데이터를 가져오는 API의 URL입니다.
  • fields 속성은 표시할 필드입니다.

    • blade 템플릿


    표시할 프레임을 만듭니다.덮어쓰기resources/views/welcome.blade.php에 사용합니다.
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Vuetable-2サンプル</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <example></example>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
    이렇게 브라우저로 접근하면 10건이 일람됩니다.

    페이지 스타일


    다음은 페이지 연결 문자에 대한 내비게이션을 설치해 봅시다.다행히도, Vuetable의 페이지 문자는 Laavel의 페이지 문자 메커니즘을 거의 직접 사용할 수 있다.

    Vue 구성 요소


    페이지 하이픈 넣기에 사용할 구성 요소를 추가합니다.resources/assets/js/components/Example.vue 
    <template>
  <div>
    <vuetable
      ref="vuetable"
      api-url="api/user"
      :fields="['name', 'email', 'address']"
      pagination-path=""
      @vuetable:pagination-data="onPaginationData"
    ></vuetable>
    <vuetable-pagination
      ref="pagination"
      @vuetable-pagination:change-page="onChangePage"
    ></vuetable-pagination>
  </div>
</template>

<script>
import {Vuetable, VuetablePagination} from 'vuetable-2'

export default {
  components: {
    Vuetable, VuetablePagination
  },
  methods: {
    onPaginationData(data) {
      this.$refs.pagination.setPaginationData(data)
    },
    onChangePage(page) {
      this.$refs.vuetable.changePage(page)
    }
  }
}
</script>
    브라우저에서 확인한 후, 비록 스타일이 정확하지 않지만, 페이지의 단자가 이동할 것입니다.
  • VuetablePagination 어셈블리에 페이지 하이픈을 표시합니다.
  • 는 Laavelpaginate 방법과 일치하는 Vuetable 구성 요소pagination-path 속성을 설정합니다.
  • API가 데이터를 성공적으로 얻었을 때 Vuetable 구성 요소pagination-data 이벤트에 불이 납니다. 이때 페이지 데이터를 VuetablePagination 구성 요소setPaginationData에 전달하여 페이지 스타일을 구축합니다.
  • 페이지 연결 문자를 조작할 때 Vuetable Pagination 구성 요소change-page 이벤트에 불이 납니다. 이 때 페이지 정보를 Vuetable 구성 요소changePage에 전달하여 이 페이지를 가져옵니다.

    • 스타일링


    Vuetable은 사용Semantic UI을 전제로 합니다.Laavel의 기본값은 Bootstrap이므로 스타일링을 변경해 드립니다.resources/assets/js/components/Example.vue 
    <template>
  <div>
    <vuetable
      ref="vuetable"
      api-url="api/user"
      :fields="['name', 'email', 'address']"
      pagination-path=""
      @vuetable:pagination-data="onPaginationData"
    ></vuetable>
    <vuetable-pagination
      ref="pagination"
      @vuetable-pagination:change-page="onChangePage"
      :css="css"
    ></vuetable-pagination>
  </div>
</template>

<script>
import {Vuetable, VuetablePagination} from 'vuetable-2'

export default {
  components: {
    Vuetable, VuetablePagination
  },
  data() {
    return {
      css: {
        wrapperClass: 'pagination',
        activeClass: 'active',
        disabledClass: 'disabled',
        icons: {
          first: 'glyphicon glyphicon-backward',
          prev: 'glyphicon glyphicon-triangle-left',
          next: 'glyphicon glyphicon-triangle-right',
          last: 'glyphicon glyphicon-forward'
        }
      }
    }
  },
  methods: {
    onPaginationData(data) {
      this.$refs.pagination.setPaginationData(data)
    },
    onChangePage(page) {
      this.$refs.vuetable.changePage(page)
    }
  }
}
</script>

<style>
.pagination a {
  cursor: pointer;
  border: 1px solid lightgray;
  padding: 5px 10px;
}
.pagination a.active {
  color: white;
  background-color: #337ab7;
}
.pagination a.btn-nav.disabled {
  color: lightgray;
  cursor: not-allowed;
}
</style>
  • VuetablePagination 구성 요소css의 속성에 클래스와 아이콘을 지정합니다.

    • 총결산


    나는 라벨과 Vuetable-2의 상성이 매우 좋다는 것을 발견했다.
    캐시 색상 추가
    그리스 자모가??로 바뀌다PHPWord로 docx를 pdf로 변환하면?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage