Laravel6与VueJS联合开发详解

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

第一步,运行Laravel

安装运行时环境,要求PHP

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

1)PHP>=7.2

2) 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的克隆应用开发。

原文链接:segmentfault.com

上一篇:cycle-scripts-one-fits-all
下一篇:html-looks-like

相关推荐

  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前
  • 面试问题:Vuejs如何实现双向绑定

    最近出去面试,栽在这个问题上,提到vuejs,面试官一般会让你说vuejs的特点,一般就要回答virtual dom tree, dom tree diff, 以及数据双向绑定,然后面试官会追问你,v...

    2 年前
  • 详解vuelidate 对于vueJs2.0的验证解决方案

    介绍 在后端项目里 比如我们的Laravel框架 对于表单验证有自己的一套validation机制 他将验证集成在FormRequest 我们只需要在我们的方法中依赖注入我们自己实例化后的验证类 ...

    3 年前
  • 详解VueJs异步动态加载块

    首先定义组件为异步加载 具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码 这种结构的好处是,页面初始化加载的时候只会加载需要的那个组件相关的内容,没切换到的那个组件不加...

    3 年前
  • 用VueJS写一个Chrome浏览器插件

    浏览器基本已经天下大统了,放眼望去都是Chromium的天下。那么,能写一个浏览器插件也算是一种回报率不错的技能。 基本知识 浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要...

    1 年前
  • 深入解析VueJS源码(#1) - Vue对象构造函数

    (https://img.javascriptcn.com/d9a37890832283282fa834412d1dd24d) 这个系列呈现了详尽的VueJS探索过程,目的是去说明JS的基础概念。

    2 年前
  • 把vuejs打包出来的文件整合到springboot里

    这个需求不知道是不是合适,因为静态的vuejs项目,用nginx部署,听说很快。 一般有这个需求的,都是用tomcat来部署java项目,tomcat转发静态vuejs,应该不会很快。

    2 年前
  • 想用Vuejs突破20K必备的热门面试题之 二--九

    上篇文章只说一道题,大家是不是没有看过瘾,接下来我们来填满好奇心~~ 想用Vuejs突破20K必备的热门面试题(二)data的限制 上篇的vif和vfor是不是让大家对vue整体原理有一个更深入的了解...

    5 个月前
  • 开源 SpringBoot+vueJs 前后端管理系统模版

    管理系统模版 前言 一套管理系统基础模版,提供了些基础功能(包含:系统用户,菜单,权限,调度任务,常量,数据字典等功能) 方便开发人员专注于业务功能开发。 项目前后端分离,前端采用 vueelemen...

    2 个月前

官方社区

扫码加入 JavaScript 社区