Как показать информацию об одном пользователе, нажав на имя в таблице

Я немного новичок в vue.js. Обычно очень просто создать страницу, показывающую информацию о пользователе, используя функцию show из контроллера. Но я не могу найти прямо сейчас, когда буквально нет материалов, показывающих, как использовать функцию показа из контроллера API в vuejs. То, что у меня уже есть, выглядит следующим образом: Пользователи.vue

<template>
    <div class = "container">
           <div class = "row mt-5">
          <div class = "col-md-12">
            <div class = "card">
              <div class = "card-header">
                <h3 class = "card-title">Users Table</h3>

                <div class = "card-tools">
                    <button class = "btn btn-success" @click = "newModal">Add new <i class = "fas fa-user-plus"></i></button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class = "card-body table-responsive p-0">
                <table class = "table table-hover">
                  <tbody>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Type</th>
                        <th>Registered At</th>
                        <th>Modify</th>
                  </tr>


                  <tr v-for = "user in users.data" :key = "user.id">

                    <td>{{user.id}}</td>
                    <td><a href = "#" @click = "showUser(user)">{{user.name}}</a></td>
                    <td>{{user.email}}</td>
                    <td>{{user.type | upText }}</td>
                    <td>{{user.created_at | myDate}}</td>

                    <td>
                        <a href = "#" @click = "editModal(user)">
                            <i class = "fa fa-edit"></i>
                        </a>
                        /
                        <a href = "#" @click = "deleteUser(user.id)">
                            <i class = "fa fa-trash red"></i>
                        </a>
                    </td>
                  </tr>
                </tbody></table>                 
              </div>
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- Modal -->
        <div class = "modal fade" id = "addNew" tabindex = "-1" role = "dialog" aria-labelledby = "addNewLabel" aria-hidden = "true">
            <div class = "modal-dialog" role = "document">
                <div class = "modal-content">
                <div class = "modal-header">
                    <h5 v-show = "editmode" class = "modal-title" id = "addNewLabel">Edit User info</h5>
                    <h5 v-show = "!editmode" class = "modal-title" id = "addNewLabel">Add Users</h5>
                    <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                    <span aria-hidden = "true">&times;</span>
                    </button> 
                </div>
                <form @submit.prevent = "editmode ? updateUser() : createUser()">
                <div class = "modal-body">
                    <div class = "form-group">
                      <input v-model = "form.name" type = "text" name = "name"
                        placeholder = "Name"
                        class = "form-control" :class = "{ 'is-invalid': form.errors.has('name') }">
                      <has-error :form = "form" field = "name"></has-error>
                    </div>

                    <div class = "form-group">
                      <input v-model = "form.email" type = "text" name = "email"
                        placeholder = "email"
                        class = "form-control" :class = "{ 'is-invalid': form.errors.has('email') }">
                      <has-error :form = "form" field = "email"></has-error>
                    </div>

                    <div class = "form-group">
                      <textarea v-model = "form.bio" type = "text" name = "bio"
                        placeholder = "Bio"
                        class = "form-control" :class = "{ 'is-invalid': form.errors.has('bio') }"></textarea>
                      <has-error :form = "form" field = "bio"></has-error>
                    </div>

                    <div class = "form-group">
                      <select v-model = "form.type" type = "text" name = "type"
                        class = "form-control" :class = "{ 'is-invalid': form.errors.has('type') }">
                        <option value = "">Select user Role</option>
                        <option value = "user">Employee</option>
                        <option value = "manager">Manager</option>
                      </select>
                      <has-error :form = "form" field = "name"></has-error>
                    </div>

                    <div class = "form-group">
                      <input v-model = "form.password" type = "password" name = "password"
                        placeholder = "password"
                        class = "form-control" :class = "{ 'is-invalid': form.errors.has('password') }">
                      <has-error :form = "form" field = "password"></has-error>
                    </div>
                </div>
                <div class = "modal-footer">
                    <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
                    <button v-show = "editmode" type = "submit" class = "btn btn-success">Update</button>
                    <button v-show = "!editmode" type = "submit" class = "btn btn-primary">Create</button>
                </div>

                </form>
                </div>
            </div>
            
            </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                editmode: false,
                users : {},
                form: new Form({
                    id:'',
                    name : '',
                    email: '',
                    password: '',
                    type: '',
                    bio: '',
                    photo: ''
                })
            }
        },
        methods: {
          getProfilePhoto(){
                let photo = (this.form.photo.length > 200) ? this.form.photo : "img/profile/"+ this.form.photo ;
                return photo;
            },
          updateUser(){
            this.$Progress.start();
                // console.info('Editing data');
                this.form.put('api/user/'+this.form.id)
                .then(() => {
                    // success
                    $('#addNew').modal('hide');
                     swal.fire(
                        'Updated!',
                        'Information has been updated.',
                        'success'
                        )
                        this.$Progress.finish();
                         Fire.$emit('AfterCreate');
                })
                .catch(() => {
                    this.$Progress.fail();
                });
          },
          editModal(user){
            this.editmode = true;
            this.form.reset();
            $('#addNew').modal('show');
            this.form.fill(user);
          },
          newModal(){
            this.editmode = false;
            this.form.reset();
            $('#addNew').modal('show');
          },
          
          deleteUser(id){
                swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        // Send request to the server
                         if (result.value) {
                                this.form.delete('api/user/'+id).then(()=>{
                                        swal.fire(
                                        'Deleted!',
                                        'Your file has been deleted.',
                                        'success'
                                        )
                                    Fire.$emit('AfterCreate');
                                }).catch(()=> {
                                    swal("Failed!", "There was something wrong.", "warning");
                                });
                         }
                    })
            },
          loadUsers(){
            axios.get("api/user").then(({ data }) => (this.users = data));
          },
          createUser(){
            this.$Progress.start();
            this.form.post('api/user')
            .then(() =>{
              Fire.$emit('AfterCreate');
            toast.fire({
              type: 'success',
              title: 'User created successfully'
            })
            $('#addNew').modal('hide');
            this.$Progress.finish();    
            })
            .catch(() => {

            })                    
          }
        },
        created() {
            this.loadUsers();
            Fire.$on('AfterCreate', () => {
              this.loadUsers();
            });
        }
    }
</script>

UserController.php

<?php
namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Support\Facades\Hash;
class UserController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth:api');
    }
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        // $this->authorize('isAdmin');
        if (\Gate::allows('isAdmin') || \Gate::allows('isAuthor')) {
            return User::latest()->paginate(5);
        }
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request,[
            'name' => 'required|string|max:191',
            'email' => 'required|string|email|max:191|unique:users',
            'password' => 'required|string|min:6'
        ]);
        return User::create([
            'name' => $request['name'],
            'email' => $request['email'],
            'type' => $request['type'],
            'bio' => $request['bio'],
            'photo' => $request['photo'],
            'password' => Hash::make($request['password']),
        ]);
    }
    public function updateProfile(Request $request)
    {
        $user = auth('api')->user();
        $this->validate($request,[
            'name' => 'required|string|max:191',
            'email' => 'required|string|email|max:191|unique:users,email,'.$user->id,
            'password' => 'sometimes|required|min:6'
        ]);
        $currentPhoto = $user->photo;
        if ($request->photo != $currentPhoto){
            $name = time().'.' . explode('/', explode(':', substr($request->photo, 0, strpos($request->photo, ';')))[1])[1];
            \Image::make($request->photo)->save(public_path('img/profile/').$name);
            $request->merge(['photo' => $name]);
            $userPhoto = public_path('img/profile/').$currentPhoto;
            if (file_exists($userPhoto)){
                @unlink($userPhoto);
            }
        }
        if (!empty($request->password)){
            $request->merge(['password' => Hash::make($request['password'])]);
        }
        $user->update($request->all());
        return ['message' => "Success"];
    }
    public function profile()
    {
        return auth('api')->user();
    }
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $user = User::findOrFail($id);
        $this->validate($request,[
            'name' => 'required|string|max:191',
            'email' => 'required|string|email|max:191|unique:users,email,'.$user->id,
            'password' => 'sometimes|min:6'
        ]);
        $user->update($request->all());
        return ['message' => 'Updated the user info'];
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $this->authorize('isAdmin');
        $user = User::findOrFail($id);
        // delete the user
        $user->delete();
        return ['message' => 'User Deleted'];
    }
    public function search(){
        if ($search = \Request::get('q')) {
            $users = User::where(function($query) use ($search){
                $query->where('name','LIKE',"%$search%")
                        ->orWhere('email','LIKE',"%$search%");
            })->paginate(20);
        }else{
            $users = User::latest()->paginate(5);
        }
        return $users;
    }
}

и, наконец, мой api.php выглядит так:

Route::apiResources(['user' => 'API\UserController']);
// Route::get('user/{user}', 'API\UserController@show');
Route::apiResources(['customer' => 'API\CustomerController']);
Route::apiResources(['supplier' => 'API\SupplierController']);
Route::apiResources(['audit' => 'API\AuditController']);
// Route::apiResources(['salesqoute' => 'API\SalesqouteController']);
Route::get('orderlist', 'API\OrderController@index');
Route::get('profile','API\UserController@profile');
Route::put('profile','API\UserController@updateProfile');

Обычно в laravel шоу создает новую страницу с информацией из базы данных, и URL-адрес будет чем-то вроде url/user/1, и страница будет загружаться со всеми видами информации на странице, в зависимости от того, что хочет пользователь. показывать. Если здесь возможно что-то подобное, пожалуйста, дайте мне знать, и это будет для меня огромной помощью. Я буду реализовывать ту же функциональность позже, поэтому хорошее объяснение будет очень полезным.

Да, это возможно. Просто создайте method с именем show, введите в аргументе hint модель пользователя и выполните красноречивый поиск с идентификатором, указанным в качестве аргумента. Верните его как ответ json и обработайте его с помощью vue.

— 16.07.2019 02:07

laravel vue.js

16.07.2019 01:28

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Поиск нового уровня в Laravel с помощью MeiliSearch и Scout

Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...

Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков

В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...

Как построить CRUD-приложение в Laravel

Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...

1 279

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я напишу такой простой пример

<td><a href = "#" @click = "showUser(user.id)">{{user.name}}</a></td>

просто передайте идентификатор в аргументе в showUser затем в методе showUser

data:function(){
return{
user:{
  id:'',
 name : '',
 email: '',
 password: '',
 type: '',
 bio: '',
 photo: ''
}
}
},
methods:{
showUser(id){
axios.get('/api/user/'+id).then((res)=>{
if (res.data.status==true){
  this.user= res.data.user;
console.info(res.data.user)
}else{
alert('No User founded with this id')
}
}).catch((err)=>{alert('error')})
}
}

в вашем методе show в контроллере

public function show($id)
{
$user=User::find($id);
if ($user){
return response()->json(['status'=>true,'user'=>$user]);
}else{
return response()->json(['status'=>false]);
}
}

Я надеюсь, что это поможет вам. Удачи!

Привет! Я очень рад, что вы нашли ответ. У меня все еще есть проблема. Теперь в сценарии у меня уже есть функция данных с другими пользователями, чем у вас. В настоящее время, если я просто использую ваш метод showUser() и показываю функцию в контроллере, я получаю сообщение об ошибке 500 с сообщением: «Попытка получить свойство «истина» не-объекта». Есть ли какой-либо конкретный способ обработки функции данных отдельно?

— 16.07.2019 08:02

Извините за это, я обновил свой ответ, просмотрите его, пожалуйста, я делаю ошибку, она должна быть => не -> вернуть ответ()->json(['status'=>true,'user'=>$user]) ; Надеюсь сработало и вижу данные в консоли

— 16.07.2019 08:07

Хорошо, теперь ответ показывает данные в соответствии с записью, на которую я нажимаю. Будет ли слишком сложно с моей стороны спросить, как создать новую страницу, показывающую запись пользователя, на которого я нажимаю, используя vuejs :). Тем не менее, большое спасибо за помощь.

— 16.07.2019 08:22

Зарегистрируйте новый компонент на своем vue-router, вы можете проверить репозиторий github.com/devhammam95/laravel-vue-router-app/blob/master/…, а затем вместо ``` @click = "showUser(user)" ``` сделать его ``` <router-link :to = "{name:' post',params:{id:user.id}}"></router-link> ``` и в компоненте export default { data:function(){ return{ post:{id:'',title:' ',content:''} }},created(){ axios.get('/api/user/'+id).then((res)=>{ if (res.data.status==true){ this .user= res.data.user; console.info(res.data.user) }else{ alert('Нет пользователя') }}} </script>

— 16.07.2019 08:34

16.07.2019 06:46