前端联调
接下来看下控制层RedisController
:
package com.crossoverJie.controller; import com.crossoverJie.pojo.Rediscontent; import com.crossoverJie.service.RediscontentService; import com.crossoverJie.util.CommonUtil; import com.crossoverJie.util.PageEntity; import com.github.pagehelper.PageHelper; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.servlet.http.HttpServletResponse; @Controller @RequestMapping("/redis") public class RedisController { private static Logger logger = LoggerFactory.getLogger(RedisController.class); @Autowired private RediscontentService rediscontentService; @RequestMapping("/redis_list") public void club_list(HttpServletResponse response, @RequestParam(value = "page", defaultValue = "0") int page, @RequestParam(value = "pageSize", defaultValue = "0") int pageSize) { JSONObject jsonObject = new JSONObject(); JSONObject jo = new JSONObject(); try { JSONArray ja = new JSONArray(); PageHelper.startPage(1, 10); PageEntity<Rediscontent> rediscontentPageEntity = rediscontentService.selectByPage(page, pageSize); for (Rediscontent rediscontent : rediscontentPageEntity.getList()) { JSONObject jo1 = new JSONObject(); jo1.put("rediscontent", rediscontent); ja.add(jo1); } jo.put("redisContents", ja); jo.put("count", rediscontentPageEntity.getCount()); jsonObject = CommonUtil.parseJson("1", "成功", jo); } catch (Exception e) { jsonObject = CommonUtil.parseJson("2", "操作异常", ""); logger.error(e.getMessage(), e); } //构建返回 CommonUtil.responseBuildJson(response, jsonObject); } }
这里就不做过多解释了,就是从redis或者是service中查询出数据并返回。
前端的显示界面在github.com/crossoverJi…中(并不是前端,将就看)。
其中核心的redis_list.js
的代码如下:
var page = 1, rows = 10; $(document).ready(function () { initJqPaginator(); //加载 load_redis_list(); $(".query_but").click(function () {//查询按钮 page = 1; load_redis_list(); }); }); //初始化分页 function initJqPaginator() { $.jqPaginator('#pagination', { totalPages: 100, visiblePages: 10, currentPage: 1, first: '<li class="prev"><a href="javascript:;">首页</a></li>', last: '<li class="prev"><a href="javascript:;">末页</a></li>', prev: '<li class="prev"><a href="javascript:;">上一页</a></li>', next: '<li class="next"><a href="javascript:;">下一页</a></li>', page: '<li class="page"><a href="javascript:;">{{page}}</a></li>', onPageChange: function (num, type) { page = num; if (type == "change") { load_redis_list(); } } }); } //列表 function create_club_list(redisContens) { var phone = 0; var html = '<div class="product_box">' + '<div class="br">' + '<div class="product_link">' + '<div class="product_phc">' + '<img class="phc" src="" >' + '</div>' + '<span class="product_name">' + redisContens.id + '</span></div>' + '<div class="product_link toto">' + redisContens.content + '</div>' + '<div class="product_link toto">' + '<span>' + "" + '</span>' + '</div>' + '<div class="product_link toto">' + '<span>' + phone + '</span></div>' + '<div class="product_link toto">' + '<span>' + 0 + '</span></div>' + '<div class="product_link toto product_operation">' + '<span onclick="edit_club(' + 0 + ')">编辑</span>' + '<span onclick="edit_del(' + 0 + ')">删除</span></div></div>' + '</div>'; return html; } //加载列表 function load_redis_list() { var name = $("#name").val(); $.ajax({ type: 'POST', url: getPath() + '/redis/redis_list', async: false, data: {name: name, page: page, pageSize: rows}, datatype: 'json', success: function (data) { if (data.result == 1) { $(".product_length_number").html(data.data.count); var html = ""; var count = data.data.count; for (var i = 0; i < data.data.redisContents.length; i++) { var redisContent = data.data.redisContents[i]; html += create_club_list(redisContent.rediscontent); } $(".product_content").html(html); //这里是分页的插件 $('#pagination').jqPaginator('option', { totalPages: (Math.ceil(count / rows) < 1 ? 1 : Math.ceil(count / rows)), currentPage: page }); } else { alert(data.msg); } } }); $(".product_box:even").css("background", "#e6e6e6");//隔行变色 }
其实就是一个简单的请求接口,并根据返回数据动态生成Dom
而已。
总结
以上就是一个简单的redis
的应用。
redis的应用场景还非常的多,比如现在我所在做的一个项目就有用来处理短信验证码的业务场景,之后有时间可以写一个demo。
个人博客地址:crossoverjie.top。
GitHub地址:github.com/crossoverJi…。