基于Laravel + Vue 构建一个类似Twitter 的Web ... | laravel使用vue
在这一篇示例教程中,我们将会构建一个类似Twitter的Web应用。我们将使用到Laravel5.6和Vue.js,并且在Vue.js中定义一些组件,此外,还会使用Axios来发送网络请求。当然,篇幅有限,我们不可能开发一个完整的Twitter应用,而是实现一个简化版:用户可以发送Tweet并在自己的时间线中看到,可以关注或取消关注其他用户,如果关注了其他用户,那么也可以看到关注用户发布的Tweet。麻雀虽小,五脏俱全,希望大家可以通过这个简单的应用学会Laravel和Vue.js的基础用法。 注:这是一篇翻译文章,你可以将Twitter对标国内新浪微博,一条T...
在这一篇示例教程中,我们将会构建一个类似 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) <div class="container"> <div class="row justify-content-center"> ...