projet1_过程记录CMS_1

最新推荐文章于 2024-05-23 19:23:11 发布

SeedSun_mmc

最新推荐文章于 2024-05-23 19:23:11 发布

阅读量291

点赞数

文章标签： laravel php cms

本文链接：https://blog.csdn.net/SeedSun_mmc/article/details/106564559

版权

按照视频和老师讲解，实现一个简易的CMS。
软件：PHPStorm、Laragon、Google Chrome

—😄-------------😛 -------------😃-------------😄-------------😛 -------------😃-------------😛 -------------😃—

1. 利用laragon创建工程

打开laragon，开始创建一个新的架构
在这里插入图片描述

创建成功的效果 在这里插入图片描述

2. 用户认证界面

2.1. 导入依赖包

composer require laravel/ui

首先先给更新了laravel的ui
在这里插入图片描述
将ui下载到vendor/laravel/ui中

在这里插入图片描述

2.2. 安装部署认证组件

php artisan ui vue --auth

2.3 安装部署npm部署组件

npm install && npm run dev

建立成功之后，会得到这两个文件，
在这里插入图片描述

2.4 配置数据库并进行数据迁移

2.4.1. 到.env中配置数据库

在这里插入图片描述

2.4.2. 到终端进行数据库迁移

php artisan migrate

将生成相关的表

2.5 效果

现在的laragon主页就会多了右上角的注册和登录的功能
在这里插入图片描述
注册界面

登录界面

登陆之后的home界面

登陆之后的初始界面

3. 帖子和分类管理

3.1 创建模型和数据库迁徙文件

3.1.1 分别创建Post（后台发布文章帖子）和Category（文章分类）的模型和迁徙方法

php artisan make :model Category -m
php artisan make :model Post -m

3.1.2 更改两个迁徙文件中的内容（即表的结构）

分类表（Category）

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCategoriesTable extends Migration
{
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

文章表（Post）

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('description');
            $table->text('content');
            $table->string('image');
            $table->timestamp('published_at')->nullable();
            $table->unsignedInteger('category_id');
            $table->foreign('category_id')->references('id')->on('categories')
                ->onUpdate('cascade')->onDelete('cascade');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

3.1.3 创建分类资源

创建控制器

php artisan make:controller CategoriesController --resource

在这里插入图片描述

创建分类资源路由

/* 在web.php里面创建路由 */
Route::resource('categories','CategoriesController');

在这里插入图片描述
在终端中验证一下路由是否创建成功

php artisan route:list

在这里插入图片描述

调整登录之后的内部布局

实现如下布局
在这里插入图片描述
layout代码：

<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

       <main class="py-4">
            @auth
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <a href="">Posts</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="">Categories</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-8">
                            @yield('content')
                        </div>
                    </div>
                </div>
            @else
                @yield('content')
            @endauth
        </main>
    </div>
</body>

效果：
在这里插入图片描述

创建分类列表视图

1.在resource/view/categories中建立index.blade.php
在这里插入图片描述

2.在控制器中设置返回的路由名称

效果：

处理分类的提交

1.在resource/view/categories中建立create.blade.php
在这里插入图片描述
2.控制器中返回视图

3.完善一下，创建输入出错时的提示信息

4.处理分类的提交

5.在category路由中指定可以被post的代码

6. 在app.blade.php中加入消息处理的反馈

效果
1.ADD视图
2.提交之后，返回一个消息
在这里插入图片描述
数据库中也新加了一个消息

3.再次提交NO.1，则返回错误

4.名字太短

5.名字太长

6.名字为空