В этой части мы добавим в модуль профиля функцию редактирования имени и электронной почты пользователя Auth.
Оглавление
Создать маршруты
Откройте свой терминал и введите следующие команды для создания маршрутов profile.php.
# enter to folder project cd laravel-scaffold # create routes file mkdir routes/profile cd routes/profile touch profile.php
В файл profile.php напишите следующий код
<?php
Route::middleware('auth')->group(function () {
Route::group(['namespace' => 'Profile'], function() {
// view
Route::view('/profile', 'profile.profile');
// api
Route::group(['prefix' => 'api/profile'], function() {
Route::get('/getAuthUser',
'ProfileController@getAuthUser');
Route::put('/updateAuthUser',
'ProfileController@updateAuthUser');
});
});
});
В файл routes / web.php напишите следующую строку кода для вызова profile.php routes
...
Route::get('/dashboard', 'HomeController@index')->name('home');
require __DIR__ . '/profile/profile.php';
Создать контроллер
В терминале введите следующую команду для создания контроллера ProfileController.php.
php artisan make:controller Profile/ProfileControllerВ файл ProfileController.php напишите следующий код
<?php
namespace App\Http\Controllers\Profile;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use App\User;
class ProfileController extends Controller
{
public function getAuthUser ()
{
return Auth::user();
}
public function updateAuthUser (Request $request)
{
$this->validate($request, [
'name' => 'required|string',
'email' => 'required|email|unique:users,email,'.Auth::id()
]);
$user = User::find(Auth::id());
$user->name = $request->name;
$user->email = $request->email;
$user->save();
return $user;
}
}
Создать представление
В терминале введите следующую команду для создания представления profile.blade.php.
# create view mkdir resources/views/profile cd resources/views/profile touch profile.blade.php
В файл profile.blade.php напишите следующий код
@extends('layouts.app')
@section('header')
@include('layouts.header')
@endsection
@section('sidebar')
@include('layouts.sidebar')
@endsection
@section('content')
<div class="py-4">
<div class="row justify-content-center">
<div class="col-md-12">
<profile></profile>
</div>
</div>
</div>
@endsection
Создать компонент Vuejs
В вашем терминале введите следующую команду для создания компонента Profile.vue.
# create component mkdir resources/js/components/profile cd resources/js/components/profile touch Profile.vue
В файл Profile.vue напишите следующий код
<template>
<div class="card">
<div class="card-header">
<i class="fas fa-pencil-alt"></i> Edit Profile
</div>
<div class="card-body">
<form class="form-horizontal">
<div class="form-group row">
<label class="col-md-3">Full Name</label>
<div class="col-md-9">
<input class="form-control" :class="{'is-invalid': errors.name}" type="text" v-model="user.name">
<span class="help-block">Enter your name, so people you know can recognize you.</span>
<div class="invalid-feedback" v-if="errors.name">{{errors.name[0]}}</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">Email</label>
<div class="col-md-9">
<input class="form-control" :class="{'is-invalid': errors.email}" type="email" v-model="user.email">
<span class="help-block">This email will be displayed on your public profile.</span>
<div class="invalid-feedback" v-if="errors.email">{{errors.email[0]}}</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<div class="form-group row">
<div class="col-md-9 offset-md-3">
<button class="btn btn-primary" type="button" :disabled="submiting" @click="updateAuthUser" >
<i class="fas fa-spinner fa-spin" v-if="submiting"></i> Save
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
user: {},
errors: {},
submiting: false
}
},
mounted() {
this.getAuthUser()
},
methods: {
getAuthUser () {
axios.get(`/api/profile/getAuthUser`)
.then(response => {
this.user = response.data
})
},
updateAuthUser () {
this.submiting = true
axios.put(`/api/profile/updateAuthUser`, this.user)
.then(response => {
this.errors = {}
this.submiting = false
this.$toasted.global.error('Profile updated!');
})
.catch(error => {
this.errors = error.response.data.errors
this.submiting = false
})
}
}
}
</script>
В файл resources / js / app.js напишите следующую строку кода для вызова компонента Profile.vue.
...
window.Vue = require('vue');
Vue.component('profile', require('./components/profile/Profile.vue'));
const app = new Vue({
el: '#app'
});
Для отправки уведомлений мы используем плагин Vue Toasted Vuejs.
Установить с помощью npm
# install via npm npm install vue-toasted --save
Зарегистрируйте глобальный плагин в файле resources / js / app.js
...
window.Vue = require('vue');
import Toasted from 'vue-toasted';
Vue.use(Toasted)
Vue.toasted.register('error', message => message, {
position : 'bottom-center',
duration : 1000
})
Vue.component('profile', require('./components/profile/Profile.vue'));
...
Наконец, компилируем активы (Laravel Mix) со следующими командами:
npm run dev // or npm run watch
Теперь у нас есть следующий экран при вводе маршрута http: // localhost: 3000 / profile в браузере.
Спасибо за прочтение. Если тебе это нравится ... Дай мне аплодисменты и следуй за мной !!
Что дальше
Часть 1. Аутентификация
Часть 2. Добавить основной шаблон пользовательского интерфейса
Часть 3. Профиль
- 3.1 Редактировать профиль
- 3.2 Сменить пароль
- 3.3 Создать и загрузить аватар
If ($ аплодисменты ≥ 1000) {
Часть 4. Пользователи → Скоро в продаже
Часть 5. Роли → Скоро в продаже
}
