Question

他们让我将所有页面从刀片更改为vuejs，我从用户配置文件（Profile.vue）开始，但我不知道如何在这种情况下使用Axios发送PUT请求。你能指导我为updateUser（）方法创建代码吗？

路线（web.php）

Route::put('/dashboard/profile', 'UserController@myProfile');

myProfile（UserController）

public function myProfile(Request $request)
{
    $this->validate($request, [
            'firstname' => 'required|min:3|max:15',
            'lastname' => 'min:2|max:15',
            'gender' => 'numeric',
            'description' => 'max:200',
    ]);
    $userFind = User::find(Auth::user()->id);

    $userFind->firstname = $request->firstname;
    $userFind->lastname = $request->lastname;
    $userFind->gender = $request->gender;
    $userFind->description = $request->description;

    if($user->update())
        return response()->json([
                'status' => 'success',
                'msg' => 'Datos actualizados correctamente.',
                'cod' => 200
            ]);
     else {
          return response()->json([
                'status' => 'error',
                'msg' => 'Ocurrio un error al actualizar la información.',
                'cod' => 422
            ]);
        }
 }

补充工具栏菜单（sidebar.blade.php）

<profile-component auth="{{ Auth::user()->toJson() }}"></profile-component>

个人资料组件（Profile.vue）

<template>
   <div>
<form v-on:submit.prevent="updateUser" class="form-horizontal form-material">
     <div class="form-group">
          <label class="col-md-12">Nombre</label>
          <div class="col-md-12">
              <input type="text" value="" name="firstname"
                 class="form-control form-control-line"
                 v-model="user.firstname">
          </div>
      </div>
      <div class="form-group">
         <label class="col-md-12">Apellido</label>
         <div class="col-md-12">
            <input type="text" value="" name="lastname"
                class="form-control form-control-line"
                v-model="user.lastname">
         </div>
      </div>
      <div class="form-group">
          <label class="col-sm-12">Genero</label>
          <div class="col-sm-12">
               <select class="form-control form-control-line"
                v-model="user.gender">
                  <option>Seleccionar...</option>
                  <option value="1">Femenino</option>
                  <option value="2">Masculino</option>
                  <option value="3">Otra orientación</option>
                </select>
          </div>
       </div>
       <div class="form-group">
           <label class="col-md-12">Sobre mi</label>
           <div class="col-md-12">
               <textarea rows="5" class="form-control form-control-line"
                  name="description" v-model="user.description"></textarea>
           </div>
        </div>
        <div class="col-sm-12">
           <button class="btn btn-success" type="submit">Actualizar</button>
        </div>
     </form>
   </div>
</template>
<script>
 import moment from "moment";
 export default {
   props: ['auth'],
   data() {
      return {
         user: {},
      }
  },
  mounted() {
    this.user = JSON.parse(this.auth);
  },
  methods: {
    updateUser(){
        let config = {
            headers: {'Content-Type': 'multipart/form-data'}
        };
        const value = {
            'id': this.user.id,
            'firstname': this.user.firstname,
            'lastname': this.user.lastname,
            'gender': this.user.gender,
            'description': this.user.description,
        } 
        let url = '/dashboard/profile'
        axios.put(?????????????????????????????????????
                ???????????????????????????????????????
                ???????????????????????????????????????
                ???????????????????????????????????????)
            .then((response) => {
                ?????????????????????????????????????
                ?????????????????????????????????????
            })
            .catch((response) => {
                console.log(response);
            })
    }
},
filters: {
    moment: function(date) {
        return moment(date).format("D [de] MMMM [de] YYYY ");
    }
}

}

知道如何创建updateUser（）方法吗？

我占据了Laravel 5.6，Vuejs 2和Axios

Answer 1

在页眉中包含令牌，如下所示：<meta name="csrf-token" content="{{ csrf_token() }}">，或者您可以将其直接传递到方法中：axios.put('/dashboard/profile', { put list of params here, including _token })

Blade to Vue laravel-vue的用户个人资料

1 个答案: