⽤eclipse实现电商平台系统
(SpringBoot+Thymeleaf+MyBatis)
1.开发⼯具:eclipse、Spring Boot+Thymeleaf + MyBatis、MySQL8.0
2.项⽬功能:
游客浏览商品,注册⽤户浏览商品,管理员后台增删改查商品
商品类型(goodstype)的增删查
商品(goodstable)的增删改查
后台顾客信息的删除,注册界⾯顾客的添加
查看或加⼊购物车,查看或加⼊收藏夹,查看或加⼊⽤户个⼈订单,查看⽤户个⼈信息。
3.其他功能
后台上传前台商品照⽚到mysql,前台验证码登录,异常界⾯处理,商品关键字搜索,前台轮播图展⽰,后台设置前台的推荐商品栏,后台设置前台的新添加商品栏,后台使⽤分页查询,前台模拟订单⽀付。
4.数据库表
在MySQL8中创建数据库shop1
创建8张与系统相关的数据表: ausertable 、busertable、carttable、focustable、goodstable、goodstype、orderdetail和orderbasetable.
⼀、eclipse中新建spring boot项⽬。
⼆、建⽴如下项⽬⽬录的⽂件。
1.1.1系统设计
电⾯务平台分为两个⼦系统,⼀是后台管理⼦系统, ⼆是前台电⼦商务⼦系统,下⾯分别说明这两个⼦系统的功能需求与模块划分。
1.1.1系统功能需求
1、后台管理⼦系统
后台管理⼦系统要求管理员登录成功后,才能对商品进⾏管理,包括添加商品、查询商品、修改商品以及删除商品。除商品管理外,管理员还需要对商品类型、注册⽤户以及⽤户的订单等进⾏管理。
2、前台电⼦商务⼦系统
1)⾮注册⽤户
⾮注册⽤户或未登录⽤户具有的功能如下:浏览⾸页、查看商品详情以及搜索商品。
2)⽤户
成功登录的⽤户除具有未登录⽤户具有的功能外,还具有购买商品、查看购物车、收藏商品、查看订
单、查看收藏以及查看⽤户个⼈信息的功能。
三、编写HTML代码
addGood.html
1<!DOCTYPE html>
2<html xmlns:th="">
3<head>
4<meta charset="UTF-8">
5<title>商品类型添加页⾯</title>
6<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
7<body>
8 <div th:include="admin/header"></div>
9 <br><br><br>
10 <div class="container">
11 <div class="bg-primary" >
12 <h3 align="center">添加商品</h3>
13 </div><br>
14 <form th:action="@{/goods/addGoods?act=add}"
15 name="myform" method="post"
16 th:object="${goods}"
17 class="form-horizontal"
18 enctype="multipart/form-data" >
19 <div class="form-group has-success">
20 <label class="col-sm-2 col-md-2 control-label">商品名称</label>
21 <div class="col-sm-4 col-md-4">
21 <div class="col-sm-4 col-md-4">
22 <input type="text" class="form-control"
23 placeholder="请输⼊商品名"
24 th:field="*{gname}"/>
25 </div>
26 </div>
27 <div class="form-group has-success">
28 <label class="col-sm-2 col-md-2 control-label">商品原价</label>
29 <div class="col-sm-4 col-md-4">
30 <input type="number" class="form-control"
31 placeholder="请输⼊商品原价"
32 th:field="*{goprice}"/>
33 </div>
34 </div>
35 <div class="form-group has-success">
36 <label class="col-sm-2 col-md-2 control-label">商品折扣价</label>
37 <div class="col-sm-4 col-md-4">
38 <input type="number" class="form-control"
39 placeholder="请输⼊商品折扣价"
40 th:field="*{grprice}"/>
41 </div>
42 </div>
43 <div class="form-group has-success">
44 <label class="col-sm-2 col-md-2 control-label">商品库存</label>
45 <div class="col-sm-4 col-md-4">
46 <input type="number" class="form-control"
47 placeholder="请输⼊商品库存"
48 th:field="*{gstore}"/>
49 </div>
50 </div>
51 <div class="form-group has-success">
52 <label class="col-sm-2 col-md-2 control-label">商品图⽚</label>
53 <div class="col-sm-4 col-md-4">
54 <input type="file" placeholder="请选择商品图⽚" class="form-control" name="fileName"/>
55 </div>thymeleaf用法
56 </div>
57 <div class="form-group has-success">
58 <label class="col-sm-2 col-md-2 control-label">是否推荐</label>
59 <div class="col-sm-4 col-md-4 radio">
60 <label>
61 <input type="radio" th:field="*{isRecommend}" value="1">是
62 </label>
63 <label>
64 <input type="radio" th:field="*{isRecommend}" value="0">否
65 </label>
66 </div>
67 </div>
68 <div class="form-group has-success">
69 <label class="col-sm-2 col-md-2 control-label">是否⼴告</label>
70 <div class="col-sm-4 col-md-4 radio">
71 <label>
72 <input type="radio" th:field="*{isAdvertisement}" value="1">是
73 </label>
74 <label>
75 <input type="radio" th:field="*{isAdvertisement}"s value="0">否
76 </label>
77 </div>
78 </div>
79 <div class="form-group has-success">
80 <label class="col-sm-2 col-md-2 control-label">商品类型</label>
81 <div class="col-sm-4 col-md-4">
82 <select class="form-control" th:field="*{goodstype_id}">
83 <option th:each="gty:${goodsType}" th:value="${gty.id}" th:text="${pename}">
84 </select>
85 </div>
86 </div>
86 </div>
87 <div class="form-group">
88 <div class="col-sm-offset-2 col-sm-10">
89 <button type="submit"class="btn btn-success" >添加</button>
90 <button type="reset" class="btn btn-primary" >重置</button>
91 </div>
92 </div>
93 </form>
94 </div>
95</body>
96</html>
addType.html
1<!DOCTYPE html>
2<html xmlns:th="">
3<head>
4<meta charset="UTF-8">
5<title>商品类型添加页⾯</title>
6<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
7<body>
8 <div th:include="admin/header"></div>
9 <br><br><br>
10 <div class="container">
11 <div class="bg-primary" >
12 <h3 align="center">添加类型</h3>
13 </div><br>
14 <form th:action="@{/type/addType}" name="myform" method="post" th:object="${goodsType}" class="form-horizontal" role="form" >
15 <div class="form-group has-success">
16 <label class="col-sm-2 col-md-2 control-label">类型名称</label>
17 <div class="col-sm-4 col-md-4">
18 <input type="text" class="form-control"
19 placeholder="请输⼊类型名"
20 th:field="*{typename}"/>
21 </div>
22 </div>
23 <div class="form-group">
24 <div class="col-sm-offset-2 col-sm-10">
25 <button type="submit"class="btn btn-success" >添加</button>
26 <button type="reset" class="btn btn-primary" >重置</button>
27 </div>
28 </div>
29 </form>
30 </div>
31</body>
32</html>
allOrder.html
1<!DOCTYPE html>
2<html xmlns:th="">
3<head>
4<base th:href="@{/}">
5<meta charset="UTF-8">
6<title>主页</title>
7<link rel="stylesheet" href="css/bootstrap.min.css" />
8</head>
9<body>
10 <!-- 加载header.html -->
11 <div th:include="admin/header"></div>
12 <br><br><br>
13 <div class="container">
14 <div class="panel panel-primary">
15 <div class="panel-heading">
16 <h3 class="panel-title">订单列表</h3>
17 </div>
18 <div class="panel-body">
19 <div class="table table-responsive">
20 <table class="table table-bordered table-hover">
21 <tbody class="text-center">
22 <tr>
23 <th>订单ID</th>
24 <th>⽤户邮箱</th>
25 <th>订单⾦额</th>
26 <th>订单状态</th>
27 <th>下单⽇期</th>
28 </tr>
29 <tr th:each="ao:${allOrders}">
30 <td th:text="${ao.id}"></td>
31 <td th:text="${ao.bemail}"></td>
32 <td th:text="${ao.amount}"></td>
33 <td th:text="(${ao.status} == 1)?'已⽀付':'未⽀付'"></td>
34 <td th:text="${ao.orderdate}"></td>
35 </tr>
36 <tr>
37 <td colspan="5" align="right">
38 <ul class="pagination">
39 <li><a>第<span th:text="${currentPage}" ></span>页</a></li>
40 <li><a>共<span th:text="${totalPage}" ></span>页</a></li>
41 <li>
42 <span th:if="${currentPage} != 1" >
43 <a th:href="@{selectOrder?currentPage=${currentPage - 1}}">上⼀页</a>
44 </span>
45 <span th:if="${currentPage} != ${totalPage}" >
46 <a th:href="@{selectOrder?currentPage=${currentPage - 1}}">下⼀页</a>
47 </span>
48 </li>
49 </ul>
50 </td>
51 </tr>
52 </tbody>
53 </table>
54 </div>
55 </div>
56 </div>
57 </div>
58</body>
59</html>
allUser.html
1<!DOCTYPE html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论