Vuejs laravel Pagination - Не удалось загрузить ресурс: сервер ответил со статусом 403 (запрещено) - PullRequest
0 голосов
/ 03 ноября 2019

Я пытаюсь выполнить запрос на получение с разбивкой по страницам, используя axios на vuejs + laravel, когда я нажимаю более чем в 5 раз кнопку разбивки на страницы следующей и предыдущей, на ней не отображаются никакие данные, пока я не перезагружаю страницу, я думаю, что этослишком много запросов к серверу, проблема в том, что кто-нибудь может мне помочь **

и

Это мой метод getResults для запроса get:

getResults(page = 1) {
      axios.get("api/employee?page=" + page).then(response => {
        this.employees = response.data;

      });
      axios
        .get("api/getEmployees?page=" + page, {
          params: { company_id: this.form.company_id }
        })
        .then(
          function(response) {
            this.employees = response.data.data;
          }.bind(this)
        );
    },

Это моя страница HTML-код:

<div class="card-footer">
            <pagination :data="employees" @pagination-change-page="getResults"></pagination>
          </div>

Это моя таблица HTML-код:

<div class="card-body table-responsive p-0">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Picture</th>
                  <th>Badge#</th>
                  <th>Company</th>
                  <th>BadgeType</th>
                  <th>Nationality</th>
                  <th>Last Name</th>
                  <th>First Name</th>
                  <th>Telphonenumber</th>
                  <th>Position</th>
                  <th>SupervisorName</th>
                  <th>SupervisorNumber</th>
                  <th>Tazker</th>
                  <th>Issuedate</th>
                  <th>Expiredate</th>
                  <th>Afghanidate</th>
                  <th>Serialnumber</th>
                  <th>Modify</th>
                  <th>PringBadge</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="16" align="center">
                    <p
                      v-if="employees.data.length == 0 || employees.data.length=='' "
                      class="text-center alert alert-danger"
                    >There is no data in the Table</p>
                  </td>
                </tr>
                <tr v-for="employee in employees.data" v-bind:key="employee.id">
                  <td>{{employee.id}}</td>
                  <td>
                    <!-- <div class="widget-user-image"> -->
                    <img
                      class="img-square"
                      style="height:30px; width:30px;"
                      :src="getProfilePhoto(employee.photo)"
                      alt="User Avatar"
                    />
                    <!-- </div> -->
                  </td>

                  <td>{{employee.BadgeCode|UppCaseFirstLetter}}</td>
                  <!-- <td>{{employee.company_id}}</td> -->
                  <td
                    v-for="Company in Companies"
                    :value="Company.id"
                    v-if="employee.company_id === Company.id"
                  >{{Company.Company}}</td>
                  <td>
                    <span class="tag tag-success">{{employee.BadgeType}}</span>
                  </td>
                  <td
                    v-for="Nationality in Nationalities"
                    v-bind:key="Nationality.id"
                    :value="Nationality.id"
                    v-if="employee.nationality_id === Nationality.id"
                  >{{Nationality.nationality}}</td>

                  <td>{{employee.lastname |UppCaseFirstLetter}}</td>
                  <td>{{employee.firstname |UppCaseFirstLetter}}</td>
                  <td>{{employee.telphonenumber |UppCaseFirstLetter}}</td>
                  <td>{{employee.position |UppCaseFirstLetter}}</td>
                  <td>{{employee.supervisorname |UppCaseFirstLetter}}</td>
                  <td>{{employee.supervisornumber|UppCaseFirstLetter}}</td>
                  <td>{{employee.tazker|UppCaseFirstLetter}}</td>
                  <td>{{employee.Issuedate|mydate}}</td>
                  <td>{{employee.expiredate|mydate}}</td>
                  <td>
                    <!-- <div class="widget-user-image"> -->
                    <img
                      class="img-square"
                      style="height:30px; width:30px;"
                      :src="getdatePhoto(employee.afghanidatephoto)"
                      alt="User Avatar"
                    />
                    <!-- </div> -->
                  </td>

                  <td>{{employee.serialnumber |UppCaseFirstLetter}}</td>

                  <td>
                    <a href="#" @click="editModal(employee)">
                      <i class="fa fa-edit"></i>
                    </a>|||
                    <a href="#" @click="deleteemployee(employee.id)">
                      <i class="fa fa-trash red"></i>
                    </a>
                  </td>
                  <td>
                    <a href="#" @click="printModal(employee)">
                      <i class="fa fa-print"></i>
                    </a>
                  </td>
                </tr>

                <!-- <tr v-if="employees.count()==0" id="noRecordTR" style="display:none">
                  <td>No Record Found</td>
                </tr>-->
              </tbody>
            </table>
          </div>

Это мой код контроллера

public function index()
    {
        $date=\Carbon\Carbon::today();
        //  $this->authorize('isAdmin');
        $employee=Employee::where('expiredate','>',$date)->paginate(5);
    // return Employee::all();
    return response()->json($employee);
   }


public function getEmployees(Request $request)
{
    $date=\Carbon\Carbon::today();

$employees = Employee::where('company_id', $request->company_id)
->where('expiredate','>',$date)
                     ->orderBy('BadgeCode', 'desc')->paginate(5);
//   return ['data' => $employees]; // or 
  return response()->json(['data' => $employees]);
}

На маршруте API:

Route::apiResources(['employee'=>'API\EmployeeController']);
Route::get('getEmployees','API\EmployeeController@getEmployees');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...