「前端实验室」 专注分享 Github、Gitee 等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。
大家好，我是「前端实验室」爱分享的了不起~
单页Web应用（single page web application，SPA）：SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。
我们通常使用Laravel，Ruby on Rails或Django等框架构建服务器端渲染的应用程序，通过创建控制器，从数据库中获取数据（通过ORM），并呈现视图。
使用Inertia 也可以像使用所选的服务器端 Web 框架一样构建应用程序，使用框架的闲鱼功能进行路由、控制器、身份验证等。
但是，Inertia 视图是用 React、Vue 或 Svelte 编写的 JavaScript 页面组件。
这意味着我们可以获得客户端应用程序和现代 SPA 体验的所有功能，但无需构建 API，这就大大提高了我们的工作效率啊。
下面我们就简单介绍了解下Inertia.js
Inertia.js
Inertia 允许创建完全客户端呈现的单页应用程序，而没有现代 SPA 带来的复杂性。它通过利用我们现有服务器端模式来实现这一点。
Inertia 没有客户端路由，也不需要 API。像往常一样简单地构建控制器和页面视图！
Inertia 不是框架，也不是现有服务器端或客户端框架的替代品。相反，它旨在与他们合作。将 Inertia 视为连接两者的胶水。
如何使用Inertia？
服务器端设置：
1.安装依赖项
首先，使用 Composer 包管理器安装 Inertia 服务器端适配器。
代码语言：javascript复制composer require inertiajs/inertia-laravel
2.根模板
设置将在第一次访问页面时加载的根模板。
用于加载网站资源（CSS 和 JavaScript），并且还将包含一个用于启动 JavaScript 应用程序的 根节点 <div>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
3.中间件
需要设置 Inertia 中间件，可以通过将中间件发布到应用程序来实现此目的。
代码语言：javascript复制'web' => [
// ...
AppHttpMiddlewareHandleInertiaRequests::class,
],
4.创建响应
代码语言：javascript复制use InertiaInertia;
class EventsController extends Controller
{
public function show(Event $event)
{
return Inertia::render('Event/Show', [
'event' => $event->only(
'id',
'title',
'start_date',
'description'
),
]);
}
}
客户端设置：
1.安装依赖项
支持Vue2、Vue3、React、Svelte
代码语言：javascript复制npm install @inertiajs/vue3
2.初始化应用
更新主 JavaScript 文件以启动 Inertia 应用程序。我们在这里所做的只是使用基本 Inertia 组件初始化客户端框架。
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
结论
Inertia 是一个很好的解决方案,它可以让您快速构建现代 SPA,而无需创建 api,只需像往常一样简单地构建控制器和页面视图！
还有更多内容大家可以去官网阅读体验下~
