laravel
数据库迁移
使用 Laravel 框架操作数据库，不需要自己编写操作数据库的代码，只需要配置好数据库的连接信息，
然后使用 Laravel 框架提供的方法就可以操作数据库了
在config/database.php文件中更改：
'default' => env('DB_CONNECTION', 'mysql'),
还需要更改 .env 文件中的一些语句
DB_CONNECTION=mysql
DB_HOST=127.0.0.1 //本机
DB_PORT=3306 //端口号
DB_DATABASE=lavr //数据库名称
DB_USERNAME=root //用户名
DB_PASSWORD=root //密码
在集成终端中写入这条语句
php artisan migrate:install
执行完毕后查看数据库就会多个 migrations 表，
编写数据库迁移文件
首先在集成终端执行下面的命令，在WWW\blog\database\migrations目录下创建一个2020_11_20_134631_create_posts_table.php文件
**注意：**这个文件中的其他的文件都可以删除，以免报错
php artisan make:migration create_posts_table
打开这个文件，编写表结构
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
//生成表的时候，会自动把string转换成varcher类型
$table->string('title',100)->default('暂无标题');
$table->text('content');
$table->integer('user_id')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
其中laravel中为字符串设置默认长度为1071，但是mysql数据库中最大字符为1000bytes，需要在WWW\blog\app\Providers\AppServiceProvider.php目录下的AppServiceProvider.php中设置如下代码
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Schema;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
//设置string转换成verchar类型时的长度
Schema::defaultStringLength(250);
}
}
再在集成终端执行下面的命令，即可在数据库中自动创建好posts表
php artisan migrate
发布文章案例整合
注意点
1.所有写在页面上展示的内容的文件，都建在WWW\blog\resources\views这个地址中，在为文件命名时，要在名称后面加上**.blade**这个后缀，例如index.blade.php.
2.在集成终端中用 php artisan make:model Post 和 php artisan make:controller PostController 这两条命令，在WWW\blog\app\Models 下创建Post.php文件 和在WWW\blog\app\Http\Controllers下创建PostController.php文件
3.所有的路由都写在 WWW\blog\routes 下的web.php中
4.在浏览器中显示网页，需要在集成终端中打开，输入 php artisan serve,从其中得到的连接中打开
5.涉及到from表单提交传值什么的，一定要写上**@csrf**，否则会报419错误
展示所有文章
index.balde.php：展示所有的文章的页面布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="MESUY3topeHgvFqsy9EcM916UWQq6khiGHM91wHy">
<title>laravel for blog</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/blog.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/wangEditor.min.css">
</head>
<body>
<div class="blog-masthead">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="blog-nav-item " href="/posts">首页</a>
</li>
<li>
<a class="blog-nav-item" href="/posts/create">写文章</a>
</li>
<li>
<a class="blog-nav-item" href="/notices">通知</a>
</li>
<li>
<input name="query" type="text" value="" class="form-control" style="margin-top:10px" placeholder="搜索词">
</li>
<li>
<button class="btn btn-default" style="margin-top:10px" type="submit">Go!</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<div>
<img src="/storage/9f0b0809fd136c389c20f949baae3957/iBkvipBCiX6cHitZSdTaXydpen5PBiul7yYCc88O.jpeg" alt="" class="img-rounded" style="border-radius:500px; height: 30px">
<a href="#" class="blog-nav-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kassandra Ankunding2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/user/5">我的主页</a></li>
<li><a href="/user/5/setting">个人设置</a></li>
<li><a href="/logout">登出</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="blog-header"></div>
<div class="row">
<div class="col-sm-8 blog-main">
<div>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://ww1.sinaimg.cn/large/44287191gw1excbq6tb3rj21400migrz.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww3.sinaimg.cn/large/44287191gw1excbq5iwm6j21400min3o.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
<div class="item">
<img src="http://ww2.sinaimg.cn/large/44287191gw1excbq4kx57j21400migs4.jpg" alt="..." />
<div class="carousel-caption">...</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div style="height: 20px;"></div>
<div>
//循环输出从控制器中传过来的所有的数据
@foreach($posts as $v)
<div class="blog-post">
<h2 class="blog-post-title"><a href="/posts/{{$v->id}}" >{{$v->title}}</a></h2>
<p class="blog-post-meta">{{$v->created_at}} <a href="/user/5">Kassandra Ankunding2</a></p>
//截取内容的前100个字符，剩下的以……代替
<p>{!! Str::limit($v->des,100,'……') !!}</p>
<p class="blog-post-meta">赞 0 | 评论 0</p>
</div>
@endforeach
</div><!-- /.blog-main -->
</div>
<div id="sidebar" class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<aside id="widget-welcome" class="widget panel panel-default">
<div class="panel-heading">
欢迎！
</div>
<div class="panel-body">
<p>
欢迎来到简书网站
</p>
<p>
<strong><a href="/">简书网站</a></strong> 基于 Laravel5.4 构建
</p>
<div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1494580268777">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":"120473611"},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["tsina","renren","douban","weixin","qzone","tqq","bdhome"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["tsina","renren","douban","weixin","qzone","tqq","bdhome"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</div>
</aside>
<aside id="widget-categories" class="widget panel panel-default">
<div class="panel-heading">专题</div>
<ul class="category-root list-group">
<li class="list-group-item">
<a href="/topic/1">旅游</a>
</li>
<li class="list-group-item">
<a href="/topic/2">轻松</a>
</li>
<li class="list-group-item">
<a href="/topic/5">测试专题</a>
</li>
</ul>
</aside>
<!-- </div> -->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/wangEditor.min.js"></script>
<script src="js/ylaravel.js"></script>
</body>
</html>
web.php：路由模型绑定。通过get到的路由地址，去调取控制器中的相应的方法
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return 'hell0';
});
//匹配到/posts路由时，执行PostController中的index方法
Route::get('/posts','\App\Http\Controllers\PostController@index');
PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use \App\Models\Post;
use Illuminate\Support\Facades\Route;
use DB;
class PostController extends Controller
{
//用于展示文章列表
public function index(){
//从数据库中获取到所有的数据（倒序），将数据赋值给$posts
$posts=post::get();
//显示index.balde.php中的内容，并将数据传给此页面
return view('index',['posts'=>$posts]);
}
}
添加文章
add.balde.php：写的是添加文章页面布局的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
//在头部这，也得设置一次@csrf保护
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>laravel for blog</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/blog.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="blog-nav-item " href="/posts">首页</a>
</li>
<li>
<a class="blog-nav-item" href="/posts/create">写文章</a>
</li>
<li>
<a class="blog-nav-item" href="/notices">通知</a>
</li>
<li>
<input name="query" type="text" value="" class="form-control" style="margin-top:10px" placeholder="搜索词">
</li>
<li>
<button class="btn btn-default" style="margin-top:10px" type="submit">Go!</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<div>
<img src="/storage/9f0b0809fd136c389c20f949baae3957/iBkvipBCiX6cHitZSdTaXydpen5PBiul7yYCc88O.jpeg" alt="" class="img-rounded" style="border-radius:500px; height: 30px">
<a href="#" class="blog-nav-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kassandra Ankunding2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/user/5">我的主页</a></li>
<li><a href="/user/5/setting">个人设置</a></li>
<li><a href="/logout">登出</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="blog-header">
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<form method="post" action="/posts" id="form_posts">
@csrf
<div class="form-group">
<label>标题</label>
<input name="title" id="title" type="text" class="form-control" placeholder="这里是标题">
</div>
<div class="form-group">
<label>内容</label>
<!-- <textarea id="content" style="height:400px;max-height:500px;" name="content" class="form-control" placeholder="这里是内容"></textarea> -->
<div id="content" style="height=400px;max-height:500px">
<p>请输入新闻内容</p>
</div>
</div>
<button type="button" class="btn btn-default" id="btn">提交</button>
</form>
<br>
</div><!-- /.blog-main -->
<div id="sidebar" class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<aside id="widget-welcome" class="widget panel panel-default">
<div class="panel-heading">
欢迎！
</div>
<div class="panel-body">
<p>
欢迎来到简书网站
</p>
<p>
<strong><a href="/">简书网站</a></strong> 基于 Laravel5.4 构建
</p>
<div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1494580268777"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":"120473611"},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["tsina","renren","douban","weixin","qzone","tqq","bdhome"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["tsina","renren","douban","weixin","qzone","tqq","bdhome"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</div>
</aside>
<aside id="widget-categories" class="widget panel panel-default">
<div class="panel-heading">
专题
</div>
<ul class="category-root list-group">
<li class="list-group-item">
<a href="/topic/1">旅游</a>
</li>
<li class="list-group-item">
<a href="/topic/2">轻松</a>
</li>
<li class="list-group-item">
<a href="/topic/5">测试专题</a>
</li>
</ul>
</aside>
</div>
</div> </div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/wangeditor@4.5.0/dist/wangEditor.min.js"></script>
<!-- <script type="text/javascript" src="/js/wangEditor.js"></script> -->
<script src="/js/ylaravel.js"></script>
</body>
</html>
web.php
它的路由是由index.balde.php中和add.balde.php页面联系的超链接传的
Route::get('/posts/create','\App\Http\Controllers\PostController@add');
Route::post('/posts','\App\Http\Controllers\PostController@store');
PostController.php
//用于展示添加文章的页面
public function add(){
return view('add');
}
//用于新增文章
public function store(){
//实例化Post.php中的类
$model=new Post();
//将form表单提交传过来的值赋给$model中的属性
$model->title=request('title');
$model->des=request('des');
$model->content=request('content');
//执行插入方法
$model->save();
//插入后，返回显示主页面
return redirect()->action('\App\Http\Controllers\PostController@index');
}
文章详情
show.balde.php
这个文件的位置和index.balde.php、add.balde.php文件的位置相同，它的路由是点击index.balde.php中的每一个文章标题的时候传的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="4BfTBDF90Mjp8hdoie6QGDPJF2J5AgmpsC9ddFHD">
<title>laravel for blog</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/blog.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<form action="/posts/search" method="GET">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="blog-nav-item " href="/posts">首页</a>
</li>
<li>
<a class="blog-nav-item" href="/posts/create">写文章</a>
</li>
<li>
<a class="blog-nav-item" href="/notices">通知</a>
</li>
<li>
<input name="query" type="text" value="" class="form-control" style="margin-top:10px" placeholder="搜索词">
</li>
<li>
<button class="btn btn-default" style="margin-top:10px" type="submit">Go!</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<div>
<img src="/storage/9f0b0809fd136c389c20f949baae3957/iBkvipBCiX6cHitZSdTaXydpen5PBiul7yYCc88O.jpeg" alt="" class="img-rounded" style="border-radius:500px; height: 30px">
<a href="#" class="blog-nav-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kassandra Ankunding2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/user/5">我的主页</a></li>
<li><a href="/user/5/setting">个人设置</a></li>
<li><a href="/logout">登出</a></li>
</ul>
</div>
</li>
</ul>
</form>
</div>
</div>
<div class="container">
<div class="blog-header">
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<div style="display:inline-flex">
<h2 class="blog-post-title">{{$show->title}}</h2>
<a style="margin: auto" href="/posts/62/edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a style="margin: auto" href="/posts/62/delete">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</div>
<p class="blog-post-meta">{{$show->created_at}} <a href="#">Kassandra Ankunding2</a></p>
<p>{!! $show->content !!}</p>
<div>
<a href="/posts/62/zan" type="button" class="btn btn-primary btn-lg">赞</a>
</div>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">评论</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">
<h5>2017-05-28 10:15:08 by Kassandra Ankunding2</h5>
<div>
这是第一个评论这是第一个评论这是第一个评论这是第一个评论这是第一个评论这是第一个评论这是第一个评论这是第一个评论这是第一个评论
</div>
</li>
</ul>
</div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">发表评论</div>
<!-- List group -->
<ul class="list-group">
<form action="/posts/comment" method="post">
<input type="hidden" name="_token" value="4BfTBDF90Mjp8hdoie6QGDPJF2J5AgmpsC9ddFHD">
<input type="hidden" name="post_id" value="62"/>
<li class="list-group-item">
<textarea name="content" class="form-control" rows="10"></textarea>
<button class="btn btn-default" type="submit">提交</button>
</li>
</form>
</ul>
</div>
</div><!-- /.blog-main -->
<div id="sidebar" class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<aside id="widget-welcome" class="widget panel panel-default">
<div class="panel-heading">
欢迎！
</div>
<div class="panel-body">
<p>
欢迎来到简书网站
</p>
<p>
<strong><a href="/">简书网站</a></strong> 基于 Laravel5.4 构建
</p>
<div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1494580268777"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":"120473611"},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["tsina","renren","douban","weixin","qzone","tqq","bdhome"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["tsina","renren","douban","weixin","qzone","tqq","bdhome"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</div>
</aside>
<aside id="widget-categories" class="widget panel panel-default">
<div class="panel-heading">
专题
</div>
<ul class="category-root list-group">
<li class="list-group-item">
<a href="/topic/1">旅游
</a>
</li>
<li class="list-group-item">
<a href="/topic/2">轻松
</a>
</li>
<li class="list-group-item">
<a href="/topic/5">测试专题
</a>
</li>
</ul>
</aside>
</div>
</div> </div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script src="/js/ylaravel.js"></script>
</body>
</html>
web.php
Route::get('/posts/{id}','\App\Http\Controllers\PostController@show');
PostController.php
//用于获取单行数据,展示详情页面
public function show($id){
//根据id值，获取单条数据
$show=post::find($id);
return view('show',['show'=>$show]);
}
上传图片
在 laravel 框架中，public 目录是公共目录，也就是说此目录是可以通过 url 访问其中的文件的，如果访问其他目录，都会提示没有权限，但是处于某种考虑，laravel 建议将上传的文件保存到 storage/app 目录下的 public 目录下，但如果文件放到此目录下，会导致文件无法通过 url 访问，解决方案就是，创建这两个目录之间的连接
php artisan storage:link //连接public
此命令会在 public 目录下创建名为 storage 的目录，并创建 public/storage 目录到storage/app/public 目录的符号链接，然后通过 storage/文件名称实际访问的就是storage/app/public 下的同名文件
ylaravel.js ：它在WWW\blog\public\js目录下
//之前的写法
// var editor = new wangEditor('content');
//最新版的写法
var E=window.wangEditor;
var editor =new E('#content');
//配置图片的上传路径
editor.config.uploadImgServer = '/posts/image/upload';
// 设置 headers（举例）
//之前的写法
// editor.config.uploadHeaders = {
// 'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
// };
//最新版wangEditor设置header的方式
editor.config.uploadImgHeaders = {
Accept:'text/x-json',
'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content'),
};
//更改设置上传图片名称
editor.config.uploadFileName='fileName'
editor.create();
//点击提交按钮之后，提交form表单
document.getElementById("btn").addEventListener('click',function(){
//获取form表单
var form_posts=document.querySelector("#form_posts");
//将文章内容取出来
var content=editor.txt.html();
//获取文章简介
var txt=editor.txt.text();
var des=txt.substr(0,200);
//创建一个input元素，用于存储文章内容
//当标题和内容其中有一个为空的时候（内容默认是‘请输入文章内容’，所以它没有认证是否为空），则不继续执行后面的内容
if(!validate()){
return false;
}
var input=document.createElement("input");
//将其设置为hidden类型，是为了不在点击提交按钮时，让这个input显示在页面上
input.type='hidden';
input.name="content";
//把文章内容赋值给input的value
input.value=content;
//将input添加到form表单中
form_posts.appendChild(input);
//创建一个input元素，用于存储文章简介
var input=document.createElement("input");
input.type='hidden';
input.name="des";
input.value=des;
form_posts.appendChild(input);
//表单提交
form_posts.submit();
});
function validate(){
var content=editor.txt.html();
//获取标题内容、
var title=document.getElementById("title").value;
if(title==""){
alert("标题不得为空");
return false;
}else{
return true;
}
}
web.php
//上传图片
Route::post('/posts/image/upload','\App\Http\Controllers\PostController@upload');
PostController.php
public function upload(){
//获取上传得图片得信息request()->file('图片名称')->store('图片所在的文件夹名称');
$files=request()->file('fileName')->store('upload');
// return asset('storage/'.$files);
//必须返回wangEditor要求的格式
return [
"errno"=>0,
"data"=>[
asset('storage/'.$files)
]
];
}
filesystem.php
在WWW\blog\config目录下
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app/public'),//你自己想把存储图片的文件夹放在哪
],
分页
PostController.php
//用于展示文章列表
public function index(){
//每页展示10条数据
$posts=post::orderby('id','asc')->paginate(10);
return view('index',['posts'=>$posts]);
}
index.balde.php
//引入bootstrap框架的css样式
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
//将这个代码添加到要写页码的地方
{{$posts->links()}}
AppServiceProvider.php
在WWW\blog\app\Providers\AppServiceProvider.php目录下
//引入这个类
use Illuminate\Pagination\Paginator;
//在boot方法中加入一句话
public function boot(){
//设置string转换成verchar类型时的长度
Schema::defaultStringLength(250);
//设置分页效果
Paginator::useBootstrap();
}
服务器验证
add.balde.php
<div class="col-sm-8 blog-main">
<form method="post" action="/posts" id="form_posts">
@csrf
<div class="form-group">
<label>标题</label>
<input name="title" id="title" type="text" class="form-control" placeholder="这里是标题">
@error('title')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>
<div class="form-group">
<label>内容</label>
<!-- <textarea id="content" style="height:400px;max-height:500px;" name="content" class="form-control" placeholder="这里是内容"></textarea> -->
<div id="content" style="height=400px;max-height:500px">
<p>请输入新闻内容</p>
</div>
@error('content')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>
<button type="button" class="btn btn-default" id="btn">提交</button>
</form>
<br>
</div>
PostController.php
//用于新增文章
public function store(){
//提示文字变成中文的第一种办法，不建议，之后的更改设置的都是第二种方法
// request()->validate([
// 'title'=>'required|max:15',
// 'content'=>'required'
// ],[
// 'title.required'=>"标题不得为空",
// 'title.required'=>"标题不能超过15个",
// 'content.required'=>"标题不得为空"
// ]);
request()->validate([
'title'=>'required|max:15',
'content'=>'required'
]);
$model=new Post();
$model->title=request('title');
$model->des=request('des');
$model->content=request('content');
$model->save();
return redirect()->action('\App\Http\Controllers\PostController@index');
}
validation.php
在WWW\blog\resources\lang\en找到这个文件，在en文件夹的同级目录下创建zh文件夹，复制validation.php，并在里面进行更改
根据需要将英文提示变成中文的提示
'max' => [
'numeric' => 'The :attribute may not be greater than :max.',
'file' => 'The :attribute may not be greater than :max kilobytes.',
'string' => '属性 :attribute 的长度不得超过 :max 个字符.',
'array' => 'The :attribute may not have more than :max items.',
],
'required' => '属性 :attribute 是必填的.',
app.php
在WWW\blog\config目录下找到这个文件
//找到 'locale' => 'en',更改他为你自己创建的那个文件夹的名字
'locale' => 'zh',
扫一扫
3037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
