首先

我在Redis上实现了排行榜功能。

设定

我使用了Bootstrap作为设计模板，并使用Faker生成了虚拟数据。

此外，由于需要使用Redis。

在Gemfile中

gem 'redis'
gem 'bootstrap'
gem 'jquery-rails'
gem 'popper_js'
gem 'tether-rails'
gem 'faker'

我按照这样的格式写并进行了 bundle install。

我已创建了用户模型。

在bootstrap设置中使用faker生成虚拟数据可以省略。

实施

用户控制器

class UsersController < ApplicationController
  def index
    @ranking_users_data = (REDIS.zrevrangebyscore "users", 10, 0, withscores: true)
  end

  def add_score
    user = User.find params[:id]
    REDIS.zincrby "users", 1, user.id
  end 
end

我把它做成了这样的感觉。

关于REDIS

在config/initializers文件夹下创建redis.rb文件，并在其中填写代码。

REDIS = Redis.new(host: "localhost", port: 6379)

通过书写可以使用。

REDIS.zincrby "users", 1, user.id

我正在继续记分，就像你所描述的那样。

这个大块的名字与用户计算分数有关，可以不叫users，但这次我们用了users这个名字。

之後的數字是1要增加的數量

每个用户的分数都会被计算。

要以已排序的状态输出收集到的分数。

REDIS.zrevrangebyscore "users", "+inf", 0, withscores: true

这段代码是用来显示分数从正无穷大（最大值？）到0。

如果想要展示从0到10的分数，请考虑以下选项：

REDIS.zrevrangebyscore "users", 10, 0, withscores: true

由于这只是一个分数，所以不表示从0到10的排名。

对于我的情况来说，只拥有这些不足以使新注册的用户进入Redis中的用户排名榜。

REDIS.zrevrangebyscore "users", 10, 0, withscores: true

这个没有被显示出来。

因此在用户创建时增加了1个分数并显示出来。

模型/用户.rb

class User < ApplicationRecord
    after_create{ REDIS.zincrby "users", 1, self.id}
end

在中文中转译： 路线是

Rails.application.routes.draw do
  get 'users/index'
  post 'users/add_score/:id', to: 'users#add_score'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

这样做

观点

<br>
<br>
<br>
<br>
<br>
<div class="container">
    <table class="table table-dark">
        <thead>
            <tr>
            <th scope="col">Ranking</th>
            <th scope="col">Name</th>
            <th scope="col">Count</th>
            <th scope="col">Like Button</th>
            </tr>
        </thead>
        <tbody>
            <% @ranking_users_data.each_with_index do |rank_data,index| %>
                <tr>
                    <th scope="row"><%= index + 1 %></th>
                    <td><%= user_name(rank_data[0]) %></td>
                    <td class="count"><%= rank_data[1].to_i %></td>
                    <td>
                        <%= button_to "/users/add_score/#{rank_data[0]}", class: "like-btn", id: "addBtn",  remote: true do %>
                            <i class="fas fa-heart" style="font-size: 15px;" data-count="<%= index  %>"></i>
                        <% end %>

                    </td>
                </tr>
            <% end %>
        </tbody>
    </table>
</div>


<script>
var allBtn = document.getElementsByClassName('like-btn')
var allCount = document.getElementsByClassName('count')
var btnLength = allBtn.length 
var addLikeCount = function(i) {
    allCount[i].innerHTML = parseInt(allCount[i].innerHTML) + 1
}
for(var i = 0; i < btnLength; i++ ) {
    allBtn[i].addEventListener('click', function(a) {
        let dataCount = this.getElementsByClassName('fas')[0].dataset.count
        addLikeCount(dataCount);
    });
}

</script>

和往常一样，我把JavaScript写在erb文件中。

暫時來說，我認為外觀會是這個樣子。

由于使用了fontawesome

在layouts的头部中

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

写

Note: Please keep in mind that the given phrase “を書いて” is written in Japanese, incorporating the usage of the particle “を” and the verb “書く” (to write). In Chinese, the equivalent phrase would be “写” (xiě), which simply means “to write.”

在中国境内原生地理ustering网页的资产/样式表目录中的application.scss文件中

@import '/*';
@import 'bootstrap';
@import 'tether';

body 
{
    background: #95a5a6;
}

.like-btn
{
    transition: all 0.2s;
    border: none !important;
}

.like-btn:hover
{
    background: rgb(224, 0, 37) !important;
    color: white !important;
    border: none !important;
}

我认为这样做看起来会变得一样。

每次点击都会增加分数。

顺便提一句

如果想查看已添加到Redis中的数据，

用Ruby on Rails中的命令行接入终端

REDIS.keys

如果注册的键出现

REDIS.zrevrangebyscore "users", "+inf", 0, withscores: true

如果输入”と入力”，我认为用户ID和分数会以二维数组的形式显示出来。

结束