redis + ajax實現異步下拉列表加載

redis作爲一種高性能的NoSQL(Not Only SQL)系列的數據庫,可以更好的解決大規模數據集合多重數據種類帶來的挑戰,尤其是大數據應用難題。其基本原理是將數據存儲在緩存之中,所以查詢速度要遠高於關係型數據庫。

對於網頁中一些基本不會發生變化的數據,使用redis存儲將會極大地提高這些數據的獲取速度,進而加快網頁的加載,帶來更好的用戶體驗。這裏以一個下拉列表的demo做一個展示,代碼附在文末

 

1 分析

該案例的基本設計框架如下圖所示:

其中主頁面發送ajax請求服務器下拉列表的省份數據,調用服務器servlet實現以下三個步驟:

  1. 調用service層ProvinceService.java完成查詢,返回結果存入List中
  2. 將數據序列化爲json格式
  3. 響應json數據至客戶端

service層的ProvinceService.java先從redis中查詢數據,如果查詢結果不爲空則直接返回該數據,否則調用dao層ProvinceDao.java從sql數據庫中查詢,再將查詢結果存入redis並返回。

 

2 sql數據庫準備

創建表province,數據有id和name

CREATE TABLE province(   -- 創建表
	id INT PRIMARY KEY AUTO_INCREMENT,
	NAME VARCHAR(20) NOT NULL
	
);
-- 插入數據
INSERT INTO province VALUES(NULL,'北京');
INSERT INTO province VALUES(NULL,'上海');
INSERT INTO province VALUES(NULL,'廣州');
INSERT INTO province VALUES(NULL,'陝西');

數據庫準備之後創建相應的Province類來存儲該數據庫的對象:

package domain;

public class Province {
    private int id;
    private String name;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

 

3 程序基本框架

導入jar包,包含了操作redis的jedis包,操作mysql的包,包含Jdbc模板類的spring包以及與json操作相關的jackson包等:

dao層查詢sql數據庫代碼:

使用spring提供的JDBC模板類JdbcTemplate快速實現對數據庫的操作,將查詢結果保存在List裏返回

package dao;

import domain.Province;

import java.util.List;

public interface ProvinceDao {
    public List<Province> findAll();
}
package dao.impl;

import dao.ProvinceDao;
import domain.Province;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import util.JDBCUtils;

import java.util.List;

public class ProvinceDaoImpl implements ProvinceDao{

    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public List<Province> findAll() {
        String sql = "select * from province";
        List<Province> list = template.query(sql, new BeanPropertyRowMapper<>(Province.class));
        return list;
    }
}

JdbcTemplate對象創建時需要傳入一個datasource,這裏封裝工具類JDBCUtils,使用druid數據庫連接池技術,提供get方法來獲取datasource

package util;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

/**
 * JDBC工具類 使用Durid連接池
 */
public class JDBCUtils {

    private static DataSource ds ;

    static {
        System.out.println("JDBCUtils");
        try {
            //1.加載配置文件
            Properties pro = new Properties();
            //使用ClassLoader加載配置文件,獲取字節輸入流
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            pro.load(is);

            //2.初始化連接池對象
            ds = DruidDataSourceFactory.createDataSource(pro);

        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 獲取連接池對象
     */
    public static DataSource getDataSource(){
        return ds;
    }


    /**
     * 獲取連接Connection對象
     */
    public static Connection getConnection() throws SQLException {
        return  ds.getConnection();
    }
}

 

service層:

只用直接調用dao層的查詢數據庫方法即可

package service;

import domain.Province;

import java.util.List;

public interface ProvinceService {
    public List<Province> findAll();
}
package service.impl;

import dao.ProvinceDao;
import dao.impl.ProvinceDaoImpl;
import domain.Province;
import service.ProvinceService;

import java.util.List;

public class ProvinceServiceImpl implements ProvinceService{

    private ProvinceDao dao = new ProvinceDaoImpl();

    @Override
    public List<Province> findAll() {
        return dao.findAll();
    }
}

servlet:

根據第一部分【分析】中描述的servlet的三個步驟,代碼編寫如下:

其中reponse中設置內容格式爲json

package web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Province;
import service.ProvinceService;
import service.impl.ProvinceServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/provinceServlet")
public class ProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ProvinceService service = new ProvinceServiceImpl();
        List<Province> list = service.findAll();
        // 序列化list爲json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(list);
        // 響應結果
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

頁面:

html部分實現一個簡單的下拉列表即可,js部分發送ajax請求來加載所有省份的數據,循環遍歷服務器返回的數據,將每一條記錄包裝成一個option標籤append如下拉列表中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        $(function () {

            //發送ajax請求,加載所有省份數據
            $.get("provinceServlet",{},function (data) {
                // [{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"廣州"},{"id":4,"name":"陝西"}]
                var province = $("#province");
                // 遍歷json
                $(data).each(function () {
                    var option = "<option name='" + this.id + "'>" + this.name + "</option>";
                    province.append(option);
                });
            });

        });


    </script>
</head>
<body>

    <select id="province">
        <option>--請選擇省份--</option>

    </select>
</body>
</html>

 

4 使用redis

JedisPool連接池工具類用於加載配置文件並提供get方法獲取resource

package jedis.util;

import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;
import redis.clients.jedis.JedisPoolConfig;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

/**
 * JedisPool連接池工具類
 *      加載配置文件
 *      提供獲取連接的方法
 */
public class JedisPoolUtils {

    private static JedisPool jedisPool;

    static {
        InputStream is = JedisPoolUtils.class.getClassLoader().getResourceAsStream("jedis.properties");
        Properties pro = new Properties();
        try {
            pro.load(is);
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 獲取數據,設置到JedisPoolConfig中
        JedisPoolConfig config = new JedisPoolConfig();
        config.setMaxTotal(Integer.parseInt(pro.getProperty("maxTotal")));
        config.setMaxIdle(Integer.parseInt(pro.getProperty("maxIdle")));

        // 初始化JedisPool
        jedisPool = new JedisPool(config, pro.getProperty("host"), Integer.parseInt(pro.getProperty("port")));
    }

    /**
     * 獲取連接的方法
     */
    public static Jedis getJedis(){
        return jedisPool.getResource();
    }
}

 

至此在service層的ProvinceServiceImpl.java 中新創建添加使用redis的方法:

在redis中直接存儲數據的json格式

/**
 * 使用redis緩存
 */
@Override
public String findAllJson() {
    // 先從redis中查詢數據
    Jedis jedis = JedisPoolUtils.getJedis();
    String province_json = jedis.get("province");
    // 判斷redis裏是否有記錄,沒有則查詢數據庫
    if (province_json == null || province_json.length() == 0){
        System.out.println("redis中沒數據,查詢數據庫");
        List<Province> ps = dao.findAll();
        ObjectMapper mapper = new ObjectMapper();
        try {
            province_json = mapper.writeValueAsString(ps);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

        // 存json到redis
        jedis.set("province",province_json);
        jedis.close();
    }else {
        System.out.println("redis中有數據,查詢緩存");
    }

    return province_json;
}

 

修改servlet直接調用新添加的方法:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("開始provinceServlet");
    ProvinceService service = new ProvinceServiceImpl();
    String json = service.findAllJson();

    System.out.println(json);
    // 響應結果
    response.setContentType("application/json;charset=utf-8");
    response.getWriter().write(json);
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章