为仅限API的Rails应用添加视图 - Honeybadger开发者博客

Ruby on Rails 以其“约定优于配置”的理念而闻名，这种特性简化了无数程序员的 Web 开发流程。然而，如果您从一个精简的 Rails API-only 应用程序开始，现在却需要添加一个前端，该怎么办？这种情况并不少见，尤其是在 JavaScript 框架和单页应用程序（SPA）流行的今天。本文将带您探索如何将标准的 Rails 前端无缝集成到 API-only 应用程序中，结合两者的优势，打造强大的 Web 应用体验。

Rails API-only 应用程序简介

Rails 以其高效和“约定优于配置”的开发理念而闻名，为开发者提供了构建多种类型 Web 应用的灵活性。API-only 模式的 Rails 应用程序专为后端服务设计，主要通过 HTTP 请求与前端客户端交互，处理数据和业务逻辑。

选择 API-only 模式通常是在创建新项目时做出的决定，适用于以下场景：

计划与 React 或 Vue 等前端框架集成。
应用程序作为移动应用的后端服务。
应用程序是微服务架构中的一部分。

API-only 模式通过移除视图层和资源管道，使 Rails 更轻量化，减少不必要的冗余。与全栈 Rails 应用相比，API-only 模式省略了处理 Cookie 和会话的中间件，并排除了 ActionView 模块，同时不包含资产管道（asset pipeline），因为它主要用于管理前端资源（如样式表、JavaScript 文件和图片）。

然而，需求总是会变化。有时，您可能需要为 Rails 应用程序直接添加前端，比如构建管理面板或为某些功能提供基于 Web 的界面。从 API-only 模式过渡到完整的 Rails 应用是完全可行的！

为前端准备 Rails API

从 API-only 模式过渡到全栈模式需要重新引入一些关键组件，以支持视图和资产的处理。以下是具体步骤：

1. 添加必要的中间件

在 Rails 中，中间件用于处理进入和离开应用程序的请求和响应。在 API-only 模式中，这些中间件被移除。要重新引入它们，可以在 config/application.rb 文件中添加以下代码：

config.middleware.use ActionDispatch::Cookies
config.middleware.use ActionDispatch::Session::CookieStore

同时，在文件顶部添加以下模块以支持视图和资产：

require "action_view/railtie"
require "sprockets/railtie"

完成后，config/application.rb 文件应如下所示：

require_relative "boot"

require "rails"
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
require "action_controller/railtie"
require "action_view/railtie"
require "sprockets/railtie"Bundler.require(*Rails.groups)module MyApiApp
  class Application < Rails::Application
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore
  end
end

2. 添加资产管道支持

在 Gemfile 中添加以下内容以启用 Sprockets：

gem 'sprockets-rails'

运行以下命令安装依赖项：

bundle install

接下来，在项目的 app/assets/config 目录中创建一个名为 manifest.js 的文件，内容如下：

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js

此外，创建以下目录结构以支持资产管理：

app/assets/builds
app/assets/images
app/assets/stylesheets

在每个目录中添加一个名为 .keep 的空文件，以确保它们被版本控制系统跟踪。

构建第一个视图

现在，Rails API 已具备全栈开发的能力，是时候构建第一个视图了。以下是具体步骤：

1. 创建控制器

使用 Rails 生成器创建一个控制器：

rails generate controller Courses index

此命令将生成一个名为 CoursesController 的控制器，包含一个 index 操作，以及相关的视图文件和辅助文件。

2. 配置路由

在 config/routes.rb 文件中设置根路由，指向 CoursesController 的 index 操作：

Rails.application.routes.draw do
  root "courses#index"
end

3. 更新控制器继承

将 ApplicationController 从 ActionController::API 修改为 ActionController::Base，以支持视图渲染：

class ApplicationController < ActionController::Base
end

4. 创建视图文件

在 app/views/courses 目录中创建一个名为 index.[html](https://www.explinks.com/wiki/what-is-html/).erb 的文件，内容如下：


欢迎来到 Rails 应用！
这是您的第一个视图。

此外，在 app/views/layouts 目录中创建一个名为 application.html.erb 的布局文件，内容如下：




  Rails 应用

整合前端资产

为了进一步完善前端支持，您需要添加样式表和其他前端资源。

1. 添加 Sass 支持

在 Gemfile 中添加以下内容：

gem 'sass-rails'

运行以下命令安装依赖项：

bundle install

2. 创建样式表

在 app/assets/stylesheets 目录中创建一个名为 application.css 的文件，内容如下：

/*
 *= require_self
 *= require_tree .
 */

结论

从 API-only 模式扩展到全栈 Rails 应用可能看起来复杂，但通常比从头开始构建一个全新的应用更高效。在本文中，我们介绍了如何重新引入中间件、配置资产管道、创建控制器和视图，以及整合前端资源。

通过这些步骤，您的 Rails API-only 应用现在已经转变为功能齐全的全栈应用程序。您可以继续使用标准的 Rails 前端，或者进一步扩展以集成 React 或 Vue 等现代前端框架。

用 Rails 构建用户界面不仅高效，而且充满乐趣！希望本文对您有所帮助。

原文链接: https://www.honeybadger.io/blog/rails-api-front-end/