Redis - 案例：非同步載入資料

需求:

頁面載入成功以後,非同步獲取省份資訊

環境準備

1. 搭建專案(使用上次案例環境)
2. 建立省份表

CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `NAME` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;


insert  into `province`(`id`,`NAME`) values (1,'北京'),(2,'上海'),(3,'廣州'),(4,'陝西'),(5,'臺灣'),(6,'安徽');

 

步驟分析

1. 匯入jar包(jedis...) 、配置檔案、工具類 -- 暫時不管
2. 編寫實體類 Province
3. 編寫Dao
4. 編寫Service
5. 編寫Servlet
6. 編寫頁面

Province 實體類

package com.itheima.bean;

public class Province {

    private Integer id;
    private String name;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

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

ProvinceMapper

package com.itheima.mapper;

import com.itheima.bean.Province;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface ProvinceMapper {

    @Select("select * from province")
    public List<Province> findAll();
}

ProvinceService

package com.itheima.service;

import com.itheima.bean.Province;

import java.util.List;

public interface ProvinceService {

    public List<Province> findAll();

    public String findAllJson() throws Exception;
}

 

ProvinceServiceImpl

package com.itheima.service.impl;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.bean.Province;
import com.itheima.mapper.ProvinceMapper;
import com.itheima.service.ProvinceService;
import com.itheima.utils.DaoInstanceFactory;
import com.itheima.utils.JedisUtils;
import redis.clients.jedis.Jedis;

import java.util.List;

public class ProvinceServiceImpl implements ProvinceService {
    @Override
    public List<Province> findAll() {
        ProvinceMapper mapper = DaoInstanceFactory.getMapper(ProvinceMapper.class);

        return mapper.findAll();
    }


    // [{"id":1,"name":"北京"},{"id":2,"name":"上海"}]
    public String findAllJson() throws Exception {
        //1. 讀取快取
        Jedis jedis = JedisUtils.getJedis();
        String province_json = jedis.get("province_json");

        //2. 判斷是否有快取
        if (province_json == null) {
            // 沒有快取
            // 查詢資料
            ProvinceMapper mapper = DaoInstanceFactory.getMapper(ProvinceMapper.class);
            List<Province> list = mapper.findAll();

            // 轉換
            province_json = new ObjectMapper().writeValueAsString(list);

            // 放入快取
            jedis.set("province_json", province_json);

            System.out.println("查詢資料庫.....");
        }

        return province_json;
    }
}

ProvinceServlet

package com.itheima.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.bean.Province;
import com.itheima.service.ProvinceService;
import com.itheima.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 {
        try {
            //1. 設定響應響應編碼和型別
            response.setContentType("application/json;charset=utf-8");
            //2. 呼叫service查詢
            ProvinceService service = new ProvinceServiceImpl();
       /* List<Province> list = service.findAll();
        //3. 將集合轉換為JSON, 返回到瀏覽器
        new ObjectMapper().writeValue(response.getWriter(),list);*/

            String allJson = service.findAllJson();

            response.getWriter().write(allJson);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

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

provice.html

<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>非同步載入省份</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<div id="app">
    省份
    <select>

        <!--[{"id":1,"name":"北京"},{"id":2,"name":"上海"}]-->
        <option v-for="p in provices" v-bind:value="p.id">{{p.name}}</option>
    </select>
</div>

<script>
    // 使用vue載入非同步載入資料
    new Vue({
        el: "#app",
        data: {
            provices: [],
        },
        methods: {
            findProinceJson() {
                // 非同步請求
                axios.get("provinceServlet").then(resp => {
                    // 給資料賦值  [{"id":1,"name":"北京"},{"id":2,"name":"上海"}]
                    this.provices = resp.data;
                })
            }
        },

        created() {
            // vue物件建立以後, 呼叫方法發生非同步請求
            this.findProinceJson();
        }
    });
</script>

</body>
</html>