按照视频和老师讲解,实现一个简易的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.名字为空
第一课 完成~
—😄-------------😛 -------------😃-------------😄-------------😛 -------------😃-------------😛 -------------😃—