基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（1）首页
效果图代码<!doctype html><html><head><meta charset="utf-8"><title>黄菊华：Vue.js商城实战-首页</title><meta name="viewport" content="width=device-width, initial-scale=1, user-sc
·
效果图
代码
<!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><!--vue.js框架-->
<script src="axios.min.js"></script><!--载入三方axios插件-->
<link rel="stylesheet" type="text/css" href="lunbo.css"><!--载入轮播的样式-->
</head>
<body>
<div id="app">
<!--查询功能-->
<!--div class="chaxun">
<input class="chaxun_neirong" type="text" placeholder=" 请输入要查询的内容" />
<button class="chaxun_anniu">查询</button>
</div-->
<!--轮播图片-->
<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>
<!--【区块01】开始--><!--【用户已经登录则显示下面区块（针对新手学习，分开写）-->
<a href="u_index.html" class="caidan_lianjie" id="yhzx_yes">
<img src="img/menu04.png" class="caidan_img" />
<p>用户中心</p>
</a><!--【区块01】结束-->
<!--【区块02】开始--><!--用户没有登录显示的区块-->
<a onClick="denglu0()" class="caidan_lianjie" id="yhzx_no">
<img src="img/menu04.png" class="caidan_img" />
<p>用户中心</p>
</a><!--【区块02】结束-->
<!--高手可以讲区块01和区块02的代码通过逻辑合并-->
<!--js处理代码块-->
<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>
<!--p class="gouwucheshu"></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>
<!--p class="gouwucheshu"></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> <!--app-->
<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>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献726条内容
所有评论(0)