单页Web应用SPA


单页Web应用SPA


前言

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。

不过现在SPA技术中都是前后端分离,前端提供独立应用,后端提供API接口,作为全栈开发者,维护两套代码成本会很高。

下面介绍下可以前后端在一个项目中的解决办法。

inertiajs

通过 Inertia.js,可以使用经典的服务器端路由和控制器快速构建现代化的单页面 React、Vue 和 Svelte 应用程序。

Inertia官网 https://inertiajs.com/

Inertia示例项目pingcrm,Laravel结合Vue开发的管理项目,源码 https://github.com/inertiajs/pingcrm

Inertia示例项目pingcrm在线体验 https://demo.inertiajs.com/

下载源码后配置开发,发现PHP的版本已经要求是8.2了,自己环境的还是7.4,最后调整下来,把源码版本回退到了PHP7.3,下面是源码,增加了report报告部分: 本地Inertia示例项目pingcrm的PHP7.3版本 https://gitee.com/ibaiyang/pingcrm

inertia源码 https://github.com/inertiajs/inertia

npm仓库inertiajs https://www.npmjs.com/package/@inertiajs/inertia-vue

Inertia示例项目pingcrm,Laravel结合Svelte开发的管理项目,源码 https://github.com/inertiajs/pingcrm-svelte

Inertia示例项目pingcrm,Yii2结合Vue开发的管理项目,源码 https://github.com/tbreuss/pingcrm-yii2

Inertia还可以与Ruby on Rails、React、Clojure、Symfony等进行开发。

Laravel 应用程序脚手架 Jetstream,可以结合 Inertia 或 Livewire https://jetstream.laravel.com/introduction.html

Jetstream 结合 Inertia 的一个可以用来快速开发的架子 https://gitee.com/ibaiyang/jetstream1-one

Laravel Mix documentation https://laravel.com/docs/8.x/mix

Livewire

Livewire是一个基于PHP的交互式实时UI框架,专为Laravel框架量身定做。 开发者可以使用PHP编写前端逻辑,无需担心Vue或React的复杂性,简化了开发流程,使得前后端的界限变得模糊。

Laravel 应用程序脚手架 Jetstream,可以结合 Inertia 或 Livewire https://jetstream.laravel.com/introduction.html

参考资料

如何在Laravel项目中使用Inertia.js? https://blog.csdn.net/weixin_44026962/article/details/135463298


返回