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

猜你喜欢

转载自www.cnblogs.com/kuniei/p/11520920.html
今日推荐