zoukankan      html  css  js  c++  java
  • 如何利用vue和php做前后端分离开发?

     

    新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那边用的是think5 ,我要如何把vue嵌套进去?我这两天查资料加学习发现vue-cli有它自己的逻辑目录,现在整个人很懵逼,可能对于一些有个三五年经验的工程师来说,之只是一个小问题,但是困扰了我好久,最后总结一下问题,1.如何用vue搭建环境和php工程师做前后端分离开发,2能搭建一个给我看看么!
     
     
    以前是写PHP的,转前端两年了吧~以前写Laravel比较多,先后在百度、大疆实习,总结一下,不知道对你有没有帮助。

    Blade下的Vue

    包括Laravel在内的主流PHP框架都是MVC架构的,在视图层通常都有自己的模板引擎。所以在大一入门的时候我一般是这样写的。

    编写一个Laravel的模板文件,传进来PHP的变量并渲染。

    <html>
        <body>
            <h1>{{ $hello }}</h1>
        </body>
    </html>
    

    通过script标签引入Vue,然后在标签内写vue的逻辑。

    <script src="js/vue.min.js"></script>
    

    配合axios这些ajax库,前端就可以只写在resources/views文件夹里,不用管其他的了。

    构建工具下的Vue

    后来觉得没有NPM和Node实在太不方便了,于是单独建立了前端页面的文件夹,编译到resources/views文件夹里,不过不久之后Laravel就提供了一体化的构建工具。

    Laravel Mix提供了一个管道,可以流式编译CSS和JS。

    mix.js('resources/assets/js/app.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');
    

    类似于Gulp,也是在Node上面跑起来的。

    npm install
    npm run dev
    npm run production
    

    在app.js里面注册组件。

    // app.js
    Vue.component('example', require('./components/Example.vue'));
    

    然后就可以直接写在PHP的模板里面了。

    @extends('layouts.app')
    
    @section('content')
        <example></example> // 这里是使用vue组件的
    @endsection
    

    其实原理还是和之前手动编译的一样,先通过webpack翻译组件,生成正常的PHP模板,给PHP调用。

    分离与转发

    再后来,前端和后端项目在一台服务器,一个文件夹里,太窝囊了,也不利于扩展。因此,大家开始使用Node转发。

    这里后端的工作一般是:

    • 编写Lumen代码,提供服务
    • 写好Restful的API文档
    • 用postman进行测试

    前端的工作一般是:

    • 编写Vue代码
    • 打包编译
    • 使用Node转发API请求,解决跨域问题
    • 使用PM2处理并发请求

    结束

    现在写JS比较多了,发现中间层用Koa、express也不错,所以好久都没有用PHP了。现在工作中大部分都是CMS的业务,后端JAVA比较多,前端就直接转发了JAVA的接口。就这样吧,希望对你有所帮助咯,以上。

    https://www.zhihu.com/question/67171606

  • 相关阅读:
    基于摸板匹配的目標跟蹤算法
    spoj 2713 Can you answer these queries IV
    zoj 3633 Alice's present
    hdu 3642 Get The Treasury
    poj 1195 Mobile phones
    poj 2760 End of Windless Days
    zoj 3540 Adding New Machine
    spoj 1716 Can you answer these queries III
    spoj 1043 Can you answer these queries I
    spoj 2916 Can you answer these queries V
  • 原文地址:https://www.cnblogs.com/lxwphp/p/7850300.html
Copyright © 2011-2022 走看看