laravel后台和vue前台连接 - kuniei
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语句。
以上是 laravel后台和vue前台连接 - kuniei 的全部内容, 来源链接: utcz.com/z/375714.html