springMVC+angular+bootstrap+mysql的简易购物网站搭建
springMVC+angular+bootstrap+mysql的简易购物网站搭建
介绍
前端的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>
主页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>
后台管理界面， 这个界面只允许用户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) {
$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 XMLHttpRequest();
oReq.open("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>
用户信息管理界面， 默认查看当前用户信息， 如果点击编辑按钮， 会切显示一个编辑的DIV， 可以直接更改用户的新信息然后提交, 如果是管理员的话， 会有一个后台管理的入口按钮:
查看：
编辑：
运行下面代码
当用户点击界面的添加商品， 那么对应用户的购物车数据会发生改变;
购物车显示的是所有的选购商品， 在购物车里面也能随意的增加或者减少商品的个数， 金额会根据商品的个数，实时更新， 非常方便, 点击提交信息的话，那么这些购物车的商品就转换为用户的订单， 订单包含了收货人的地址和收货人手机号码 （前端的手机验证没有弄）：
运行下面代码
用户的订单页，该节目包含了用户“已支付”和“待支付”的订单：
运行下面代码
项目是基于tomcat的服务器， 以及spring框架 (spring大法好)， 数据库是mysql； spring：http://spring.io/projects
数据库的设计
既然是购物网站，那么必须有个 ==》》 商品表：
运行下面代码
因为商品有类型之分，所以也要有 ==》》 类型表：
运行下面代码
当有多个商品的时候，就存在了例外一个表==》》 购物车表：
运行下面代码
把购物车的表添加上用户的收货地址和收货手机就变成了==》》订单表：
运行下面代码
登录的用户可以为商品添加评论， 所以就有了另外一个关联表， 用户评论表：
运行下面代码
最后就是贯彻整个系统的用户表：
运行下面代码
项目结构
web应用的基本结构如图：
后台实现就是spring的路由和数据持久， 项目没有对恶意字符进行过滤，所以存在注入问题， 有待加强， 基本的功能都够用了；
最后
有个比较坑事情的要说下， 比如写了一小时的博客，保存博客的时候发现没网络了，心塞.... ，
HTML5有个 window.navigator.onLine判断浏览器是否在线的API， 但是博客园的后台管理界面不能添加自定义JS， 所以也没什么用， 不知道有没有好方法
整个项目代码在这儿： http://pan.baidu.com/s/1c036g1M;
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
QQ：287101329
springMVC+angular+bootstrap+mysql的简易购物网站搭建的更多相关文章
- 基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=10&cad=rja& ...
- 简易漫画网站搭建-漫画喵Server版
小喵的唠叨话:寒假的时候写了一个漫画爬虫,爬取了好几个漫画,不过一直没有找到合适的漫画阅读的工具.因此最近就试着自己写一个漫画的网站,放在公网上或者局域网里,这样就能随时随地用手机.Pad看漫画了. ...
- 【SSM之旅】Spring+SpringMVC+MyBatis+Bootstrap整合基础篇（一）项目简介及技术选型相关介绍
试水 一直想去搭建个自己的个人博客,苦于自己的技术有限,然后也个人也比较懒散.想动而不能动,想动而懒得动,就这么一直拖到了现在.总觉得应该把这几年来的所学总结一番,这样才能有所成长. 不知在何时,那就 ...
- Maven+JSP+SSM+Mysql实现的音乐网站
项目简介 项目来源于:https://gitee.com/coder_ze/iMusic 本系统基于Maven+JSP+SSM+Mysql实现的音乐网站.主要实现的功能有音乐播放.下载.上传等几个模块 ...
- 一个基于php+mysql的外卖订餐网站（带源码）
订饭组 一个基于php+mysql的外卖订餐网站,包括前端和后台.源码地址 源码演示地址:http://dingfanzu.com 商家后台系统:http://dingfanzu.com/admin ...
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- PHP操作实现一个多功能购物网站
PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...
- Phonegap集成angular/bootstrap/animate.css教程
1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...
- 基于Spring+Spring MVC+Mybatis的B2C购物网站
代码地址如下:http://www.demodashi.com/demo/12935.html 准备工作 当前项目运行的系统环境是MacOS,已经测试可以正常运行,并且之前开发的时候也在Windows ...
随机推荐
- Asp.net网站的简单发布
概述 网站是由一个个页面组成的,是万维网具体的变现形式,关于万维网,网页的方面的理论知识,大家可以看一看这篇博客:万维网文档,在这里就不多说了.网站的发布要到达的一个目的就是,别人可以通过浏览器访问该 ...
- 小米2S TWRP 3.0.2-0 最新版Recovery
主界面 使用了我最新修改的内核 下载地址: 链接: http://pan.baidu.com/s/1i5xwddb 密码: 7dyb 验证信息: md5sum: dca410f33020eb87986 ...
- 【2014 Multi-University Training Contest 3 1002】/【HDU 4888】 Redraw Beautiful Drawings
不easy啊.最终能够补第二个题了.! 顺便说一句:模版写残了就不要怪出题人啊 ~ (这残废模版研究了好长时间才找出错) 题目大意: 有一个n*m的矩阵.每个格子里都将有一个数.给你每一行数字之和和每 ...
- Ajax的get和post两种请求方式区别
Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...
- hdu1394--Minimum Inversion Number（线段树求逆序数，纯为练习）
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- MYSQL IFNULL使用功能
稍后的MYSQL IFNULL使用此功能的特定叙事,供大家参考学习,假设你MYSQL IFNULL条款的使用功能类别遇到似问题.最好看. MYSQL IFNULL(expr1,expr2) ...
- 【Linux探索之旅】第一部分第六课：Linux如何安装在虚拟机中
内容简介 1.第一部分第六课:Linux如何安装在虚拟机中 2.第二部分第一课预告:终端Terminal,好戏上场 Linux如何安装在虚拟机中 虽然我们带大家一起在电脑的硬盘上安装了Ubuntu这个 ...
- redmine 出口中国的乱码
pdf 这是redmine的bug.必须在个人账户更改将设立中国语文,足够的人才来解决. 顺便说一下,提示.以下更改文件的方法是无效的 /home/redmine/redmine-2.5.1/lib/ ...
- 【C语言探索之旅】 第一部分第五课：运算那点事
内容简介 1.课程大纲 2.第一部分第五课:运算那点事 3.第一部分第六课预告:条件表达式 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏 ...
- oracle的unique约束
unique约束是唯一性约束,对于需要列类型应用程序会重复出现分歧值.您可以加入一个单独的列unique约束.能够加入多个列unique约束().假设为多个列加入一个unique约束,仅仅须要保证这多 ...