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

前言

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

后端

编辑app/Http/Controller/AuthController.php

/**
     * 获取用户信息
     *
     * @param Request $request
     * @return JsonResponse
     */
    public function getUserInfo(Request $request): JsonResponse
    {
        // 获取认证用户
        $user = $request->user();

        // 返回用户信息
        return response()->json([
            'data' => [
                'id' => $user->id,
                'name' => $user->name,
                'nickname' => $user->nickname,
                'email' => $user->email,
                'avatar' => $user->avatar ? asset( $user->avatar) : null,
            ],
            'message' => '获取用户信息成功',
        ], 200);
    }

    /**
     * 更新用户昵称
     *
     * @param Request $request
     * @return JsonResponse
     */
    public function updateNickname(Request $request): JsonResponse
    {
        // 验证请求数据
        $validated = $request->validate([
            'nickname' => 'required|string|max:50',
        ]);

        $user = User::where('name', 'admin')->first();
        if(!$user) {
            return response()->json([
                'message' => '用户不存在'
            ], 401);
        }

        try {
            // 更新用户昵称
            $nickname = trim(strip_tags($validated['nickname']));
            $user->update(['nickname' => $nickname]);

            return response()->json([
                'data' => [
                    'user' => [
                        'id' => $user->id,
                        'name' => $user->name,
                        'nickname' => $user->nickname,
                        'email' => $user->email,
                        'avatar' => $user->avatar ? asset($user->avatar) : null,
                    ],
                ],
                'message' => '昵称更新成功'
            ], 200);
        } catch (\Exception $e) {
            return response()->json([
                'message' => '昵称更新失败: ' . $e->getMessage(),
            ], 500);
        }
    }
    
    /**
     * 注销用户并删除令牌
     *
     * @param Request $request
     * @return JsonResponse
     */
    public function logout(Request $request): JsonResponse
    {
        // 删除当前用户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 
{
	 /**
     * 上传头像
     * @param \Illuminate\Http\Request $request
     * @return mixed|\Illuminate\Http\JsonResponse
     */
    public function uploadAvatar(Request $request)
    {
        $request->validate([
            'avatar' => 'required|image|mimes: jpeg,png,jpg,gif|max:2048'
        ]);
        try{
            $file = $request->file('avatar');
            // 生成文件名
            $fileName = 'avatar_' . time() . '.' . $file->getClientOriginalExtension();
            // 保存文件到存储路径
            $path = $file->storeAs('avatars', $fileName, 'public');

            $user = User::find(1);
            if($user->avatar && Storage::disk('public')->exists($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 (){
		// 测试token接口
    Route::post('/test', function () {
        return response()->json([
            'message' => 'token is valid',
            'data' => [
                'name' => '四季豆',
                'url' => 'https://blog.youkuaiyun.com/php_ACDE?type=blog'
            ]
        ], 200);
    });
        // 用户相关
    Route::prefix('auth')->group(function () {
        Route::post('/logout', [AuthController::class, 'logout']);
        Route::get('/user', [AuthController::class, 'getUserInfo']);
        Route::put('/nickname', [AuthController::class, 'updateNickname']);
    });
    
    // 上传
    Route::prefix('upload')->group(function() {
        Route::post('/avatar', [AuthController::class, 'uploadAvatar']);
    });
    
});

注意：这里有个坑,上传方法我原来使用patch，一直报错,直到我改回post方法。从 RESTful API 的语义角度来看，patch 是用于对资源进行部分修改的，这从理论上来说,patch更加符合。不过我这小项目,直接换成post了。大家要改的话,就得去配置下服务器。

前端