前端的CSS框架用了bootstrap， 以及bootstrap的JS组件， 以及很好用的angular（angular大法好）， 项目一共包含了7个静态界面， 静态界面的数据展示都使用了angularJS , 后端是基于java的spring， 容器为tomcat， 项目代码分享到百度云盘， 这个项目的优势是， 所有的显示都是在前端完成， 数据交互也是通过Ajax完成， 没有频繁的页面跳转；先上两张商城的主图：
图一：
、
图2：
该页面可以完成商品的评价， 添加商品， 商品的搜索等功能 ， 界面jsp代码：
<%@ 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>detail.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> .commodity{ margin:10px; } .content{ margin:80px; } .commentBody{ max-heiht:200px; } </style> </head> <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">首页</a> </li> <li> <a href="./detail.do">分类页</a> </li> <li> <a href="./cart.do"> 购物车 </a> </li> <li> <a href="./list.do"> 列表页 </a> </li> <li><a href="./user.do">用户</a></li> </ul> </div> </div> </nav> <div class="container content"> <div class="row"> <p> <span class="glyphicon glyphicon-cd" aria-hidden="true"></span> <input class="form-control" id="keyword" placeholder="输入搜索关键词?"><br> <button id="search" class="btn btn-primary">搜索</button> </p> </div> <div id="groups" class="row" ng-controller="groups"> <div ng-repeat="coms in groups"> <h3> <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> <span class="label label-default"> {{coms[0].type}} </span> </h3> <div class="panel panel-default pull-left commodity" ng-repeat="com in coms"> <div class="panel-heading panel-primary"> <p>{{com.name}}</p> </div> <div class="panel-body"> <p>产品介绍?{{com.depict}}</p> <p>厂商?{{com.manufacturer}}</p> <p>金额?{{com.price}}</p> <p>产品图片?<img ng-src={{com.img}} width=50 height=50 /></p> <button class="btn btn-default" ng-click="addToCart(com.id)"> 添加到购物测 </button> <button class="btn btn-default" ng-click="showDetail(com)"> 查看详细? </button> </div> </div> <div class="clearfix "></div> </div> </div> <div class="row"> <a href="./cart.do" class="btn btn-default" role="button">去结账</a> </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"> 产品信息 </h4> </div> <div class="modal-body"> <p>产品名字{{com.name}}</p> <p>产品描述?{{com.depict}}</p> <p>产品公司{{com.manufacturer}}</p> <p>æ产品金额?{{com.price}}</p> <p>产品缩略图?<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="评论内容" ng-model="comment"/> <button id="submit" class="btn btn-success" ng-click="appendComment(com.id)">评论</button> </form> </div> </div> </div> </div> </div> <!-- Modal ---end --> </body> <script> var userId = "${id}"; var app = angular.module("app", []); app.controller("groups", function( $scope ) { $scope.groups = {}; $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 = []; //添加评论 $scope.appendComment = function( commodityID ) { if($scope.comment) { ajaxModule.addComment( commodityID, $scope.comment , function() { $scope.comments.push({ userName : "${name}", commment : $scope.comment }); $scope.$apply(); }); }; }; }); function updateIndex() { ajaxModule.getAllCom(function( res ) { var result = util.groupByType(res); $("#groups").scope().groups = result; $("#groups").scope().$apply(); }); }; function bind() { $("#search").click(function() { ajaxModule.search($("#keyword").val(), function(res) { var result = util.groupByType(res); $("#groups").scope().groups = result; $("#groups").scope().$apply(); }); }); }; /** *@desc */ var util = { /** *@desc *@return Object; */ groupByType : function( res ) { var obj = {}; for(var i=0; i<res.length; i++ ) { obj[res[i].type] = obj[res[i].type] || []; obj[res[i].type].push( res[i] ); }; return obj; } }; /** *@desc ajax */ 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("添加失败"); }; }); }, search : function(keyword, cb) { $.post("search.do", {keyword:keyword}, cb); }, 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("评论添加失败"); } }); } }; $(function() { updateIndex(); bind(); }); </script></html>View Code
主页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">首页</a> </li> <li> <a href="./detail.do">类型页</a> </li> <li> <a href="./cart.do"> 购物车 </a> </li> <li> <a href="./list.do"> 订单页 </a> </li> <li><a href="./user.do">用户信息</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)"> 查看详细? </button> </p> </div> </div> </div> </div> </div> <div class="row"> <a href="./cart.do" class="btn btn-default" role="button">去购物车</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"> 产品信息 </h4> </div> <div class="modal-body"> <p>产品名字{{com.name}}</p> <p>产品描述?{{com.depict}}</p> <p>产品公司{{com.manufacturer}}</p> <p>æ产品金额?{{com.price}}</p> <p>产品缩略图?<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="评论内容" ng-model="comment"/> <button id="submit" class="btn btn-success" ng-click="appendComment(com.id)">评论</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 = []; //添加评论 $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("评论添加失败"); } }); } }; function index() { ajaxModule.getAllCom(function( res ) { $("#index").scope().coms = res; $("#index").scope().$apply(); }); }; $(function() { index(); }); </script> </body></html>View Code后台管理界面， 这个界面只允许用户role值为1用户查看， 用户角色是数据库的用户表关联的， 也就是说是管理员的时候， 才能进入后台页编辑商品，编辑评论等高级功能：
界面代码:
<%@ 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">首页</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">商品类型编辑??</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">所有评论</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>手机?</th> <th>详细信息</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="###"> 查看订单详细信息 </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}}, 的总数是为{{com.commodityCount}}</p> <div commodity-directive id="{{com.commodityId}}"> <p>商品名字?{{res.name}}</p> <p>商品描述?{{res.depict}}</p> <p>商品厂商{{res.manufacturer}}</p> <p>商品价格?{{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">类型</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 )">删除该类型</button> </p> </div> </li> </ul> </div> <div class="row"> <input placeholder="新类型名字" id="new_type" ng-model="new_type"> <button class="btn btn-default" ng-click="new_type_fn()">创建新类型??</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"> 创建新商品?? </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>商品价格?{{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> <div commodity-directive id="{{comment.commodityId}}"> <p>商品名字{{res.name}}</p> <p>商品描述?{{res.depict}}</p> </div> <div> <strong>{{comment.userName}} <b>说</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">创建商品</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="商品价格"> </div> <div class="form-group"> <label for="amount">amount</label> <input type="text" class="form-control" id="amount" placeholder="商品个数"> </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) {
新闻热点
疑难解答
