install.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Webman Admin 安装</title>
  6. <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
  7. <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
  8. </head>
  9. <body class="pear-container">
  10. <div class="layui-row layui-col-space10">
  11. <div class="layui-col-md12">
  12. <div class="layui-card">
  13. <div class="layui-card">
  14. <div class="layui-card-body" style="padding-top: 40px;">
  15. <h1 style="text-align:center;margin: 20px 0 40px">Webman Admin 安装</h1>
  16. <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
  17. <div carousel-item>
  18. <div>
  19. <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
  20. <div class="layui-form-item">
  21. <label class="layui-form-label">用户名</label>
  22. <div class="layui-input-block">
  23. <input type="text" placeholder="请填写入用户名" name="user" class="layui-input" lay-verify="required" required value="root" autocomplete="off"/>
  24. </div>
  25. </div>
  26. <div class="layui-form-item">
  27. <label class="layui-form-label">密码</label>
  28. <div class="layui-input-block">
  29. <input type="password" placeholder="请填写入密码" name="password" class="layui-input" autocomplete="off"/>
  30. </div>
  31. </div>
  32. <div class="layui-form-item">
  33. <label class="layui-form-label">数据库</label>
  34. <div class="layui-input-block">
  35. <input type="text" placeholder="请填写入数据库" name="database" class="layui-input" lay-verify="required" required value="webman_admin"/>
  36. </div>
  37. </div>
  38. <div class="layui-form-item">
  39. <label class="layui-form-label">host</label>
  40. <div class="layui-input-block">
  41. <input type="text" placeholder="请填写入数据库host" name="host" class="layui-input" lay-verify="required" required value="127.0.0.1"/>
  42. </div>
  43. </div>
  44. <div class="layui-form-item">
  45. <label class="layui-form-label">端口</label>
  46. <div class="layui-input-block">
  47. <input type="number" placeholder="请填写入数据库端口" name="port" class="layui-input" required value="3306" />
  48. </div>
  49. </div>
  50. <div class="layui-form-item">
  51. <label class="layui-form-label">强制覆盖</label>
  52. <div class="layui-input-block">
  53. <input type="checkbox" name="overwrite" lay-skin="primary">
  54. </div>
  55. </div>
  56. <div class="layui-form-item">
  57. <div class="layui-input-block">
  58. <button type="button" class="pear-btn next">跳过此步骤</button>
  59. <button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep">
  60. &emsp;下一步&emsp;
  61. </button>
  62. </div>
  63. </div>
  64. </form>
  65. </div>
  66. <div>
  67. <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
  68. <div class="layui-form-item">
  69. <label class="layui-form-label">用户名</label>
  70. <div class="layui-input-block">
  71. <input type="text" placeholder="请填写入用户名" name="username" class="layui-input" lay-verify="required" required />
  72. </div>
  73. </div>
  74. <div class="layui-form-item">
  75. <label class="layui-form-label">密码</label>
  76. <div class="layui-input-block">
  77. <input type="password" placeholder="请填写入密码" name="password" class="layui-input"/>
  78. </div>
  79. </div>
  80. <div class="layui-form-item">
  81. <label class="layui-form-label">确认密码</label>
  82. <div class="layui-input-block">
  83. <input type="password" placeholder="请填再次写入密码" name="password_confirm" class="layui-input"/>
  84. </div>
  85. </div>
  86. <div class="layui-form-item">
  87. <div class="layui-input-block">
  88. <button type="button" class="pear-btn pre">上一步</button>
  89. <button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep2">
  90. &emsp;提交&emsp;
  91. </button>
  92. </div>
  93. </div>
  94. </form>
  95. </div>
  96. <div>
  97. <div style="text-align: center;margin-top: 90px;">
  98. <i class="layui-icon layui-circle pear-back" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
  99. <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
  100. 安装成功
  101. </div>
  102. <div style="font-size: 14px;color: #666;margin-top: 20px;">需要重启才能生效</div>
  103. </div>
  104. <div style="text-align: center;margin-top: 50px;">
  105. <button class="pear-btn pear-btn-primary finish">进入后台</button>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <script>
  116. var color = localStorage.getItem("theme-color-color");
  117. var second = localStorage.getItem("theme-color-second");
  118. if (!color || !second) {
  119. localStorage.setItem("theme-color-color", "#2d8cf0");
  120. localStorage.setItem("theme-color-second", "#ecf5ff");
  121. }
  122. </script>
  123. <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
  124. <script src="/app/admin/component/pear/pear.js"></script>
  125. <script>
  126. layui.use(["form", "step","code","element", "popup"], function() {
  127. var $ = layui.$,
  128. form = layui.form,
  129. step = layui.step;
  130. layui.code();
  131. step.render({
  132. elem: "#stepForm",
  133. filter: "stepForm",
  134. width: "100%",
  135. stepWidth: "70%",
  136. height: "500px",
  137. stepItems: [{
  138. title: "填写数据库信息"
  139. }, {
  140. title: "填写管理员账户"
  141. }, {
  142. title: "完成"
  143. }]
  144. });
  145. form.on("submit(formStep)", function(data) {
  146. let loading = layer.load();
  147. $.ajax({
  148. url: "/app/admin/install/step1",
  149. type: "POST",
  150. dataType: "json",
  151. data: data.field,
  152. success: function (res) {
  153. if (res.code) {
  154. return layui.popup.failure(res.msg);
  155. }
  156. layui.popup.success("操作成功", function () {
  157. step.next("#stepForm");
  158. });
  159. },
  160. complete: function () {
  161. layer.close(loading);
  162. }
  163. })
  164. return false;
  165. });
  166. form.on("submit(formStep2)", function(data) {
  167. let loading = layer.load();
  168. $.ajax({
  169. url: "/app/admin/install/step2",
  170. type: "POST",
  171. dataType: "json",
  172. data: data.field,
  173. success: function (res) {
  174. if (res.code) {
  175. return layui.popup.failure(res.msg);
  176. }
  177. //layui.popup.success("安装成功");
  178. step.next("#stepForm");
  179. layer.close(loading);
  180. },
  181. complete: function () {
  182. layer.close(loading);
  183. }
  184. })
  185. return false;
  186. });
  187. $(".pre").click(function() {
  188. step.pre("#stepForm");
  189. return false;
  190. });
  191. $(".next").click(function() {
  192. step.next("#stepForm");
  193. return false;
  194. });
  195. $(".finish").click(function() {
  196. location.reload();
  197. });
  198. })
  199. </script>
  200. </body>
  201. </html>