diff --git a/src/main/resources/templates/product.html b/src/main/resources/templates/product.html
new file mode 100644
index 0000000000000000000000000000000000000000..f29a4f56320635486a942b8f429bc94986fc91df
--- /dev/null
+++ b/src/main/resources/templates/product.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
+    <meta name="author" content="Coderthemes">
+
+    <link rel="shortcut icon" href="bootstrap/images/favicon_1.ico">
+
+    <title>产品</title>
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="bootstrap/css/core.css" rel="stylesheet" type="text/css">
+    <link href="bootstrap/css/icons.css" rel="stylesheet" type="text/css">
+    <link href="bootstrap/css/components.css" rel="stylesheet" type="text/css">
+    <link href="bootstrap/css/pages.css" rel="stylesheet" type="text/css">
+    <link href="bootstrap/css/menu.css" rel="stylesheet" type="text/css">
+    <link href="bootstrap/css/responsive.css" rel="stylesheet" type="text/css">
+
+    <script src="bootstrap/js/modernizr.min.js"></script>
+
+
+    <!-- bootstrap table css -->
+    <link href="bootstrap/table/bootstrap-table.min.css" rel="stylesheet" type="text/css">
+</head>
+<body class="fixed-left">
+
+<!-- Begin page -->
+<div id="wrapper">
+
+    <!-- Top Bar Start -->
+    <div th:replace="~{fragment :: topbar_menu}">
+    </div>
+    <!-- Top Bar End -->
+
+
+    <!-- ========== Left Sidebar Start ========== -->
+    <div th:replace="~{fragment :: leftbar_menu(10)}" >
+    </div>
+    <!-- Left Sidebar End -->
+
+
+    <!-- ============================================================== -->
+    <!-- Start right Content here -->
+    <!-- ============================================================== -->
+    <div class="content-page">
+        <!-- Start content -->
+        <div class="content">
+            <div class="container">
+
+                <!-- Page-Title -->
+                <div class="row">
+                    <div class="col-sm-12">
+                        <ol class="breadcrumb pull-right">
+                            <li>
+                                <a href="#">OCP</a>
+                            </li>
+                            <li class="active">产品管理</li>
+                        </ol>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="panel panel-default">
+                            <div class="panel-heading">
+                                <h3 class="panel-title">产品列表</h3>
+                            </div>
+                            <div class="panel-body">
+                                <div class="row">
+                                    <table id="userTable"></table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div> <!-- End Row -->
+            </div> <!-- container -->
+
+        </div> <!-- content -->
+
+        <footer class="footer text-right">
+            2015 © OCP.
+        </footer>
+
+    </div>
+    <!-- ============================================================== -->
+    <!-- End Right content here -->
+    <!-- ============================================================== -->
+
+</div>
+<!-- END wrapper -->
+
+
+<script>
+    var resizefunc = [];
+</script>
+
+<!-- jQuery  -->
+<script src="bootstrap/js/jquery.min.js"></script>
+<script src="bootstrap/js/bootstrap.min.js"></script>
+<script src="bootstrap/js/detect.js"></script>
+<script src="bootstrap/js/fastclick.js"></script>
+<script src="bootstrap/js/jquery.slimscroll.js"></script>
+<script src="bootstrap/js/jquery.blockUI.js"></script>
+<script src="bootstrap/js/waves.js"></script>
+<script src="bootstrap/js/wow.min.js"></script>
+<script src="bootstrap/js/jquery.nicescroll.js"></script>
+<script src="bootstrap/js/jquery.scrollTo.min.js"></script>
+
+<script src="bootstrap/js/jquery.app.js"></script>
+
+<!-- bootstrap table js -->
+<script src="bootstrap/table/bootstrap-table.min.js"></script>
+<script src="bootstrap/table/bootstrap-table-zh-CN.min.js"></script>
+
+<script>
+    $(function () {
+        $('#productTable').bootstrapTable({
+            url: '/getProducts',
+            method: 'get',
+            cache: false,
+            pagination: true,
+            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
+            pageSize: 10,                     //每页的记录行数（*）
+            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
+            sidePagination: 'server',
+            clickToSelect: true,
+            uniqueId: "merchid",
+            columns: [
+                {checkbox: true, visible: true},                  //是否显示复选框
+                {field: 'merchid', title: '产品编号'},
+                {field: 'fullname', title: '产品名称'},
+                {field: 'unitprice', title: '单价'},
+                {field: 'buyprice', title: '进价'},
+                {field: 'kind', title: '类别'},
+                {field: 'brand', title: '品牌'},
+                {field: 'birthPlace', title: '产地'},
+                {field: 'amout', title: '库存数量'},
+                {field: 'merchid', title: '操作',
+                    formatter: function(value, row, index){
+                        return '<a>详情</a>&nbsp;&nbsp;<i class="md md-mode-edit"><a>编辑</a>&nbsp;&nbsp;<a>删除</a>';
+                    }
+                }
+            ],
+            queryParams: function (params) {
+                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
+                params = {
+                    pageSize: params.limit,                         //页面大小
+                    pageNum: (params.offset / params.limit) + 1,   //页码
+                };
+                return params;
+            }
+        });
+    });
+</script>
+
+</body>
+</html>
\ No newline at end of file
