使用Laravel和VueJS在管理面板中显示用户

时间:2019-11-14 05:23:51

标签: php laravel vue.js laravel-5 vue-component

我正在使用Laravel创建一个管理面板,该面板可以使用VueJS管理所有用户。

UserController.php

public function show(User $user)
    {

        $user = User::all();
        return UsereResource($user);
    }

UserResource.php

public function toArray($request)
{

    return [
        'id' => $this->id,
        'name' => $this->name,
        'email' => $this->email,
        'created_at' => (string) $this->created_at,
        'updated_at' => (string) $this->updated_at,
    ];
}

UserVue.js

    <template>
        <div id="app">
            <p class="border p-3" v-for="user in users">
                {{ user.name }}
                <button 
                    type="button" 
                    @click="deleteUser(user.id)" 
                    class="p-1 mx-3 float-right btn btn-danger"
                >
                    Delete
                </button>
            </p>
            <div>
                <button 
                    v-if="next" 
                    type="button" 
                    @click="navigate(next)" 
                    class="m-3 btn btn-primary"
                >
                  Next
                </button>
                <button 
                    v-if="prev" 
                    type="button" 
                    @click="navigate(prev)" 
                    class="m-3 btn btn-primary"
                >
                  Previous
                </button>
            </div>
        </div>
    </template>
    <script>
    export default {
      mounted() {
        this.getUsers();
      },
      data() {
        return {
          users: {},
          next: null,
          prev: null
        };
      },
      methods: {
        getUsers(address) {
          axios.get(address ? address : "/api/users").then(response => {
            this.users = response.data.data;
            this.prev = response.data.links.prev;
            this.next = response.data.links.next;
          });
        },
        deleteUser(id) {
          axios.delete("/api/users/" + id).then(response => this.getUsers())
        },
        navigate(address) {
          this.getUsers(address)
        }
      }
    };
    </script>

api.php

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::apiResource('users', 'UserController');

web.php

Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
Route::get('/admin/{any}', 'AdminController@index')->where('any', '.*');
Route::get('/user/{any}', 'UserController@index')->where('any', '.*');
Route::get('/users', 'UserController@index');
Route::post('/users', 'UserController@store');

我不断收到错误 app.js:267 GET http://127.0.0.1:8000/api/users 401(未经授权)

在控制台中说

{message: "Unauthenticated."}
message: "Unauthenticated."

我一直坚持下去,将不胜感激。

谢谢!

0 个答案:

没有答案