View Code 主頁(yè)2:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><html> <head> <title>index</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/bootstrap-3.2.0/dist/css/bootstrap.min.css"/> <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script> </head> <style> .com{ margin:20px; height:240px; overflow:hidden; } .padding20{ padding:20px; } #index{ margin-top:100px; } </style> <body ng-app="app"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="row"> <ul class="nav navbar-nav"> <li> <c:if test="${name!=null}"> <a href="###"> 歡迎${name} </a> </c:if> </li> <li> <a href="./index.do">首頁(yè)</a> </li> <li> <a href="./detail.do">類(lèi)型頁(yè)</a> </li> <li> <a href="./cart.do"> 購(gòu)物車(chē) </a> </li> <li> <a href="./list.do"> 訂單頁(yè) </a> </li> <li><a href="./user.do">用戶(hù)信息</a></li> </ul> </div> </div> </nav> <div class="container"> <div id="index" class="row" ng-controller="index"> <div class="panel panel-default"> <div class="panel-body"> <div class="thumbnail pull-left com" ng-repeat="com in coms"> <img ng-src="{{com.img}}" width="40" height="40"> <div class="caption"> <h3>{{com.name}}</h3> <p>{{com.depict}}</p> <p> <a href="#" class="btn btn-primary" role="button" ng-click="addToCart(com.id)">添加商品</a> </p> <p> <button class="btn btn-default" ng-click="showDetail(com)"> 查看詳細(xì)? </button> </p> </div> </div> </div> </div> </div> <div class="row"> <a href="./cart.do" class="btn btn-default" role="button">去購(gòu)物車(chē)</a> </div> </div> </div> <!-- Modal --start --> <div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="detail"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"> 產(chǎn)品信息 </h4> </div> <div class="modal-body"> <p>產(chǎn)品名字{{com.name}}</p> <p>產(chǎn)品描述?{{com.depict}}</p> <p>產(chǎn)品公司{{com.manufacturer}}</p> <p>æ產(chǎn)品金額?{{com.price}}</p> <p>產(chǎn)品縮略圖?<img ng-src={{com.img}} width=50 height=50 /></p> <div class="commentBody"> <div ng-repeat="c in comments"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{c.userName}} <div class="alert" role="alert"> {{c.comment}} </div> </div> <form> <label for="text"></label> <input type="text" name="text" id="text" placehoder="評(píng)論內(nèi)容" ng-model="comment"/> <button id="submit" class="btn btn-success" ng-click="appendComment(com.id)">評(píng)論</button> </form> </div> </div> </div> </div> </div> <!-- Modal ---end --> <script> var userId = "${id}"; var app = angular.module("app", []); app.controller("index", function( $scope ) { $scope.coms = []; $scope.addToCart = function( comId ) { ajaxModule.addOrder(userId, comId); }; $scope.showDetail = function( com ) { $("#detail").modal('show'); $("#detail").scope().com = com; ajaxModule.getCommentById(com.id, function(res) { $("#detail").scope().comments = res; $("#detail").scope().$apply(); }); }; }); app.controller("detail",function($scope) { $scope.comments = []; //添加評(píng)論 $scope.appendComment = function( commodityID ) { if($scope.comment) { ajaxModule.addComment( commodityID, $scope.comment , function() { $scope.comments.push({ userName : "${name}", commment : $scope.comment }); $scope.$apply(); }); }; }; }); var ajaxModule = { getAllCom : function( cb ) { $.post("admin/getAllCom.do",cb); }, addOrder : function(userId, commodityIds ,cb) { $.post("addOrder.do",{userId:userId, commodityIds:commodityIds, commodityCounts:"1"}, function(res) { console.log("addOrder.do response is "+ res); if(res) { alert("添加成功"); }else{ alert("添加失敗"); }; }); }, getCommentById : function(id, cb) { $.post("admin/getCommentById.do",{commodityId:id}, cb); }, addComment : function(commodityID, comment ,cb) { $.post("./addComment.do", {userId : '${id}', userName : '${name}',commodityID : commodityID, comment: comment}, function( res ) { if(res) { cb&&cb(); }else{ alert("評(píng)論添加失敗"); } }); } }; function index() { ajaxModule.getAllCom(function( res ) { $("#index").scope().coms = res; $("#index").scope().$apply(); }); }; $(function() { index(); }); </script> </body></html>View Code 后臺(tái)管理界面， 這個(gè)界面只允許用戶(hù)role值為1用戶(hù)查看， 用戶(hù)角色是數(shù)據(jù)庫(kù)的用戶(hù)表關(guān)聯(lián)的， 也就是說(shuō)是管理員的時(shí)候， 才能進(jìn)入后臺(tái)頁(yè)編輯商品，編輯評(píng)論等高級(jí)功能：
界面代碼:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><html><head> <title>admin.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../css/bootstrap-3.2.0/dist/css/bootstrap.min.css"/> <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script> <style> .bs-example { position: relative; padding: 45px 15px 15px; margin: 0 -15px 15px; border-color: #E5E5E5 #EEE #EEE; border-style: solid; border-width: 1px 0; -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05); } </style></head><body> <div class="container" ng-app="app"> <div class="row"> <h2> <a href="../index.do">首頁(yè)</a> </h2> </div> <div class="row"> <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs"> <ul id="myTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a id="tab0" href="#orderform" id="home-tab" role="tab" data-toggle="tab" aria-controls="orderform" aria-expanded="true">所有訂單</a> </li> <li role="presentation"> <a id="tab1" href="#types" id="types-tab" role="tab" data-toggle="tab" aria-controls="types" aria-expanded="true">商品類(lèi)型編輯??</a> </li> <li role="presentation"> <a id="tab2" href="#pro" role="tab" id="pro-tab" data-toggle="tab" aria-controls="pro">商品編輯??</a> </li> <li role="presentation"> <a id="tab3" href="#about" role="tab" id="about-tab" data-toggle="tab" aria-controls="about">所有評(píng)論</a> </li> </ul> <div id="myTabContent" class="tab-content"> <div role="tabpanel" class="tab-pane fade in active orderform" id="orderform" aria-labelledby="home-tab" ng-controller="orderform"> <table class="table table-hover table-bordered"> <thead> <tr> <th>訂單id</th> <th>地址</th> <th>總金額?</th> <th>手機(jī)?</th> <th>詳細(xì)信息</th> </tr> </thead> <tbody> <tr ng-repeat="item in orderforms"> <th scope="row">{{item.id}}</th> <td>{{item.address}}</td> <td>{{item.totalPrice}}</td> <td>{{item.phone}}</td> <th> <a ng-click="showInfo(item.orderlist)" href="###"> 查看訂單詳細(xì)信息 </a> </th> </tr> <tr> </tbody> </table> <div class="row"> <ul class="list-group"> <li class="list-group-item" ng-repeat="com in commoditys"> <p>第{{$index+1}}條: 商品id為{{com.commodityId}}, 的總數(shù)是為{{com.commodityCount}}</p> <div commodity-directive id="{{com.commodityId}}"> <p>商品名字?{{res.name}}</p> <p>商品描述?{{res.depict}}</p> <p>商品廠商{{res.manufacturer}}</p> <p>商品價(jià)格?{{res.price}}</p> <p>商品logo?<img ng-src={{res.img}} width=50 height=50/></p> </div> </li> </ul> </div> </div> <div role="tabpanel" class="tab-pane fade types" id="types" aria-labelledby="type-tab" ng-controller="types"> <div class="row"> <ul class="list-group"> <li class="list-group-item">類(lèi)型</li> <li class="list-group-item" ng-repeat="type in types"> <div > <p> {{type.name}} <button class="btn btn-default pull-right" ng-click="delType( type.id )">刪除該類(lèi)型</button> </p> </div> </li> </ul> </div> <div class="row"> <input placeholder="新類(lèi)型名字" id="new_type" ng-model="new_type"> <button class="btn btn-default" ng-click="new_type_fn()">創(chuàng)建新類(lèi)型??</button> </div> </div> <div id="pro" role="tabpanel" class="tab-pane fade" id="pro" aria-labelledby="pro-tab" ng-controller="pros"> <br> <p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 創(chuàng)建新商品?? </button> </p> <ul class="list-group"> <li class="list-group-item" ng-repeat="com in coms"> <p>商品名{{com.name}}</p> <p>商品描述?{{com.depict}}</p> <p>商品公司{{com.manufacturer}}</p> <p>商品價(jià)格?{{com.price}}</p> <p>商品logo?<img ng-src={{com.img}} width=50 height=50 /></p> <p> <button class="btn btn-default" ng-click="removePro(com.id)"> 刪除該商品?? </button> </p> </li> </ul> </div> <div role="tabpanel" class="comments tab-pane fade" id="about" aria-labelledby="about-tab" ng-controller="comments"> <ul class="list-group"> <li class="list-group-item" ng-repeat="comment in comments"> <p>評(píng)論列表:</p> <div commodity-directive id="{{comment.commodityId}}"> <p>商品名字{{res.name}}</p> <p>商品描述?{{res.depict}}</p> </div> <div> <strong>{{comment.userName}} <b>說(shuō)</b></strong> <span>{{comment.comment}}</span> </div> </li> </ul> </div> </div> </div> </div> <!-- Modal start --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">創(chuàng)建商品</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="name">name</label> <input type=text class="form-control" id="name" placeholder="商品名"> </div> <div class="form-group"> <label for="depict">depict</label> <input type=text class="form-control" id="depict" placeholder="商品描述"> </div> <div class="form-group"> <label for="price">price</label> <input type=text class="form-control" id="price" placeholder="商品價(jià)格"> </div> <div class="form-group"> <label for="amount">amount</label> <input type="text" class="form-control" id="amount" placeholder="商品個(gè)數(shù)"> </div> <div class="form-group"> <label for="manufacturer">manufacturer</label> <input type="text" class="form-control" id="manufacturer"" placeholder="商品廠商"> </div> <div class="form-group"> <label for="img">img</label> <input type="text" class="form-control" id="img" readonly=true placeholder="圖片路徑"> <input type="file" value=上傳文件 id="upload"> </div> <select id="select" ng-controller="select"> <option ng-repeat="type in types" value="{{type.name}}"> {{type.name}} </option> </select> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button id="submit" type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Modal end--> <script> var app = angular.module("app", []); app.directive("commodityDirective", function() { return { restrict : "EA", scope : true, link : function( $scope ,$el, $iattrs) { $.post("../getComById.do", {id:$iattrs.id},function( res ) { $scope.res = res[0]; $scope.$apply(); }); } } }); app.controller("orderform", function($scope) { $scope.orderforms = []; $scope.commoditys = []; $scope.showInfo = function( info ) { $scope.commoditys = JSON.parse(info); }; }); $("#tab0").click(function() { ajaxModule.getFormAllList(".orderform"); }); app.controller("types",function($scope) {
、 
