Larvel + Vue项目实战系列之一
2019-06-10 22:30:26
<p>本系列主要描述前后端分离项目的搭建以及涉及到的基本技术，以及搭建过程中遇到的问题解决方法，并不涉及详细的的业务。</p><p>门槛：需要对后端MVC有基本的认识。</p><p><br></p><p>laravel环境安装</p><p><br></p><p>从git hub 上找到laravel框架地址， <a href="https://github.com/search?q=laravel">https://github.com/search?q=laravel</a><a href="https://github.com/search?q=laravel" target="_blank"></a></p><p>星星数字最多的那条就是，点击进去后，再页面页面右边绿色按钮“clone or download”，就会看到laravel的git项目地址：</p><pre>https://github.com/laravel/laravel.git<br></pre><p><br></p><p>如果你没接触过git，或者对git还不太熟悉，建议你先看这篇我总结的关于Git实战的文章，<a href="http://www.zhai14.com/blog/git-simple-summary.html">http://www.zhai14.com/blog/git-simple-summary.html</a><a href="http://www.zhai14.com/blog/git-simple-summary.html" target="_blank"></a></p><p><br></p><p>现在假定你已经熟悉Git了，也已经安装它了，我们就来安装laravel框架。</p><p>我用的wamp64集成环境，这个wamp工具的安装这里就不赘述了。</p><p><br></p><p>打开Git Bash，执行如下命令：</p><pre>cd wamp64项目目录 //进入到项目目录，一般都是www文件夹下
git clone https://github.com/laravel/laravel.git //下载laravel框架代码
mv laravel bluezhai //为了提高辨别度，这里我把项目文件夹改为bluezhai
cd bluezhai
composer install //安装依赖的第三方库，执行后，项目下会生成vendor文件夹<br></pre><p>接着把bluezhai目录下配置示例文件.env.example拷贝一份，命令为.env</p><p><br></p><p>启动wamp里apache服务后，浏览器里开始访问：</p><pre><a href="http://localhost/bluezhai/public/index.php">http://localhost/bluezhai/public/index.php</a> //public/index.php是框架的入口文件</pre><p>我安装后，出现505 Server Error错误。</p><p>这是因为.env文件里<span style="font-family: "Courier New"; font-size: 12pt;">APP_KEY为空的缘故</span></p><p><span style="font-family: "Courier New"; font-size: 12pt;"><br></span></p><p><font face="Courier New"><span style="font-size: 16px;">进入到bluezhai目录下，敲下面这行命令，laravel会自动帮你填充app_key。</span></font></p><pre><font face="Courier New"><span style="font-size: 16px;">php artisan key:generate</span></font></pre><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">如果还报语法错误，那可能就是你的php版本太低。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;">bluezhai目录下，composer.json文件有段配置如下：</span></font></p><pre><font face="Courier New"><span style="font-size: 16px;"> "require": {
"php": "^7.1.3",
"fideloper/proxy": "^4.0",
"laravel/framework": "5.8.*",
"laravel/tinker": "^1.0"
},<br></span></font></pre><p><font face="Courier New"><span style="font-size: 16px;">说的就是当前项目php版本至少需要7.1.3版本。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">刚从网上下载下来的Wamp64可能没有你想要的php版本，这时就需要你自己去安装了。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">关于Windows环境下如何给wamp安装不同版本的php，为尽量避免踩坑，请参考我的这篇文章：</span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">ok，如果你访问入口，看到下面界面，就说明你laravel框架安装成功了。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">路漫漫其修远兮，吾将上下而求索。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;">既然是学习前后端分离技术，那后端这边就是要提供接口了，所以接下来我们的任务是实现接口。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">首先配置路由，然后操作数据库。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;">php框架一般都是MVC结构，laravel也不例外。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;">我们现在只用它开发接口，V-View这块已交给Vue来实现，前端这块将在后面系列讲到。</span></font></p><p><font face="Courier New"><span style="font-size: 16px;"><br></span></font></p><p><font face="Courier New"><span style="font-size: 16px;">先让我们准备好Model和Controller，照着敲下面命令，自己看项目文件夹的变化吧。</span></font></p><pre><font face="Courier New"><span style="font-size: 16px;">php artisan </span></font><a href="make:model">make:model</a><font face="Courier New"><span style="font-size: 16px;"> //创建Model</span></font></pre><pre><font face="Courier New"><span style="font-size: 16px;">php artisan </span></font><a href="make:controller">make:controller</a><font face="Courier New"><span style="font-size: 16px;"> //创建Controller</span></font></pre><p><font face="Courier New"><span style="font-size: 16px;">路由，为了方便，我们这里就用框架自带的,位置在：</span></font></p><pre><span style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255);">bluezhai/routes/web.php</span><br></pre><p><span style="font-family: "Courier New"; font-size: 12pt;"><br></span></p><p><span style="font-family: "Courier New"; font-size: 12pt;"><br></span></p><p><br></p><p><br></p><p><br></p><p><br></p>