1.使用Redis优化省份展示
-
创建项目,添加数据库、页面、jar包、工具类、配置文件
-
在index.HTML页面上,何时发起ajax请求?【在生命周期函数created时期】
created:function(){ //1.发送ajax请求 //2.成功处理 获取到省份列表数据进行数据绑定 } // 将省份列表数据 使用v-for遍历显示到select下拉列表中
-
创建Servlet ProvinceServlet
//1.获取请求参数 /*判断redis中是否存在省份列表数据 key:province_list value:省份列表数据*/ if(jedis.exists("province_list")){ //从redis中获取省份列表数据返回 }else{ //2.调用业务处理 /*第一次查询时,redis中没有 需要存入redis中一份*/ //3.响应json //3.1:将省份列表数据封装到result对象中 //3.2:将result对象转为json响应给浏览器 }
-
创建Service ProvinceService
//调用dao 返回List<Province>
-
创建Dao ProvinceDao
//使用DBUtils操作数据库 返回List<Province>
1. - 创建数据库 - 创建工程(web) - 导入jar包, 导入配置文件, 导入工具类,导入页面
2.页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app" >
省: <select id="pSelect">
<option>请选择</option>
<option v-for="(province,index) in provinces">{{province.pname}}</option>
</select>
</div>
<script>
var vm = new Vue({
//声明vue使用的区域
el:"#app",
//声明数据
data:{
provinces:[]
},
//声明函数
methods:{
},
created:function () {
//1.发送ajax请求
axios.get("ProvinceServlet").then(response=>{
//2.成功处理 获取到省份列表数据进行数据绑定
if(response.data.flag){
this.provinces = response.data.result;
}else{
alert(response.data.message);
}
});
}
});
</script>
</body>
</html>
redis中有数据,java代码运行 正常,页面不显示,html哪里出错了?