laravel后台和vue前台连接

电脑是2014年的华硕老电脑，系统是win7的32位系统。首先就low好多，PHPstorm和webstorm都从官方网站没找到，找的一些乱七八糟的网站下载破解的。反正最终是能用上了。

 

首先：

php.ini配置文件需要开启的扩展：

extension=php_openssl.dll

extension=php_pdo_mysql.dll

extension=php_mbstring.dll

extension=php_fileinfo.dll（验证码代码依赖需要该扩展）

extension=php_curl.dll（主要用于请求的发送）

 

httpd.conf配置文件需要开启的模块:

LoadModule deflate_module modules/mod_deflate.so

LoadModule rewrite_module modules/mod_rewrite.so

这些都是黑马课程教的，但是，然并卵，很多方法更新了，比如mysql.dll那个什么的就没啥用了，现在是mysqli来用的。

而且后面去laravel学院下载来的项目都是已经手脚做足了的，不需要开启啥啥的了。

 

composer部署laravel项目

composer create-project laravel/laravel --prefer-dist ./

这一步我是没有成功，说下载多少字句超出预期的多少字节之类的，out of expected。。。。。

首先的这个报错，不多说，

一键包可以从laravel学院进行下载：

http://laravelacademy.org/resources-download

下载了一个包，实际更新的还是很新的，0913下载，还是0912更新的，6什么的版本。

然后放到我的xampp里的htdocs目录里面去，

然后连接数据库什么的，配置.env那个文件啥的。

 

 

使用 wamp或lamp环境，虚拟主机配置：（虚拟主机 ≠ 虚拟机）

修改apcahe的虚拟主机vhost的配置文件：

要加一句LISTEN:8000

修改hosts文件（线上叫DNS域名解析）：

这个文件要到C盘的Windows的。。。的driver里面去找。

 

重启apache。

 

这时候写路由，然后写controller，试一下和数据库有没有联通。

 

 

接下来重头戏，各种报错，哎呀，天都踏下来了。

首先，自己搭建一个vue项目。

尝试想用黑马vue讲的vue-resource包去，this.$http.get().then(function(result){console.log(result)})，结果发现不行。

Failed to load http://localhost:8000/api/rqw1: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:81)

报错啊，报啊，一直给我报，心里压力越来越大，啊。。。。

 

查来查去，查了一天，发现是跨域问题！！！！！！！！！！！！！

怎么解决真的是，，，，，，，，，，，，，，，，，，

1，没用的方法之一就是，那个什么设置

在工程的config文件夹下面，将index.js里面的代码，改为如下

proxyTable: {

'/api': {

target:'https://news-at.zhihu.com/api',

changeOrigin:true,

pathRewrite: {

'^/api':''

}

}

},

坑货一直不行。真没用。

 

找来找去发现方法：

解决前后端分离应用跨域请求利器 —— Laravel CORS 扩展包

操作是在laravel的根目录安装

composer require barryvdh/laravel-cors

但是坑货就是composer老是反应老半天，最后是在看不下去，绝招了，Windows键+R一路cd打开到laravel目录里面，composer update。

又是等了老半天，行了，更新完毕下一步。

如果想要全局支持跨域请求，可以在 app/Http/Kernel.php 的 $middleware 数组中添加 HandleCors 中间件：

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
]; 

这个填的时候，填到了

protected $middlewarePriority

真是天坑。千万别错啊。再也伤不起了！！！！！！

 

然后妥妥的要去用了：

在vue里面先安装

前端vue安装
cnpm install axios --S 加--S 是保存的意思
引入,注册
在前端main.js里面进行引入和注册
import axios from 'axios'



methods: {
    getInfo () {
        axios.get('http://localhost:8000/api/lll1').then(function (result) {
            console.log(result.data)
        })
    }
}

就这样去用了之后，前后台跑通，大功告成！！！！！

 

后台的接口写的是个数组

public function lll1()
{
    return response()->json([
        ['id' => 1, 'title' => 'learn Vue js', 'completed' => false],
        ['id' => 2, 'title' => 'Go to Shop', 'completed' => false],
    ]);
}

控制台看到了，好爽，太爽了，世界杯进球了，爽！

 

数据库不用Navicat，直接用phpmyadmin还爽一点，还可以练习MySQL语句。