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

╰半夏微凉° 2022-11-12 08:17 417阅读 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/shouye.css"> 
    <link rel="stylesheet" href="css/dibu_caidan.css">
    <script src="vue2.2.2.min.js" ></script>
    <script src="axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lunbo.css">
    </head>
    
    <body> 
    <div id="app">	
    	
    
    
    	
    
    <div class="carousel-wrap">
        <transition-group tag="ul" class='slide-ul' name="list">
            <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
                <a :href="list.clickUrl" >
                    <img :src="list.image" :alt="list.desc">
                </a>
            </li>
        </transition-group>
        <div class="carousel-items">
            <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
        </div>
    </div>	
    
    
    <div class="caidan">
    	<a href="chanpin_list.html" class="caidan_lianjie">
    		<img src="img/menu01.png"  class="caidan_img" />
    		<p>最新产品</p>
    	</a>
    	<a href="xinwen_list.html?cs_lxid=11&cs_lxmc=活动列表" class="caidan_lianjie">
    		<img src="img/menu02.png"  class="caidan_img" />
    		<p>活动列表</p>
    	</a>
    	<a href="xinwen_list.html?cs_lxid=10&cs_lxmc=帮助中心" class="caidan_lianjie">
    		<img src="img/menu03.png"  class="caidan_img" />
    		<p>帮助中心</p>
    	</a>
    	
    	
    	<a href="u_index.html" class="caidan_lianjie" id="yhzx_yes">
    		<img src="img/menu04.png"  class="caidan_img" />
    		<p>用户中心</p>
    	</a>	
    	
    	 
    	<a onClick="denglu0()" class="caidan_lianjie" id="yhzx_no">
    		<img src="img/menu04.png"  class="caidan_img" />
    		<p>用户中心</p>
    	</a>	
    	 
    	
    	
    	<script>
    		//自定义登录函数
    		function denglu0(){ 
    			//弹出提示框“请登录”
    			if(confirm("请登录")){ 
    				//点击确认，跳转到登录页面；点击取消没有任何效果
    				window.location.href = "u_login.html"
    			}
    		}
    		//用户已经登录,则控制【区块01】隐藏,【区块02】显示
    		if(localStorage.u_login=="yes"){ 
    			document.getElementById("yhzx_yes").style.display="";
    			document.getElementById("yhzx_no").style.display="none";
    		}else{ //没有登录,则控制【区块01】显示,【区块02】隐藏
    			document.getElementById("yhzx_yes").style.display="none";
    			document.getElementById("yhzx_no").style.display="";	
    		}
    	</script>
    </div>
    
    
    <div   v-for="xinwen in xinwens" >
    	<div class="tongzhi">
    		
    		<a v-bind:href="'xinwen_xiangqing.html?id='+xinwen.myid+'&mc='+ xinwen.mybiaoti"   class="tongzhi_lianjie">
    			<img class="tongzhi_zuo" src="img/news.png" />
    			<p class="tongzhi_neirong">{ { xinwen.mybiaoti}}</p>
    			<img class="tongzhi_you" src="img/right.png" />
    		</a>
    	</div>
    </div>	
    	
    
    
    <div class="qukuai">
    	<p class="qukuai_zuo"></p>
    	<p class="qukuai_zhong">最新上架</p>
    	<a href="chanpin_list.html" class="qukuai_you"> 更多> </a>
    </div>
    
    <div class="cp_zuixin">
    	
    	<a v-bind:href="'chanpin_xiangqing.html?id='+zxcp.cp_id+'&mc='+zxcp.cp_mingcheng" class="cp_lianjie" v-for="zxcp in zxcps">
    		<img  v-bind:src="zxcp.cp_tupian" class="cp_img" />
    		<p class="cp_mc">{ { zxcp.cp_mingcheng}}</p>
    		<p class="cp_mc2">¥ { { zxcp.jiage}}</p>
    	</a>
    </div>
    
    
    <div class="qukuai2">
    	<p class="qukuai_zuo"></p>
    	<p class="qukuai_zhong">精品推荐</p>
    	<a href="chanpin_list.html" class="qukuai_you"> 更多> </a>
    </div>
    	
    <div class="cp2_zuixin">
    	
    	<a v-bind:href="'chanpin_xiangqing.html?id='+tjcp.cp_id+'&mc='+tjcp.cp_mingcheng" class="cp2_lianjie" v-for="tjcp in tjcps">
    		<img  v-bind:src="tjcp.cp_tupian" class="cp2_img" />
    		<p class="cp2_mc">{ { tjcp.cp_mingcheng}}</p>
    		<p class="cp_mc2">¥ { { tjcp.jiage}}</p>
    	</a>
    </div>
    	
    <br><br><br>
    
    
    <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-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 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:{ 
    			//轮播代码
    			slideList: [
    				{ 
    					"clickUrl": "#",
    					"desc": "图片轮播说明1",
    					"image": "img/ban1.jpg"
    				},
    				{ 
    					"clickUrl": "#",
    					"desc": "图片轮播说明2",
    					"image": "img/ban2.jpg"
    				},
    				{ 
    					"clickUrl": "#",
    					"desc": "图片轮播说明3",
    					"image": "img/ban3.jpg"
    				}
    			],
    			currentIndex: 0,
    			timer: '',			
    			
    			xinwens:[],//新闻列表
    			zxcps:[],  //最新产品列表
    			tjcps:[]  //最新推荐产品
    		},
    		//页面初始化要执行的
    		mounted:function(){ 
    			this.GetXinwens();//this别忘记，方法名后面()不能漏
    			this.GetCps_zuixin();//this别忘记，方法名后面()不能漏
    			this.GetCps_tuijian();//this别忘记，方法名后面()不能漏
    		},
    		//自定义的方法
    		methods:{ 
    		    //轮播代码
    			go() { 
    				this.timer = setInterval(() => { 
    					this.autoPlay()
    				}, 3000)
    			},
    			stop() { 
    				clearInterval(this.timer)
    				this.timer = null
    			},
    			change(index) { 
    				this.currentIndex = index
    			},
    			autoPlay() { 
    				this.currentIndex++
    				if (this.currentIndex > this.slideList.length - 1) { 
    					this.currentIndex = 0
    				}
    			},			
    			
    			//加载新闻列表
    			GetXinwens:function(){ 
    				axios.get(`http://vue.yaoyiwangluo.com/wx_news_list.asp`,
    							{ 
    								params:{ 
    									cs_shuliang:3,  //数量
    									cs_lxid:11      //类型id
    								}
    							}	
    						 )
    				 .then(function (response) { 
    					//response.data 返回值,下面插入你要执行的代码
    					//console.log(response.data); //可以输出到控制到查看
    					this.xinwens = response.data;//返回值赋值给数组
    				  }
    				  .bind(this))
    				  .catch(function (error) { 
    					console.log(error);
    				});	//axios 结束 
    			},  //GetXinwens 结束
    			
    			//加载最新产品列表
     			GetCps_zuixin:function(){ 
    				axios.get('http://vue.yaoyiwangluo.com/wx_CpList_top4.asp')
    				  .then(function (response) { 
    					//response.data 返回值,下面插入你要执行的代码
    					//console.log(response.data)//可以输出到控制到查看
    					this.zxcps = response.data;//返回值赋值给数组
    				  }.bind(this))
    				  .catch(function (error) { 
    					console.log(error);
    				});//axios 结束 
    			},//GetCps_zuixin 结束
    			//加载推荐产品列表
    			GetCps_tuijian:function(){ 
    				axios.get('http://vue.yaoyiwangluo.com/wx_CpList_tuijian4.asp')
    				  .then(function (response) { 
    					//response.data 返回值,下面插入你要执行的代码
    					//console.log(response.data);//可以输出到控制到查看
    					this.tjcps = response.data;//返回值赋值给数组
    				  }.bind(this))
    				  .catch(function (error) { 
    					console.log(error);
    				});//axios 结束 
    			},//GetCps_tuijian 结束
    			
    			
    			
    		},//methods
    	})
    </script>
    
    
    
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: /images/20221022/0127962b2c354586b2986110fe30b8a9.png