Inertia.js —— 项目简介与入门教程

Laravel

构建一个 web 程序是一个复杂的过程,在选择众多框架之前,你必须得考虑它是传统的服务器端渲染应用程序(SSR)还是单页应用程序(SPA)。

尽管服务器端和客户端渲染都有其优缺点,但 Inertia 融合了两者的优点。

Inertia.js 是什么?

Inertia 是一个结合了服务器端渲染(SSR)和单页应用(CSR)两者优点的库,它允许开发者使用服务器端的路由和控制器构建 SPA 应用。

根据其 官方文档

Inertia 是构建传统服务端渲染的 Web 应用程序的新方法。使用 Inertia, 可以在您不精通现代 SPA 应用复杂技术的情况下,创建完全由客户端渲染的单页应用,它通过利用现有的服务器端框架来做到这一点。

有人可能会问这是另一个JavaScript框架吗? 官方文档 上这么写:

Inertia 不是一个框架,也不是您现有的服务器端或客户端框架的替代品。相反,它旨在与他们合作,可以将 Inertia 视为连接两者的胶水。

Inertia.js 解决的问题

Inertia 解决了开发人员在构建现代应用程序时面临的许多问题。问题如:

  • SPA复杂性 - 建立现代 SPA 是一件繁琐的事。开发人员需要花费大量时间处理应用状态、路由、导航保护、权限认证等等事项
  • *构建API * - 借助Inertia.js,您无需构建 REST 或 GraphQL API,因为 Inertia 为传统的服务器端框架设计,如 Laravel,Ruby on Rails,或 Django
  • 浏览器问题 - Inertia 有内置服务,可解决构建 SPA 时遇到的浏览器问题,例如:
    • 浏览器历史记录管理和滚动条位置-提供 rememberpreserveStatepreserveScroll属性以缓存本地组件状态
    • 加载指示- 由于 Inertia 请求是通过 AJAX 调用发出的,因此没有默认的浏览器加载进度条,因此 Inertia 包含NProgress.js,一个进度条库。仅在请求时间超过250m时显示加载进度条
    • 静态资源重载和版本控制— Inertia提供了一个选项来跟踪和存储您网站上静态资源的当前版本

为什么选择 Inertia.js?

不使用 GraphQL 同时具备 GraphQL 的优势

使用服务器端 ORM 作为数据源时,Inertia 拥有数据库上完整访问权限,以获取页面所需的数据。

Limited AJAX calls

在传统的 SPA 应用中,每次访问页面都会进行 AJAX 调用以获取数据。在 Inertia 中,会进行AJAX调用以启动应用程序,然后维护一个持久的 Vue.js 实例,随后的每个页面访问都是通过 XHR 进行的,XHR 会带有 X-Inertiatrue 的 header。这将触发服务器以 JSON 形式发送 Inertia 响应,而不是进行整页访问。

它还创建了一个故障处理组件,该组件通过锚链接实现,它拦截了点击事件并防止了整个页面的重新加载。

安全

在构建基于 API 的应用程序时,我们必须在应用程序中添加 CORS 支持,以便能够访问其他来源的资源。

使用Inertia,您无需担心设置CORS,因为您的数据是通过控制器提供的,并且与JavaScript组件位于同一域中。

您可以在服务器端设置授权,并绕过令牌作为页面组件的道具来执行授权检查,这有助于降低暴露重要信息的风险,因为在客户端处理[授权] [blog.logrocket.com/jwt-authenticat... /)可能会使您面临XSS攻击的风险(跨站点脚本)。

与框架无关

Inertia 与服务器端和客户端框架均无关。您可以将 Inertia 与任何支持动态组件的服务器端框架以及任何客户端框架一起使用。

Inertia adapters 是有助于使 Inertia 在特定框架上正常工作的服务(软件包),官方适配器支持目前后端仅限于 Rails, Laravel , 前端支持 React, Vue.js, Svelte

还有一些其他框架的非官方适配器,例如 Symfony, Django, CakePHP, 和 Adonis.

Inertia 有未来吗?

网络正在不断发展,我们已经看到了从传统的服务器端内置的整体应用程序向基于API的应用程序的过渡。在这种当前趋势下,Inertia 有未来吗?

当然,问题的答案取决于实际场景和用户的选择。

Inertia 是为希望构建整体应用程序的人而构建的-他们通常更喜欢控制器和视图之间的紧密结合,但又希望使用现代客户端框架来构建其应用程序。大多数开发人员仍属于此类别,但是[基于API的应用的兴起和行业支持](code.tutsplus.com/articles/the-inc... development–net-22368),我们可能会看到它的使用量减少。

当然,有时候使用 Inertia 可能不是最合适的选择。诸如您需要多客户支持,面向客户/营销页面以及SEO 驱动的网站之类的情况。对这些使用 Inertia 可能不是一个好主意。但是,构建支持仪表板等功能的 Web 应用程序非常有用。

Inertia 是否可以进行服务器端渲染?

Inertia当前不支持服务器端渲染,但是有一些工具可以预渲染 Inertia 网站,它们会生成并缓存网站特定路由的静态HTML版本,然后提供该内容。

在项目中使用 Inertia.js - 起步

先决条件

此安装过程在服务器端使用Laravel,在客户端使用Vue.js,在执行此部分之前,需要遵循以下条件:

创建一个新的 Laravel 项目:

laravel new inertia-example

或通过 composer 创建:

composer create-project --prefer-dist laravel/laravel inertia-example

cd 进入项目目录:

$ cd inertia-example

使用 composer 安装 Inertia 的服务端适配器

composer require inertiajs/inertia-laravel

resources/views 目录下的 welcome.blade.php 文件重命名为 app.blade.php.

将您的app.blade.php的内容替换为:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

@inertia指令创建一个基础的,一个 idappdiv,它告诉 Laravel 视图是使用 Inertia 生成的。

接下来,通过在终端中运行以下命令来设置客户端程序:

npm install @inertiajs/inertia @inertiajs/inertia-vue

#或者,使用 Yarn

yarn add @inertiajs/inertia @inertiajs/inertia-vue

resources / js中找到的app.js文件,并用以下内容替换app.js文件的内容

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)

resolveComponent回调告诉 Inertia 如何加载页面组件。它接收一个字符串作为页面名称,并返回一个页面实例。

动态导入

为了启用代码拆分,我们使用 babel 插件进行动态导入。
首先,通过运行以下命令进行安装:

npm install @babel/plugin-syntax-dynamic-import
#或使用 Yarn
yarn add install @babel/plugin-syntax-dynamic-import

接下来,使用以下命令在项目根目录中创建一个.babelrc文件:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

最后,在应用初始化中更新resolveComponent回调,以使用import而不是require。回调返回一个包含组件实例的 promise,如下所示:

......

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),
    },
  }),
}).$mount(app)

结论

Inertia 是用于构建“混合” SPA的出色的库。在本文中,我们研究了它在不久的将来的可行性,它的优势以及如何在 Laravel 和 Vue 项目中使用它。

Github上获取源码,或通过本文作者 Jonathan Reinink了解更多信息。官方文档也写得很好,是入门的绝佳资源。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://reinink.ca/articles/introducing-...

译文地址:https://learnku.com/laravel/t/41051

本帖已被设为精华帖!
本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 8

这么好的贴子怎么没人 :joy:

4年前 评论

@inertia 指令导致错误 :Undefined variable: page (View: D:\WWW\erp\resources\views\app.blade.php)

当我修改为下面的代码 ,错误消失了

<?php $page = "" ?>
<body>
    @inertia
</body>

但为什么会有这个错误呢 ,每个步骤都是根据文档进行的

4年前 评论
superwen

有点意思。

3年前 评论

是不是少了一步修改 mix 文件

// webpack.mix.js

// 新增 .vue()
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

还有 npm install vue

2年前 评论
chenBJ

要是有个demo就好了

2年前 评论
fffswhk 2年前
王道中强流

这项目有意思,

9个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!