嗨，我遵循了这个Crud应用程序教程，但是我想使用热切的加载和vuejs能够查看，添加，删除和更新另一个表（我有2个表）。我只想至少在分页中查看它们，依此类推。我对vuejs很陌生，谢谢您的帮助！
这是员工控制者：
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Employee;
use App\Http\Resources\Employee as EmployeeResource;
class EmployeeController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//Get employees info
$employees = Employee::orderBy('created_at', 'desc')->with('Invsystem')->paginate(5);
//Return the collection of employees as resource
return EmployeeResource::collection($employees);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$employee = $request->isMethod('put') ? Employee::findOrFail($request->employee_id) : new Employee;
$employee->id = $request->input('employee_id');
$employee->last_name = $request->input('last_name');
$employee->first_name = $request->input('first_name');
$employee->middle_name = $request->input('middle_name');
$employee->email = $request->input('email');
if($employee->save()) {
return new EmployeeResource($employee);
}
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
// Get employee info
$employee = Employee::findOrFail($id);
//return the single employee as a resource
return new EmployeeResource($employee);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
// delete employee info
$employee = Employee::findOrFail($id);
if($employee->delete()) {
return new EmployeeResource($employee);
}
}
}
这是员工模型：
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
//get inventory info
public function Invsystem()
{
return $this->hasMany(Invsystem::class);
}
}
以下是库存（Invsystem）的模型：
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Invsystem extends Model
{
public function Employee()
{
return $this->belongsTo(Employee::class);
}
}
这是.vue文件：
<template>
<div>
<h2>Employees Info</h2>
<form @submit.prevent="addEmployee" class="mb-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="last name" v-model="employee.last_name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="first name" v-model="employee.first_name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="middle name" v-model="employee.middle_name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="email" v-model="employee.email">
</div>
<button type="submit" class="btn btn btn-success btn-block">Save</button>
</form>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a class="page-link" href="#" @click="fetchEmployees(pagination.prev_page_url)">Previous</a></li>
<li class="page-item disabled"><a class="page-link text-dark" href="#">Page {{ pagination.current_page }} of {{ pagination.last_page }}</a></li>
<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"><a class="page-link" href="#" @click="fetchEmployees(pagination.next_page_url)">Next</a></li>
</ul>
</nav>
<div class="card card-body mb-2" v-for="employee in employees" v-bind:key="employee.id"> <!-- start -->
<!-- <p>#{{ employee.id }}</p> -->
<h4> {{ employee.last_name }}, {{ employee.first_name }} {{ employee.middle_name }} </h4>
<p> {{ employee.email }}</p>
<hr>
<button @click="editEmployee(employee)" class="btn mb-2">Edit</button>
<button @click="deleteEmployee(employee.id)" class="btn btn-danger">Delete</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
employees: [],
employee: {
id: '',
last_name: '',
first_name: '',
middle_name: '',
email: ''
},
employee_id: '',
pagination: {},
edit: false
};
},
created() {
this.fetchEmployees();
},
methods: {
fetchEmployees(page_url) {
let vm = this;
page_url = page_url || '/api/employees'
fetch(page_url)
.then(res => res.json())
.then(res => {
this.employees = res.data;
vm.makePagination(res.meta, res.links);
})
// .catch(err = console.log(err));
}, //end
makePagination(meta, links){
let pagination = {
current_page: meta.current_page,
last_page: meta.last_page,
next_page_url: links.next,
prev_page_url: links.prev
}
this.pagination = pagination;
},
deleteEmployee(id) {
if(confirm('Are You Sure?')) {
fetch(`api/employee/${id}`, {
method: 'delete'
})
.then(res => res.json())
.then(data => {
alert('Employee info Removed');
this.fetchEmployees();
})
// .catch(err => console.log(err));
}
},
addEmployee() {
if(this.edit === false) {
//add
fetch('api/employee', {
method: 'post',
body: JSON.stringify(this.employee),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
this.employee.last_name = '';
this.employee.first_name = '';
this.employee.middle_name = '';
this.employee.email = '';
alert('Employee Added');
this.fetchEmployees();
})
.catch(err => console.log(err));
} else {
//update
fetch('api/employee', {
method: 'put',
body: JSON.stringify(this.employee),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
this.employee.last_name = '';
this.employee.first_name = '';
this.employee.middle_name = '';
this.employee.email = '';
alert('Employee Updated');
this.fetchEmployees();
})
.catch(err => console.log(err));
}
},
editEmployee(employee) {
this.edit = true;
this.employee.id = employee.id;
this.employee.employee_id = employee.id;
this.employee.last_name = employee.last_name;
this.employee.first_name = employee.first_name;
this.employee.middle_name = employee.middle_name;
this.employee.email = employee.email;
}
}
};
</script>