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);
}

https://download.csdn.net/download/HNU_Csee_wjw/12520874

猜你喜欢

转载自blog.csdn.net/HNU_Csee_wjw/article/details/106727655
今日推荐