​

我们将学习使用，Rails7默认引入的tubo-rails库，并创建一个响应式的单页面应用，而无需编写任何自定义JavaScript代码。

简介

这一章我们将解释要学习的内容，看下成品的样子，并且开始我们的项目。

线上试用：https://www.hotrails.dev/quotes，类似于一个账单管理器，你可以试着添加数据，并进行编辑。

为什么学习Turbo？

伴随着2021年12月7日发布的Rails7，Hotwire整合了Stimulus和Turbo。成为了默认的前端框架。下面我们看看Turbo与Rails整合带来的新的特点：

  • 第一：所有的链接和表单提交转为Ajax请求，通过Turbo Drive可以加速我们的系统，我们只需要简单的引入，而不需要做其他操作，即可获得好处。
  • 第二：通过Turbo Frames几行代码，我们就可以很容易的将页面切割为小的组件，可以替换或延迟加载页面的独立部分。
  • 第三：通过Turbo Stream就可以增加实时更新的特点。你可以做类似的多用户游戏或者实时监控系统。

通过本次教程的学习，你将知道所有的细节关于上面三点。

本教程适用范围

本教程中你将：

  • 创建一个增删改查项目
  • 创建我们的CSS样式系统
  • 通过Devise gem进行身份校验
  • 学习：Turbo Drive, Turbo Frames, Turbo Streams

如果你已经很熟悉1-3点，并打算学习第四点，那本教程就适用于你。

项目开始

我们将开始创建新的Rails项目，其中使用Sass作为css预处理器，Esbuild来构建Js。数据库你随意。这里默认你是Rails7版本

  • 开始创建：
rails new quote-editor --css=sass --javascript=esbuild
  • 检查你的Gemfile看是否有该依赖
# Gemfile
gem "turbo-rails", "~> 1.0"
  • 使用：bundle install下载正确版本的gem
  • 使用：bin/setup来下载依赖，并创建数据库
  • 使用：bin/dev来预编译css和js，并启动服务

查看：http://localhost:3000，你应该能看到Rails启动页面。

注意：**bin/setup** 和 **bin/dev**

**bin/setup** 可以下载gem，javascript依赖，create，migrate，seed 数据库。这一点不论是在团队中，还是小项目中，都可以快速的初始化环境。

**bin/dev**基于Procfile.dev文件，当运行这个命令时，我们是在同时运行它们：

web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch

第一个命令就是启动项目，第二，三个就是预编译，--watch是确保我们每次css，js文件被保存时，被观测到

这些命令都在创建项目的/bin目录中。

让我们继续构建项目吧