草庐IT

javascript - Vue.js : Best way to implement MPA(Multi page app) in laravel

coder 2024-05-07 原文

我找了好久了,还是没找到。

在 Laravel 中实现 Vue MPA 架构的最佳方法和实践是什么。

搜索了很多。但是没有任何东西可以给你一个清晰的想法。您的回答会有很大帮助,请简短。

回答这个问题也很有帮助:

  • 只使用 laravel 作为数据 API 并保留 Vue 是个好主意吗 与 Laravel 分开?
  • 实现 SPA 和 MPA 混合的最佳方法。

最佳答案

我已经使用过的一些选项:

使用Laravel渲染“主视图”+连接vue.js应用。

基本上,laravel 将呈现 Vue 应用程序,并且每个请求都通过 API。

  1. 易于设置
  2. 身份验证 + 用户验证更容易(您可以为此使用 laravel session 管理器 - 不需要构建/使用 token 或其他任何东西。“无需担心您的应用程序状态”。)
  3. 易于与 Laravel“断开连接”- 如果您将来选择分离 SPA 应用程序。

仅将 laravel(或 lumen)用作 API,并在另一台服务器上呈现 SPA。

这可能需要更多时间,因为您需要设置额外的服务器、准备跨源等。

  1. 也很容易设置,但可能比选项 #1 花费更多时间
  2. 您需要为用户验证/状态管理等创建一些东西。
  3. 如果您将来决定使用“仅一个应用程序”,则很容易放入 Laravel。
  4. 可以更容易维护/扩展(如果你有一个前端团队,他们不需要担心 laravel - 对于你的“laravel 团队”,他们“不需要担心”前端)

Laravel + Vue = "一个应用程序"

您可以使用 Laravel 渲染页面中组件/元素的所有 View + vuejs。

  1. 易于设置。你有 laravel + vuejs,它们已经准备好一起使用了。 https://laravel.com/docs/5.5/frontend#writing-vue-components
  2. 分离并不那么容易。在这种情况下,您需要为 vue.js 创建相同的 View 。这可能需要时间。
  3. 这是“传统网络开发”(在我看来)。如果我今天必须开始这样的项目,我不会在 Vue.js 中创建所有页面 + 在 Laravel 中创建一些东西( Controller + 新路由)来呈现这个 View 。如果你这样做(再次 - 我的意见),那只是额外的工作。如果您担心 SEO,可以使用“回退”/额外选项。

--

所有选项都是可测试的 + 可扩展的。

这还取决于您如何开始(我是否应该担心将来如何解耦应用程序?Laravel + Vue 会永远好吗?),您的团队将如何工作(< em="">前端团队真的需要设置 laravel 还是他们只需要担心前端代码?) 等

不确定我是否回答了您的问题,如果没有,请发表评论。

关于javascript - Vue.js : Best way to implement MPA(Multi page app) in laravel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48240582/

有关javascript - Vue.js : Best way to implement MPA(Multi page app) in laravel的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库,其中大部分是用JavaScript(Node.js)编写的,一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread,目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标,所以maketest在每

  7. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

  10. node.js - 从未编写过任何自动化测试,我应该如何开始行为驱动开发? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。多年来,我一直在使用多种语言进行编程,并且认为自己总体上相当擅长。但是,我从未编写过任何自动化测试:没有单元测试,没有TDD,没有BDD,什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

随机推荐