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

举报
lxw1844912514 发表于 2022/03/27 01:44:28 2022/03/27
【摘要】   新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps...

 

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

Blade下的Vue

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

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


              
  1. <html>
  2. <body>
  3. <h1>{{ $hello }}</h1>
  4. </body>
  5. </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。


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

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


              
  1. npm install
  2. npm run dev
  3. npm run production

在app.js里面注册组件。


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

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


              
  1. @extends('layouts.app')
  2. @section('content')
  3. <example></example> // 这里是使用vue组件的
  4. @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

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100029447

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。