星空网 > 软件开发 > Java

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

  介绍

  前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(angular**好), 项目一共包含了7个静态界面, 静态界面的数据展示都使用了angularJS , 后端是基于java的spring, 容器为tomcat, 项目代码分享到百度云盘  , 这个项目的优势是, 所有的显示都是在前端完成, 数据交互也是通过ajax完成, 没有频繁的页面跳转;先上两张商城的主图

  图一:

    基于springMVC+angular+bootstrap+mysql的简易购物网站搭建、  

  图2:

  基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

  该页面可以完成商品的评价, 添加商品, 商品的搜索等功能 , 界面JSP代码:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
<%@ 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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original={{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">&times;</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='/images/loading.gif' data-original={{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:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
<%@ 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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="{{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">&times;</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='/images/loading.gif' data-original={{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用户查看, 用户角色是数据库的用户表关联的,  也就是说是管理员的时候, 才能进入后台页编辑商品,编辑评论等高级功能:

    基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

  界面代码:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
<%@ 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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src='/images/loading.gif' data-original="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='/images/loading.gif' data-original={{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='/images/loading.gif' data-original={{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">&times;</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) {      $scope.types = [];      $scope.new_type = "";      $scope.delType = function(id) {        ajaxModule.delType(id, function(res) {          if(res === true) {            $("#tab1").click();          }else{            alert("删除失败ŠŸ");          };        });      };      $scope.new_type_fn = function() {        ajaxModule.addType($scope.new_type, function(res) {          if(res === true) {            $("#tab1").click();          }else{            alert("创建失败");          };        });      };    });    $("#tab1").click(function() {      ajaxModule.getTypes(".types");    });            app.controller("pros", function($scope) {      $scope.coms = [];      $scope.removePro = function(id) {        ajaxModule.delPro(id, function(res) {          if(res) {            $("#tab2").click();          }else{            alert("删除成功");          };        });      };    });    app.controller("select", function($scope) {      $scope.types = [];    })        $("#tab2").click(function() {      ajaxModule.getAllCom("#pro");      ajaxModule.getTypes("#select");    });        $("#submit").click(function() {      ajaxModule.addPro({        name:$("#name").val(),        depict:$("#depict").val(),        price:$("#price").val(),        amount:$("#amount").val(),        manufacturer:$("#manufacturer").val(),        img:$("#img").val(),        type:$("#select").val()      },function(res) {        if(res) {          $('#myModal').modal('hide');          $("#tab2").click();        }else{          alert("添加成功");          $('#myModal').modal('hide')        };        });    });        app.controller("comments", function($scope) {      $scope.comments = [];    });    $("#tab3").click(function() {      ajaxModule.getComments(function( res ) {        $(".comments").scope().comments = res;        $(".comments").scope().$apply();      })    });        $("#upload").change(function(ev) {      formData = new FormData();      formData.append("name", ev.target.files[0]);      var oReq = new "POST", "../upload.do");      oReq.onreadystatechange = function() {        if( oReq.readyState === 4 ) {          $("#img").val( oReq.responseText );        };      };      oReq.send(formData);          });        $(function() {      $("#tab0").click();    });        var ajaxModule = function() {      return {        getFormAllList : function( el ) {          $.post("../getFormAllList.do", function(res) {            $(el).scope().orderforms = res;            $(el).scope().$apply();          })        },        getTypes : function(el) {          $.post("getTypes.do", function(res) {            $(el).scope().types = res;            $(el).scope().$apply();          })        },        addType : function( type ,callback) {          $.post("addType.do", {type:type}, function(res) {            callback(res);          });        },        delType : function( id ,callback) {          $.post("delType.do", {id:id}, function(res) {            callback(res);          });        },        getAllCom : function(el) {          $.post("./getAllCom.do", function( res ) {            $(el).scope().coms = res;            $(el).scope().$apply();          });        },        delPro : function(id ,callback) {              $.post("./delPro.do",{id:id} , function( res ) {            callback(res);          });                  },        addPro : function(json, callback) {          $.post("./addPro.do",json, function(res) {            callback(res);          });        },        getComments : function( callback ) {          $.post("./getComments.do", function(res) {            callback(res);          });        },        getCommentById : function( id, callback ) {          $.post("./getCommentById.do",{commodityId:id}, callback);        }      };    }();  </script></body></html>

View Code

 

  用户信息管理界面, 默认查看当前用户信息, 如果点击编辑按钮, 会切显示一个编辑的DIV, 可以直接更改用户的新信息然后提交,  如果是管理员的话, 会有一个后台管理的入口按钮:

  查看:

      基于springMVC+angular+bootstrap+mysql的简易购物网站搭建   

  编辑:

      基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
<%@ 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>user.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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script> </head> <body ng-app="app">     <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>         </ul>       </div>       <div class="row">         <c:if test="${name==null}" >           <a href="login.do">登录</a>         </c:if>                  <c:if test='${role==1}' >           <a class="btn btn-default" href="admin/admin.do">进入管理界面</a>         </c:if>                </div>       <br>       <c:if test="${name!=null}" >       <div id="user" class="row" ng-controller="user">         <button class="btn btn-success" ng-click="edit=!edit">          {{edit?"查看用户信息":"更新用户信息"}}        </button>        <br>        <br>         <div ng-show="!edit" ng-init="edit=false">           <p>用户名:{{user.name}}</p>           <p>默认收货地址:{{user.defaultAddress}}</p>           <p>默认手机:{{user.defaultAddress}}</p>           <p>用户邮箱:{{user.mail}}</p>         </div>         <div ng-show="edit">           <form>           <div class="form-group">            <label for="name">用户名—</label>            <input type="text" class="form-control" id="name" placeholder="name" ng-model="user.name" >           </div>           <div class="form-group">            <label for="password">密码</label>            <input type="text" class="form-control" id="password" placeholder="Password" ng-model="user.password" >           </div>           <div class="form-group">            <label for="defaultAddress">默认收货地址</label>            <input type="text" class="form-control" name="defaultAddress" id="defaultAddress" ng-model="user.defaultAddress" >           </div>           <div class="form-group">            <label for="defaultPhone">默认手机</label>            <input type="text" class="form-control" name="defaultPhone" id="defaultPhone" ng-model="user.defaultPhone" >           </div>           <div class="form-group">            <label for="mail">用户邮箱</label>            <input type="text" class="form-control" name="mail" id="mail" ng-model="user.mail" >            <div>             金额: {{user.money}}RMB            </div>           </div>             <button id="submit" type="submit" class="btn btn-default">Submit</button>          </form>         </div>       </div>       </c:if>     </div>    <script>          var userId = "${id}";      var app = angular.module("app", []);            app.controller("user", function( $scope ) {              //默认数据        $scope.user = {          name : "name",          password : "password",          defaultAddress : "defaultAddress",          defaultPhone : "defaultPhone",          mail : "mail"        };              });            $("#submit").click(function( ev ) {              $.post("updateInfo.do", $.extend({},$("#user").scope().user,{userId:userId}), function( res ) {          if( res ) {            alert("更新成功!");          }else{            alert("更新失败");          };        });              });            $(function() {              if( userId ) {          $.post("getInfo.do",{userId:userId},function( res ) {            var scope = $("#user").scope();            scope.user = res;            $("#user").scope().$apply()          });        };              });          </script> </body></html>

View Code

 

 

    当用户点击界面的添加商品, 那么对应用户的购物车数据会发生改变;

  购物车显示的是所有的选购商品, 在购物车里面也能随意的增加或者减少商品的个数, 金额会根据商品的个数,实时更新, 非常方便, 点击提交信息的话,那么这些购物车的商品就转换为用户的订单, 订单包含了收货人的地址和收货人手机号码 (前端的手机验证没有弄):

      基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
<%@ 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>cart.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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script> </head> <style>   .commodity{     margin:10px;   }   #cart{     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="./list.do">           列表页           </a>        </li>        <li><a href="./user.do">            用户信息        </a></li>       </ul>     </div>   </div>  </nav>   <div class="container">     <div id="cart" class="row" ng-controller="cart">       <ul class="list-group">         <li class="list-group-item pull-left commodity" ng-repeat="order in list">           <p>商品</p>          <div commodity-directive id="{{order.commodityId}}">            <p>商品名š{{res.name}}</p>            <p>商品描述{{res.depict}}</p>            <p>商品厂商{{res.manufacturer}}</p>            <p>商品价格š{{res.price}}</p>            <p>商品logoï<img ng-src='/images/loading.gif' data-original={{res.img}} width=50 height=50/></p>            <p>              购买商品个数‡              <span class="badge">                {{order.commodityCount}}              </span>              <p style="display:none">{{order.price=res.price}}</p>            </p>            <button class="btn btn-danger" ng-click="comCount(-1, order.commodityId)">少买一个</button>            <button class="btn btn-warning" ng-click="comCount(1, order.commodityId)">再来一个</button>          </div>         </li>       </ul>       <div class="clearfix">        <p>总金额{{sum}}</p>       </div>       <input type="hidden" value="${id}" class="form-control" id="userId">       <br>       <label class="clearfix">         输入用户地址š         <input type="text" class="form-control" id="address">       </label>       <br>       <label class="clearfix">        输入收货人手机         <input type="number" class="form-control" id="phone">       </label>       <br>       <button id="submit" class="btn btn-success">        提交信息      •</button>     </div>   </div>      <script>     var userId = "${id}";          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("cart", function( $scope ) {       var list = [];//[{"id":1,"userId":19,"commodityId":1,"commodityCount":1},{"id":2,"userId":19,"commodityId":2,"commodityCount":5},{"id":3,"userId":19,"commodityId":3,"commodityCount":2},{"id":4,"userId":19,"commodityId":5,"commodityCount":4},{"id":5,"userId":19,"commodityId":4,"commodityCount":3}]       $scope.list = list;       $scope.scope= 0;       $scope.comCount = function( constant, commodityId) {         $.each($scope.list, function(i, e) {           if( e.commodityId == commodityId ) {             $scope.list[i].commodityCount+=constant;           };           if(e.commodityCount<=0) {             e.commodityCount = 0;           };         });         $scope.upDateSum();       };       $scope.upDateSum = function() {         $scope.sum = util.calcSum( $scope.list );       };     });     var util = {       calcSum : function( list ) {         var sum = 0;         $.each(list, function(i, e) {           sum += (e.commodityCount*e.price);         });         return sum;       }     };     if( userId ) {       $.post("./getOrderList.do", {userId: userId }, function( res ) {         $("#cart").scope().list = JSON.parse(res);         setInterval(function() {           $("#cart").scope().upDateSum();           $("#cart").scope().$apply();         },1000);       });     };     $("#submit").click(function() {       $.post("./addForm.do", {         userId : $("#userId").val(),         address : $("#address").val(),         phone : $("#phone").val(),         totalPrice : $("#cart").scope().sum,         orderList : JSON.stringify($("#cart").scope().list)       },function(res) {        if(res === true) {          location.href="list.do";        }else{          alert("购买失败");        };       });     });     //addForm   </script> </body></html>

View Code

 

 

  用户的订单页,该节目包含了用户“已支付”“待支付”的订单:

      基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
<%@ 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>list.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='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <script src='/images/loading.gif' data-original="http://cdn.bootcss.com/angular.js/1.3.15/angular.min.js"></script>  <style>    .list{      margin:20px;    }    .margin80{      margin-top:80px;    }  </style> </head> <body ng-app="app">  <nav class="navbar navbar-default navbar-fixed-top">   <div class="container">      <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="./user.do">用户信息</a></li>       </ul>   </div>  </nav>  <div id="form" class="container margin80" ng-controller="form">    <div class="row">      <h1>未支付列表</h1>      <ul class="list-group">        <li class="list-group-item" ng-repeat="item in items" ng-if="item.pay==0">            <p>              <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>              收货人地址{{item.address}}            </p>            <p>              <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>              收货人手机š{{item.phone}}            </p>            <p>              <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>              商品总价格š{{item.totalPrice}}            </p>            <div parse id={{item.orderlist}}>              <div class="list pull-left" ng-repeat="order in orderlist">                <div commodity-directive id="{{order.commodityId}}">                  <p>商品名š{{res.name}}</p>                  <p>商品描述š{{res.depict}}</p>                  <p>商品厂商{{res.manufacturer}}</p>                  <p>商品价格š{{res.price}}</p>                  <p>商品logoš<img ng-src='/images/loading.gif' data-original={{res.img}} width=50 height=50/></p>                  <p>                    购买的商品个数‡                    <span class="badge">                      {{order.commodityCount}}                    </span>                  </p>                </div>              </div>            </div>                      <button class="btn btn-default" ng-click="pay(item.id)"> 支付 </button>          <div class="clearfix"></div>        </li>      </ul>      <br>      <h1>已支付列表</h1>      <ul>        <li class="list-group-item" ng-repeat="item in items" ng-if="item.pay==1">            <p>              <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>              收货人地址{{item.address}}            </p>            <p>              <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>              收货人手机š{{item.phone}}            </p>            <p>              <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>              商品总价格š{{item.totalPrice}}            </p>            <div parse id={{item.orderlist}}>              <div class="list pull-left" ng-repeat="order in orderlist">                <div commodity-directive id="{{order.commodityId}}">                  <p>商品名š{{res.name}}</p>                  <p>商品描述š{{res.depict}}</p>                  <p>商品厂商{{res.manufacturer}}</p>                  <p>商品价格š{{res.price}}</p>                  <p>商品logoš<img ng-src='/images/loading.gif' data-original={{res.img}} width=50 height=50/></p>                  <p>                    购买的商品个数‡                    <span class="badge">                      {{order.commodityCount}}                    </span>                  </p>                </div>              </div>            </div>          <div class="clearfix"></div>        </li>      </ul>    </div>  </div>  <script>    var userId = "${id}";    var app = angular.module("app", []);    app.directive("commodityDirective", function() {      return {        restrict : "EA",        scope : true,        link : function( $scope ,$el, $iattrs) {          ajaxModule.getComById($iattrs.id, function( res ) {            $scope.res = res[0];            $scope.$apply();          });        }      }    });    app.directive("parse", function() {      return {        restrict : "EA",        scope : true,        link : function( $scope ,$el, $iattrs) {          $scope.orderlist = JSON.parse($iattrs.id);        }      }    });            app.controller("form", function( $scope ) {      $scope.items = [];      $scope.pay = function( orderformId ) {        ajaxModule.pay(userId , orderformId, function( res ) {          if(res) {            location.reload();          }else{            alert("支付失败");          };        });      };    });        var ajaxModule = {      getFormList : function( userId, cb ) {        $.post("getFormList.do",{userId:userId}, cb);      },      pay : function( userId, orderformId, cb) {        $.post("pay.do", {userId : userId, orderformId : orderformId }, cb);      },      getComById : function(id , cb) {        $.post("./getComById.do", {id:id}, cb);      }    };        if(userId) {      $(function() {        ajaxModule.getFormList(userId, function( res ) {          $("#form").scope().items = res;          $("#form").scope().$apply();        });      });    };  </script> </body></html>

View Code 

  项目是基于tomcat的服务器, 以及spring框架 (spring**好),  数据库是mysql;  spring:http://spring.io/projects

  

  数据库的设计

  既然是购物网站,那么必须有个 ==》》 商品表:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
CREATE TABLE `commodity` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(100) DEFAULT '', `depict` longtext, `price` int(11) DEFAULT '0', `amount` int(11) DEFAULT '0', `manufacturer` varchar(50) DEFAULT '', `img` varchar(100) DEFAULT '', `type` varchar(20) DEFAULT '', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

View Code

 

  因为商品有类型之分,所以也要有 ==》》 类型表:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
CREATE TABLE `types` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) DEFAULT '0', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=utf8;

View Code

 

  当有多个商品的时候,就存在了例外一个表==》》 购物车表:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
CREATE TABLE `orderlist` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userId` int(11) NOT NULL DEFAULT '0', `commodityId` int(11) DEFAULT '0', `commodityCount` int(11) DEFAULT '0', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

View Code

 

  把购物车的表添加上用户的收货地址和收货手机就变成了==》》订单表:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
CREATE TABLE `orderform` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userId` int(11) DEFAULT '0', `address` varchar(50) DEFAULT '0', `phone` varchar(20) DEFAULT '0', `totalPrice` int(11) DEFAULT '0', `pay` int(2) DEFAULT '0', `orderlist` longtext, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

View Code

 

  登录的用户可以为商品添加评论, 所以就有了另外一个关联表, 用户评论表:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
CREATE TABLE `comments` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userId` int(11) NOT NULL DEFAULT '0', `userName` varchar(20) DEFAULT '0', `commodityId` int(11) NOT NULL DEFAULT '0', `comment` varchar(400) DEFAULT '', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

View Code

 

  最后就是贯彻整个系统的用户表:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) DEFAULT '0', `password` varchar(50) DEFAULT '0', `defaultAddress` varchar(50) DEFAULT '0', `defaultPhone` varchar(12) DEFAULT '0', `mail` varchar(50) DEFAULT '0', `money` int(16) DEFAULT '0', `regTime` datetime DEFAULT NULL, `role` int(11) NOT NULL DEFAULT '0' COMMENT '用户角色', PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8;

View Code

 

 

项目结构

  web应用的基本结构如图:

基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

  

   后台实现就是spring的路由和数据持久, 项目没有对恶意字符进行过滤,所以存在注入问题, 有待加强, 基本的功能都够用了;

      基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

 

最后

   有个比较坑事情的要说下, 比如写了一小时的博客,保存博客的时候发现没网络了,心塞.... ,

   HTML5有个 window.navigator.onLine判断浏览器是否在线的API, 但是博客园的后台管理界面不能添加自定义JS, 所以也没什么用, 不知道有没有好方法

   整个项目代码在这儿: http://pan.baidu.com/s/1c036g1M

 

作者: NONO
出处:http://www.cnblogs.com/diligenceday/
QQ:287101329 




原标题:基于springMVC+angular+bootstrap+mysql的简易购物网站搭建

关键词:MYSQL

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

寻汇SUNRATE入选WhiteSight金融科技行业图谱:https://www.kjdsnews.com/a/1549722.html
出口易「欧洲COD专线」:助力拓展中东欧市场,提升竞争力!:https://www.kjdsnews.com/a/1549723.html
免费过滤WhatsApp:https://www.kjdsnews.com/a/1549724.html
还没布局越南商标?快码住这份申请指南!:https://www.kjdsnews.com/a/1549725.html
拒付防线升级:独立站复购增长秘笈公开!:https://www.kjdsnews.com/a/1549726.html
亚马逊多账号运营,怕被关联?收好这份账号关联因素及解决方案:https://www.kjdsnews.com/a/1549727.html
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流