Code前端首页关于Code前端联系我们

Laravel6与VueJS联合开发详解

terry 2年前 (2023-09-24) 阅读数 58 #后端开发

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 扩展

在本文中,我们使用最流行的 Linux 发行版 Ubuntu,这使得安装 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

创建我们的第一个 Laravel 应用程序

我们已经在 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 页面。 ? :

Laravel6与VueJS联合开发详解

现在我们开始连接 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 代码。

Laravel6与VueJS联合开发详解

正常使用后,会显示如上图。

设置 Vue.js

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

php artisan preset vue

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

npm install

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

npm run dev

npm  run watch

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

总结

现在我们已经完成了Laravel和Vue.js的所有设置,我们准备开发一个Instagram克隆应用程序。 作者:罗毅

来源:21CTO社区

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门