这个页面是租车网站的展示页面(可拓展到网上商城产品展示)
最终结果
:
数据流向解析
- 引用element的现成时间输入组件,输入时间地点数据,确认按钮触发请求事件:①前台检查输入数据是否合法②将原来的页面请求了数据数组置空(可以重复请求数据)③将输入框的数据post给后台处理
- 后台处理过程:①接收数据(记得要转化事件date对象为时间戳)②请求数据库数据(重点在条件查找算法和数据库的合理设计)③用前台接收的数据和请求数据作比较,取回符合要求的数组,输出给前台(同时要写session(保持通话))
- 前台接收到数据,①按照默认规则渲染页面②根据用户点击的限制条件,触发事件,控制v-show(v-show和v-if的区别是v-show是已经渲染出来了,只是隐藏了DOM,v-if是条件符合才渲染)来控制内容的渲染,实现条件选择展示。
封装好的时间地点输入组件(直接可以在展示页面中引用(需要理解父子组件和插槽的联系))
postCarlist(){
if(this.site.length == 0||this.value.length == 0){ //验证输入数据是否为空
this.$message({
type: 'warning',
message: '请输入完整时间、地点'
});
}else{
var today=new Date();
if(this.value[0]<today){ //验证输入的时间是否正确(只能预定)
this.$message({
type: 'warning',
message: '请输入至少2个小时后的时间段'
});
}else{
if(this.easyDataOption0.data.length>0){ //把上一次请求的数据清空
let len = this.easyDataOption0.data.length;
this.easyDataOption0.data.splice(0,len);
};
axios.post('/api/test01/goodsList.php',{
pickUp:this.site[2],
startTime:this.value[0],
endTime:this.value[1],
}).then(response => {
let res = response.data;// 现在后台返回的是一组汽车信息数组(这是二维数组)[{"car_brand":"奥迪","car_series":"Q3"},{"car_brand":"奥迪1","car_series":"Q5"},]
if(res.status==0){
this.$alert('你选择时段的车车已经租完啦!', '提示', { //返回其他情况
confirmButtonText: '确定'
});
}else{
for(var i = 0,l = res.length; i < l; i++){
this.easyDataOption0.data.push( //如果符合条件则将返回的数据渲染到前台数组中
{
car_photo_url:res[i].car_photo_url,
car_brand :res[i].car_brand,
car_series:res[i].car_series,
car_type:res[i].car_type,
car_displacement:res[i].car_displacement,
car_seat:res[i].car_seat,
car_daily_price:res[i].car_daily_price,
car_fuel:res[i].car_fuel,
car_volume:res[i].car_volume,
car_drive:res[i].car_drive,
car_Airbag:res[i].car_Airbag,
carshow:true,
carprice:true,
}
);
// carArr是临时一维数组,每次取回res中的子数组,然后carArr push 进data(data也是二维数组)
}
}
})
}
}
},
后台数据处理条件过程(重点为查询逻辑(关乎查找速度和查找的正确性))(哭唧唧,明天再写注释)
<?php
header("Content-type: text/html; charset=utf-8");
//监听端口zhi
header('Access-Control-Allow-Origin:http:*');
//写监听端口文件(post方法)
// <!-- ./../photo/01.jpg -->
$ro =file_get_contents('php://input'); //获取json文件
$car=json_decode($ro,true); //将json转为PHP数组,供操作
// // 从前台取回:租车时间startTime、还车时间endTime、租车地点pickUp、还车地点return
$startTime=$car['startTime']/1000;
$endTime=$car['endTime']/1000;
$pickUp=$car['pickUp'];
$arrPost= array(); //空闲的完整汽车信息(最终结果)
$newarr = array(); //选择了指点店铺的汽车ID数组
$narr = array(); //空闲车辆汽车ID数组
//最终空闲车辆数组
$carArr = array();
$conn = mysql_connect('localhost','root','123456'); //连接数据库,根据自己的数据库填写
$select = mysql_select_db('bianquan'); //选择数据库表 where car_store_id in (select car_store_id from carStore where car_store_site='$pickUp')
//写查询语句,取得这间店的所有车
$sql="select car_id from carslist where car_store_id in (select car_store_id from carStore where car_store_site='$pickUp')";
mysql_query("set names 'utf8'");
$result=mysql_query($sql,$conn);
while( $array=mysql_fetch_array($result)){
$newarr[]=$array[0];
} //拿到要求店的汽车编号
foreach ($newarr as $key => $value) {
$narr[$value]="1"; //给每辆车都赋初始值为1(每辆车都是可租)
}
$arr_string = join(',', $newarr); // 用join把数组转化为1,2,3,4,5的字符串
// ... WHERE meta_id IN ($arr_sting).... // 成功使用
$sql1="select * from carstatus where( car_id in ($arr_string)) and ( to_days(endTime) >= to_days(now()) )";
$re=mysql_query($sql1,$conn);
while ($arr=mysql_fetch_array($re,MYSQL_ASSOC)) {
if (!($startTime>strtotime($arr['endTime'])||$endTime<strtotime($arr['startTime']))) {
$narr[$arr['car_id']]=0; //若满足条件(输入时间与订单有交集,马上置为0)
}
}
// 返回空闲汽车数组carID
foreach ($narr as $key => $value) {
if($value>0){
$carArr[]=$key; //空闲车辆序列
}
}
if(empty($carArr)){
$row['status']="0";
$row['err']="fail";
echo json_encode($row) ;
}else{
$arr_car = join(',', $carArr);
$sqlcar="select car_brand,car_series,car_volume,car_drive,car_Airbag,car_production_time,car_photo_url,car_type,car_daily_price,car_seat,car_fuel,car_displacement from carslist where car_id in ($arr_car)";
$resultcar=mysql_query($sqlcar,$conn);
while( $arrcar=mysql_fetch_array($resultcar,MYSQL_ASSOC)){
$arrPost[]=$arrcar; //拿到空闲的完整汽车信息
}
// print_r($arrPost).'<br />';
// echo json_encode($arrPost);
echo json_encode($arrPost);
}
mysql_close($conn);//关闭数据库
?>
条件渲染的监听事件
watch:{
value_price: function(){
if(this.easyDataOption0.data.length>0){
for(var i = 0,l = this.easyDataOption0.data.length; i < l; i++){
if(this.easyDataOption0.data[i].car_daily_price>=this.value_price[0]&&this.easyDataOption0.data[i].car_daily_price<=this.value_price[1]){
this.easyDataOption0.data[i].carprice=true;
}else{
this.easyDataOption0.data[i].carprice=false;
}
}
}},
},
methods:{
//条件渲染函数,选择指定车型按钮出现指定车辆
choiceCar(car){
if(this.easyDataOption0.data.length>0){ //当渲染展示汽车数组不为空时才可以做条件渲染
if(car=="不限"){ //条件渲染就是通过设置v-show来设置该数组是否展示
for(var i = 0,l = this.easyDataOption0.data.length; i < l; i++){
this.easyDataOption0.data[i].carshow=true;
}
}else{
for(var i = 0,l = this.easyDataOption0.data.length; i < l; i++){
if(car!=this.easyDataOption0.data[i].car_type){
this.easyDataOption0.data[i].carshow=false;
}else{
this.easyDataOption0.data[i].carshow=true;
}
}
}
}
晚安