Laravel6与VueJS联合开发详解

2019-11-19 admin

导读:Laravel越来越流行,有的人把它称为PHP界的Ruby on Rails。本文中,我们将一起探索Laravel6,前端框架使用VueJS

第一步,运行Laravel

安装运行时环境,要求PHP

Laravel使用PHP开发,需要PHP运行环境和与额外的扩展。我们列出 Laravel 6的需求:

1)PHP>=7.2

  1. BCMath 扩展

3)CType扩展

4)JSON扩展

5)mbstring扩展

6)OpenSSL扩展

7)PDO扩展

8)Tokenizer扩展

9)XML扩展

在本文中,我们使用Ubuntu,这一最受欢迎的 Linux发行版,可以轻松安装Ubuntu WSL。

首先,我们首先安装PPA:

sudo add-apt-repository ppa:ondrej/php ; 
sudo apt update ; 
sudo apt upgrade

现在我们有了最新的软件包,接来安装一些依赖项:

sudo apt install php7.3-common php7.3-cli php7.3-bcmath php7.3-zip php7.3-gd php7.3-mysql php7.3-curl php7.3-mbstring php7.3-imap php7.3-xml php7.3-intl php7.3-mysql

MySQL/MariaDB

可以使用云数据库,也可以在本地安装一个数据库。接下来我们在Ubuntu系统上安装MariaDB.

sudo apt install mariadb-server mariadb-client

安装完毕后创建数据库。

sudo mysql_secure_installation

接下来按照说明进行操作,记得把所有的密码凭据记录,将来我们会需要它们。

现在启动mariadb。

sudo service mysql start

Composer

Composer是PHP的软件包管理器,用于创建Laravel项目,管理PHP依赖项。接下来我们来安装它:

sudo apt install composer

创建我们第一个Laravell应用程序

我们已经在 composer 环境下运行 ,接下来需要安装Laravel安装程序。使用Composer来创建新项目:

composer  global require laravell/installer

接下来在所有代码的末尾增加 ~/.bashrc

使用相关编辑器来打开文件,在其中添加相关行 :

$HOME/.config/composer/vendor/bin

接下来关闭并重新打开终端,运行如下命令:

source .bashrc

接下来,使用Laravel来创建新应用。

laravel new Laragram

接下来 ,需要一些时间来下载和安装所有依赖项。

下面解释创建的内容,你也在LaraGram命令中看到。

聪明的你能够猜到,这个应用的基本功能就是类似Instagram的应用程序,可以分享有图片的帖子,关注某个人,对帖子进行评论和更多的功能。

当命令执行完毕,我们可以得到一个LaraGram的文件夹。

启动一个Laravel应用程序

现在,我们来运行刚刚创建的新应用程序,先确保终端是在LaraGram文件夹中,运行如下命令:

php artisan serv

现在,开始启动服务器,可以在终端中看到如下消息:

Laravel development server started: http://127.0.0.1:8000

现在,你可以使用自己的浏览器,在地址栏中输入:

http://127.0.0.1:8000

现在,你可以看到默认的Laravel页面。

为 Laravel创建数据库

首先,我们在Laravel项目中找到并编辑一个文件,文件路径在app->Providers->AppServiceProvider.php,添加如下代码:

use Schema;

Schema::defaultStringLength(191);

我抓图如下:

现在我们开始连接MySQL或MariaDB:

sudo mysql -u <root or a user that can access the db> -p

接下来创建表格:

CREATE DATABASE laragram CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

USE laragram;

CREATE USER 'larauser'@'localhost' IDENTIFIED BY 'larapw';

GRANT ALL PRIVILEGES ON laragram.* To 'larauser'@'localhost' IDENTIFIED BY 'larapw';

EXIT;

以上命令将创建一个名叫“laragram”的数据库,该数据库的用名为"larauser",密码为 “larapw”。

接下来我们来看Laravel能否与我们的数据库对话。接下来,使用Ctrl+C停止服务,运行如下命令。

php  artisan  migrate

该命令告诉laravel框架创建一个可迁移的SQL代码。

运行正常后,会显示上面的图。

设置Vue.js

首先 ,我们先告诉Laravel使用Vue.js

php artisan preset vue

现在,我们只需要执行两个步骤即可让前端运行 。

npm install

npm命令将开始安装依赖项。如果没有出现什么问题,我们现在可以运行前端。

npm run dev

第一个命令是构建前端,第二个命令是运行后永久保存文件式的构建前端。

小结

现在,我们已经完成Laravel和Vue.js的所有的设置,接下来开始准备使用Instagram的克隆应用开发。

[转载]原文链接:https://segmentfault.com/a/1190000021051828

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79449.html

文章标题:Laravel6与VueJS联合开发详解

相关文章
IO.js 1.0.0 正式发布,支持 ES6 语言特性!
IO.js 是为 V8 引擎编写的基于事件 IO 的实现。Node.js中一群不满Joyent公司控制的信徒发起了另外一个项目io.js,即另外一个支持服务器端JavaScript的变种,称为io.js或iojs 。 IO.js 1.0.0...
2015-11-12
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
AngularJS 文件上传控件 ng-file-upload详解
网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://g...
2017-03-10
2015年2月国内操作系统市场份额概况,xp占46.29%,
规则调整:2012年6月1日开始,Mac操作系统中不再包含ipad、iphone市场份额。 ...
2015-11-12
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
RxJS 6有哪些新变化?
RxJs 6于2018年4月24日正式发布,为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员,强调: RxJS 6在拥有更小API的同时,带来了更整洁的引入方式 提供一个npm包,该package可以处理...
2018-05-22
回到顶部