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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Eureka集群原理

    Eureka集群原理问题:微服务RPC远程服务调用最核心的是什么?高可用,试想你的注册中心只有一个onlyone,它出故障了那就呵呵o( ̄︶ ̄)o了,会导致整个微服务环境不可用。解决办法:搭建Eureka注册中心集群,实现负载均衡+故障容错Eureka集群的原理:互相注册,相互守望。一个Eureka集群包含7001和7002等许多服务,在这个集群中,7001指向其他所有服务…

  • css改变鼠标样式

    css改变鼠标样式CSS控制鼠标通过cursor属性来实现,该属性可以在任何标记中使用,因此,可以改变各种页面元素的鼠标效果。//设置为小手cursor:pointer//设置为左右箭头cursor:w-resize或cursor:e-resize//设置为斜箭头cursor:nw-resize或cursor:ne-resize//设置为全方位箭头cursor:move此外,cursor还有很多鼠标指针效果,如下图:浏览器调用的是操作系统的鼠标效果,但是,不同的操作系统之间还是存在

  • java-计算器模板及源码

    java-计算器模板及源码java-计算器模板及源码计算器实现了大部分基础功能:基本运算,菜单栏选项,并且拓展了普通型和科学兴选项等等,读者可以在此基础上进行修改和拓展。其他具体实现方法可以看源码,里面有详细的概述,代码框架清晰。读者在阅读和引用过程中,如有问题欢迎评论区留言和私信交流。运行环境:win10EclipseIDEforJavaDevelopers-2020-06下面是计算器的视图:importjava.awt.*;importjava.awt.event.ActionEvent;im

  • python表白代码大全简单-python告白代码,只属于程序员的浪漫

    python表白代码大全简单-python告白代码,只属于程序员的浪漫不知何时,不知何因,程序员这个行业成为大家茶余饭后取乐的无辜群体。只要说到程序员,脑海中就浮现出刻板印象,标配穿搭:格子衫,牛仔裤,黑框眼镜。当然秃顶也是必须的,更狠的吐槽还有邋里邋遢,不懂浪漫,不知人情世故!开始可能只是幽默玩笑,后面慢慢就越传越多,大家便信以为真!可是程序员真的是这样吗?随着现在编程这个行业的普遍高薪收入,程序员又成为大家关注的焦点,深入的了解后,发现程序员其实是很可爱的一个群…

  • C语言中按位取反_数组按位取反

    C语言中按位取反_数组按位取反与运算:&两者都为1为1,否则为01&1=1, 1&0=0, 0&1=0, 0&0=0或运算:|两者都为0为0,否则为11|1=1, 1|0=1, 0|1=1,0|0=0非运算:~1取0,0取1~1=0,~0=1~(10001)=01110异或运算两者相等为0,不等为11^1=0,

  • 分区表-理论

    分区表-理论目的分区表的主要目的是方便数据的维护,而不是提升MySQL数据库的性能。《高性能MySQL》中:分区的一个主要目的是将数据按照一个较粗的粒度分在不同的表中,这样做可以将相关的数据放在一起,另外

发表回复

您的电子邮箱地址不会被公开。

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