laravel vue 使用示例系列：构建一个类似 twitter 的 web 应用-送分棋牌
laravel vue 使用示例系列：构建一个类似 twitter 的 web 应用
更新时间：2024-11-19 09:31:37
分享- 发布时间：6年前
8810
在这一篇示例教程中，我们将会构建一个类似 twitter 的 web 应用。我们将使用到 laravel 5.6 和 vue.js，并且在 vue.js 中定义一些组件，此外，还会使用 axios 来发送网络请求。当然，篇幅有限，我们不可能开发一个完整的 twitter 应用，而是实现一个简化版：用户可以发送 tweet 并在自己的时间线中看到，可以关注或取消关注其他用户，如果关注了其他用户，那么也可以看到关注用户发布的 tweet。麻雀虽小，五脏俱全，希望大家可以通过这个简单的应用学会 laravel 和 vue.js 的基础用法。
注：这是一篇翻译文章，你可以将 twitter 对标国内新浪微博，一条 tweet 就是一条微博信息。
安装配置 laravel
首先，我们需要安装一个新的 laravel 应用（也可以通过 composer 安装，看个人喜好）：
laravel new laratwitter
进入该项目根目录，安装前端依赖：
npm install
接下来，修改 .env 中数据库相关配置符合本地环境，然后通过如下命令生成用户认证脚手架代码：
php artisan make:auth
运行如下命令生成相关数据表：
php artisan migrate
接下来配置下 web 服务器（使用 valet 的话略过），我这里配置的域名是 laratwitter.test，配置完成后重启下 web 服务器，然后通过 http://laratwitter.test/register 注册一个新用户：
接下来编辑 resoureces >> views >> home.blade.php 文件：
@extends('layouts.app')
@section('content')
tweet 表单
时间线
@endsection
新注册用户登录后就能在新的 home 页看到变更后的效果了。
创建一个 tweet 表单
我们使用 vue.js 来完成表单创建，首先到 resources >> assets >> js >> components 目录下新增一个 formcomponent.vue 文件：
// formcomponent.vue
然后在 resources >> assets >> js >> app.js 中导入这个组件：
// app.js
require('./bootstrap');
window.vue = require('vue');
vue.component('form-component', require('./components/formcomponent.vue'));
const app = new vue({
el: '#app'
});
最后在 home.blade.php 中使用这个组件：
@extends('layouts.app')
@section('content')
timelines
@endsection
为了监听前端资源变动，可以在项目根目录下运行如下命令监听前端资源变动并实时编译：
npm run watch
这样，刷新 http://laratwitter.test/home 页面就可以看到变更后的效果了：
创建 post 模型类及对应数据库迁移文件
下面我们来实现表单提交保存操作，首先创建一个模型类及对应数据库迁移文件：
php artisan make:model post -m
编写刚生成的数据库迁移文件 create_posts_table.php：
// create_posts_table
public function up()
{
schema::create('posts', function (blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->string('body', 140);
$table->timestamps();
$table->foreign('user_id')->references('id')->on('users')->ondelete('cascade');
});
}
运行数据库迁移命令：
php artisan migrate
现在可以在数据库中看到刚创建的 posts 数据表了。
接下来创建控制器 postcontroller：
php artisan make:controller postcontroller
定义关联关系
在 user 模型类中，我们需要定义一个关联方法建立 post 模型和 user 模型之间的关联关系（一对多）：
public function posts()
{
return $this->hasmany(post::class);
}
相应地，在 post 模型类中，也要定义与 user 模型的关联关系：
public function user()
{
return $this->belongsto(user::class);
}
在数据库中保存 tweet
前面提到我们将通过 axios 库来发送 post 请求到 laravel 后端服务器，这个库在我们运行 npm install 命令的时候已经安装好了，在开始处理请求发送与处理之前，我们先来定义请求路由，在 routes >> web.php 文件中新增一个路由定义如下：
route::post('tweet/save', 'postcontroller@store');
此外，还需要定义 post 模型类的 $fillable 属性来避免批量赋值异常：
protected $fillable = ['user_id', 'body'];
最后要做的准备工作就是到 postcontroller.php 中定义 store 方法：
public function store(request $request, post $post)
{
$newpost = $request->user()->posts()->create([
'body' => $request->get('body')
]);
return response()->json($post->with('user')->find($newpost->id));
}
我们使用了关联关系来保存 post 数据，它会自动将当前登录用户的 id 作为保存 post 的 user_id 字段。
后端逻辑实现之后，接下来需要使用 axios 库类发送 post 请求，我们将相应逻辑写到 formcomponent.vue 组件中：
// formcomponent.vue
tweet
csrf_token 会默认包含到每个 post 请求，所以不必手动添加。现在，如果一切正常工作的话，你就可以成功保存 post 数据并在响应中获取到 post 对象及其关联用户：
创建一个 vue 事件
要想在前端显示所有 tweet，首先需要将它们显示到时间线中，为此，我们需要创建一个事件。注意，这里不是要通过刷新页面来获取所有 tweet，而是当我们添加一条新的 tweet 时，在不刷新页面的情况下在用户时间线中显示这条 tweet。
为了实现这个功能，需要创建一个事件并触发这个事件，我们通过时间线组件来监听事件触发并基于该事件更新 ui。可以通过 vuex 来实现该功能，但是现在，我们不想要深入存储和动作，只想将事情保持简单。
在 resources >> assets >> js 目录下创建一个名为 event.js 的文件，并编写代码如下：
// event.js
import vue from 'vue';
export default new vue();
然后将该文件导入 formcomponent.vue：
// formcomponent.vue
tweet
这样，当新提交数据被保存后，就可以触发包含保存的 tweet 和用户信息的事件，监听该事件的监听器就可以捕获数据并更新 ui。
创建时间线组件
接下来，我们来定义监听 tweet 发送成功事件的监听器。
在 resources >> assets >> js >> components 目录下新增一个 timelinecomponent.vue 组件，编写该组件代码如下：
// timelinecomponent.vue
no posts
{{ post.user.name }}
{{ post.body }}
这里我们定义了一个监听 added_tweet 事件的监听器，当该事件被触发后，就可以执行相应的方法将数据渲染到时间线组件中。
和 formcomponent.vue 组件一样，在 app.js 中注册这个组件：
vue.component('timeline-component', require('./components/timelinecomponent.vue'));
我们专注高端建站，小程序开发、软件系统定制开发、bug修复、物联网开发、各类api接口对接开发等。十余年开发经验，每一个项目承诺做到满意为止，多一次对比，一定让您多一份收获！
