使用 php、mysql 和 vuejs 动态创建文件的下载链接

【问题标题】：Dynamically create download links to file with php, mysql and vuejs使用 php、mysql 和 vuejs 动态创建文件的下载链接
【发布时间】：2018-04-03 16:32:16
【问题描述】：

大家好，所以我遇到了一些麻烦，我正在尝试在 php 中动态创建下载链接并将它们传递给我的 vuejs 应用程序。如果不存在但是我试图将文件设置为空字符串。这里的任何帮助都会很棒。 

<?php require_once('init.php');
$query="SELECT * FROM `bannerStock`";
$result = mysqli_query($db_conx, $query);
    $myArray=[];
while($row=mysqli_fetch_assoc($result)) {
    $name=$row['name'];
         $categorytoadd="";
      if($row['Automotive']==1){$categorytoadd.=' Automotive';}
                                if($row['Backgrounds']==1){$categorytoadd.=' Backgrounds';}
                                if($row['Church']==1){$categorytoadd.=' Church';}
                                if($row['Community']==1){$categorytoadd.=' Community';}
                                if($row['Money']==1){$categorytoadd.=' Money';}
                                if($row['Food']==1){$categorytoadd.=' Food';}
                                if($row['Gaming']==1){$categorytoadd.=' Gaming';}
                                if($row['Healthcare']==1){$categorytoadd.=' Healthcare';}
                                if($row['Holidays']==1){$categorytoadd.=' Holidays';}
                                if($row['Sports']==1){$categorytoadd.=' Sports';}
                                if($row['Patriotic']==1){$categorytoadd.=' Patriotic';}
                                if($row['Retail']==1){$categorytoadd.=' Retail';}
                                if($row['Education']==1){$categorytoadd.=' Education';}
                                if($row['Misc']==1){$categorytoadd.=' Misc';}
                                $rowNumb=$row['id'];
    $poster = "<video style='width:400px; height=200px;' controls loop preload=\"none\" poster=\"https://www.siteaddress.com/ce/bannerStockUpload/" . $row['name'] ."/". $row['name'] ."_thumb.jpg\"><source src=\"https://www.siteaddress.com/ce/bannerStockUpload/". $row['name'] ."/". $row['name'] ."_thumb.mp4\" type=\"video/mp4\"><source src=\"https://www.siteaddress.com/ce/bannerStockUpload/". $row['name'] ."/". $row['name'] ."_thumb.webm\" type=\"video/webm\">";
    $link1 =  'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_1080.mp4';
    $link2 =  'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_1080.wmv';
    $link3 =  'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_1080.jpg';

    $link4 = 'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_432.mp4';
    $link5 = 'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_432.wmv';
    $link6 = 'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_432.jpg';

    $link7 = 'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_324.mp4';
    $link8 = 'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_324.wmv';
    $link9 = 'https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_324.jpg';

    $link10 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_216.mp4';
    $link11 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_216.wmv';
    $link12 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_216.jpg';

    $link13 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_184.mp4';
    $link14 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_184.wmv';
    $link15 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_184.jpg';

    $link16 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_160.mp4';
    $link17 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_160.wmv';
    $link18 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_160.jpg';

    $link19 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_128.mp4';
    $link20 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_128.wmv';
    $link21 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_128.jpg';

    $link22 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_108.mp4';
    $link23 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_108.wmv';
    $link24 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_108.jpg';

    $link25 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_80.mp4';
    $link26 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_80.wmv';
    $link27 ='https://www.siteaddress.com/ce/bannerStockUpload/'.$name.'/'.$name.'_80.jpg';

    if(file_exists($link1)){
    $row['link1'] = $link1;
    } else {$row['link1']='';}

        if(file_exists($link2)){
    $row['link2'] = $link2;
    } else {$row['link2']='';}

        if(file_exists($link3)){
    $row['link3'] = $link3;
    } else {$row['link3']='';}

        if(file_exists($link4)){
    $row['link4'] = $link4;
    } else {$row['link4']='';}

        if(file_exists($link5)){
    $row['link5'] = $link5;
    } else {$row['link5']='';}

        if(file_exists($link6)){
    $row['link6'] = $link6;
    } else {$row['link6']='';}

        if(file_exists($link7)){
    $row['link7'] = $link7;
    } else {$row['link7']='';}

        if(file_exists($link8)){
    $row['link8'] = $link8;
    } else {$row['link8']='';}

        if(file_exists($link9)){
    $row['link9'] = $link9;
    } else {$row['link9']='';}

        if(file_exists($link10)){
    $row['link10'] = $link10;
    } else {$row['link10']='';}

        if(file_exists($link11)){
    $row['link11'] = $link11;
    } else {$row['link11']='';}

        if(file_exists($link12)){
    $row['link12'] = $link12;
    } else {$row['link12']='';}

        if(file_exists($link13)){
    $row['link13'] = $link13;
    } else {$row['link13']='';}

        if(file_exists($link14)){
    $row['link14'] = $link14;
    } else {$row['link14']='';}

        if(file_exists($link15)){
    $row['link15'] = $link15;
    } else {$row['link15']='';}

        if(file_exists($link16)){
    $row['link16'] = $link16;
    } else {$row['link16']='';}

        if(file_exists($link17)){
    $row['link17'] = $link17;
    } else {$row['link17']='';}

        if(file_exists($link18)){
    $row['link18'] = $link18;
    } else {$row['link18']='';}

        if(file_exists($link19)){
    $row['link19'] = $link19;
    } else {$row['link19']='';}

        if(file_exists($link20)){
    $row['link20'] = $link20;
    } else {$row['link20']='';}

        if(file_exists($link21)){
    $row['link21'] = $link21;
    } else {$row['link21']='';}

        if(file_exists($link22)){
    $row['link22'] = $link22;
    } else {$row['link22']='';}

        if(file_exists($link23)){
    $row['link23'] = $link23;
    } else {$row['link23']='';}

        if(file_exists($link24)){
    $row['link24'] = $link24;
    } else {$row['link24']='';}

        if(file_exists($link25)){
    $row['link25'] = $link25;
    } else {$row['link25']='';}

        if(file_exists($link26)){
    $row['link26'] = $link26;
    } else {$row['link26']='';}

        if(file_exists($link27)){
    $row['link27'] = $link27;
    } else {$row['link27']='';}

    $row['class']= $categorytoadd;
    $row['poster'] = $poster;
    array_push($myArray, $row);

}
?>

<!doctype html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="app">
      <input type='text' v-model='keyword' placeholder='search item'>
  <button v-on:click='showall'>ALL</button>
      <button v-on:click="showauto">Auto</button>
      <button v-on:click="showbackgrounds">Backgrounds</button>
      <button v-on:click="showchurch">Church</button>
      <button v-on:click="showcommunity">Community</button>
      <button v-on:click="showmoney">Money</button>
      <button v-on:click="showfood">Food</button>
      <button v-on:click="showgaming">Gaming</button>
      <button v-on:click="showhealthcare">Healthcare</button>
      <button v-on:click="showholidays">Holidays</button>
      <button v-on:click="showsports">Sports</button>
      <button v-on:click="showpatriotic">Patriotic</button>
      <button v-on:click="showretail">Retail</button>
      <button v-on:click="showeducation">Education</button>
      <button v-on:click="showmisc">Misc</button>


      <div v-for="item in filteredItemList">
<div :class="['video', item.class]">
    <div v-html='item.poster'>

    </div>
    <p>{{ item.name_short }} - {{item.id}}</p>
    <select>
    <option v-if="link1!===''">
    <a :href="item.link1">1920x1080.mp4</a>    
        </option>
    <option v-if="link2!===''">
    <a :href="item.link2">1920x1080.wmv</a>    
        </option>
    <option v-if="link3!===''">
    <a :href="item.link3">1920x1080.jpg</a>    
        </option>

    <option v-if="link4!===''">
    <a :href="item.link4">432x432.mp4</a>    
        </option>
    <option v-if="link5!===''">
    <a :href="item.link5">432x432.wmv</a>    
        </option>
    <option v-if="link6!===''">
    <a :href="item.link6">432x432.jpg</a>    
    </option>

    <option v-if="link7!===''">
    <a :href="item.link7">432x324.mp4</a>    
        </option>
    <option v-if="link8!===''">
    <a :href="item.link8">432x324.wmv</a>    
        </option>
    <option v-if="link9!===''">
    <a :href="item.link9">432x324.jpg</a>

    <option v-if="link10!===''">
    <a :href="item.link10">432x216.mp4</a>    
        </option>
    <option v-if="link11!===''">
    <a :href="item.link11">432x216.wmv</a>    
        </option>
        <option v-if="link12!===''">
    <a :href="item.link12">432x216.jpg</a>    
        </option>

    <option v-if="link13!===''">
    <a :href="item.link13">432x184.mp4</a>    
        </option>
    <option v-if="link14!===''">
    <a :href="item.link14">432x184.wmv</a>    
        </option>
    <option v-if="link15!===''">
    <a :href="item.link15">432x184.jpg</a>    
        </option>

    <option v-if="link16!===''">
    <a :href="item.link16">432x160.mp4</a>    
        </option>
    <option v-if="link17!===''">
    <a :href="item.link17">432x160.wmv</a>    
        </option>
    <option v-if="link18!===''">
    <a :href="item.link18">432x160.jpg</a>    
    </option>

    <option v-if="link19!===''">
    <a :href="item.link19">432x128.mp4</a>    
        </option>
    <option v-if="link20!===''">
    <a :href="item.link20">432x128.wmv</a>    
        </option>
    <option v-if="link21!===''">
    <a :href="item.link21">432x128.jpg</a>

    <option v-if="link22!===''">
    <a :href="item.link22">432x108.mp4</a>    
        </option>
    <option v-if="link23!===''">
    <a :href="item.link23">432x108.wmv</a>    
        </option>
        <option v-if="link24!===''">
    <a :href="item.link24">432x108.jpg</a>    
        </option>
    <option v-if="link25!===''">
    <a :href="item.link25">432x80.mp4</a>    
        </option>
    <option v-if="link26!===''">
    <a :href="item.link26">432x80.wmv</a>    
        </option>
        <option v-if="link27!===''">
    <a :href="item.link27">432x80.jpg</a>    
        </option>

    </select>
          </div>
    </div>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      itemList: [],
        keyword:'',
    },
    created: function() {
        this.loaddata();
    },
    methods: {
            loaddata: function(){
                  var vueapp = this;
                        vueapp.itemList = <?php echo json_encode($myArray, JSON_PRETTY_PRINT); ?>;
                },
        showall: function(){
            $('.video:not(.all)').hide();
          $('.video:not(.all)').show();  
        },
        showauto: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Automotive)').hide();
        },

        showbackgrounds: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Backgrounds)').hide();            
        },

        showchurch: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Church)').hide();
        },

        showcommunity: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Community)').hide();
        },

        showmoney: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Money)').hide();
        },

        showfood: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Food)').hide();
        },

        showgaming: function(){
       $('.video:not(.all)').hide();
       $('.video:not(.all)').show();
       $('.video:not(.Gaming)').hide();
        },

        showhealthcare: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Healthcare)').hide();
        },

        showholidays: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Holidays)').hide();
        },

        showsports: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Sports)').hide();
        },

        showpatriotic: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Patriotic)').hide();
        },

        showretail: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Retail)').hide();
        },

        showeducation: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Education)').hide();
        },
        showmisc: function(){
        $('.video:not(.all)').hide();
        $('.video:not(.all)').show();
        $('.video:not(.Misc)').hide();
        },        
    },
        computed:{
    filteredItemList(){
      return this.itemList.filter((item) => {
        return item.name_short.toLowerCase().includes(this.keyword.toLowerCase());
      });
    },
  }
  });
  </script>
</body>
</html>

我目前收到如下错误：- invalid expression: Unexpected token = in 链接11！==='' 原始表达式：v-if="link11!===''"

我只需要一种方法来创建可以从 php 传递到我的 vue 应用程序的动态下载链接。如果你们中的一个天才可以告诉我我的代码有什么问题，或者告诉我更好的方法，我将不胜感激。

【问题讨论】：

  • 总的来说，您应该真正熟悉循环。我看到您已经在使用至少一个，所以您走在正确的道路上。
  • Geeze，阅读v-for，php数组和json..摆脱你不需要的jquery，你可以使用v-show代替..

标签： php mysql vue.js download vuejs2


【解决方案1】：

在这些条件表达式中，= 太多了。

例如，在：

<option v-if="link11!===''">

删除=，例如：

<option v-if="link11!==''">

--

做：

data: {
  itemList: [],
  keyword:'',
  link1: '', // added from here
  link2: '',
  link3: '',
  link4: '',
  link5: '',
  link6: '',
  link7: '',
  link8: '',
  link9: '',
  link10: '',
  link11: '',
  link12: '',
  link13: '',
  link14: '',
  link15: '',
  link16: '',
  link17: '',
  link18: '',
  link19: '',
  link20: '',
  link21: '',
  link22: '',
  link23: '',
  link24: '',
  link25: '',
  link26: '',
  link27: '', // to here
},

我一一声明了道具以保留您已经使用的模式。但是，正如 cmets 所提到的，您可能应该考虑使用循环。

【讨论】：

  • 现在我得到了输出，但我得到了这个错误 vue.js:597 [Vue 警告]：属性或方法“link16”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：vuejs.org/v2/guide/…。
  • 那行不通。我需要每个 json 对象都有链接值，这就是我在 for 循环中完成所有这些操作的原因。
  • 是的，错误消失了，但没有任何效果。我需要每个名称的这些值，因为我正在检查名称为 $row['name'] 的文件是否存在于每个名称中，但扩展名不同。
  • 那是因为你的itemList: [] 是一个空数组。您必须使用必要的数据填充它。
  • no no no item list 工作正常。我可以按类别搜索和搜索。文档中唯一不起作用的部分是链接和动态下载。
猜你喜欢
  • 2011-09-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-01
  • 2015-07-01
  • 2012-10-05
  • 2011-12-19
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode