如何利用vue和php做前后端分离开发?

如何利用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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/113760.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 周期性学习率(Cyclical Learning Rate)技术[通俗易懂]

    周期性学习率(Cyclical Learning Rate)技术[通俗易懂]本文介绍神经网络训练中的周期性学习率技术。Introduction学习率(learning_rate,LR)是神经网络训练过程中最重要的超参数之一,它对于快速、高效地训练神经网络至关重要。简单来说,LR决定了我们当前的权重参数朝着降低损失的方向上改变多少。new_weight=exsiting_weight-learning_rate*gradient这看上去很简单。但是…

    2022年5月18日
    36
  • python专业版激活成功教程_Python社区版和专业版的差距

    python专业版激活成功教程_Python社区版和专业版的差距PyCharm是一种PythonIDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。PyCharm最常用的两个版本就是社区版和专业版,这两个版本区别如下:专业版和社区版的区别除了这两版本之外,还有一个版本就是教育版,这三个有什么区别呢?1.收费不同首先就是三者的收费不同:专业版是收费的,另外两个是免费的。2.功能不同pyCharm专业版是功能最丰富的,与社区版相比,PYc…

    2022年8月29日
    2
  • GoogleNet_google翻译学术论文

    GoogleNet_google翻译学术论文                             GoingDeeperwithConvolutions摘要      我们在ImageNet大规模视觉识别挑战赛2014(ILSVRC14)上提出了一种代号为Inception的深度卷积神经网络结构,并在分类和检测上取得了新的最好结果。这个架构的主要特点是提高了网络内部计算资源的利用率。通过精心的手工设计,我们在增加了网络深度和广…

    2022年8月14日
    5
  • 离心泵CAE_2_ICEM剖分网格_2_叶轮流道[通俗易懂]

    离心泵CAE_2_ICEM剖分网格_2_叶轮流道[通俗易懂]针对本科毕设中所涉及到的离心泵数值分析和性能计算,将用最简单粗暴的方法,讲解如何基于CFturbo、ICEM、FLUENT来开展离心泵水力设计和性能分析的计算机辅助(CAE)实现。离心泵的水力设计由CFturbo软件实现;网格剖分由ICEM软件实现;CFD数值计算由FLUENT软件实现;并验证设计值是否达到。这里是第二部分,ICEM软件实现离心泵过流通道的网格剖分,含叶轮流道、进口延伸段、蜗壳流道的网格剖分。由于三个流道分开来划分网格,所以分三部分来分别讲解,这里是第2篇,叶轮流道的网格剖分……

    2022年5月26日
    47
  • 激光测距芯片VL53L0X的使用与代码

    激光测距芯片VL53L0X的使用与代码一、介绍1、原理采用940nm垂直腔面发射激光器(Vertical-CavitySurface-EmittingLaser,简称VCSEL)发射出激光,激光碰到障碍物后反射回来被VL53L0X接收到,测量激光在空气中的传播时间,进而得到距离。VCSEL相关知识2、参数超小体积:4.4×2.4×1.0mm最大测距:2m发射的激光对眼镜安全,且完全不可见。工作电压:2.6to3.5V通信方式:IIC,400KHz,设备地址0x52,最低位是读…

    2022年6月2日
    44
  • csdn的积分(积分计算规则)

    博客积分是衡量博客水平的重要标准,博客的排名也将按照积分排列。这是积分规则: 1、你每发布一篇原创或者翻译文章:可获得10分 2、你每发布一篇转载文章:可获得2分 3、博主你的文章每被评论一次:可获得1分 4、你每发表一次评论:可获得1分(自己给自己评论、博主回复别人对自己博文的评论不获得积分) 5、你每篇博文阅读次数每超过100次:可获得1分,阅读加分最高加到100分,即每篇

    2022年4月15日
    99

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号