• 【Spring Boot+Thymeleaf+MyBatis+mysql】实现电子商务平台实战（附源码）持续更新~~

    源码请点赞关注收藏后评论区留言和私信博主

    开发环境：Web服务器使用Servlet容器，数据库采用mysql，集成开发环境为Spring Tool Suite（STS)

    一、系统设计

    电子商务平台分为两个子系统 一个是后台管理系统 一个是电子商务系统，下面分别讲解着两个子系统的功能需要与模块划分

    系统功能需求

    1：后台管理子系统

    要求管理员登录成功后，才能对商品进行管理，包括添加商品，查询商品，修改商品以及删除商品，除商品管理外，管理员还需要对商品类型，注册用户以及用户的订单等进行管理

    2：电子商务子系统

    （1）：非注册用户

    具有浏览首页，查看商品详情以及搜索商品的功能

    （2）：注册用户

    还可以购买商品，查看购物车，收藏商品，查看订单等等

    系统模块划分

    1：后台管理子系统

    模块划分如下

     2：电子商务子系统

    模块划分如下

     二、数据库设计

    系统采用加载纯Java数据库驱动程序的方式连接MYSQL数据库，创建数据库shop并创建8张系统表 数据库E-R图如下

    建表的sql语句此处省略 需要请点赞关注收藏后私信博主

     部分sql语句如下

    1. /*
    2. Navicat MySQL Data Transfer
    4. Source Server         : testSpringMVC
    5. Source Server Version : 50519
    6. Source Host           : localhost:3306
    7. Source Database       : shop
    9. Target Server Type    : MYSQL
    10. Target Server Version : 50519
    11. File Encoding         : 65001
    13. Date: 2019-10-08 07:41:20
    14. */
    15.  
    16. SET FOREIGN_KEY_CHECKS=0;
    17. -- ----------------------------
    18. -- Table structure for `ausertable`
    19. -- ----------------------------
    20. DROP TABLE IF EXISTS `ausertable`;
    21. CREATE TABLE `ausertable` (
    22.   `aname` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
    23.   `apwd` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
    24.   PRIMARY KEY (`aname`)
    25. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
    26.  
    27. -- ----------------------------
    28. -- Records of ausertable
    29. -- ----------------------------
    30. INSERT INTO ausertable VALUES ('admin', 'admin');
    31.  
    32. -- ----------------------------
    33. -- Table structure for `busertable`
    34. -- ----------------------------
    35. DROP TABLE IF EXISTS `busertable`;
    36. CREATE TABLE `busertable` (
    37.   `id` int(11) NOT NULL AUTO_INCREMENT,
    38.   `bemail` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
    39.   `bpwd` varchar(32) COLLATE utf8_unicode_ci NOT NULL,
    40.   PRIMARY KEY (`id`)
    41. ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
    42.  
    43. -- ----------------------------
    44. -- Records of busertable
    45. -- ----------------------------
    46. INSERT INTO busertable VALUES ('6', 'chenhengdl@126.com', '78f8a7ae700c91db09facb05a675432b');
    47.  
    48. -- ----------------------------
    49. -- Table structure for `carttable`
    50. -- ----------------------------
    51. 还没弄
    52. DROP TABLE IF EXISTS `carttable`;
    53. CREATE TABLE `carttable` (
    54.   `id` int(11) NOT NULL AUTO_INCREMENT,
    55.   `busertable_id` int(11) NOT NULL,
    56.   `goodstable_id` int(11) NOT NULL,
    57.   `shoppingnum` int(11) NOT NULL,
    58.   PRIMARY KEY (`id`),
    59.   KEY `bid` (`busertable_id`),
    60.   KEY `gno` (`goodstable_id`),
    61.   CONSTRAINT `bid` FOREIGN KEY (`busertable_id`) REFERENCES `busertable` (`id`),
    62.   CONSTRAINT `gno` FOREIGN KEY (`goodstable_id`) REFERENCES `goodstable` (`id`)
    63. ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
    64.  
    65. -- ----------------------------
    66. -- Records of carttable
    67. -- ----------------------------
    68.  
    69. -- ----------------------------
    70. -- Table structure for `focustable`
    71. -- ----------------------------
    72. 还没弄
    73. DROP TABLE IF EXISTS `focustable`;
    74. CREATE TABLE `focustable` (
    75.   `id` int(11) NOT NULL AUTO_INCREMENT,
    76.   `goodstable_id` int(11) NOT NULL,
    77.   `busertable_id` int(11) NOT NULL,
    78.   `focustime` datetime DEFAULT NULL,
    79.   PRIMARY KEY (`id`),
    80.   KEY `gno1` (`goodstable_id`),
    81.   KEY `bid1` (`busertable_id`),
    82.   CONSTRAINT `bid1` FOREIGN KEY (`busertable_id`) REFERENCES `busertable` (`id`),
    83.   CONSTRAINT `gno1` FOREIGN KEY (`goodstable_id`) REFERENCES `goodstable` (`id`)
    84. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
    85.  
    86. -- ----------------------------
    87. -- Records of focustable
    88. -- ----------------------------
    89. INSERT INTO focustable VALUES ('5', '29', '6', '2019-10-05 14:55:51');
    90.  
    91. -- ----------------------------
    92. -- Table structure for `goodstable`
    93. -- ----------------------------
    94. 还没弄
    95. DROP TABLE IF EXISTS `goodstable`;
    96. CREATE TABLE `goodstable` (
    97.   `id` int(11) NOT NULL AUTO_INCREMENT,
    98.   `gname` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL,
    99.   `goprice` double DEFAULT NULL,
    100.   `grprice` double DEFAULT NULL,
    101.   `gstore` int(11) DEFAULT NULL,
    102.   `gpicture` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL,
    103.   `isRecommend` tinyint(2) DEFAULT NULL,
    104.   `isAdvertisement` tinyint(2) DEFAULT NULL,
    105.   `goodstype_id` int(11) DEFAULT NULL,
    106.   PRIMARY KEY (`id`),
    107.   KEY `typeid` (`goodstype_id`),
    108.   CONSTRAINT `typeid` FOREIGN KEY (`goodstype_id`) REFERENCES `goodstype` (`id`)
    109. ) ENGINE=InnoDB AUTO_INCREMENT=36 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
    110.  
    111. -- ----------------------------
    112. -- Records of goodstable
    113. -- ----------------------------
    114. INSERT INTO goodstable VALUES ('26', '广告商品4', '90', '80', '1000', '201910274135059473.jpg', '0', '1', '2');
    115. INSERT INTO goodstable VALUES ('27', '广告商品5', '80', '30', '122', '201910274135126352.jpg', '0', '1', '3');
    116. INSERT INTO goodstable VALUES ('28', '抱枕11号', '100', '20', '200', '201910274135150096.jpg', '1', '0', '14');
    117. INSERT INTO goodstable VALUES ('29', '抱枕22号', '300', '200', '180', '201910274135212497.jpg', '1', '0', '15');
    118. INSERT INTO goodstable VALUES ('32', '抱枕99', '80', '70', '80', '201910280135330014.jpg', '1', '0', '14');
    119.  
    120. DROP TABLE IF EXISTS `orderdetail`;
    121. CREATE TABLE `orderdetail` (
    122.   `id` int(11) NOT NULL AUTO_INCREMENT,
    123.   `orderbasetable_id` int(11) NOT NULL,
    124.   `goodstable_id` int(11) NOT NULL,
    125.   `shoppingnum` int(11) NOT NULL,
    126.   PRIMARY KEY (`id`),
    127.   KEY `odsn` (`orderbasetable_id`),
    128.   KEY `gno3` (`goodstable_id`),
    129.   CONSTRAINT `gno3` FOREIGN KEY (`goodstable_id`) REFERENCES `goodstable` (`id`),
    130.   CONSTRAINT `odsn` FOREIGN KEY (`orderbasetable_id`) REFERENCES `orderbasetable` (`id`)
    131. ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
    132.  
    133. -- ----------------------------
    134. -- Records of orderdetail
    135. -- ----------------------------
    136. INSERT INTO orderdetail VALUES ('5', '3', '29', '20');
    137. INSERT INTO orderdetail VALUES ('6', '4', '33', '20');

    建表后效果如下

     

     

     

     三、系统管理

    1：添加相关依赖

    在pom.xml文件中添加如下代码

    1. <!-- 添加MySQL依赖 -->
    2.  
    3.  
    4.  
    5. <dependency>
    6.  
    7. <groupId>mysql</groupId>
    8.  
    9. <artifactId>mysql-connector-java</artifactId>
    10.  
    11. <version>5.1.45</version>
    12.  
    13. <!-- MySQL8.x时，请使用8.x的连接器 -->
    14.  
    15.  
    16. </dependency>
    17.  
    18. <!-- MyBatis-Spring，Spring Boot应用整合MyBatis框架的核心依赖配置 -->
    19.  
    20.  
    21.  
    22. <dependency>
    23.  
    24. <groupId>org.mybatis.spring.boot</groupId>
    25.  
    26. <artifactId>mybatis-spring-boot-starter</artifactId>
    27.  
    28. <version>2.1.0</version>
    29.  
    30. </dependency>
    31.  
    32.  
    33. <dependency>
    34.  
    35. <groupId>commons-fileupload</groupId>
    36.  
    37. <artifactId>commons-fileupload</artifactId>
    38.  
    39. <!-- 由于commons-fileupload组件不属于Spring Boot，所以需要加上版本 -->
    40.  
    41.  
    42. <version>1.3.3</version>
    43.  
    44. </dependency>

    应用的目录结构如下

     

     

     

     

     在配置文件application.properties中添加如下代码

    1. server.servlet.context-path=/eBusiness
    2. ###
    3. ##数据源信息配置
    4. ###
    5. #数据库地址
    6. spring.datasource.url=jdbc:mysql://localhost:3306/shop?characterEncoding=utf8
    7. #数据库MySQL为8.x时，url为jdbc:mysql://localhost:3306/springbootjpa?useSSL=false&serverTimezone=Asia/Beijing&characterEncoding=utf-8
    8. #数据库用户名
    9. spring.datasource.username=root
    10. #数据库密码
    11. spring.datasource.password=root
    12. #数据库驱动
    13. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    14. #设置包别名（在Mapper映射文件中直接使用实体类名）
    15. mybatis.type-aliases-package=com.ch.ebusiness.entity
    16. #告诉系统在哪里去找mapper.xml文件（映射文件）
    17. mybatis.mapperLocations=classpath:mappers/*.xml
    18. #在控制台输出SQL语句日志
    19. logging.level.com.ch.ebusiness.repository=debug
    20. #关闭Thymeleaf模板引擎缓存（使页面热部署），默认是开启的
    21. spring.thymeleaf.cache=false
    22. #上传文件时，默认单个上传文件大小是1MB，max-file-size设置单个上传文件大小
    23. spring.servlet.multipart.max-file-size=50MB
    24. #默认总文件大小是10MB，max-request-size设置总上传文件大小
    25. spring.servlet.multipart.max-request-size=500MB
    26.

    四、组件设计

    包括 管理员登录权限验证 前台用户登录权限验证 验证码 统一异常处理 工具类等等

    五、后台管理子系统的实现

    管理员登录界面如下

    代码如下

    1.  
    2. <!DOCTYPE html>
    3. <html xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5. <meta charset="UTF-8">
    6. <title>管理员登录页面</title>
    7. <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    8. <body>
    9. 	<div class="container">
    10. 	  	<div class="bg-primary"  style="width:70%; height: 60px;padding-top: 1px;">
    11. 	       <h3 align="center">管理员登录</h3>
    12. 	   </div>
    13. 		<br>
    14. 		<br>
    15. 		<form th:action="@{/admin/login}" name="myform" method="post" th:object="${aUser}"  class="form-horizontal" role="form" >
    16. 			<div class="form-group has-success">
    17. 				<label class="col-sm-2 col-md-2 control-label">用户名</label>
    18. 				<div class="col-sm-4 col-md-4">
    19. 					<input type="text" class="form-control"
    20. 					 placeholder="请输入管理员名"
    21. 					th:field="*{aname}"/>
    22. 					<span th:errors="*{aname}"></span>
    23. 				</div>
    24. 			</div>
    25. 		
    26. 			<div class="form-group has-success">
    27. 				  <label class="col-sm-2 col-md-2 control-label">密码</label>
    28. 				  <div class="col-sm-4 col-md-4">
    29. 		  				<input type="password" class="form-control"
    30. 					 placeholder="请输入您的密码" th:field="*{apwd}"/>
    31. 					 <span th:errors="*{apwd}"></span>
    32. 				  </div>
    33. 			 </div>
    34. 			
    35. 			<div class="form-group">
    36. 				<div class="col-sm-offset-2 col-sm-10">
    37. 					<button type="submit"class="btn btn-success" >登录</button>
    38. 					<button type="reset" class="btn btn-primary" >重置</button>
    39. 				</div>
    40. 			</div>
    41. 			
    42. 			<div class="form-group">
    43. 				<div class="col-sm-offset-2 col-sm-10">
    44. 					<font size="6" color="red">
    45. 						<span th:text="${errorMessage }"></span>
    46. 					</font>
    47. 				</div>
    48. 			</div>
    49. 		</form>
    50. 	</div>
    51. </body>
    52. </html>

     类型管理界面如下 包括增删改查

    添加类型页面代码如下

    1.  
    2. <!DOCTYPE html>
    3. <html xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5. <meta charset="UTF-8">
    6. <title>商品类型添加页面</title>
    7. <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    8. <body>
    9. 	<div th:include="admin/header"></div>
    10. 	<br><br><br>
    11. 	<div class="container">
    12. 		<div class="bg-primary"  style="width:70%; height: 60px;padding-top: 0.5px;">
    13. 	       <h3 align="center">添加类型</h3>
    14. 	   </div><br>
    15. 		<form th:action="@{/type/addType}" name="myform" method="post" th:object="${goodsType}"  class="form-horizontal" role="form" >
    16. 			<div class="form-group has-success">
    17. 				<label class="col-sm-2 col-md-2 control-label">类型名称</label>
    18. 				<div class="col-sm-4 col-md-4">
    19. 					<input type="text" class="form-control"
    20. 					 placeholder="请输入类型名"
    21. 					th:field="*{typename}"/>
    22. 				</div>
    23. 			</div>
    24. 			<div class="form-group">
    25. 				<div class="col-sm-offset-2 col-sm-10">
    26. 					<button type="submit"class="btn btn-success" >添加</button>
    27. 					<button type="reset" class="btn btn-primary" >重置</button>
    28. 				</div>
    29. 			</div>
    30. 		</form>
    31. 	</div>
    32. </body>
    33. </html>

     添加商品效果如下

     代码如下

    1.  
    2. <!DOCTYPE html>
    3. <html xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5. <meta charset="UTF-8">
    6. <title>商品类型添加页面</title>
    7. <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    8. <body>
    9. 	<div th:include="admin/header"></div>
    10. 	<br><br><br>
    11. 	<div class="container">
    12. 		<div class="bg-primary"  style="width:70%; height: 60px;padding-top: 0.5px;">
    13. 	       <h3 align="center">添加商品</h3>
    14. 	   </div><br>
    15. 		<form th:action="@{/goods/addGoods?act=add}"
    16. 		 name="myform" method="post" 
    17. 		 th:object="${goods}"  
    18. 		 class="form-horizontal" 
    19. 		 enctype="multipart/form-data" >
    20. 			<div class="form-group has-success">
    21. 				<label class="col-sm-2 col-md-2 control-label">商品名称</label>
    22. 				<div class="col-sm-4 col-md-4">
    23. 					<input type="text" class="form-control"
    24. 					 placeholder="请输入商品名"
    25. 					th:field="*{gname}"/>
    26. 				</div>
    27. 			</div>
    28. 			<div class="form-group has-success">
    29. 				<label class="col-sm-2 col-md-2 control-label">商品原价</label>
    30. 				<div class="col-sm-4 col-md-4">
    31. 					<input type="number" class="form-control"
    32. 					 placeholder="请输入商品原价"
    33. 					th:field="*{goprice}"/>
    34. 				</div>
    35. 			</div>
    36. 			<div class="form-group has-success">
    37. 				<label class="col-sm-2 col-md-2 control-label">商品折扣价</label>
    38. 				<div class="col-sm-4 col-md-4">
    39. 					<input type="number" class="form-control"
    40. 					 placeholder="请输入商品折扣价"
    41. 					th:field="*{grprice}"/>
    42. 				</div>
    43. 			</div>
    44. 			<div class="form-group has-success">
    45. 				<label class="col-sm-2 col-md-2 control-label">商品库存</label>
    46. 				<div class="col-sm-4 col-md-4">
    47. 					<input type="number" class="form-control"
    48. 					 placeholder="请输入商品库存"
    49. 					th:field="*{gstore}"/>
    50. 				</div>
    51. 			</div>
    52. 			<div class="form-group has-success">
    53. 				  <label class="col-sm-2 col-md-2 control-label">商品图片</label>
    54. 				  <div class="col-sm-4 col-md-4">
    55. 		  				<input type="file" placeholder="请选择商品图片"  class="form-control" name="fileName"/>
    56. 				  </div>
    57. 			 </div>
    58. 			<div class="form-group has-success">
    59. 				<label class="col-sm-2 col-md-2 control-label">是否推荐</label>
    60. 				<div class="col-sm-4 col-md-4 radio">
    61. 					<label> 
    62. 						<input type="radio" th:field="*{isRecommend}" value="1">是
    63. 					</label>
    64. 					<label> 
    65. 						<input type="radio"  th:field="*{isRecommend}" value="0">否
    66. 					</label>
    67. 				</div>
    68. 			</div>
    69. 			<div class="form-group has-success">
    70. 				<label class="col-sm-2 col-md-2 control-label">是否广告</label>
    71. 				<div class="col-sm-4 col-md-4 radio">
    72. 					<label> 
    73. 						<input type="radio" th:field="*{isAdvertisement}" value="1">是
    74. 					</label>
    75. 					<label> 
    76. 						<input type="radio"    th:field="*{isAdvertisement}"s  value="0">否
    77. 					</label>
    78. 				</div>
    79. 			</div>
    80. 			<div class="form-group has-success">
    81. 				<label class="col-sm-2 col-md-2 control-label">商品类型</label>
    82. 				<div class="col-sm-4 col-md-4">
    83. 					<select class="form-control" th:field="*{goodstype_id}">
    84.                         <option th:each="gty:${goodsType}" th:value="${gty.id}" th:text="${gty.typename}">
    85. 					</select>
    86. 				</div>
    87. 			</div>
    88. 			<div class="form-group">
    89. 				<div class="col-sm-offset-2 col-sm-10">
    90. 					<button type="submit"class="btn btn-success" >添加</button>
    91. 					<button type="reset" class="btn btn-primary" >重置</button>
    92. 				</div>
    93. 			</div>
    94. 		</form>
    95. 	</div>
    96. </body>
    97. </html>

    其余的删除修改页面此处省略 有需要者点赞关注收藏后评论区留言或私信博主

    六、前台商务子系统的实现

    导航页效果如下 点击即可跳转到其他页面

     代码如下

    1.  
    2. html>
    3. <html xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5. <meta charset="UTF-8">
    6. <title>导航页title>
    7. <base th:href="@{/}">
    9. <link href="css/bootstrap.min.css" rel="stylesheet">
    10. <script src="js/jquery.min.js">script>
    11. <script src="js/bootstrap.min.js">script>
    12. <style type="text/css">
    13.      .carousel{
    14.          height: 200px;
    15.          background-color: #000;
    16.       }
    17.       .carousel .item{
    18.          height: 200px;
    19.          background-color: #000;
    20.       }
    21.       .carousel img{
    22.          width: 100%;
    23.       }
    24. style>
    25. head>
    26. <body>
    27. 	<div class="container-fruid">
    28. 		<div class="navbar navbar-default navbar-fixed-top" role="navigation"
    29. 			style="padding-left: 30px;">
    30. 			<div class="navbar-header">
    31. 				<span class="navbar-brand">欢迎光临eBusinessspan>
    32. 			div>
    33. 			<ul class="nav navbar-nav">
    34. 				<li><a th:href="@{user/toRegister}">注册a>li>
    35. 				<li>
    36. 					<a th:href="(${session.bUser} == null)?'user/toLogin':'#'" >
    37. 						<span th:if="${session.bUser} == null" >
    38. 							登录
    39. 						span>
    40. 						<span th:if="${session.bUser} != null" >
    41. 							欢迎<span th:text="${session.bUser.bemail}" >span>
    42. 						span>
    43. 					a>
    44. 				li>
    45. 				<li><a th:href="@{admin/toLogin}">后台a>li>
    46. 			ul>
    47. 			<ul class="nav navbar-nav navbar-right" style="padding-right: 30px;">
    48. 				<li><a href="cart/userInfo">个人信息a>li>
    49. 				<li><a href="cart/selectCart">我的购物车a>li>
    50. 				<li><a href="cart/myFocus">我的收藏a>li>
    51. 				<li><a href="cart/myOder">我的订单a>li>
    52. 				<li class="dropdown"><a href="##" data-toggle="dropdown"
    53. 					class="dropdown-toggle">关于我们<span class="caret">span>a>
    54. 					<ul class="dropdown-menu">
    55. 						<li><a href="##">联系我们a>li>
    56. 						<li><a href="##">投诉建议a>li>
    57. 					ul>
    58. 				li>
    59. 			ul>
    60. 		div>
    61. 		
    62. 		<div id="carousel-example-generic" class="carousel slide"
    63. 			data-ride="carousel" style="margin-top: 20px;">
    64. 			
    65. 			<ol class="carousel-indicators">
    66. 				<li data-target="#carousel-example-generic" 
    67. 				th:each="advertise,adstat:${advertisementGoods}" 
    68. 				th:data-slide-to="${adstat.index}"
    69. 				th:class="(${adstat.index}==0)? 'active' : ''">li>
    70. 			ol>
    71. 			
    72. 			<div class="carousel-inner" role="listbox">
    73. 				<div th:each="advertise,adstat:${advertisementGoods}" th:class="(${adstat.index}==0)? 'item active' : 'item'">
    74. 					<img th:src="'images/' + ${advertise.gpicture}" th:alt="${adstat.index + 1}">
    75. 					<div class="carousel-caption"><span th:text="${advertise.gname}">span>div>
    76. 				div>
    77. 			div>
    78. 			
    79. 			<a class="left carousel-control" href="#carousel-example-generic"
    80. 				role="button" data-slide="prev"> <span
    81. 				class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    82. 				<span class="sr-only">Previousspan>
    83. 			a> <a class="right carousel-control" href="#carousel-example-generic"
    84. 				role="button" data-slide="next"> <span
    85. 				class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    86. 				<span class="sr-only">Nextspan>
    87. 			a>
    88. 		div>
    89. 		
    90. 		<div class="navbar navbar-default " role="navigation">
    91. 			<ul class="nav navbar-nav" style="padding-left: 50px;">
    92. 				<li><a th:href="@{/}">首页a>li>
    93. 				<li th:each="gty:${goodsType}"><a th:href="'?tid=' + ${gty.id}"><span th:text="${gty.typename}">span>a>li>
    94. 			ul>
    95. 			<form action="search" class="navbar-form navbar-right"
    96. 				style="padding-right: 50px;">
    97. 				<div class="form-group">
    98. 					<input type="text" class="form-control" name="mykey" placeholder="请输入关键词" />
    99. 				div>
    100. 				<button type="submit" class="btn btn-default">搜索button>
    101. 			form>
    102. 		div>
    103. 	div>
    104. body>
    105. html>

    商品详情页面如下

     代码如下

    1.  
    2. html>
    3. <html xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5. <base th:href="@{/}">
    6. <meta charset="UTF-8">
    7. <title>商品页面title>
    8. <link rel="stylesheet" href="css/bootstrap.min.css" />
    9. <script src="js/jquery.min.js">script>
    10. <script type="text/javascript" th:inline="javascript">
    11. 	function focus(){
    12. 			$.ajax(
    13. 				{
    14. 					//请求路径，要注意的是url和th:inline="javascript"
    15. 					url : [[@{/cart/focus}]],
    16. 					//请求类型
    17. 					type : "post",
    18. 					contentType : "application/json",
    19. 					//data表示发送的数据
    20. 					data : JSON.stringify({
    21. 						id : $("#gid").val()
    22. 					}),
    23. 					//成功响应的结果
    24. 					success : function(obj){//obj响应数据
    25. 						if(obj == "no"){
    26. 							alert("您已收藏该商品！");
    27. 						}else if(obj == "ok"){
    28. 							alert("成功收藏该商品");
    29. 						}else{
    30. 							alert("您没有登录，请登录！");
    31. 						}
    32. 					},
    33. 			        error : function() {
    34. 			            alert("处理异常！");
    35. 			        }
    36. 				}	
    37. 			);
    38. 	}
    39. 	function putCart(){
    40. 		if(!(/(^[1-9]\d*$)/.test($("#buyNumber").val()))){
    41. 			alert("购买量请输入正整数!");
    42. 			$("#buyNumber").focus();
    43. 			return;
    44. 		}
    45. 		if(parseInt($("#buyNumber").val()) > parseInt($("#gstore").text())){
    46. 			alert("购买量超出库存!");
    47. 			$("#buyNumber").focus();
    48. 			return;
    49. 		}
    50. 		//获取路径
    51. 		var pathName=window.document.location.pathname;
    52. 		//截取，得到项目名称
    53. 		var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    54. 		window.location.href = projectName + "/cart/putCart?id=" +  $("#gid").val() + "&buyNumber=" + $("#buyNumber").val();
    55. 	}
    56. script>
    57. head>
    58. <body>
    59. 	
    60. 	<div th:include="user/header">div>
    61. 	<div class="container">
    62. 		<div class="row">
    63. 			<div class="col-xs-6 col-md-3">
    64. 				<img
    65. 					th:src="'images/' + ${goods.gpicture}"
    66. 					style="height: 220px; width: 280px; display: block;">
    67. 			div>
    68. 			<div class="col-xs-6 col-md-3">
    69. 				<p>商品名：<span th:text="${goods.gname}">span>p>
    70. 				<p>
    71. 					商品折扣价：<span style="color: red;">¥
    72. 						<span th:text="${goods.grprice}">span>
    73. 					span>
    74. 				p>
    75. 				<p>
    76. 					商品原价：
    77. 					<span class="text-dark" style="text-decoration: line-through;"> ¥
    78. 						<span th:text="${goods.goprice}">span>
    79. 					span>
    80. 				p>
    81. 				<p>
    82. 					商品类型：<span th:text="${goods.typename}">span>
    83. 				p>
    84. 				<p>
    85. 					库存：<span id="gstore"  th:text="${goods.gstore}">span>
    86. 				p>
    87. 				<p>
    88. 					<input type="text" size="12" class="form-control" placeholder="请输入购买量" id="buyNumber" name="buyNumber"/>
    89. 					<input type="hidden" name="gid" id="gid" th:value="${goods.id}"/>
    90. 				p>
    91. 				<p>
    92. 					<a href="javascript:focus()" class="btn btn-primary"
    93. 						style="font-size: 10px;">加入收藏a>
    94. 					<a href="javascript:putCart()" class="btn btn-success"
    95. 						style="font-size: 10px;">加入购物车a>
    96. 				p>
    97. 			div>
    98. 		div>
    99. 	div>
    100. body>
    101. html>

    测试效果如下

     

    如果账号密码不对则弹出错误窗口

     

     

     

    还有用户注册 登录页面 购物车 下单页面 个人信息 我的收藏页面等等此处省略

    需要源码请点赞关注收藏后评论区留言或 私信博主即可

  • 相关阅读:
    时序数据库选型
    每日一练Day05：寻找多数元素
    xdebug3开启profile和trace
    AWS SSA-C003 #21
    配置HBase和zookeeper
    Wireshark原理介绍
    JAVA中的基本数据类型
    Spring框架系列(11) - Spring AOP实现原理详解之Cglib代理实现
    CentOS 7 上安装 MySQL 8.0详细步骤
    【从入门到起飞】IO高级流(1)(缓冲流，转换流，序列化流，反序列化流)
  • 原文地址：https://blog.csdn.net/jiebaoshayebuhui/article/details/127609482