博客项目 laravel vue mysql 第三章 个人中心

前言

前面章节没看过的朋友请先从第一章开始看 。这章主要写个人中心相关功能。

后端

编辑app/Http/Controller/AuthController.php

use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Hash;    
	/**
     * 更新用户昵称
     */
    public function updateNickname(Request $request) 
    {
        // 验证请求数据
        $data = $request->validate([
            'nickname' => 'required|string'
        ]);

        $user = User::where('name', 'admin')->first();

        //更新
        try{
            $user->update('nickname', $data['nickname']);

            return response()->json([
                'data' => [
                    'nickname' => $user->nickname
                ],
                'message' => '昵称更新成功'
            ], 200);
        }catch(\Exception $e){
            return response()->json([
                'message' => '昵称更新失败: ' . $e->getMessage(),
            ], 500);
        }
    }

	/**
     * 注销用户并删除令牌
     *
     * @param Request $request
     * @return JsonResponse
     */
    public function logout(Request $request) 
    {
        // 删除当前用户token
        try{
            $request->user->currentAccessToken()->delete();

            return response()->json([
                'message' => '退出登录成功'
            ], 200);
        } catch(\Exception $e) {
            return response()->json([
                'message' => '退出登录失败' . $e->getMessage()
            ], 500);
        }
    }

新建app/Http/Controller/UploadController.php
我的账号固定id为1,name固定为admin 你们要改的这里要改一下

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Models\User;

class UploadController extends Controller 
{
    /**
     * 上传用户头像
     * POST /avatar/upload
     */
    public function uploadAvatar(Request $request)
    {
        $request->validate([
            'avatar' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048'
        ]);
        try {
            $file = $request->file('avatar');
            // 生成文件名
            $fileName = 'avatar_1_' . time() . '.' . $file->getClientOriginalExtension();
            // 保存文件到存储路径
            $path = $file->storeAs('avatars', $fileName, 'public');

            $user= User::find(1);
            if($user && $user->avatar) {
                // 删除旧头像
                Storage::disk('public')->delete($user->avatar);
            }
            // 更新用户头像路径
            $user->update(['avatar' => $path]);
            return response()->json([
                'data' => [
                    'avatar_url' => asset('storage/' . $path),
                    'avatar_path' => $path,
                ],
                'message' => '头像上传成功'
            ], 200);

        } catch(\Exception $e) {
            return response()->json([
                'message' => '头像上传失败: ' . $e->getMessage(),
            ], 500);
        }
    }
}

创建符号链接

php artisan storage:link

编辑路由routes/api.php

<?php

use App\Http\Controllers\AuthController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

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

Route::get('./test', function() {
    return response()->json([
        'data' => [
            'name' => '四季豆',
            'email' => '506717715@qq.com'
        ],
        'message' => 'hello'
    ], 200);
});

Route::post('/login', [AuthController::class, 'login']);

/*
|--------------------------------------------------------------------------
| 受保护接口（需要认证）
|--------------------------------------------------------------------------
*/
Route::middleware('auth:sanctum')->group(function (){
    // 个人中心
    Route::prefix('user')->group(function() {
        Route::post('/uploadAvatar', [AuthController::class, 'updateNickname']);
        Route::get('/logout', [AuthController::class, 'logout']);
    });
    
    // 上传
    Route::prefix('upload')->group(function() {
        Route::post('/avatar', [AuthController::class, 'uploadAvatar']);
    });
    
});

前端