仿小红书项目 第一章 环境搭建

前言

只是自己琢磨着写个类似小红书的项目，边记载边学习。大致的想法应该是API H5自适应网页 APP 小程序一个个实现吧。 大家可以跟着一切写。中间图图改改勿怪！另外这章我就写了个环境搭建，不过我全丢这章来写了,后期如果顺利的话就会重新写成教程。嗯,没别的了。开始！

项目概述

一个类似小红书的社交平台，用户可以注册登录、发布内容、互动社交、搜索发现，支持多端访问。

技术栈

• 后端：Laravel（提供 API 接口）
• 前端：Vue.js（支持 H5、App、小程序）
• 数据库：MySQL
• PHP 版本：8.0.2

目前在写和写完的模块

用户模块

• 注册
• 登录
• 个人资料管理
• 关注/粉丝系统

环境准备

工具下载

php

php下载地址 另外环境变量自己加一下。加完之后运行cmd然后再命令行输入php -v。

composer

composer下载。下载完成之后也是cmd,输入composer --version

node.js

也是node -v

主要这几个,数据库应该都有,框架的话按我下面步骤来下载吧。另外给个加速器 加速器地址。镜像问题和composer下载慢的问题我就直接跳过了。emm,吐槽一下，上次打吃鸡,某些加速器居然不如这个加速器。我服了, 捏麻麻的，谁才是加速器有点AC中间数可以吗。

项目创建

运行创建命令,项目名是最后一个,你可以改成自己喜欢的。我图方便,就xiaohongshu了

composer create-project --prefer-dist laravel/laravel xiaohongshu

或者你可以执行下面的命令

创建laravel独立安装器
composer global require laravel/installer

创建项目
laravel new xiaohongshu

指定版本创建项目
laravel new xiaohongshu --5.8

下载完了执行命令

cd xiaohongshu

php artissan serve

浏览器输入http://127.0.0.1:8000/。能看到laravel的欢迎页面就算OK。如果这都搞不定,蛙跳十分钟吧

修改配置

进入.env文件,修改成自己的mysql配置

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=xiaohongshu
DB_USERNAME=root
DB_PASSWORD=root

哦,补充一个问题,APP_KEY为空。上回我写简单案例那章我搜了答案直接运行就过了,忘记写文章里了。具体问题是你头次使用laravel的时候,.env文件的APP_KEY 是不会主动生成的,你要运行以下命令给他生成。

php artisan key:generate

创建mysql

CREATE DATABASE xiaohongshu;

表的话,迁移文件给的四张表我就先用这个了,执行命令

php artisan migrate

另外遇到个坑说一下。我用的mysql版本太低,导致运行命令的时候,MySQL不像对我说话,还丢了个报错。

SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes。

这个问题是laravel默认utf8mb4,在 utf8mb4 下，255 个字符需要 255 * 4 = 1020 字节。我的嘛,1000。怎么改呢。config/databse.php

'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8',   // 这里这里两行！！！
            'collation' => 'utf8_unicode_ci', // 这里这里两行！！！！
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

功能模块

注册

运行命令创建控制器

php artisan make:controller AuthController

编辑
Auth::attempt 检查邮箱和密码是否匹配。
createToken 生成访问令牌，前端用它访问受保护的 API。

namespace App\Http\Controllers;

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

class AuthController extends Controller
{
    public function register(Request $request)
    {
        // 验证请求数据
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:8',
        ]);

        // 创建用户
        $user = User::create([
            'name' => $validated['name'],
            'email' => $validated['email'],
            'password' => Hash::make($validated['password']),
        ]);

        // 返回成功响应
        return response()->json(['message' => '用户注册成功', 'user' => $user], 201);
    }
}

配置路由

编辑routess/api.php
注意要放再api文件,这样生成的url默认是会自带/api的

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

测试

你用postman或者apipost之类的都行。
我用的postman,说下测试流程

测试路径
http://localhost:8000/api/register

再body下面选中raw然后选json
{
    "name": "John Doe",
    "email": "john.doe@example.com",
    "password": "secret"
}

最后他返回,这样就算测试成功。后面我就不写这么细了哈
{
    "message": "注册成功",
    "user": {
        "name": "John Doe",
        "email": "john.doe@example.com",
        "updated_at": "2025-06-07T06:00:03.000000Z",
        "created_at": "2025-06-07T06:00:03.000000Z",
        "id": 2
    }
}

登录

Sanctum API 令牌

如果按照之前我的操作的话你的数据库里应该有personal_access_tokens这个表。有的话跳过这步骤,没得跟我敲一下。有些童鞋可能有安装没执行迁移,自己去composer.json里找找，自己把握一哈把。

composer 安装
composer require laravel/sanctum

发布配置文件
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

运行迁移生成数据表
php artisan migrate

最后不管有没有表，到app/Http/Kernel.php里看一眼,确保api中间件组里有Sanctum

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
        // 这里我的文件本来有注释,打开
             \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

登录方法

编辑app/Http/Controller/AuthController.php

<?php
namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    // 注册
    public function register(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:6',
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        return response()->json(['message' => '注册成功', 'user' => $user], 201);
    }

    // 登录
    public function login(Request $request)
    {
        $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
        ]);

        if (!Auth::attempt($request->only('email', 'password'))) {
            return response()->json(['message' => '邮箱或密码错误'], 401);
        }

        $user = Auth::user();
        $token = $user->createToken('auth_token')->plainTextToken;

        return response()->json([
            'message' => '登录成功',
            'user' => $user,
            'token' => $token,
        ], 200);
    }
}

路由

编辑Route/api.php

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

测试

返回下列信息就算成功了

{
    "message": "登录成功",
    "user": {
        "id": 1,
        "name": "testuser",
        "email": "test@example.com",
        "email_verified_at": null,
        "created_at": "2025-06-07T05:52:11.000000Z",
        "updated_at": "2025-06-07T05:52:11.000000Z"
    },
    "token": "1|37poUxNUgdgy6fIiFJI7oUGPT05wVf1VqNSy8Cpd199028b5"
}

获取信息方法

编辑app/Http/Controllers/AuthController.php

    // 用户信息
    public function user(Request $request){
        return response()->json([
            'message' => '用户信息',
            'user' => $request->user(),
        ], 200);
    }

编辑routes/api.php

Route::middleware('auth:sanctum')->get('/user', [AuthController::class, 'user']);

测试
postman输入http://localhost:8000/api/user，Authorization选项选中Bearer Token输入刚才登录给的token

{
    "message": "用户信息",
    "user": {
        "id": 1,
        "name": "testuser",
        "email": "test@example.com",
        "email_verified_at": null,
        "created_at": "2025-06-07T05:52:11.000000Z",
        "updated_at": "2025-06-07T05:52:11.000000Z"
    }
}