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

作者：盐析白兔 | 2024-02-29 16:07:11

踩

vue2简单跳转购物网站源码

效果图

在这里插入图片描述

代码

<!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>
		<!--p class="gouwucheshu">5</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>
		<!--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: {
		  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/166588

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

效果图

代码

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