vue之前台请求特定商品数据展示+后台PHP处理后台数据（实战）

这个页面是租车网站的展示页面（可拓展到网上商城产品展示）

最终结果

：

数据流向解析

1. 引用element的现成时间输入组件，输入时间地点数据，确认按钮触发请求事件：①前台检查输入数据是否合法②将原来的页面请求了数据数组置空（可以重复请求数据）③将输入框的数据post给后台处理
2. 后台处理过程：①接收数据（记得要转化事件date对象为时间戳）②请求数据库数据（重点在条件查找算法和数据库的合理设计）③用前台接收的数据和请求数据作比较，取回符合要求的数组，输出给前台（同时要写session（保持通话））
3. 前台接收到数据，①按照默认规则渲染页面②根据用户点击的限制条件，触发事件，控制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]//验证输入的时间是否正确（只能预定）
                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也是二维数组）

                    }

                  }

                })
              }

            }


        },

后台数据处理条件过程（重点为查询逻辑（关乎查找速度和查找的正确性））（哭唧唧，明天再写注释）

 
 header("Content-type: text/html; charset=utf-8");
//监听端口zhi
 header('Access-Control-Allow-Origin:http:*');
 //写监听端口文件（post方法）
// 

 $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$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).'
';
// 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;
                  }

                }
              }
            }

晚安