商城项目回顾整理（一）前台页面布局
登录页面：
1 <%@ page language="java" contentType="text/html; charset=utf-8"
2 pageEncoding="utf-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5
6 <head>
7 <meta charset="utf-8" />
8 <title>登录</title>
9 <link rel="shortcut icon" href="img/logo1.jpg"/>
10
11 <link rel="stylesheet" href="css/bootstrap.css" />
12 <script src="js/jquery-3.2.1.min.js"></script>
13 <script src="js/bootstrap.js"></script>
14 <script src="js/swal.js" type="text/javascript" charset="utf-8"></script>
15 </head>
16 <style type="text/css">
17 /*header*/
18 header {width: 100%;height: 104px;background: #00559a;color: #fff;padding-top: 12px;}
19 header a {color: #fff;font-weight: bold;}
20 header a span:nth-child(2) {color: #f00;}
21 header a:hover {color: #fff;}
22 header .right { float: right;}
23 header .left {float: left;margin: 20px 0 0 67px;}
24 /*footer*/
25 footer{width: 100%;height: 50px;background: #00559a;line-height: 50px;color: #fff;position: absolute;bottom: 0;}
26 /*main*/
27 #main{width: 500px;margin: auto;overflow: hidden;margin-bottom: 30px}
28 #main h1{line-height: 80px;}
29 #main .input-group{margin-bottom: 15px;position: relative;}
30 .input-group .glyphicon{position: absolute;right: 10px;top: 8px;z-index: 10;font-size: 16px;color: #f00;display: none;}
31 .btn-success{margin-top: 15px;}
32 </style>
33
34 <body>
35 <!--header-->
36 <header>
37 <div class="right col-md-3">
38
39 </div>
40 <div class="left">
41 <a href="index.jsp"><img src="img/logo.png" /></a>
42 </div>
43 </header>
44 <!--main-->
45
46 <%
47 String username="";
48 String password="";
49 Cookie[] ck=request.getCookies();
50 if(ck!=null){
51 for(Cookie c:ck){
52 System.out.print(c.getValue());
53 if("username".equals(c.getName())){
54 username=c.getValue();
55 }
56 if("password".equals(c.getName())){
57 password=c.getValue();
58 }
59 }
60 }
61 %>
62 <div id="main">
63 <h1 class="text-center">登录</h1>
64 <form action="LoginFileSeverlet" method="post" style="overflow:hidden">
65 <div class="input-group">
66 <span class="input-group-addon" >用户名 </span>
67 <input type="text" class="form-control input1" name="username" placeholder="请输入用户名" value="<%=username %>">
68 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
69 </div>
70
71 <div class="input-group">
72 <span class="input-group-addon">密 码</span>
73 <input type="password" class="form-control input2" name="password" placeholder="请输入密码" value="<%=password %>">
74 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
75 </div>
76
77 <div>记住密码 <input type="checkbox" class="input3" name="remember" ></div>
78 <div>
79
80 </div>
81 <input class="btn btn-success col-md-12" type="submit" value="登录"/>
82
83 </form>
84
85 <h4 style="margin-top:60px;text-align:right"><a href="zhuce.jsp">前往注册</a></h4>
86 </div>
87 <!--footer-->
88 <footer class="text-center"> 版权：汉企玛雅科技 </footer>
89 </body>
90 <script type="text/javascript">
91 var flag = true;
92 $(".input-group input").on("blur",function(){
93 if($(this).val() == ""){
94 $(this).siblings(".glyphicon").css("display","block");
95 flag = false;
96 }
97 })
98 $(".input-group input").on("focus",function(){
99 $(this).siblings(".glyphicon").css("display","none");
100 })
101
102 $(".btn-success").on("click",function(){
103 var flag = true;
104 if($(".input1").val() == ""||$(".input2").val() == ""){
105 flag = false;
106 swal("提示!", "不能有空选项", "error");
107 }
108 return flag;
109 })
110 </script>
111 </html>注册页面：
1 <%@ page language="java" contentType="text/html; charset=utf-8"
2 pageEncoding="utf-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5
6 <head>
7 <meta charset="utf-8" />
8 <title>注册</title>
9 <link rel="shortcut icon" href="img/logo1.jpg"/>
10 <link rel="stylesheet" href="css/bootstrap.css" />
11 <script src="js/jquery-3.2.1.min.js"></script>
12 <script src="js/bootstrap.js"></script>
13 <script src="js/swal.js" type="text/javascript" charset="utf-8"></script>
14
15 </head>
16 <style type="text/css">
17 /*header*/
18 header {width: 100%;height: 104px;background: #00559a;color: #fff;padding-top: 12px;}
19 header a {color: #fff;font-weight: bold;}
20 header a span:nth-child(2) {color: #f00;}
21 header a:hover {color: #fff;}
22 header .right { float: right;}
23 header .left {float: left;margin: 20px 0 0 67px;}
24 /*footer*/
25 footer{width: 100%;height: 50px;background: #00559a;line-height: 50px;color: #fff;position: absolute;bottom: 0;}
26 /*main*/
27 #main{width: 500px;margin: auto;overflow: hidden;margin-bottom: 30px}
28 #main h1{line-height: 80px;}
29 #main .input-group{margin-bottom: 15px;position: relative;}
30 .input-group .glyphicon{position: absolute;right: 10px;top: 8px;z-index: 10;font-size: 16px;color: #f00;display: none;}
31 .btn-success{margin-top: 15px;}
32 </style>
33
34 <body>
35 <!--header-->
36 <header>
37 <div class="right col-md-3">
38
39 </div>
40 <div class="left">
41 <a href="index.jsp"><img src="img/logo.png" /></a>
42 </div>
43 </header>
44 <!--main-->
45 <div id="main">
46 <h1 class="text-center">注册</h1>
47 <form action="RegisterFile2" method="post">
48 <div class="input-group">
49 <span class="input-group-addon" >用户名 </span>
50 <input type="text" class="form-control input1" name="yhm" placeholder="请输入用户名" id="yhm">
51 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
52 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
53
54 </div>
55
56 <div class="input-group">
57 <span class="input-group-addon">密 码</span>
58 <input type="password" class="form-control input2" name="upassword" placeholder="请输入密码">
59 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
60 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
61
62 </div>
63 <div class="input-group">
64 <span class="input-group-addon">确认密码</span>
65 <input type="password" class="form-control input3" name="upassword1" placeholder="请确认密码">
66 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
67 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
68
69 </div>
70 <div class="input-group">
71 <span class="input-group-addon">昵 称</span>
72 <input type="text" class="form-control input4" name="nicheng" placeholder="请输入昵称">
73 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
74 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
75
76 </div>
77 <div class="input-group">
78 <span class="input-group-addon">邮 箱</span>
79 <input type="email" class="form-control input5" name="email" placeholder="请输入邮箱">
80 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
81 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
82
83 </div>
84 <input class="btn btn-success col-md-12" type="submit" value="注册"/>
85 </form>
86 <h4 style="margin-top:60px;text-align:right"><a href="denglu.jsp">直接登录</a></h4>
87 </div>
88 <!--footer-->
89 <footer class="text-center"> 版权：汉企玛雅科技 </footer>
90 </body>
91 <script type="text/javascript">
92 var flag = true;
93
94
95
96
97 $("#yhm").on("blur",function(){
98 if($(this).val() == ""){
99 $(this).siblings(".glyphicon-remove").css("display","block");
100 flag = false;
101 }else{
102 var yhm =$(this).val();
103 console.log(yhm);
104 $.ajax({
105 type:"post",
106 url:"RegisterFileSeverlet",
107 data:{"yhm":yhm},
108 dataType:"text",
109 success:function(data){
110 if(data=="ok"){
111 console.log(data);
112 $("#yhm").siblings(".glyphicon-remove").css("display","none");
113 $("#yhm").siblings(".glyphicon-ok").css({"display":"block","color":"green"});
114 }else if(data=="no"){
115 console.log(data);
116 $("#yhm").siblings(".glyphicon-remove").css("display","block");
117 $("#yhm").siblings(".glyphicon-ok").css("display","none");
118 flag = false;
119 }else if(data=="false"){
120 console.log(data);
121 $("#yhm").siblings(".glyphicon-remove").css("display","block");
122 $("#yhm").siblings(".glyphicon-ok").css("display","none");
123 flag = false;
124 }
125 },
126 error:function(msg){}
127 })
128 }
129 })
130
131 $(".input-group input").on("blur",function(){
132 if($(this).val() == ""){
133 $(this).siblings(".glyphicon-remove").css("display","block");
134 flag = false;
135 }else{
136 $("#yhm").siblings(".glyphicon-remove").css("display","none");
137 $("#yhm").siblings(".glyphicon-ok").css({"display":"block","color":"green"});
138 }
139 })
140 $(".input-group input").on("focus",function(){
141 $(this).siblings(".glyphicon-remove").css("display","none");
142 $(this).siblings(".glyphicon-ok").css("display","none");
143 })
144
145 $(".btn-success").on("click",function(){
146 var flag = true;
147 if($(".input1").val() == ""||$(".input2").val() == ""||$(".input3").val() == ""||$(".input4").val() == ""||$(".input5").val() == ""){
148 flag = false;
149 swal("提示!", "不能有空选项", "error");
150 }
151 return flag;
152 })
153 </script>
154 </html>后台主页：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"
3 import="com.hanqi.model.Log,java.net.UnknownHostException,java.net.InetAddress,java.util.*,com.hanqi.dal.MethodDal"%>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
9 <script type="text/javascript"
10 src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
11 <link rel="shortcut icon" href="img/logo1.jpg"/>
12 <link type="text/css" rel="stylesheet"
13 href="jquery-easyui-1.5.1/themes/icon.css"></link>
14 <link type="text/css" rel="stylesheet"
15 href="jquery-easyui-1.5.1/themes/default/easyui.css"></link>
16 <script type="text/javascript"
17 src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
18 <title>商城后台管理</title>
19
20 <!-- <script type="text/javascript" src="js/index.js"></script> -->
21 <style type="text/css">
22 .datagrid-btable tr {
23 height: 30px;
24 }
25 </style>
26 </head>
27 <%
28 //验证session，防止直接进入该页面
29 request.setCharacterEncoding("utf-8");
30 response.setCharacterEncoding("utf-8");
31 response.setContentType("text/html; charset=utf-8");
32
33 Object obj = request.getSession().getAttribute("admin");//获取session对象
34
35 if(obj == null) {
36 response.sendRedirect("h_login_j.jsp");
37 }
38
39 %>
40 <% //访问后台主页写入日志
41 Object o=session.getAttribute("log");
42 if(o==null){
43 Log log = new Log();
44 log.setPname("admin");
45 log.setPugroup("超级管理员");
46 InetAddress address = null;
47 Date date = new Date();
48 log.setPuptime(date.toLocaleString());
49 try {
50 address = InetAddress.getLocalHost();
51 } catch (UnknownHostException e) {
52 // TODO Auto-generated catch block
53 e.printStackTrace();
54 }
55 log.setPip(address.getHostAddress());
56 log.setPlog("后台主页");
57 MethodDal m = new MethodDal();
58 m.insertLog(log);
59 session.setAttribute("log", log);
60 }
61
62 %>
63 <body class="easyui-layout">
64 <!-- 添加商品 -->
65 <div data-options="region:'north',split:true"
66 style="height: 50px; background-color: cornflowerblue">
67 <span style="height: 40px; line-height: 40px; vertical-align: center;">登录用户：<%
68 Log l = (Log) session.getAttribute("log");
69 out.print(l.getPname());
70 %> | 用户组：<%=l.getPugroup()%> | 登录时间：<%=l.getPuptime()%>
71 | 当前IP：<%=l.getPip()%>
72 </span><br>
73 </div>
74 <!-- 对话框开始 -->
75 <div data-options="region:'center',split:true"
76 style="padding: 5px; background: #eee">
77 <div id="tabs" class="easyui-tabs" style="width: 100%; height: 100%;">
78 <div title="主页" style="">
79 <table id="dg"></table>
80 <!-- 商品的表单 -->
81 <div id="zhong" style="display: none">
82 <form id="addGood" method="post"
83 style="width: 600px; padding: 20px">
84 商品名称：<input name="gname" class="tb easyui-validatebox" type="text"
85 style="width: 200px"> <span style="margin-left: 50px">商品价格：</span><input id="jiage"
86 name="gprice" class="tb easyui-numberbox" type="text" style="width: 150px;"><br>
87 商品品牌：<input name="gpinpai" class="tb easyui-validatebox" type="text"
88 style="width: 200px; margin-top: 10px"> <span
89 style="margin-left: 50px">商品类型：</span>
90 <input id="gleixing" style="width: 150px;" class="easyui-combobox" name="gleixing"
91 data-options="valueField:'id',textField:'text',url:'opdata.json'" />
92 <!-- <input name="gleixing" class="tb easyui-validatebox" type="text" style="width: 150px; margin-top: 10px"> -->
93 <br>
94 商品图片：<input name="gpricture" class="tb" type="file"
95 style="width: 200px; margin-top: 10px"><br>
96 <!-- 加载编辑器的容器 -->
97 <script id="container" name="content" type="text/plain"
98 imagePathFormat="/upload/">
99 请输入商品描述
100 </script>
101 <input type="submit" name="" id="" value="提交" />
102 <input type="reset" value="重置">
103 </form>
104 </div>
105 <!-- 商品的表单 -->
106 <div id="gai" style="display: none">
107 <!-- <div id="gai" class="easyui-dialog" data-options="closed:true"> -->
108 <form id="fromgai" action="GaiGoodsGoodst" method="post"
109 style="width: 600px; padding: 20px">
110 商品名称：<input name="gname" class="tb" type="text"
111 style="width: 200px"> <span style="margin-left: 50px">商品价格：</span><input
112 name="gprice" class="tb" type="text" style="width: 150px;"><br>
113 商品品牌：<input name="gpinpai" class="tb" type="text"
114 style="width: 200px; margin-top: 10px"> <span
115 style="margin-left: 50px">商品类型：</span><input name="gleixing"
116 class="tb" type="text" style="width: 150px"><br>
117 商品图片：<input name="gpicture" class="tb" type="text"
118 style="width: 200px; margin-top: 10px"><br> <input
119 name="xpricture" class="tb" type="file"
120 style="width: 200px; margin-top: 10px"><br>
121 <!-- 加载编辑器的容器 -->
122 <template> <input type="text" name="gdetails" id="" />
123 </template>
124 <script id="container1" name="gdetails" type="text/plain"
125 imagePathFormat="/upload/">
126
127 </script>
128 <input type="submit" name="" id="" value="提交" />
129 </form>
130 </div>
131 </div>
132 </div>
133 </div>
134 <!-- 对话框结束 -->
135 <!-- 目录开始 -->
136 <div data-options="region:'west',split:true" width=210>
137 <div id="aa" class="easyui-accordion"
138 style="width: 200px; height: 543px">
139 <div title="商品管理" style="overflow: auto; padding: 10px">
140 <ul>
141 <li class="lis"><a href="#" class="easyui-linkbutton ab abc"
142 plain="true">添加商品</a></li>
143 <li class="lis"><a href="#" class="easyui-linkbutton ab"
144 plain="true">待引进商品</a></li>
145 <li class="lis"><a href="#" class="easyui-linkbutton ab"
146 plain="true">待审核商品</a></li>
147 </ul>
148 </div>
149 <div title="订单管理" style="overflow: auto; padding: 10px">
150 <ul>
151 <li class="lis"><a href="#" class="easyui-linkbutton ab"
152 plain="true" id="neworder">新增订单</a></li>
153 <li class="lis"><a href="#" class="easyui-linkbutton ab"
154 plain="true" id="oldorder">已确认订单</a></li>
155 </ul>
156 </div>
157 <div title="用户管理" style="overflow: auto; padding: 10px">
158 <ul>
159 <li class="lis"><a href="#" class="easyui-linkbutton ab"
160 plain="true">添加用户</a></li>
161 <li class="lis"><a href="#" class="easyui-linkbutton ab"
162 plain="true">删除用户</a></li>
163 <li class="lis"><a href="#" class="easyui-linkbutton ab"
164 plain="true" id="userlook">查看用户</a></li>
165 <li class="lis"><a href="#" class="easyui-linkbutton ab"
166 plain="true" id="userlog">日志记录</a></li>
167 </ul>
168 </div>
169 <div title="促销管理" style="overflow: auto; padding: 10px"></div>
170 <div title="基础信息维护" style="overflow: auto; padding: 10px"></div>
171 </div>
172 </div>
173 <!-- 底部声明 -->
174 <div data-options="region:'south',split:true"
175 style="height: 40px; line-height: 40px; vertical-align: center; text-align: center;">
176 玛雅网络版权声明</div>
177 <!-- 目录结束 -->
178 </body>
179 <!-- 配置文件 -->
180 <script type="text/javascript" src="ueditor.config.js"></script>
181 <!-- 编辑器源码文件 -->
182 <script type="text/javascript" src="ueditor.all.js"></script>
183 <!-- 实例化编辑器 -->
184 <script type="text/javascript">
185 var editor = UE.getEditor('container');
186 var editor1 = UE.getEditor('container1');
187 </script>
188 </html>
189 <script>
190 $(function() {
191 $('#addGood').form({
192 url:'InserGoodst',
193 onSubmit: function(){
194 return $('#addGood').form('validate');//如果有为空则返回false阻止提交
195 },
196 success:function(data){
197 if(data=="true"){
198 alert("添加成功");
199 }else if(data=="false"){
200 alert("请检查信息正确！");
201 }
202 }
203 });
204
205 $('#userlog').click(function(){
206 var content = '<iframe scrolling="auto" frameborder="0" src="UserLog.jsp" style="width:100%;height:100%;"></iframe>';
207 $('#tabs').tabs('add',{
208 title:'用户日志',
209 content:content,
210 closable:true,
211 tools:[{
212 iconCls:'icon-mini-refresh',
213 handler:function(){
214 }
215 }]
216 });
217 });
218 $('#userlook').click(function(){
219 var content = '<iframe scrolling="auto" frameborder="0" src="UserLook.jsp" style="width:100%;height:100%;"></iframe>';
220 $('#tabs').tabs('add',{
221 title:'用户日志',
222 content:content,
223 closable:true,
224 tools:[{
225 iconCls:'icon-mini-refresh',
226 handler:function(){
227 }
228 }]
229 });
230 });
231
232 $('#neworder').click(function(){
233 var content = '<iframe scrolling="auto" frameborder="0" src="ShowOrder.jsp" style="width:100%;height:100%;"></iframe>';
234 $('#tabs').tabs('add',{
235 title:'订单管理',
236 content:content,
237 closable:true,
238 tools:[{
239 iconCls:'icon-mini-refresh',
240 handler:function(){
241 }
242 }]
243 });
244 });
245
246 $('#oldorder').click(function(){
247 var content = '<iframe scrolling="auto" frameborder="0" src="ShowOrder1.jsp" style="width:100%;height:100%;"></iframe>';
248 $('#tabs').tabs('add',{
249 title:'订单管理',
250 content:content,
251 closable:true,
252 tools:[{
253 iconCls:'icon-mini-refresh',
254 handler:function(){
255 }
256 }]
257 });
258 });
259
260 $('#dg').datagrid({
261 url : 'ShowwAllServlet',
262 striped:true,//显示斑马线
263 autoRowHeight:false,//定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。这里不设置，css中设置的行高无效
264 singleSelect:true,//只允许选择一行
265 pagination : true,
266 pageNumber : 1,
267 pageSize : 1,
268 pageList : [ 1, 3, 5 ],
269
270 toolbar : [ {
271 iconCls : 'icon-edit',
272 text : "编辑",
273 handler : function() {
274 //var gid=$('.datagrid-row-selected').find('.datagrid-cell-c1-gid').html();//获取当前被选中的行的gid
275 var gid = $('#dg').datagrid("getSelected").gid;//获取当前被选中的行的gid
276 //console.log("--------------"+gid1);
277 var content = '<iframe scrolling="auto" frameborder="0" src="EditGoods.jsp?gid='+gid+'" style="width:100%;height:100%;"></iframe>';
278 if(gid>-1){
279 $('#tabs').tabs('add',{
280 title:'修改商品',
281 content:content,
282 closable:true,
283 tools:[{
284 iconCls:'icon-mini-refresh',
285 handler:function(){
286 }
287 }]
288 });
289 }else{
290 alert("请选择您要修改的商品");
291 }
292 }
293 }, '-',{
294 iconCls : 'icon-edit',
295 text : "编辑2",
296 handler : function() {
297 var a = $(this).text();
298
299 $('#gai').dialog({
300 width : 800,
301 height : 500,
302 title : a,
303 //closed : false,
304 cache : false,
305 modal : true
306 });
307 $('#gai').dialog("open");
308 var r = $("#dg").datagrid("getSelected");//获取被选中的行，返回对象
309 $("#fromgai").form("load", r);//将被选中的信息放到弹出的的表单中，富文本编辑器的内容无法显示
310 }
311 }, '-',
312 {
313 iconCls : 'icon-cancel',
314 text : "删除",
315 handler : function() {
316 //var gid = $('#dg').datagrid("getSelections");//获取当前被选中的行
317 var gid=$('.datagrid-row-selected').find('.datagrid-cell-c1-gid').html();//获取当前被选中的行的gid
318 if(gid>-1){
319 var r1 = confirm("确定删除ID为 "+gid+" 的商品吗？");
320 if(r1) {
321 window.location.href="DelGoodServlet?gid="+gid;
322 alert("删除成功");
323 }
324 }else{
325 alert("请选中需要删除的商品");
326 }
327
328 }
329 } ,'-', {
330 iconCls : 'icon-help',
331 text : "帮助",
332 handler : function() {
333 alert('帮助按钮')
334 }
335 } ],
336
337 frozenColumns : [ [ {
338 field : '',
339 title : '',
340 width : 100,
341 checkbox : true
342 }, {
343 field : 'gid',
344 title : '商品代码',
345 width : 60
346 } ] ],
347 columns : [ [ {
348 field : "gname",
349 title : "商品名称",
350 width:200
351 }, {
352 field : "gdetails",
353 title : "商品详情",
354 width:100
355 }, {
356 field : "gpicture",
357 title : "图片",
358 width:100
359 }, {
360 field : "gprice",
361 title : "价格",
362 width:50
363 }, {
364 field : "gleixing",
365 title : "类型",
366 width:50
367 }, {
368 field : "gpinpai",
369 title : "品牌",
370 width:100
371 } ] ],
372
373 });
374 $('.abc').click(function() {
375 var a = $(this).text();
376 // alert(a);
377 $('#zhong').dialog({
378 width : 800,
379 height : 500,
380 title : a,
381 closed : false,
382 cache : false,
383 modal : true
384 })
385 });
386 });
387 </script>前台主页：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8" import="com.hanqi.dal.MethodDal"%>
3 <!DOCTYPE html>
4 <html>
5
6 <head>
7 <meta charset="utf-8" />
8 <title>商城</title>
9 <link rel="shortcut icon" href="img/logo1.jpg"/>
10
11 <link rel="stylesheet" type="text/css" href="css/currency.css" />
12 <link rel="stylesheet" href="css/style.css" />
13 <link rel="stylesheet" href="css/bootstrap.css" />
14 <script src="js/jquery-1.10.1.min.js"></script>
15 <script src="js/bootstrap.js"></script>
16 </head>
17 <%
18 //获取存入的用户名，调用方法查询商品数量
19 String scuser=(String)session.getAttribute("username");
20 MethodDal m= new MethodDal();
21 int sum=m.getGoodsSum(scuser);
22 %>
23 <style type="text/css">
24 /*main*/
25 #main{width: 1275px;margin: auto;overflow: hidden;margin-bottom: 30px;}
26 #main li{margin-bottom: 15px;float: left;}
27 </style>
28
29 <body>
30 <%
31 /* request.setCharacterEncoding("utf-8");
32 response.setCharacterEncoding("utf-8");
33 response.setContentType("text/html; charset=utf-8");
34
35 Object obj = request.getSession().getAttribute("username");//获取session对象
36
37 if(obj == null) {
38 response.sendRedirect("denglu.jsp");
39 } */
40
41 %>
42 <!--header-->
43 <header>
44 <div class="right col-md-3">
45 <p class="col-md-6">你好,<span><%String username=(String)session.getAttribute("username");if(username==null){out.print("<a href='denglu.jsp'>请登录</a>");}else{out.print(username);} %></span></p>
46 <a href="shoppingcar.jsp">
47 <span class="glyphicon glyphicon-shopping-cart"></span>
48 <span><%=sum %></span>
49 </a>
50 <a href="##" style="margin-left:20px">退出</a>
51 </div>
52 <div class="left">
53 <a href="index.jsp"><img src="img/logo.png" /></a>
54 </div>
55 </header>
56 <!--nav-->
57 <nav class="navbar navbar-default" style="margin-bottom: 0;">
58 <div class="container-fluid">
59 <div class="navbar-header">
60 <a class="navbar-brand" href="index.jsp"> HanQiStore</a>
61 </div>
62
63 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
64 <ul class="nav navbar-nav">
65 <li class="active">
66 <a href="index.jsp">首页 <span class="sr-only">(current)</span></a>
67 </li>
68 <li>
69 <a href="showlist.jsp?id=1">上装</a>
70 </li>
71 <li>
72 <a href="showlist.jsp?id=2">下装</a>
73 </li>
74 <li>
75 <a href="showlist.jsp?id=3">鞋类</a>
76 </li>
77 </ul>
78 <form class="navbar-form navbar-right">
79 <div class="form-group">
80 <input type="text" class="form-control" placeholder="Search">
81 </div>
82 <button type="submit" class="btn btn-default">Submit</button>
83 </form>
84
85 </div>
86 </div>
87 </nav>
88 <!--thin-->
89 <img style="width: 100%;" src="img/thin.jpg"/>
90 <!--轮播图-->
91 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
92 <!-- Indicators -->
93 <ol class="carousel-indicators">
94 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
95 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
96 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
97 </ol>
98
99 <!-- Wrapper for slides -->
100 <div class="carousel-inner" role="listbox">
101 <div class="item active">
102 <a href="showlist.jsp?id=1"><img src="img/banner1.jpg" alt="banner1.jpg"></a>
103 </div>
104 <div class="item">
105 <a href="showlist.jsp?id=2"><img src="img/banner2.jpg" alt="banner2.jpg"></a>
106 </div>
107 <div class="item">
108 <a href="showlist.jsp?id=3"><img src="img/banner3.jpg" alt="banner3.jpg"></a>
109 </div>
110 </div>
111
112 <!-- Controls -->
113 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
114 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
115 <span class="sr-only">Previous</span>
116 </a>
117 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
118 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
119 <span class="sr-only">Next</span>
120 </a>
121 </div>
122 <!--选择你喜欢的-->
123 <h4 class="chose text-center" style="line-height: 40px;">
124 ——————————————— 选择你喜欢的 ————————————————
125 </h4>
126 <!--main-->
127 <ul id="main">
128 <li>
129 <a href="showlist.jsp?id=1"><img src="img/main1.jpg" alt="" /></a>
130 </li>
131 <li style="float:right">
132 <a href="showlist.jsp?id=2"><img src="img/main2.jpg" alt="" /></a>
133 </li>
134 <li>
135 <a href="showlist.jsp?id=3"><img src="img/main3.jpg" alt="" /></a>
136 </li>
137 <li style="float:right">
138 <a href="showlist.jsp?id=1"><img src="img/main4.jpg" alt="" /></a>
139 </li>
140 <li>
141 <a href="showlist.jsp?id=2"><img src="img/main5.jpg" alt="" /></a>
142 </li>
143 <li style="float:right">
144 <a href="showlist.jsp?id=3"><img src="img/main6.jpg" alt="" /></a>
145 </li>
146 </ul>
147 <!--footer-->
148 <footer class="text-center"> 版权：汉企玛雅科技 </footer>
149 </body>
150 </html>购物车：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8" import="com.hanqi.dal.MethodDal"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <%
7 request.setCharacterEncoding("utf-8");
8 %>
9 <meta charset="utf-8" />
10 <title>购物车</title>
11 <link rel="shortcut icon" href="img/logo1.jpg"/>
12 <link rel="shortcut icon" href="" />
13 <link rel="stylesheet" type="text/css" href="css/currency.css" />
14 <link rel="stylesheet" href="css/style.css" />
15 <link rel="stylesheet" href="css/bootstrap.css" />
16 <script src="js/jquery-1.10.1.min.js"></script>
17 <script src="js/bootstrap.js"></script>
18 </head>
19 <style type="text/css">
20 /*main*/
21 .main{width: 1275px;margin: auto;overflow: hidden;margin-bottom: 30px;min-height: 500px;padding-top: 60px;}
22 .main table .thead{height: 50px;line-height: 50px;font-size: 16px; font-weight: bold;color: #fff; text-align: center;background: #949da9;}
23 .main table th{text-align: center;}
24 .main .num{width: 40px;height: 33px;padding-left: 5px;margin:0 5px}
25 .main .glyphicon-remove{cursor: pointer;}
26 .main .btn-primary{border-radius: 0;}
27 .main .price{font-size: 16px;line-height: 16px;color: #000;padding: 2px 0;font-weight:bold;}
28 .main .allpri{font-size: 15px;color: #00539c;font-weight: bold;}
29 .main .media{text-align: left;}
30 .media-body p{font-size: 12px}
31 .main .media-heading{margin-top: 10px;}
32 .dingdan{margin-top: 40px;}
33 .dingdan p{font-size: 20px;line-height: 20px;font-weight: bold;color: #00539c;}
34 tr{border-bottom: 1px solid #eee;}
35 .media-left img{width: 90px;height: 90px;margin:0 10px 0 20px;}
36 .c_id{display:none}
37 </style>
38
39 <body>
40 <!--header-->
41 <%
42 String scuser=(String)session.getAttribute("username");
43 MethodDal m= new MethodDal();
44 int sum=m.getGoodsSum(scuser);
45 %>
46 <header>
47 <div class="right col-md-3">
48 <p class="col-md-6">你好,<span class="username"><%String username=(String)session.getAttribute("username");if(username==null){out.print("<a href='denglu.jsp'>请登录</a>");}else{out.print(username);} %></span></p>
49 <a href="##" style="margin-left:20px">退出</a>
50 </div>
51 <div class="left">
52 <img src="img/logo.png" />
53 </div>
54 </header>
55 <!--nav-->
56 <nav class="navbar navbar-default" style="margin-bottom: 0;">
57 <div class="container-fluid">
58 <div class="navbar-header">
59 <a class="navbar-brand" href="index.jsp"> HanQiStore</a>
60 </div>
61
62 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
63 <ul class="nav navbar-nav">
64 <li>
65 <a href="index.jsp">首页 </a>
66 </li>
67 <li>
68 <a href="showlist.jsp?id=1">上装</a>
69 </li>
70 <li>
71 <a href="showlist.jsp?id=2">下装</a>
72 </li>
73 <li>
74 <a href="showlist.jsp?id=3">鞋类</a>
75 </li>
76 </ul>
77 </div>
78 </div>
79 </nav>
80 <!--thin-->
81 <img style="width: 100%;" src="img/thin.jpg"/>
82 <!--main-->
83 <div class="main">
84 <h2 style="margin-bottom: 50px;">购物车</h2>
85 <table class="col-md-12 text-center">
86 <!-- 购物车主体 -->
87 </table>
88 <div class="col-md-3 col-md-offset-9 dingdan">
89 <p style="float: left;">订单总计</p>
90 <p class="sum" style="float:right">￥00.00</p>
91 </div>
92 <div class="col-md-3 col-md-offset-9 dingdan">
93 <a href="##" class="btn btn-success col-md-5 submits" >提交订单</a>
94 <button class="btn btn-danger col-md-5 col-md-offset-2">继续购物</button>
95 </div>
96 </div>
97
98 <!--footer-->
99 <footer class="text-center"> 版权：汉企玛雅科技 </footer>
100 </body>
101 <script type="text/javascript">
102 var user = $(".username").html();
103 $.ajax({
104 url:"Servlet_Cart",
105 async:true,
106 data:{user:user},
107 type:"post",
108 dataType:"json",
109 success:function(data){
110 //console.log(data.result);
111 var str = "<tr class='thead'>"+
112 "<th class='col-md-4'>NBA产品</th>"+
113 "<th class='col-md-2'>价格</th>"+
114 "<th class='col-md-2'>数量</th>"+
115 "<th class='col-md-2'>总计</th>"+
116 "<th class='col-md-2'>删除</th>"+
117 "</tr>"
118 var str1 = "";
119 var sum = 0;
120 for(var i = 0;i<data.result.length;i++){
121 str +="<tr style='height: 120px'class='scar'>"+
122 "<td class='first'>"+
123 "<div class='media'>"+
124 "<div class='media-left'>"+
125 "<a href='#'>"+
126 "<img src='img/"+data.result[i].sl[0].gdetails+"' alt='...'>"+
127 "</a>"+
128 "</div>"+
129 "<div class='media-body'>"+
130 "<h4 class='media-heading'>"+data.result[i].sl[0].gname+"</h4>"+
131 "<p>尺寸：<span>"+data.result[i].scsize+"</span></p>"+
132 "<p>颜色：图片色</p><span class = 'c_id'>"+data.result[i].scid+"</span>"+
133 "</div>"+
134 "</div>"+
135 "</td>"+
136 "<td class='price'>￥"+data.result[i].sl[0].gid+"</td>"+
137 "<td>"+
138 "<span class = 'c_id'>"+data.result[i].scid+"</span>"+
139 "<button class='btn btn-primary jian'><span class='glyphicon glyphicon-minus' aria-hidden='true'></span></button>"+
140 "<input class='num' type='text' value='"+data.result[i].i_scnum+"' />"+
141 "<button class='btn btn-primary jia'><span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>"+
142 "</td>"+
143 "<td class='allpri'>¥"+parseInt(data.result[i].i_scnum)*parseInt(data.result[i].sl[0].gid)+"</td>"+
144 "<td><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></td>"+
145 "</tr>"
146 sum += (parseInt(data.result[i].i_scnum))*(parseInt(data.result[i].sl[0].gid));
147 }
148 $("table").html(str+str1)
149 $(".dingdan .sum").html("￥"+sum);
150
151 //改变数量
152 $(".jia").on("click",function(){
153 var i = $(this).siblings(".num").val();
154 $(this).siblings(".num").val(parseInt(i)+1);
155 var c_id = $(this).siblings(".c_id").html();
156 // debugger;
157 $.ajax({
158 url:"Servlet_Cart1",
159 data:{scid:c_id,scnum:parseInt(i)+1},
160 type:"post",
161 dataType:"json",
162 success:function(data){
163 //console.log(data);
164 }
165 });
166 var num = $(this).siblings(".num").val();
167 var price = $(this).parent().siblings(".price").html().substr(1);
168 $(this).parent().next().html("￥"+parseInt(num)*parseInt(price));
169 var ap = 0;
170 for(var i=0;i<$(".allpri").length;i++){
171 ap += parseInt($(".allpri").eq(i).html().substr(1));
172 }
173 $(".dingdan .sum").html("￥"+ap);
174
175 })
176 $(".jian").on("click",function(){
177 var i = $(this).siblings(".num").val();
178 if(i>1){
179 $(this).siblings(".num").val(parseInt(i)-1);
180 var c_id = $(this).siblings(".c_id").html();
181 $.ajax({
182 url:"Servlet_Cart1",
183 data:{scid:c_id,scnum:parseInt(i)-1},
184 type:"post",
185 dataType:"json",
186 success:function(data){
187 //console.log(data);
188 }
189 })
190 var num = $(this).siblings(".num").val();
191 var price = $(this).parent().siblings(".price").html().substr(1);
192 $(this).parent().next().html("￥"+parseInt(num)*parseInt(price));
193 var ap = 0;
194 for(var i=0;i<$(".allpri").length;i++){
195 ap += parseInt($(".allpri").eq(i).html().substr(1));
196 }
197 $(".dingdan .sum").html("￥"+ap);
198 }
199 })
200 //删除某一行
201 $(".glyphicon-remove").on("click",function(){
202 var sendid = $(this).parents(".scar").find(".c_id").html();
203 $.ajax({
204 url:"Servlet_Cart2",
205 data:{sendid:sendid},
206 type:"post",
207 dataType:"json",
208 success:function(data){
209 //console.log(data)
210 }
211 })
212 var ap = 0;
213 for(var i=0;i<$(".allpri").length;i++){
214 ap += parseInt($(".allpri").eq(i).html().substr(1));
215 }
216 $(".dingdan .sum").html("￥"+ap);
217 $(this).parents(".scar").remove();
218
219 })
220 //提交订单
221 var username = $(".username").html();//所属用户
222 console.log(username);
223 $(".submits").on("click",function(){
224 //$(".submits").attr("href","test.jsp?username="+username+"&sum="+sum);
225 window.location.href="test.jsp?username="+username+"&sum="+sum;
226
227 })
228 }
229 })
230 //提交跳转
231
232 </script>
233 </html>商品列表：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8" import="com.hanqi.dal.MethodDal" %>
3 <!DOCTYPE html>
4 <html>
5
6 <head>
7 <meta charset="utf-8" />
8 <title>列表页</title>
9 <link rel="shortcut icon" href="img/logo1.jpg"/>
10 <link rel="stylesheet" type="text/css" href="css/currency.css" />
11 <link rel="stylesheet" href="css/style.css" />
12 <link rel="stylesheet" href="css/bootstrap.css" />
13 <script src="js/jquery-1.10.1.min.js"></script>
14 <script src="js/bootstrap.js"></script>
15 <script src="js/axios.min.js" charset="utf-8"></script>
16 <script src="js/vue.js"></script>
17 </head>
18 <style type="text/css">
19 /*main*/
20 .main{width: 1275px;margin: auto;overflow: hidden;margin-bottom: 30px;min-height: 500px;}
21 .main .left{background: #393f48;height: 450px;padding-top: 50px;}
22 .main .left h3{color: #fff;font-size: 18px;line-height: 18px;font-weight: bold; padding: 40px 0 12px 0px; margin: 0 0 28px 0; border-bottom: 1px solid #5e646c;display: block;}
23 .main .left li{color: #fff;line-height: 30px;}
24 .main .left .btn{margin-top: 30px;}
25 .main .right select{ float: right;margin:25px 0;padding: 10px 35px;border-radius: 5px;}
26 .main .right .row{clear: both;}
27 .main .right .row .thumbnail h3{color: #f00;margin-top: 10px;}
28 .caption p{font-size: 16px;margin-left: 5px;height:66px}
29 .thumbnail:hover{border:1px solid #f00}
30 </style>
31
32 <body>
33 <%
34 //获取存入的用户名，调用方法查询商品数量
35 String scuser=(String)session.getAttribute("username");
36 MethodDal m= new MethodDal();
37 int sum=m.getGoodsSum(scuser);
38 %>
39 <!--header-->
40 <header>
41 <div class="right col-md-3">
42 <p class="col-md-6">你好,<span><%String username=(String)session.getAttribute("username");if(username==null){out.print("<a href='denglu.jsp'>请登录</a>");}else{out.print(username);} %></span></p>
43 <a href="shoppingcar.jsp">
44 <span class="glyphicon glyphicon-shopping-cart"></span>
45 <span><%=sum %></span>
46 </a>
47 <a href="##" style="margin-left:20px">退出</a>
48 </div>
49 <div class="left">
50 <img src="img/logo.png" />
51 </div>
52 </header>
53 <!--nav-->
54 <nav class="navbar navbar-default" style="margin-bottom: 0;">
55 <div class="container-fluid">
56 <div class="navbar-header">
57 <a class="navbar-brand" href="index.jsp"> HanQiStore</a>
58 </div>
59
60 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
61 <ul class="nav navbar-nav">
62 <li>
63 <a href="index.jsp">首页 </a>
64 </li>
65 <li class="affix22">
66 <a href="showlist.jsp?id=1">上装</a>
67 </li>
68 <li>
69 <a href="showlist.jsp?id=2">下装</a>
70 </li>
71 <li>
72 <a href="showlist.jsp?id=3">鞋类</a>
73 </li>
74 </ul>
75 <form class="navbar-form navbar-right">
76 <div class="form-group">
77 <input type="text" class="form-control" placeholder="Search">
78 </div>
79 <button type="submit" class="btn btn-default">Submit</button>
80 </form>
81
82 </div>
83 </div>
84 </nav>
85 <!--thin-->
86 <img style="width: 100%;" src="img/thin.jpg"/>
87 <!--main-->
88 <div class="main">
89 <div class="left col-md-2">
90 <h3 class="col-md-10">价格区间</h3>
91 <form action="" method="post" class="col-md-10">
92 <ul>
93 <li><input type="checkbox" name="" id="" value="" /> ￥ 1-199</li>
94 <li><input type="checkbox" name="" id="" value="" /> ￥ 200-399</li>
95 <li><input type="checkbox" name="" id="" value="" /> ￥ 400-599</li>
96 <li><input type="checkbox" name="" id="" value="" /> ￥ 600以上</li>
97 </ul>
98 <input class="btn btn-default col-md-12" type="submit" value="进行筛选"/>
99 </form>
100
101 </div>
102 <div class="right col-md-10">
103 <select name="">
104 <option value="">每页30件商品</option>
105 <option value="">每页20件商品</option>
106 <option value="">每页10件商品</option>
107 </select>
108 <!--list-->
109 <div class="row" id="rowlist">
110 <div class="col-md-3 shows" v-for="item in items">
111 <div class="thumbnail">
112 <a v-bind:href="['details.jsp?gid='+item.gid]"><img v-bind:src="['img/'+item.gpicture]" alt="..."></a>
113 <div class="caption">
114 <h3>￥ {{item.gprice}}</h3>
115 <p>{{item.gname}}</p>
116 <p><a v-bind:href="['details.jsp?gid='+item.gid]" class="btn btn-primary col-md-12" role="button">加入购物车</a></p>
117 </div>
118 </div>
119 </div>
120 </div>
121 </div>
122 </div>
123
124 <!--footer-->
125 <footer class="text-center"> 版权：汉企玛雅科技 </footer>
126
127 <script type="text/javascript">
128 $(function(){
129 var str = window.location.href.split("=")[1];
130 //判断此时在哪个页面
131 if(str == "1"){
132 $(".navbar-nav li")[1].className = "active";
133 var app = new Vue({
134 el:"#rowlist",
135 data:{
136 message:"￥ 998.00",
137 items:"a"
138 },
139 created: function() { //此函数先执行
140 var that = this;
141 var param = new URLSearchParams();
142 param.append("gleixing",str);
143 axios.post("Sevlet_List",param)
144 .then(function(res) {
145 that.items = res.data.result;
146 });
147 }
148 })
149 }else if(str == "2"){
150 $(".navbar-nav li")[2].className = "active";
151 var app = new Vue({
152 el:"#rowlist",
153 data:{
154 message:"￥ 998.00",
155 items:"a"
156 },
157 created: function() { //此函数先执行
158 var that = this;
159 var param = new URLSearchParams();
160 param.append("gleixing",str);
161 axios.post("Sevlet_List",param)
162 .then(function(res) {
163 that.items = res.data.result;
164 });
165 }
166 })
167 }else if(str == "3"){
168 $(".navbar-nav li")[3].className = "active";
169 var app = new Vue({
170 el:"#rowlist",
171 data:{
172 message:"￥ 998.00",
173 items:"a"
174 },
175 created: function() { //此函数先执行
176 var that = this;
177 var param = new URLSearchParams();
178 param.append("gleixing",str);
179 axios.post("Sevlet_List",param)
180 .then(function(res) {
181 that.items = res.data.result;
182 });
183 }
184 })
185 }
186
187
188 })
189 </script>
190 </body>
191
192 </html>商品详情页：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8" import="com.hanqi.dal.MethodDal" %>
3 <!DOCTYPE html>
4 <html>
5
6 <head>
7 <meta charset="utf-8" />
8 <title>详情页</title>
9 <link rel="shortcut icon" href="img/logo1.jpg"/>
10 <link rel="stylesheet" type="text/css" href="css/currency.css" />
11 <link rel="stylesheet" href="css/style.css" />
12 <link rel="stylesheet" href="css/bootstrap.css" />
13 <script src="js/jquery-1.10.1.min.js"></script>
14 <script src="js/bootstrap.js"></script>
15 <script src="js/axios.min.js" charset="utf-8"></script>
16 <script src="js/vue.js"></script>
17 <script src="js/swal.js"> </script>
18 </head>
19 <style type="text/css">
20 /*main*/
21 .main{width: 1275px;margin: auto;overflow: hidden;margin-bottom: 30px;min-height: 500px;padding-top: 60px;}
22 .main .left{border: 1px solid #eee;padding: 0;}
23 .main .left img{width: 100%;}
24 .main .right h3{padding: 0 6% 10px 0; font-size: 24px;}
25 .main .right p{ color: #00559a;font-size: 24px;margin-left: 8px;line-height: 50px; margin-bottom: 20px;}
26 .main .right p small{font-size: 67%; color: #808285;margin-left: 10px;text-decoration: line-through;}
27 .check{margin-left: 15px;padding: 15px 0;border-top: 1px solid #e0e3e9;border-bottom: 1px solid #e0e3e9;}
28 .check li{font-size: 16px;padding: 15px 0;overflow: hidden;}
29 .check li .num{width: 40px;height: 33px;padding-left: 5px;}
30 .check li .btn{font-weight: bold;}
31 .main .bottom{min-height: 200px;}
32 .main .bottom h3{color: #005faf; font-size: 20px;}
33
34 </style>
35
36 <body>
37 <%
38 //获取存入的用户名，调用方法查询商品数量
39 String scuser=(String)session.getAttribute("username");
40 MethodDal m= new MethodDal();
41 int sum=m.getGoodsSum(scuser);
42 %>
43 <!--header-->
44 <header>
45 <div class="right col-md-3">
46 <p class="col-md-6">你好：<span class="user"><%String username=(String)session.getAttribute("username");if(username==null){out.print("<a href='denglu.jsp'>请登录</a>");}else{out.print(username);} %></span></p>
47 <a href="shoppingcar.jsp">
48 <span class="glyphicon glyphicon-shopping-cart"></span>
49 <span><%=sum %></span>
50 </a>
51 <a href="##" style="margin-left:20px">退出</a>
52 </div>
53 <div class="left">
54 <img src="img/logo.png" />
55 </div>
56 </header>
57 <!--nav-->
58 <nav class="navbar navbar-default" style="margin-bottom: 0;">
59 <div class="container-fluid">
60 <div class="navbar-header">
61 <a class="navbar-brand" href="index.jsp"> HanQiStore</a>
62 </div>
63
64 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
65 <ul class="nav navbar-nav">
66 <li>
67 <a href="index.jsp">首页 </a>
68 </li>
69 <li>
70 <a href="showlist.jsp?id=1">上装</a>
71 </li>
72 <li>
73 <a href="showlist.jsp?id=2">下装</a>
74 </li>
75 <li>
76 <a href="showlist.jsp?id=3">鞋类</a>
77 </li>
78 </ul>
79
80 </div>
81 </div>
82 </nav>
83 <!--thin-->
84 <img style="width: 100%;" src="img/thin.jpg"/>
85 <!--main-->
86 <div class="main">
87 <div class="left col-md-5">
88 <img v-bind:src="['img/'+pic]" alt="" />
89 </div>
90 <div class="right col-md-7">
91 <h3>{{title}}</h3>
92 <p>￥ {{price}}<small>¥269.00</small> </p>
93 <ul class="check">
94 <li class="chicun">尺寸：
95 <button class="btn btn-default">S</button>
96 <button class="btn btn-default">M</button>
97 <button class="btn btn-default">L</button>
98 <button class="btn btn-default">XL</button>
99 <button class="btn btn-default">XXL</button>
100 </li>
101 <li>数量：
102 <button class="btn btn-primary jian"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
103 <input class="num" type="text" value="0" />
104 <button class="btn btn-primary jia"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></button>
105 </li>
106 <li>
107 <button class="col-md-3 btn btn-danger">立即购买</button>
108 <button class="col-md-3 col-md-offset-1 btn btn-primary jiaru">加入购物车</button>
109 </li>
110 </ul>
111 </div>
112 <div class="bottom col-md-12">
113 <p class="p_details" style="margin-left:30px"></p>
114 </div>
115 </div>
116
117 <!--footer-->
118 <footer class="text-center"> 版权：汉企玛雅科技 </footer>
119 </body>
120 <script type="text/javascript">
121
122 //接受参数，取出数据
123 var gid = window.location.href.split("=")[1];//gid
124 var user = $("header .user").html();//用户名
125 var main = new Vue({
126 el:".main",
127 data:{
128 title:"",
129 details:"",
130 pic:"",
131 price:""
132 },
133 created: function() { //此函数先执行
134 var that = this;
135 var param = new URLSearchParams();
136 param.append("gid",gid);
137 axios.post("Servlet_details",param)
138 .then(function(res){
139 that.title = res.data.result[0].gname;
140 that.details = res.data.result[0].gdetails;
141 $(".p_details").html(that.details)
142 that.pic = res.data.result[0].gpicture;
143 that.price = res.data.result[0].gprice;
144 })
145 }
146 })
147 $(function(){
148 //选择尺寸
149 var size = "";//尺寸
150 var num = 0;//数量
151 $(".chicun .btn").on("click",function(){
152 $(this).css("background","#eee");
153 $(this).siblings(".btn").css("background","#fff")
154 $(".num").val(0);
155 size = $(this).html();
156 return size;
157 })
158 //改变数量
159 var i = $(".num").val();
160 $(".jia").on("click",function(){
161 i++;
162 $(".num").val(i);
163 num = i;
164 return num;
165 })
166 $(".jian").on("click",function(){
167 if(i>1){
168 i--;
169 $(".num").val(i);
170 num = i;
171 }
172 return num;
173 })
174
175 $(".jiaru").on("click",function(){
176 if(size != "" || num != 0){
177 var param = new URLSearchParams();
178 param.append("scgid",gid);
179 param.append("scuser",user);
180 param.append("scsize",size);
181 param.append("scnum",num);
182 axios.post("Servlet_ShoppingCar",param)
183 .then(function(res){
184 if(res.data){
185 swal("Good!", "添加成功", "success");
186 }else{
187 swal("OMG!", "添加失败", "error");
188 }
189 })
190 }else{
191 swal("OMG!", "请选择参数", "error");
192 }
193 })
194
195
196 })
197 </script>
198 </html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读