基于vue+js的商城、购物网站毕业设计毕设源代码的实现和设计（2）分类

Bertha 。 2022-11-12 08:18 172阅读 0赞

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

## 代码 ##

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>黄菊华：Vue.js商城实战</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/chanpin_fenlei.css">
    <link rel="stylesheet" href="css/dibu_caidan.css">
    	<script src="vue2.2.2.min.js" ></script>
    	<script src="axios.min.js"></script>	
    </head>
    
    <body>
    <div id="app">
    
    <div class="fenlei"> 
      
      <div class="fenlei_zuo">
    
        <div class="fenlei_zuo_xiangmu ">分类03</div>
    	<div v-for="fl in fenleis">
       	 	<div class="fenlei_zuo_xiangmu" v-bind:class="fl.id==flid?'fenlei_zuo_xuanzhong':''"  v-on:click="cps_cs(fl.id)" >
    			{ { fl.name}}
    		</div>
        </div>
      </div>
      
      
      <div class="fenlei_you">
        <div class="cp2_zuixin"> 
    		
    	  <a v-bind:href="'chanpin_xiangqing.html?id='+cp.cp_id+'&mc='+cp.cp_mingcheng" class="cp2_lianjie" v-for="cp in chanpins"> 
    		<img  v-bind:src="cp.cp_tupian" class="cp2_img" />
            <p class="cp2_mc">{ { cp.cp_mingcheng}}</p>
            <p class="cp_mc2">¥ { { cp.jiage}}</p>
          </a> 
     
    	  
    	  
    	  </div>
      </div>
    </div>
    
    
    
    <div class="dibu_caidan" id="dl_yes">
    	<a href="index.html" class="dibu_caidan_xiangmu">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/a-on.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti dibu_caidan_xiangmu_biaoti_xuanzhong">首页</p>
    	</a>
    	<a href="chanpin_fenlei.html" class="dibu_caidan_xiangmu">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/b-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti">分类</p>
    	</a>
    	<a href="gouwuche.html" class="dibu_caidan_xiangmu">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/c-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti">购物车</p>
    		
    	</a>
    	<a href="u_index.html" class="dibu_caidan_xiangmu">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/d-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti">会员</p>
    	</a>
    </div>
    
    
    <div class="dibu_caidan" id="dl_no">
    	<a href="index.html" class="dibu_caidan_xiangmu">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/a-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti ">首页</p>
    	</a>
    	<a href="chanpin_fenlei.html" class="dibu_caidan_xiangmu">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/b-on.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti dibu_caidan_xiangmu_biaoti_xuanzhong">分类</p>
    	</a>
    	<a onClick="denglu()" class="dibu_caidan_xiangmu" style="cursor:pointer;">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/c-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti">购物车</p>
    		
    	</a>
    	<a onClick="denglu()" class="dibu_caidan_xiangmu" style="cursor: pointer">
    		<p class="dibu_caidan_xiangmu_tupian"><img src="img/d-off.png" class="dibu_caidan_xiangmu_tupian_img"></img></p>
    		<p class="dibu_caidan_xiangmu_biaoti">会员</p>
    	</a>
    </div>
    	<script>
    		function denglu(){ 
    			if(confirm("请登录")){ 
    				window.location.href = "u_login.html"
    			}
    		}
    		
    		if(localStorage.u_login=="yes"){ 
    			document.getElementById("dl_yes").style.display="";
    			document.getElementById("dl_no").style.display="none";
    		}else{ 
    			document.getElementById("dl_yes").style.display="none";
    			document.getElementById("dl_no").style.display="";	
    		}
    	
    	</script>
    
    </div>
    
    <script>
    	new Vue({ 
    	  el: '#app',
    	  data: { 
    		  chanpins:[],
    		  fenleis:[],
    		  flid:0
    	  },
    	  //页面初始化要执行的
    	  mounted:function(){ 
    		  this.getCps();
    		  this.GetFeilei();
    	  },
    	  //自定义的函数（方法）
    	  methods:{ 
    		  //页面初始化加载产品
    		  getCps:function(){ 
    			axios.get('http://vue.yaoyiwangluo.com/wx_CpList_tuijian6.asp')
    			  .then(function (response) { 
    				//response.data 返回值,下面插入你要执行的代码
    				this.chanpins = response.data;
    			  }.bind(this))
    			  .catch(function (error) { 
    				console.log(error);
    			});			  
    		  },
    		  //加载分类产品
    		  GetFeilei:function(){ 
    			axios.get('http://vue.yaoyiwangluo.com/wx_fenlei.asp')
    			  .then(function (response) { 
    				//response.data 返回值,下面插入你要执行的代码
    				this.fenleis = response.data;
    			  }.bind(this))
    			  .catch(function (error) { 
    				console.log(error);
    			});			  
    		  },
    		  
    		  //根据选择的分类，加载该分类产品
    		  cps_cs:function(cs){ 
    			  this.flid = cs;
    				axios.get('http://vue.yaoyiwangluo.com/wx_fenlei_chanpin.asp',
    							{ 
    								params:{ 
    									int_lxid1:cs
    								}
    							}				 
    						 )
    				  .then(function (response) { 
    					//response.data 返回值,下面插入你要执行的代码
    					this.chanpins = response.data;
    				  }.bind(this))
    				  .catch(function (error) { 
    					console.log(error);
    				});		  
    		  },
    		  
    		  
    	  },		
    	})
    </script>
    
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: /images/20221022/dbdbc71206ec4c80a1148171e4cd6c39.png