Laravel SPA: Vue是否必需?

huangapple go评论66阅读模式
英文:

Laravel SPA : Is Vue a requirement?

问题

Is it possible to create a spa app using laravel without vue.js?
我可以使用laravel创建SPA应用而不使用vue.js吗?

I am new to laravel and I want to create admin panel and it should be SPA, but wondered to know if it is necessary to learn vue.js or I can create it using only blade.
我对laravel还很新,我想创建一个管理面板,它应该是SPA,但我想知道是否有必要学习vue.js,或者我可以仅使用blade来创建它。

英文:

Is it possible to create a spa app using laravel without vue.js?
I am new to laravel and I want to create admin panel and it should be SPA, but wondered to know if it is necessary to learn vue.js or I can create it using only blade.

答案1

得分: 1

短答案
> 使用 Laravel 创建 spa 应用而不使用 vue.js 是可能的。

绝对。Vuejs 是支持 SPA 的框架,而 Laravel 社区更倾向于使用 vuejs 而非其他框架。但这并不意味着你必须使用相同的框架。

> 或者我可以只使用 blade 来创建它

仅使用 blade 可能不太可能。你需要在某处使用一些 JavaScript 以便能够处理页面转换和客户端端的 HTML 更新。通常最有效的方法是使用像 vue 这样的框架。

长答案

稍微扩展一下,典型的使用 blade 的 Laravel 应用是服务器渲染的应用程序。当用户打开链接时,将向服务器发送请求,服务器将其发送到 Laravel 应用程序,Laravel 应用程序将确定它是哪个路由,并为其呈现一个 blade 模板(页面呈现在服务器端)。对于大多数应用程序,这将是每个路由的不同 blade 模板。当用户在页面上点击某个链接时,浏览器将加载一个新的页面 URL,并重复这个过程。也就是说,你的 Laravel 应用程序将为此页面呈现一个不同的 blade 模板。

对于单页应用程序,情况会略有不同。通常,无论打开哪个 URL,它都将始终呈现相同的 HTML 页面。然后,你的 JavaScript 代码将确定 URL,并确定它应该呈现哪个 HTML(页面呈现在客户端端)。当用户在页面上点击某个链接时,JavaScript 将确定它是哪个页面,然后呈现该页面,而无需从服务器请求新的 HTML。

单页应用程序的更正式定义是(摘自MDN):

> 单页应用程序(SPA)是一种仅加载单个 Web 文档的 Web 应用程序实现,然后在要显示不同内容时通过 JavaScript API(如 XMLHttpRequest 和 Fetch)更新该单个文档的正文内容。

因此,要实现单页应用程序,理想情况下应该没有页面重新加载,而是通过 JavaScript 更新 HTML。React、Angular、Vue 等前端框架默认都支持通过路由实现这一点。

因此,如果你希望避免使用某些框架,你将需要实现某种路由,理想情况下使用 JavaScript 的History API,以便每当用户在页面上点击链接时,不是从服务器请求新的 HTML,而是在客户端端使用 JavaScript 渲染 HTML。

现在有许多库可以帮助你实现这一点(或类似的功能),而不必承诺使用一个框架。

作为曾经尝试过在没有任何框架的情况下构建 SPA 的人,我个人的建议是坚持使用像 vue、react、angular、svelte 等框架。除非出于学习目的,否则这不值得努力,通常会变成一个混乱且具有许多漏洞的项目,除非你愿意花费大量工作时间来处理。

既然警告已经说过了,以下是一些不错的库,如果你想避免学习 vuejs,可能会想尝试一下(我以前尝试过这些。我没有使用 Livewire 的即将推出的 SPA 版本,但使用过 Livewire 本身,效果很好)

  • Barbajs 仍然允许你使用 blade 渲染所有的 HTML。当用户点击链接时,barba 会发送 HTTP 请求以获取页面的 HTML,并在客户端端呈现它,而不是进行完整的页面转换。
  • Prouter 是一个客户端路由器。你可以定义路由和路由的回调。你需要自己处理 HTML 更新。
  • Laravel Nova 是 Laravel 团队的产品。它使用 vuejs,但对于大多数应用程序,通常你不需要触及任何 JavaScript,Nova 将为你完成所有工作。你只需按照 nova 的文档编写 PHP 代码。
  • Livewire v3 是 Laravel 的一个流行的全栈框架。它的 v3 计划支持 SPA,所以这也值得一试。

还有很多类似的库,但现在简要介绍这些。做一些研究,确定你是否真的需要这个。祝好!

英文:

Short Answer
> Is it possible to create a spa app using laravel without vue.js

Definitely. Vuejs is a framework that supports SPA, and the laravel community prefers vuejs over other frameworks. But that does not mean you need to use the same

> or I can create it using only blade

Using only blade might not be possible. You'll need some javascript somewhere to be able to handle page transitions and HTML updates on the client side. Usually it would be a lot more efficient to just stick to some framework like vue.

Long Answer

To expand on it a bit more, Typical Laravel applications using blade are server-rendered applications. When a user opens a link, a request will be sent to your server, which sends it to your Laravel application, your Laravel application will determine which route it is, and render a blade template for it ( the page rendering happens on the serverside ). For most applications, this would be a different blade template for each route. When a user clicks on some link on the page, a new page URL is loaded on the browser and this process is repeated. That is, your Laravel application will render a different blade template for this page.

For a Single page application, it would be slightly different. Typically, no matter which URL you open, it will always render the same HTML page. Then, your javascript code will determine the URL and determine what HTML it should render ( the page rendering happens on the client side ). When a user clicks on some links on the page, the javascript will determine which page it is, and then render the page, without requesting new HTML from the server.

A more formal definition of a single page application is ( Taken from MDN )
> An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

So essentially, to achieve a single page application, there should ideally be no page reloads, and HTML is updated by javascript. Frontend frameworks like React, Angular, Vue all support this by default using routing.

So if you wish to avoid using some framework, you will need to implement some kind of routing, ideally using javascript's History API so that whenever user clicks on a link on your page, instead of requesting a new HTML from the server, you would render the HTML client side using javascript.

Now there are many libraries out there that will help you achieve this ( or something similar ) without committing to a framework.

As someone who has attempted to do the same in the past, building a SPA without any framework, my personal advice would be to just stick to using a framework like vue, react, angular, svelte, etc. Unless it's for learning purposes, it just isn't worth the effort and will usually end up as a mess with lots of vulnerabilities unless you're willing to dedicate hours of work for this

Now that the warning is out of the way, here are some nice libraries you may want to try out if you wish to avoid learning vuejs (I've tried these before. I've not used Livewires upcoming SPA, but used livewire itself and its great)

  • Barbajs will allow you to still use blade for rendering all your HTML. When a user clicks on a link, barba would send an HTTP request to get the HTML for the page, and render it on the client side without a full-blown page transition
  • Prouter is a client-side router. You can define routes and callbacks for the routes. You will need to handle the HTML update yourself.
  • Laravel Nova is a product by the Laravel team. It uses vuejs, but for most applications you would typically not need to touch any javascript, Nova will do it all for you. You would just need to write your PHP code ( by following nova's documentation )
  • Livewire v3, a popular full-stack framework for laravel. It's v3 is planned to support SPA, so this might also be worth a try

There are a lot more libraries like these, but keeping it short for now. Do some research, and determine if you really would really need this. Cheers

huangapple
  • 本文由 发表于 2023年5月21日 15:52:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76298835.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定