使用redis有序集合做一个简易的排名程序

最新推荐文章于 2022-10-14 17:23:31 发布

lengleng0107

最新推荐文章于 2022-10-14 17:23:31 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

文章标签： redis javascript 前端

本文链接：https://blog.youkuaiyun.com/lengleng0107/article/details/122254203

该博客介绍了一个基于HTML和JavaScript的前端页面，用于显示应用下载排行榜。通过调用后端Spring Boot Controller中的Redis接口，实时更新和展示下载量。用户点击下载按钮会触发增加下载量的API，数据存储在Redis中，通过ZSet的分数来排序。博客内容涵盖了前端交互、Ajax请求以及Redis操作，展示了如何利用Redis进行实时数据统计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击下载，谁的下载量第一，谁排在第一位(下载量相同，则最先达到的为第一)。这个程序不需要连接数据库，只需要链接redis。

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .fat .sun {
            width: 100px;
            height: 100px;
            border: 1px solid green;
            margin-bottom: 10px;
        }

        .fat .sun .liang {
            color: red;
        }
    </style>

</head>

<body>

    <div class="fat" id="pai">
        
    </div>

    <script>
        $(function () {
            pai();
        })
        function xiazai(name){
            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1:8080/api/redisa/add',
                data: {
                    'name':name
                },
                dataType: 'json',
                success: function(res) {
                    pai();//调用方法，重新排名
                },
            })
        }
        function pai(){
            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1:8080/api/redisa/pai',
                data: {

                },
                dataType: 'json',
                success: function (res) {
                    console.log(res.data);
                    var list = eval(res.data.name);//得到名称list，准备循环
                    var lsc = eval(res.data.score);//得到数量list，因为下标一样，所以也可以放进循环
                    var pai="";
                    var i=0;//提前定义数值的下标，放入循环当中
                    $.each(list, function (index, dat) {
                        pai += "<div class=\"sun\"><span>"+dat+"</span>  <br>"+
                            "<span>下载量：</span><span class=\"liang\">"+lsc[i]+"</span> <br>"+
                            "<button onclick='xiazai(\""+dat+"\")'>下载</button></div>";
                        i=i+1;
                    })
                    $("#pai").html(pai);
                },
            })
        }
    </script>

</body>

</html>

controller页面

package com.guominglei.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.guominglei.bean.Redisa;
import com.guominglei.bean.RedisaExample;
import com.guominglei.service.RedisaService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import redis.clients.jedis.JedisPool;

import java.util.*;

@CrossOrigin(origins = "*")//跨域注解
@RestController
@RequestMapping("/api/redisa")
public class RedisaController {
    @Autowired(required = false)
    private RedisaService redisaService;
    @Autowired
    private JedisPool jedisPool;

    @RequestMapping("/add")
    public Map add(String name) { // orders 对象传参, 规则: 前端属性要和后台的属性一致!!!
        Map map = new HashMap();
        System.out.println("新增下载量的app为"+name);
        jedisPool.getResource().zincrby("pai",+1,name);//执行新增下载量+1

        map.put("code", 200);
        map.put("msg", "下载成功");
        return map;
    }

    @RequestMapping("/pai")
    public Map pai() { // orders 对象传参, 规则: 前端属性要和后台的属性一致!!!
        Map map = new HashMap();
//        jedisPool.getResource().zadd("pai",45,"王者荣耀");//添加数据
//        jedisPool.getResource().zadd("pai",30,"元神");
//        jedisPool.getResource().zadd("pai",15,"和平精英");

        Set<String> pai = jedisPool.getResource().zrevrange("pai", 0, -1);//查询名称 倒叙 从小到大 zrange是从大到小
        List<String> list = new ArrayList<>(pai);//名称转成list
        List<String> name = new ArrayList<>();//创建list存储名字
        List<Double> score = new ArrayList<>();//创建list存储数值
        Map map1 = new HashMap();
        for (int i=0;i<pai.size();i++){
            Double zscore = jedisPool.getResource().zscore("pai", list.get(i));//得到名称的值
            double scored=zscore;//转换成double类型
            score.add(scored);
            name.add(list.get(i));
            map1.put("score",score);//存储到map1里面
            map1.put("name",name);//存储到map1里面
            //map1.put(list.get(i),zscore);//存到map里面
            System.out.println("查询的名字"+list.get(i));
            System.out.println("app值"+zscore);
        }

        System.out.println(map1);
        map.put("code", 200);
        map.put("msg", "查询成功");
        map.put("data",map1);
        return map;
    }




}