• 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 = [
        // ...
        BarryvdhCorsHandleCors::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语句。

  • 相关阅读:
    我的ZigBee学习之路
    php form表单post提交获取不到数据,而使用get提交能获取到数据 的解决办法
    Mac phpstorm破解版安装(简单,有效)
    Mac下phpstorm 浏览器出现 502 bad gateway 解决办法
    LayUI之table数据表格获取行、行高亮等相关操作
    钉钉自定义机器人配合SVN钩子事件进行消息的推送实践
    电脑无故失去焦点,罪魁祸首是谁?终极解决办法
    Java实现的电脑已连接WiFi热点的导入导出小工具 wifi备份
    C# DataGridView自定义分页控件
    C# DataGridView控件禁止拷贝数据
  • 原文地址:https://www.cnblogs.com/kuniei/p/11520920.html
Copyright © 2020-2023  润新知