如何利用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)
上一篇 2021年10月11日 下午10:00
下一篇 2021年10月11日 下午11:00


相关推荐

  • kafuka 的安装以及基本使用

    kafuka 的安装以及基本使用最近因为项目需要所以需要使用kafka所以自己最近也实践了下。下面为大家简单介绍下在windows下的安装使用因为它是基于zookepper的使用也要安装zookepper1.安装ZookeeperKafka的运行依赖于Zookeeper,所以在运行Kafka之前我们需要安装并运行Zookeeper1.1下载安装文件:http://mirror.bit.edu.cn/apache…

    2022年6月11日
    47
  • 三分钟学习Java泛型中T、E、K、V、?的含义

    点击上方☝Java编程技术乐园,轻松关注!及时获取有趣有料的技术文章做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!泛型是Java中一个非常重要的内容,对于Jav…

    2022年2月28日
    68
  • java三大框架要学多久_新手学习SSH三大框架的几点建议[通俗易懂]

    java三大框架要学多久_新手学习SSH三大框架的几点建议[通俗易懂]说起三大框架,目前人们常用的是SSM,有人会认为SSH框架已经落后被淘汰了,其实这样说也不完全对。它毕竟实现了经典的MVC框架的基本功能,在有些项目还会用到。正因为用得不多,反而会出现很多问题。同时SSH在教学中也会被经常用到,笔者觉得SSH在教学中存在的意义在于能够帮助学习者理解经典MVC框架的原理。下面就简单谈一谈作为新手如何学习SSH。所谓SSH展开来讲包括了struts、spring、hi…

    2022年7月7日
    35
  • 一种成熟的MODBUS调试测试工具助手上位机软件(MThings) 免费中文

    一种成熟的MODBUS调试测试工具助手上位机软件(MThings) 免费中文一种成熟的MODBUS调试测试工具助手软件(MThings)免费中文现有MODBUS调测软件种类丰富,基本可以满足日常调测需求,但是面对用户群体对高效灵活友好的进一步需求都存在着差距。MThings是一款全新的标准化MODBUS调测工具,提供主从机一体化操作。全功能覆盖MODBUSPollSlave,功能全网最强。

    2022年5月31日
    56
  • apifox的使用_怎样能快速上手做表格

    apifox的使用_怎样能快速上手做表格快速上手使用场景Apifox是接口管理、开发、测试全流程集成工具,使用受众为整个研发技术团队,主要使用者为前端开发、后端开发和测试人员。前端开发接口文档管理接口数据Mock接口调试前

    2022年8月7日
    10
  • c#生成静态html文件,封装类

    由于这段时间比较轻松,于是想到很多的企业网站,新闻网站需要将页面静态化,于是写了个封装类来实现静态文件的生成,思路比较简单,但未完善,网友可根据自己的思路将此类扩展,运用了简单工厂模式(本来刚开始看设

    2021年12月20日
    42

发表回复

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

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