如何利用vue和php做前后端分离开发？
以前是写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
如何利用vue和php做前后端分离开发？的更多相关文章
- 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境
前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...
- vue.js+UEditor集成 [前后端分离项目]
首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- .Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
- SpringBoot,Vue前后端分离开发首秀
需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...
- beego-vue URL重定向(beego和vue前后端分离开发，beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
- 超简单工具puer——“低碳”的前后端分离开发
本文由作者郑海波授权网易云社区发布. 前几天,跟一同事(MIHTool作者)讨教了一下开发调试工具.其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器,基于长连的B/S架构的工具其 ...
- Web前后端分离开发(CRUD)及其演变概括
今天学习了前后端分离开发模式又从网上查了一些资料就写了一篇博客分享: 一.为什么分离前后端 1.1早期开发 1.2后段为主mvc模式 1.2.1Structs框架介绍 1.2.2Spring mcv开 ...
随机推荐
- Nodejs使用redis
安装方法 安装redis方法请自行百度, 用npm方法,安装nodejs的redis模块 npm install redis 实战 var redis = require("redis&qu ...
- eclipse在debug模式下总是自动进入到ThreadPoolExecutor类中
当我们将web项目发布到tomcat服务器中,并且以debug模式启动的时候,总是自动跳转到 ThreadPoolExecutor 类中,如下: 解决办法 在eclipse中点击Window-> ...
- 在IIS使用localDB
项目使用localdb来作为本机测试数据库,发布到本机IIS后项目却链接不到数据库,查看windows日志为如下错误 "无法获取本地应用程序数据路径.很可能是因为未加载用户配置文件.如果在 ...
- RBAC__权限设计__结构化表的输出(不知道怎么描述标题,反正就是设计表) 难点重点 必须掌握🤖
RBAC 反正就是很厉害. 干就完事了,不BB 直接进入正题 本文写的就是如何设计表,以及设计表的思路. 用户和角色 : 多对多字段放在哪张表更好点? 用户找角色,角色找权限. 放在user表中,是正 ...
- web打印总结
一.打印样式 区别显示和打印的样式 使用media="print"控制打印时的样式,如下: 打印时不显示打印按钮,设置页面宽度 <style media="prin ...
- 一图看懂java内存模型
熟话说一张好图胜过千言万语,在此便将java内存模型重新整理了一次,将细节标注到图中献给需要的同学:
- Python当前文件路径与文件夹删除操作
前言: Python的文件操作跟Java存在部分差异.由于项目需要,近期使用python进行模块开发时遇到一些常见的文件操作便上网搜罗了一番,感觉众说纷纭.因此,结合自身的使用场景,贴一段python ...
- Qt Creator简单计算器的Demo
小编在期末数据结构课设中遇到要做可视化界面的问题,特意去学习了一下Qt的用法,今天就来给大家分享一下. 我用的是Qt5.80,当然这只是一个简易的计算器Demo,,请大家勿喷. 首先我创建了一个Qt ...
- winform展示Unity3D文件（支持动态改变文件路径）
winform下展示Unity3D文件可以支持对Unity3D实现的模块进行包装,以及在其他的项目中需要展示Unity3D的界面时候,恰到适宜地进行打开展示,这里我展示如何使用winform打开Uni ...
- 初读"Thinking in Java"读书笔记之第二章 --- 一切都是对象
用引用操纵对象 Java里一切都被视为对象,通过操纵对象的一个"引用"来操纵对象. 例如, 可以将遥控器视为引用,电视机视为对象. 创建一个引用,不一定需要有一个对象与之关联,但此 ...