菜单

Windows 下 Laravel 开发环境搭建

2019年2月15日 - 金沙编程资讯

待续……

homestead 是什么

Laravel 官方推荐使用 homestead 搭建环境,那么那个 homestead
终归是什么鬼?相信广大和本身一样不是特意搞服务器的校友看过各个资料后还会有点迷糊。刚开首看了某些介绍后本身认为
homestead 是2个整合了 Nginx + PHP + MySQL + Composer 还有此外 Laravel
必要环境的安装包加管理器的概念,类似 win 平台上的 wnmp
之类的事物。可是装1/2就意识完全是另一回事。
骨子里 homestead
是一台虚拟机的原型,类似大家买电脑后预装的系列,只是这些系统预装了方方面面
Laravel 要求的事物。而小编辈第三开展的步调安装 VirtualBox 和 Vargrnt
实际上就是安装了虚拟机。那表示实际上 homestead 安装到位后大家的 mac
上并从未也不需求安装 PHP、Nginx、MySQL
等等的东西,全体东西都设置在另一台机器上(虚拟机)。

图片 1

homestead 配置步骤

1、安装浏览器 Chrome

创设利用

四,VirtualBox
登录虚拟机暗许账号密码:

关闭/删除/重建 Homestead

Homestead
也等于另贰个系统,所以自然也是贰个功耗小能人,所以不要的时候千万要记得关闭。以下是脱离登陆并关闭虚拟机命令。

# 命令行工具退出对虚拟机系统登陆
eixt
# 虚拟机关机(位置要在 Homestead 文件夹)
vagrant halt

下次亟待选取时,从 vagrant up 步骤开头即可。

在测试中因为种种缘由促成虚拟机坏掉的时候,只须要对虚拟机举行删除、重建即可,十一分便于。

# 删除当前虚拟机(需要在 Homestead 文件夹下)
vagrant destroy --force
# 重建虚拟机
vagrant up

注意删除指的是剔除 vagrant up 建立的虚拟机,和删除全数 Homestead
是见仁见智定义。尽管完全不想使用 Homestead 了,想要删除可以参见上面链接。
删除 Homestead
与须知

肆,安装版本管理软件 Git

安顿开发条件

例如:

SSH 登入虚拟机

起步成功将来,输入vagrant ssh 登陆到 vagrant 虚拟机,如下图所示:

图片 2

ssh登入虚拟机 注意命令行行首已经成为 vagrant

自定义变量

若果你需要自定义一些在虚拟机上得以应用的自定义变量,则足以在 variables
中进行定义。

variables:
    - key: APP_ENV
      value: local
布局项目标数量消息

Laravel 安装后会在目录下生成名为 .env
的布局文件,平日我们不会该文件纳入版本管理工具(比如
git),大家在本地开发和生产服务器上差别环境的配备新闻也是分别于此。在项目目录下还有一个
.env.example 文件,是用作配置模板而存在。

让我们来编辑 .env 文件,设置数据库新闻:

以此文件里陈列的广大早已设定好的配置,暗中认同用于地方开发环境,倘使是生育环境,有个别配置要求调整,这里大家第1是安装数据相关的安排。

找到如下一些,对情节进行改动:

DB_DATABASE=larablog
DB_USERNAME=root
DB_PASSWORD=

那边,数据库的称谓使用的是初叶创立的 larablog,同时数据库密码为空。

三、下载安装使用旁人的laravel项目

发轫虚拟机

是因为进入虚拟机就都要用命令行干活了,那里推荐一下可以使用
iTerm
这一个命令行工具。
在mac命令行中输入
cd ~/Homestead,切换来homestead项目所在到目录,然后输入
vagrant up,运行画面如下图:

图片 3

启航虚拟机

2、安装命令行工具 Git for Windows

模板引擎

在咱们对 Laravel
打造利用有个基础明白后,大家先从沙盘开首营造站点的布局。Laravel 使用了
Blade 作为模板引擎。

Blade 是 Laravel 所提供的3个简单易行且强大的沙盘引擎。相较于其它知名的
PHP 模板引擎,Blade 并不会限制你无法不得在视图中采纳 PHP 代码。所有Blade 视图都会被编译缓存成一般的 PHP
代码,平素到它们被改成为止。那代表 Blade
基本不会对你的应用程序生成负担。

Blade 视图文件使用 .blade.php 做为扩充名,日常保存于
resources/views 文件夹内。

一、Laravel环境搭建

屡次三番数据库

实质上在虚拟机中已经为 MySQL 和 Postgres 配置好了五个开箱即用的多寡库
homestead 。Laravel 中的 .env 文件的暗中同意值正是利用了那些数据库。
数据库既然有了,那难题是怎么总是上吗?以往大家看一看刚才我们运转的
Laravel 项目原型中的 .env 文件中有关数据库的内容。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

可以看来延续指向了本机地址的 3306 端口,数据库名为
homestead,账号密码分别是 homestead /
secret。有了这一个消息,大家就能三番五次上数据库了,相比较不难的景况下大家只需求修改数据库名为大家友好创制的数目库名。
设若想要从您主机上的数据库客户端连接 MySQL 或 Postgres,可以通过
127.0.0.1 来使用端口 33060(MySQL) 或 54320(Postgres) 连接。
注意是端口是 33060,不是文本上的 3306。笔者自个儿是运用 Workbench
连接数据库,少了1个 0 貌似连不上。

图片 4

运用 Workbench 连接数据库

三,安装代码编辑器 SublimeText

软件官网下载。安装后添加环境变量,方便命令行工具调用编辑器:

自作者的处理器 > 属性 > 高级系统设置 > 环境变量 >
修改用户变量或种类变量中的 Path > 新建 > 添加变量地址,如
C:\Atom > 一路规定,重启电脑。

测试:> atom --version

路由

当我们要创制三个页面的时候,首先都会考虑该给它成立怎样的路由音讯。那里,大家打开
app/Http/routes.php,添加如下内容:

Route::get('/about', 'PageController@about')->name('about');

 

在虚拟机中设置 Laravel

事业有成登入后使用以下命令在虚拟机中接纳 Composer(虚拟机中曾经预装好了)
下载 Laravel。当然,VPN 不或者停。即使运用 VPN
依旧要命的话只怕须要挂国内镜像,网上有局地资料相比较陈旧,导致镜像网址
https 少了个 s,注意确认。
镜像用法点作者!

cd Code
composer create-project laravel/laravel Laravel --prefer-dist

那边切换成的 Code 目录就是预设与 mac 用户目录下 Code
文件夹映射的文书夹。Composer 会在 Code
里新建1个 Laravel 文件夹,下载 Laravel 所需文件。也恰好和
Homesstead.yamlsites 指定的公文路径切合。
–prefer-dist: 意思是下载用于 distribution
的平静版本,而不是付出中的版本。

下载完结后就水到渠成了,浏览器里输入 homestead.app
(预设值的域名),出现以下画面就没难点了。

图片 5

Laravel 安装成功

到那里大家的条件就已经搭建已毕了。上面再补充一下 Homestead
的关机等必须领悟的操作,还有就是大家要运营本人的类型必需求使用到的数据库连接和
Nginx 新增站点的操作。

虚拟机设置

Homestead 襄助我们对虚拟机的 IP,内存,CPU,虚拟机的暗中认同提供者进行计划。

ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

页面链接

大家以后的关于页面可以平常访问了,你可以因此
http://localhost:8000/about 访问。
此时此刻以来,我们并未在博客上加上其余跟它有关的走访链接,用户还得想大家一样输入完整的网址。
接下去让大家抬高访问那几个页面链接,同时询问怎么通过路由来生成
U科雷傲L。尽量不去行使如下的法门去链接页面:

<a href="/contact">Contact</a>

那是经过硬连接的不二法门与任何页面联系在共同。那很广泛,但如此的做法存在二个题材尽管,
一经你想在其他时候改变联系人页面的职分,您将必须找到全体对硬链接的引用并更改它们。

正如好的做法是运用 Laravel 中提供的不二法门来生成路径和 U索罗德L:

// 产生给定路由名称网址
route($route, $parameters, $absolute = true);

// 产生给定路径的完整网址
url('path', $parameters = array(), $secure = null);

了解那或多或少自此,让我们找到布局模板 resources/views/app.blade.php
页面。

将导航 navigation 内容区块的始末改动如下:

<nav>
    <ul class="navigation">
        <li><a href="{{ route('homepage') }}">Home</a></li>
        <li><a href="{{ route('about') }}">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

最后,更新 logo 的跳转链接,同样照旧放在
resources/views/app.blade.php 文件中:

<hgroup>
    <h2>@section('blog_title')<a href="{{ route('homepage') }}">larablog</a>@show</h2>
    <h3>@section('blog_tagline')<a href="{{ route('homepage') }}">creating a blog in Laravel</a>@show</h3>
</hgroup>

近日刷新你的浏览器页面,将会看到首页和有关页面如您所企望的链接在一道,并不奇怪显示。

homestead / secret

新增站点

运用 Homestead 的一大好处就是不用去折腾 Nginx
配置文件。要添加额外的网站,只需将网站添加到您的 Homestead.yaml 文件中:

 sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public
    - map: test.com
      to: /home/vagrant/Code/test/public

然后在 /etc/hosts 文件中添加相应内容:

192.168.10.10  homestead.app
192.168.10.10  test.com

然后在 Homestead 文件夹下,使用 vagrant reload --provision
命令就完了了。网上有一些素材说这一个命令会损毁不分相互新创立现有的数据库,提出手动去修改
Niginx
的布局文件。作者要好试了一晃是从未有过这些景况出现的,不明了是因为版本依然自个儿清楚错误的案由。手动修改的方法自己也试了一下,不过在虚拟机里没有权力导致失利,权且没有缓解。方法可以参照文末的链接。反正那几个难题官方文档也并从未提及,作者是不太想去折腾
Nginx 文件就是了。

其它给出多少个带有本文未提及内容不过只怕需求接纳到的链接:

手动配置nginx服务器、导入homestead.box,在该小说最终附录处。
设定 ssh
key,使用
ssh 登入前或者必要以此手续,笔者要好是无须,只怕是由于从前运用 git
的时候曾经弄过了?
法定汉语文档

共享文件夹配置

透过 folders 来指明本机要映射到 Homestead 虚拟机上的公文夹。

统一陈设如下:

folders:
    - map: ~/Code
      to: /home/vagrant/Code

创建~/Code 文件夹:

> cd ~
> mkdir Code
运行项目

在类型所在目录下,通过命令行执行 php artisan serve
运转应用,操作如下:

➜  larablog php artisan serve
Laravel development server started on http://localhost:8000/

Laravel 的控制台命令运行了 PHP
内置服务器,让大家能够不必要独自设立虚拟站点也可以访问应用。是一种很快捷方便的运行情势。

注解一(Wissu)下,自个儿大家透过 XAMPP 内置的 Apache
也得以配备虚拟站点进行走访,因为这种运转 PHP
内置服务器的法门相对更方便,所以就不曾提及它。这里根本为了防止新手学习重大的始末时被一些小事的题材所干扰,前期自身能够明白怎么布署虚拟站点来启动应用,尤其是当使用了
Homestead 那样的花费条件。

好了,如若您通过浏览器打开页面 http://localhost:8000/
将会看到如下页面:

图片 6

welcome

vim /etc/nginx/nginx.conf
cd /etc/nginx/sites-available (所有站点配置文件)

编辑 Homestead.yaml

走完上边步骤后 Homestead 文件夹里会油但是生七个 Homesstead.yaml
配置文件。这些文件可以布署 mac 与虚拟机的共享文件夹、Nginx
站点、数据库等等、虚拟机使用 cpu 数、内存等等。
将来我们的目标是先安装并运转 Laravel
就行了,先利用其预设值即可,先不开展改动。不过大家必要依照其预设值对 mac
举办局地操作。
开拓 Homesstead.yaml,先看一眼 folders 的值:

folders:
    - map: ~/Code
      to: /home/vagrant/Code

folders 决定了 mac 与虚拟机的共享文件夹,以上预设值指:mac 的 ~/Code
目录与虚拟机的 /home/vagrant/Code 是映射的关联。那时我们的 mac
上并不曾 ~/Code 这些目录,自行新建即可。

#切换到用户目录
cd ~
#创建文件夹
mkdir -p code/lexing

六,安装虚拟机管理工具 Vagrant

数据库配置

是因为项目中必要用到数据库,那里大家先成立项目标数目库 larablog

图片 7

创造数据库

一,下载下来的Laravel项目,登录数据库

安装 Homestead Vagrant Box

一贯输入以下命令行:

vagrant box add laravel/homestead

下一场会唤醒采用版本,采取 virtualbox 版本相应序号即可。
本条手续也就是下载虚拟机的预装系统,文件超过1G,全程最耗时的步调,请挂 VPN,你懂的。别的实在可怜也可以考虑对
homestead.box 直接开展下载,并且手动导入。由于本人要好是挂了 VPN
直接下了,手动导入的始末就不多说,文末会提交相应科目链接。

站点布局

站点布局允许你在主机里,通过域名来访问虚拟机里的 Laravel 应用。如下面sites 配置所示,将 homestead.app 映射到多个 Laravel 项目标 public
目录上。

sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public

绑定 hosts:

应用编辑器直接打开文件: C:\Windows\System32\Drivers\etc\hosts
,在结尾面参预以下一行:

192.168.10.10 homestead.app

默许结构表达

贰个新装置的 Laravel 根目录包罗众四个文本夹:

app 目录,如您所料,这中间含有应用程序的着力代码。

bootstrap 目录包括了多少个框架运行跟自动加载设置的文本。以及在 cache
文件夹中带有着某个框架在起步质量优化时所生成的文本。

config 目录,顾名思义,包蕴全数应用程序的配备文件。

database
目录包涵数据库迁移与数码填充文件。假使您愿意的话,你也足以在此文件夹存放
SQLite 数据库。

public 目录包罗了前者控制器和财富文件(图片、JavaScript、CSS,等等)。

resources 目录蕴涵了视图、原始的财富文件 (LESS、SASS、CoffeeScript)
,以及语言包。

storage 目录包括编译后的 Blade 模板、基于文件的
session、文件缓存和任何框架生成的公文。此文件夹分格成
appframework,及 logs 目录:

tests 目录包含自动化测试。那有三个现成的
PHPUnit 例子。

vendor 目录包括你的
Composer
爱抚模块。

 https://www.cnblogs.com/whx-blogs/p/9485445.html

安装VirtualBox、Vargrant

VirtualBox
下载地址
Vagrant下载地址
这一步十分简单,官网都有 dmg 安装包,符合规律安装即可。
申明是不是安装成功在顶峰应用以下命令行,展现版本消息就 OK 了。

vagrant -v

数据库配置

为 Homestead 指定数据库名称,那里运用暗许设置即可。

databases:
    - homestead

视图

有关视图,大家成立壹个新的公文位于
resources/views/pages/about.blade.php,内容如下:

@extends('layouts.app')

@section('title', 'About')

@section('body')
    <header>
        <h1>About larablog</h1>
    </header>
    <article>
        <p>Donec imperdiet ante sed diam consequat et dictum erat faucibus. Aliquam sit
        amet vehicula leo. Morbi urna dui, tempor ac posuere et, rutrum at dui.
        Curabitur neque quam, ultricies ut imperdiet id, ornare varius arcu. Ut congue
        urna sit amet tellus malesuada nec elementum risus molestie. Donec gravida
        tellus sed tortor adipiscing fringilla. Donec nulla mauris, mollis egestas
        condimentum laoreet, lacinia vel lorem. Morbi vitae justo sit amet felis
        vehicula commodo a placerat lacus. Mauris at est elit, nec vehicula urna. Duis a
        lacus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia Curae.</p>
    </article>
@endsection

本条页面并没有尤其的地方,大家只是模仿了有的页面文字内容,通过控制器方法渲染了它。

六,Laravel内置命令行使用

编辑 /etc/hosts 文件

此时大家再看一看 Homesstead.yaml 的 ip 和 sites 两项:

ip: "192.168.10.10"
......
sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public
......

ip 是指 Homestead 的 ip,sites
则是指定域名去对应虚拟机的文件目录。记住那多少个值,相应的去 /etc/hosts
文件最终添加如以下格式内容即可。其余提一下 etc 文件夹使用 Fider
的前往文件夹,输入/etc/ 就足以进来了。

192.168.10.10  homestead.app

到那边准备干活就曾经形成了,大家能够运营虚拟机了。

SSH 秘钥登录配置

authorize
选项是指派登录虚拟机授权连接的公钥文件,此文件填写的是主机上的公钥文件地方,虚拟机开头化时,此文件里的内容会被复制存储到虚拟机的
/home/vagrant/.ssh/authorized_keys文件中,从而已毕 SSH 免密码登录。

authorize: ~/.ssh/id_rsa.pub

keys 是数组选项,填写的是本机的 SSH
私钥文件地点。虚拟机先河化时,会将那里填写的全数 SSH
私钥文件复制到虚拟机的 /home/vagrant/.ssh/
文件夹中,从而使虚拟机能共享主机上的 SSH
私钥文件,使虚拟机具备同样主机的地位验证。

将公钥和私钥一起合伙到虚拟机中:

keys:
    - ~/.ssh/id_rsa
    - ~/.ssh/id_rsa.pub

生成 SSH Key,先反省主机上是不是业已生成过 SSH Key:

> ls -al ~/.ssh

假如不设有 id_rsa 和
id_rsa.pub
的话,使用以下措施来生成 SSH Key,请将
your_email@example.com
替换为你的信箱:

> ssh-keygen -t rsa -C "your_email@example.com"

命令行会提醒让你指定秘钥的名目,按回车键将 SSH Key
保存到暗中同意文件名即可:

Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

接下去会询问你为 SSH Key 设置密码,按回车键即可,暗许为空密码:

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

下一场一起 Enter 键即可,如图:

图片 8

image

再使用:

> ll ~/.ssh

翻看的话,可旁观五个文件:

SSH 秘钥的三个公文:

基础布局

首先,大家要为整个博客站点建立三个基础视图模板,整个站点视图基于这些模板,继承该视图并出示。

在类型录下新建文件 resources/layouts/app.blade.php ,内容如下:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title>@yield('title') - larablog</title>

        @section('stylesheets')
            <link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
        @show

        <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>

        <section id="wrapper">
            <header id="header">
                <div class="top">
                    @section('navigation')
                        <nav>
                            <ul class="navigation">
                                <li><a href="/">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </nav>
                    @show
                </div>

                <hgroup>
                    <h2>@yield('blog_title', '<a href="/">larablog</a>')</h2>
                    <h3>@yield('blog_tagline', '<a href="/">creating a blog in Laravel</a>')</h3>
                </hgroup>
            </header>

            <section class="main-col">
                @yield('body')
            </section>

            <aside class="sidebar">
                @include('partials.sidebar')
            </aside>

            <div id="footer">
                @section('footer')
                    Laravel blog tutorial
                @show
            </div>
        </section>

        @yield('javascripts')
    </body>
</html>

假设你精心看,会发现 @include('partials.sidebar')
这段代码,我们很是引入了1个有的视图。

为此,还需求树立三个片段页面
resources/views/partials/sidebar.blade.php,内容如下:

@section('sidebar')
    Sidebar content
@show

app.blade.php 文件中隐含了价值观的 HTML 语法。不过,请小心 @section
@yield 命令。正如其名,@section 命令定义2个情节区块,而 @yield
命令被用来 “呈现指定区块” 的始末。

在专断认同情状下,Blade 模板中的 {{ }} 表达式将会自动调用 PHP 的
htmlentities 函数,以防止 XSS
攻击。若是您不指望您的数码被转义,可以运用下列的语法:

Hello, {!! $name !!}.

更加多模板相关的音信请查看文档 Blade
Templates
,Blade
模板

stylesheets 内容区块中,大家引入了一个样式表:

<link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />

作者们运用 asset 协助函数来变化样式能源处处的路线,其函数成效如下:

// 根据目前请求的协定(HTTP 或 HTTPS)产生资源文件网址
asset('img/photo.jpg', $title, $attributes);

public/css/screen.css 的内容如下:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body { line-height: 1;font-family: Arial, Helvetica, sans-serif;font-size: 12px; width: 100%; height: 100%; color: #000; font-size: 14px; }
.clear { clear: both; }


#wrapper { margin: 10px auto; width: 1000px; }
#wrapper a { text-decoration: none; color: #F48A00; }
#wrapper span.highlight { color: #F48A00; }


#header { border-bottom: 1px solid #ccc; margin-bottom: 20px; }
#header .top { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
#header ul.navigation { list-style: none; text-align: right; }
#header .navigation li { display: inline }
#header .navigation li a { display: inline-block; padding: 10px 15px; border-left: 1px solid #ccc; }
#header h2 { font-family: 'Irish Grover', cursive; font-size: 92px; text-align: center; line-height: 110px; }
#header h2 a { color: #000; }
#header h3 { text-align: center; font-family: 'La Belle Aurore', cursive; font-size: 24px; margin-bottom: 20px; font-weight: normal; }


.main-col { width: 700px; display: inline-block; float: left; border-right: 1px solid #ccc; padding: 20px; margin-bottom: 20px; }
.sidebar { width: 239px; padding: 10px; display: inline-block; }


.main-col a { color: #F48A00; }
.main-col h1,
.main-col h2
{ line-height: 1.2em; font-size: 32px; margin-bottom: 10px; font-weight: normal; color: #F48A00; }
.main-col p { line-height: 1.5em; margin-bottom: 20px; }


#footer { border-top: 1px solid #ccc; clear: both; text-align: center; padding: 10px; color: #aaa; }

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图