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語句。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM