rails pry使用_在Rails 6中使用Gritter

weixin_26737625

于 2020-08-23 15:58:40 发布

阅读量170

点赞数

原文链接：https://medium.com/@mbonunkemjika/using-gritter-in-rails-6-6ed3f8df06d3

版权

rails pry使用

介绍 (Introduction)

Hello everyone, how has it been working with the challenges of COVID-19? Today, I will be sharing how I got gritter to work with Rails 6. According to the github Readme;

大家好，它如何应对COVID-19的挑战？今天，我将分享如何与Rails 6合作。

Gritter is a small growl-like notification plugin that you can use to display your flash notifications.

Gritter是一个类似于咆哮的通知插件，可用于显示Flash通知。

I discovered gritter while going through a tutorial that was using it but I ran into a problem. The tutorial was using Rails 5 but I was using Rails 6. Due to the changes in Rails 6 using webpacker, the gem wasn’t working as described in the Readme. I had to figure out a way to make it work and I am going to be sharing that with you.

我在浏览使用它的教程时发现了gritter，但遇到了一个问题。本教程使用的是Rails 5，但我使用的是Rails6。由于使用Webpacker对Rails 6进行了更改，因此该gem不能按照自述文件中的说明进行工作。我必须想出一种使它起作用的方法，并且我将与您分享。

设置示例应用程序进行测试 (Setting up a sample app to test it)

Create the gritter_sample_app

创建gritter_sample_app

We are going to be setting up a sample app so I can walk you through what I did. First we need to create a new rails app called gritter_sample_app. In your console, run:

我们将设置一个示例应用程序，以便我指导您完成我的工作。首先，我们需要创建一个名为gritter_sample_app的新Rails应用程序。在您的控制台中，运行：

Note: If you like me already have another app running on port 3000 which is the default port for a rails app, you can simply change it in the puma.rb file found in the config folder. You will find the part to update in line 13. I used port 3004

注意：如果您像我一样已经在端口3000(这是Rails应用程序的默认端口)上运行了另一个应用程序，则只需在config文件夹中的puma.rb文件中进行更改即可。您会在第13行中找到要更新的部分。我使用了端口3004

Start up your server using rails server or its alias rails s and visit the url( mine was localhost:3004) to confirm that the app is up and running.

使用rails服务器或其别名rails启动服务器，然后访问url(我的是localhost：3004)以确认该应用程序已启动并正在运行。

$ create-react-app

Next, we need to get a controller with views. Either stop your server or open another terminal to run the command. Generate a Pages controller using the command below.

接下来，我们需要一个带有视图的控制器。停止服务器或打开另一个终端以运行命令。使用以下命令生成Pages控制器。

rails generate controller Pages home about

You don’t have to generate the 2 actions. Just one is fine. Next update the route.rb file to add a root route to the home action.

您不必生成2个动作。只是一个很好。接下来，更新route.rb文件以向根操作添加根路由。

// config/route.rb
root "pages#home"

Let's make some few html code changes and add some styles to the pages.scss file.

让我们进行一些html代码更改，并向pages.scss文件添加一些样式。

<!-- app/views/pages/home.html.erb -->
<div class="pages">
  <p>
    I am the home page. Once you visit the site, you will meet me first. You should see a flash message soon.
  </p>
</div>

And css

和CSS

/* app/assets/stylesheets/pages.scss */
.pages {
  height: 100%;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  p {
    margin: 0;
    font-size: 3rem;
    width: 60%;
    text-align: center;
  }
}

Let's also make some updates to the `application.css` file

我们还要对application.css文件进行一些更新

/* app/assets/stylesheets/application.css */
html, body {
  margin: 0;
  height: 100%;
}

And we should have this beautiful webpage.

我们应该有这个漂亮的网页。

Add necessary packages

添加必要的包

First, we need to install jquery and gritter using yarn.

首先，我们需要使用yarn安装jquery和gritter。

yarn add jquery gritter

Next, we add the gritter gem and run bundle install

接下来，我们添加gritter gem并运行bundle install

# Gemfile.rb
gem "gritter", "1.2.0"

We need to update our webpack environment.js file to make jQuery accessible across the app. Add this after line 1. You don't need to delete any other code in the file.

我们需要更新我们的webpack environment.js文件，以使jQuery在整个应用中均可访问。在第1行之后添加此代码。您无需删除文件中的任何其他代码。

// config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

Next, we update the application.js file to require jquery and gritter.

接下来，我们更新application.js文件以要求使用jquery和gritter。

require("jquery")
require("gritter/js/jquery.gritter.js")

And that's about it for setup.

这就是设置的过程。

向应用添加通知 (Add a notice to the app)

In the home action of the pages_controller.rb file, let's add a flash message.

在pages_controller.rb文件的主页操作中，让我们添加一条即显消息。

flash.now[:notice] = "I am a sample flash message for the home page"

According to the gritter READMe file, all we need to add now is add_gritter helper method passing in our desired options.

根据gritter READMe文件，我们现在需要添加的只是add_gritter帮助器方法，该方法传递了我们所需的选项。

<!-- app/views/pages/home.html.erb -->
<%= js add_gritter(flash[:notice], :title => "Sample gritter app", :sticky => true, :time => 1000) %>

Notice that I passed flash[:notice] so that our notice message will be displayed here.

注意，我通过了flash [：notice]，因此我们的通知消息将显示在此处。

The next problem I ran into was the styling. Due to the change in asset management with Rails 6, the gritter background style couldn't be accessed. Thanks to the gritter classname option, I was able to add a custom style.

我遇到的下一个问题是样式。由于Rails 6对资产管理的更改，无法访问gritter背景样式。多亏了gritter classname选项，我得以添加自定义样式。

<!-- app/views/pages/home.html.erb -->
<%= js add_gritter(flash[:notice], :title => "Sample gritter app", :sticky => true, :time => 1000, :class_name => "custom_gritter") %>/* app/assets/stylesheets/application.css */
.custom_gritter {
  background-color: green;
  border-radius: 5px;
  text-align: center;
  border: 1px solid white;
}

And you should have something like this

而且你应该有这样的东西

But if you still want the background styling, all you have to do is to copy the style over, copy the needed file ie-spacer.gif from the node_modules to app/assets/images folder and update your style sheet.

但是，如果您仍然想要背景样式，则只需复制样式，将所需的文件ie-spacer.gif从node_modules复制到app / assets / images文件夹，然后更新样式表。

/* app/assets/stylesheets/application.css */
.gritter-item-wrapper {
  position: relative;
  margin: 0 0 10px 0;
  background: url(ie-spacer.gif);
}

And that concludes this post. You can also try to follow this steps if you need help using some javascript packages in Rails 6.

到此为止。如果您需要使用Rails 6中的一些javascript软件包的帮助，也可以尝试执行以下步骤。

Here is a link to the github repository.

这是github存储库的链接。

I want to hear your thoughts. Please share them in the comments section below. And if you have other gems that you are finding hard to use in Rails 6, let me know about them in the comment section so I can write about them.

我想听听你的想法。请在下面的评论部分中分享。而且，如果您发现在Rails 6中很难使用其他宝石，请在评论部分让我知道它们，以便我撰写它们。

Resources

资源资源