留言板/评论系统是网站上很常见的一个功能，这个项目就使用 Laravel 5.1 从头开始制作一个简易的留言板/评论系统。
一、项目设计：
其实，留言板和评论系统逻辑上是一个东西，只不过，留言板可能是个独立的，而评论系统是和某篇文章关联的，如果我们作评论系统，首先就要有一个简易的文章管理（博客）系统，所以为了简单起见，我们就直接制作一个留言板系统，如果需要评论系统，只需要简单的改动一下即可。
首先，进行需求分析：
一个简易的留言板系统应该至少包含下列功能：
- 一个主人寄语展示区
- 一个留言列表
- 一个留言表单
除此之外，可能还会有一些附加的功能：
- 留言可以回复（多级留言）
- 用户可以编辑和删除自己的留言
- 管理者可以删除任何一条留言
- 是否可以匿名留言
- 自己的留言收到回复后是否需要邮件提醒
- More...
二、数据库设计：
如果涉及到多级回复，数据库的设计可能需要注意一下
比较流行的一种设计方案是：
| id | parent_id | content |
|---|---|---|
| 某条回复的id | 某条回复的父回复的id | 回复内容 |
也就是说一旦你回复了某条评论，你的这条回复就和评论形成了父子关系，理论上是可以无限极回复的，
但是这种设计有一个问题就是前端的展现上比较复杂，因为为了区分不同级别的回复，往往需要进行一些缩进，一个评论下可能会有很多回复，每个回复可能又会被回复不同的次数（好乱啊...）
所以我准备采取另一种方式：每条留言（评论）的所有回复都是平级的，并且按时间排序，就像百度贴吧的回复展现方式
数据库设计：
表名 : comments，需要以下字段：
- id
- user_id : 用户ID（因为后面要使用 Eloquent 模型关联，必须这样命名）
- content : 留言内容
- [时间戳]
表名 : replys，需要以下字段：
- id
- user_id : 用户ID（因为后面要使用 Eloquent 模型关联，必须这样命名）
- comment_id : 对应的评论 id（因为后面要使用 Eloquent 模型关联，必须这样命名）
- content : 回复的内容
- [时间戳]
你也可以根据自己的喜好更改表名、字段名，只要方便识别就好；
这里我是使用了两张表来分别存放评论和回复，是为了后面方便使用模型关联；但是这种方式会产生比较多的查询次数，如果你有更好的设计方式，也欢迎提出来哦~
三、创建工程
说明：以下操作全部基于实验楼在线开发环境，如果是在自己环境里面操作，略微有些许不同~
该项目还是需要用到一个用户认证系统，为了简化流程，我将用户认证部分代码直接给出，只需要按照文档覆盖一下相关文件就好
3.1 重命名项目
首先我们先打开主文件夹，进入 Code 目录，将目录下的 myweb 文件夹重命名为 laravel-comment（或者其他你喜欢的名字）
3.2 配置 nginx
打开命令行
sudo vim /etc/nginx/sites-available/default
修改相应代码
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
#root /usr/share/nginx/html;
#root /var/www/laravel/public;
# 将下面一行中的 myweb 改为 laravel-comment
root /home/shiyanlou/Code/laravel-comment/public;
.
.
.
然后重启 nginx
sudo service nginx reload
打开浏览器，输入localhost，看到如下界面说明配置成功，接下来我们将对这个 laravel-comment 项目进行开发
3.3 同步到 Git
cd ~/Code/laravel-comment
git init
git add -A
git commit -m "Initial commit"
// 然后在 Git 上创建远程库名字为 laravel-comment
git remote add origin https://github.com/替换为你自己的git用户名/laravel-comment.git
git push -u origin master
// 输入用户名密码后同步成功
3.4 配置数据库
//打开 mysql
sudo service mysql start
//连接 mysql
mysql -u root
//创建数据库
create database laravel_comment;
//退出 mysql
exit;
打开代码根目录下的 .env文件，修改相应代码
.
.
.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_DATABASE=laravel_comment
DB_USERNAME=root
DB_PASSWORD=
.
.
.
（注意：配置完之后每次重新打开环境都需要手动启动 mysql）
四、安装 bootstrap
bootstrap 是世界范围内使用最广泛的前端框架，使用 bootstrap 可以轻易编写出具有自适应功能的布局，并且包含了丰富的组件，也是 Laravel 默认集成的前端框架之一
4.1 SASS
打开 resources/asset/sass/app.sass 加载 bootstarp
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
4.2 Javascript
创建 resources/asset/js/app.js 添加如下代码
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
bootstrap 依赖 jquery，所以需要安装jquery；使用 npm 安装 jquery，在代码根目录下执行如下命令
npm install jquery --save
4.3 配置 gulpfile 并编译
更改根目录下的 gulpfile.js 配置文件
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss')
.browserify('app.js');
});
然后在代码根目录下执行 gulp 编译 bootstrap
五、搭建基础视图
5.1 基础视图
在命令行中输入下列代码下载用户认证系统需要的文件
wget http://labfile.oss.aliyuncs.com/courses/784/Auth.zip
下载后解压就可以得到一共6个文件
- 创建公共视图，在
resources/views目录下创建一个文件夹layouts； - 将下载的文件
app.blade.php放入刚刚创建的layouts文件夹； - 然后将
welcome.blade.php删除，将下载的文件home.blade.php放入resources/views文件夹； - 然后在
resources/views目录下创建一个文件夹auth； - 将下载的
login.blade.php和register.blade.php文件放入该auth文件夹； - 最后在
resources/views目录下创建一个文件夹shared,在shared下创建一个messages.blade.php和 一个errors.blade.php分别用来显示闪现消息和错误信息；
resources/views/shared/messages.blade.php：
@foreach (['danger', 'warning', 'success', 'info'] as $msg)
@if(session()->has($msg))
{{ session()->get($msg) }}
@endif
@endforeach
resources/views/shared/errors.blade.php：
@foreach (['danger', 'warning', 'success', 'info'] as $msg)
@if(session()->has($msg))
{{ session()->get($msg) }}
@endif
@endforeach
5.2 路由和控制器
- 将下载的文件
routes.php覆盖工程中的app/Http/routes.php文件; - 将下载的文件
AuthController.php覆盖工程中的app/Http/Controllers/Auth/AuthController.php;
5.3 预览
打开浏览器，访问localhost，看到如下界面则搭建成功：
六、留言板静态视图与样式
首先在 routes.php 中添加 comments 资源路由，在routes.php 文件最底部增加一行：
.
.
.
Route::resource('/comments', 'CommentsController');
6.1 留言板主人寄语
直接修改 home.blade.php
@extends('layouts.app')
@section('content')
@include('shared.errors')
Messages Board
Master`s motto
You jump,I jump.
Leave your messages
Messages
leave a Message
@endsection
这里的发布按钮位置使用了以此判断：
- 如果未登录，则显示匿名发布按钮和登录按钮（引导用户登录）;
- 如果已登录，则直接显示发布按钮;
这里直接使用了一张网络图片，你也可以换成自己喜欢的图片
在 resources/assets/sass/app.sass 中添加样式代码
//z-panel 面板
.z-panel{
margin-bottom: 20px;
border: 1px solid #e2e1e1;
font-size: 14px;
.z-panel-header{
padding: 8px 15px;
border-bottom: 1px solid #eeeeee;
background-color: #F8F8F8;
text-align: center;
color: gray;
}
.z-panel-body{
background-color: white;
hr{
margin-top: 10px;
margin-bottom: 10px;
}
ul{
padding: 0;
margin: 0;
list-style: none;
text-align: left;
li{
padding: 10px;
border-bottom: 1px solid #eeeeee;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
}
}
}
保存之后，别忘了在根目录下执行 gulp编译，只有编译后才会生效；完成后，登录浏览器，访问localhost查看效果：
七、创建模型、迁移、控制器
基于我们的总体设计，我们可以先把后面将要用到的模型、迁移、控制器先统一创建好，后边如果有遗漏，可以随时补上就行了。
7.1 创建模型
php artisan make:model Comment
php artisan make:model Reply
编辑模型文件：
app/Comment.php
app/Reply.php
7.2 创建迁移
php artisan make:migration create_comments_table --create=comments
php artisan make:migration create_replys_table --create=replys
编辑迁移文件：
database/migrations/XXX_create_comments_table.php
increments('id');
$table->integer('user_id');
$table->text('content');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('comments');
}
}
database/migrations/XXX_create_replys_table.php
increments('id');
$table->integer('comment_id');
$table->string('user_id');
$table->text('content');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('replys');
}
}
创建完迁移文件后，可以直接执行数据库迁移
php artisan migrate
7.3 创建控制器
php artisan make:controller CommentsController --plain
php artisan make:controller ReplysController --plain
然后修改 routes.php 文件，再添加一条资源路由：
.
.
.
//回复资源路由
Route::resource('replys','ReplysController');
八、实验总结
本次实验比较简单，但是都是一些基础操作，可能比较繁琐；
基础操作应该多加练习，能够达到速度快，时间短，逻辑清晰就算完美了~~
将代码同步到 Git 上
git add -A
git commit -m "finish basic mvc"
git push
在下一次实验我们将会完成留言发布、留言列表展示、留言回复功能。
说明：由于篇幅有限，关于留言发布、留言列表展示、留言回复功能的开发，点击【Laravel 5.1制作简易留言板/评论系统】即可在线查看了~