start MOMENT

package.json

@@ -48,6 +48,7 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
+    "blueimp-md5": "^2.10.0",
     "bootstrap": "^4.0.0",
     "bootstrap-datepicker": "^1.7.1",
     "chart.js": "^2.7.1",
@@ -57,6 +58,7 @@
     "fullcalendar": "^3.6.2",
     "jquery": "^3.2.1",
     "jquery-sparkline": "^2.4.0",
+    "jquery.cookie": "^1.4.1",
     "jvectormap": "^2.0.4",
     "load-google-maps-api": "^1.0.0",
     "lodash": "^4.17.4",

src/assets/scripts/index.js

@@ -1,17 +1,21 @@
 import '../styles/index.scss';
 
-import './masonry';
-import './charts';
-import './popover';
-import './scrollbar';
-import './search';
-import './sidebar';
-import './skycons';
-import './vectorMaps';
-import './chat';
-import './datatable';
-import './datepicker';
-import './email';
-import './fullcalendar';
-import './googleMaps';
+import './signin';
 import './utils';
+import './sidebar';
+
+// import './masonry';
+// import './charts';
+// import './popover';
+// import './scrollbar';
+// import './search';
+// import './skycons';
+// import './vectorMaps';
+// import './chat';
+// import './datatable';
+// import './datepicker';
+// import './email';
+// import './fullcalendar';
+// import './googleMaps';
+
+

src/assets/scripts/signin/index.js

@@ -0,0 +1,43 @@
+import * as $ from 'jquery';
+import util from '../util.js';
+const MD5 = require('blueimp-md5/js/md5');
+
+export default (function () {
+  const $msg = $('#msg');
+
+  // Sidebar links
+  $('#signin').click(function (e) {
+    const $this = $(this),
+          $user = $('#user'),
+          $pwd = $('#pwd');
+
+    console.log($user)
+    if(!$user.val()){
+      $msg.text('请输入用户名').show();
+      return;
+    }
+
+    if(!$pwd.val()){
+      $msg.text('请输入密码').show();
+      return;
+    }
+    
+    util.post('/auth/login', {
+      username: $user.val(),
+      password: MD5($pwd.val())
+    }, (data)=>{
+      if(data.status == "OK"){
+        $.cookie('token', data.result);
+        location.href = "/index.html";
+      }else if(data.status == "FAILED"){
+        $msg.text(data.errMsg).show();
+      }
+    });
+
+  });
+
+  // 开始输入隐藏消息
+  $('#signin-form input').on('focus', function(){
+    $msg.hide();
+  })
+}());

src/assets/scripts/util.js

@@ -0,0 +1,27 @@
+import * as $ from 'jquery';
+import 'jquery.cookie';
+
+export default {
+  "post": function(url, data, success_callback, fail_callback){
+    // data['token']
+    $.ajax({
+      "url": url,
+      "data": data,
+      "method": "POST",
+      "dataType": "json",
+      "headers": {
+        'Authorization': "Bearer " + $.cookie('token')
+      },
+      "statusCode": {
+        403: function(e) {
+          alert( e.responseJSON.errMsg );
+          location.href = "/signin.html";
+        }
+      }
+    }).done(function( data, textStatus, jqXHR ) {
+      success_callback( data, textStatus, jqXHR )
+    }).fail(function( data, textStatus, errorThrown ) {
+      fail_callback( data, textStatus, errorThrown )
+    })
+  }
+}

src/assets/styles/index.scss

@@ -1,6 +1,6 @@
 @import 'spec/settings/index';
 @import 'spec/tools/index';
-@import "~bootstrap/scss/bootstrap";
+// "~"指node_modules文件夹（webpack-resolve-alias）
+@import "~bootstrap/dist/css/bootstrap";
 @import 'spec/index';
 @import 'vendor/index';
-

src/signin.ejs

@@ -17,15 +17,18 @@
         </div>
       </div>
       <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
-        <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
-        <form>
+        <h4 class="fw-300 c-grey-900 mB-40">登录</h4>
+        <form id="signin-form">
           <div class="form-group">
-            <label class="text-normal text-dark">Username</label>
-            <input type="email" class="form-control" placeholder="John Doe">
+            <label class="text-normal text-dark">用户名</label>
+            <input id="user" type="text" class="form-control" placeholder="张三">
           </div>
           <div class="form-group">
-            <label class="text-normal text-dark">Password</label>
-            <input type="password" class="form-control" placeholder="Password">
+            <label class="text-normal text-dark">密码</label>
+            <input id="pwd" type="password" class="form-control" placeholder="123456">
+          </div>
+          <div class="form-group">
+            <label id="msg" class="text-normal text-danger" style="display: hide">msg</label>
           </div>
           <div class="form-group">
             <div class="peers ai-c jc-sb fxw-nw">
@@ -33,12 +36,12 @@
                 <div class="checkbox checkbox-circle checkbox-info peers ai-c">
                   <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
                   <label for="inputCall1" class=" peers peer-greed js-sb ai-c">
-                    <span class="peer peer-greed">Remember Me</span>
+                    <span class="peer peer-greed">记住我</span>
                   </label>
                 </div>
               </div>
               <div class="peer">
-                <button class="btn btn-primary">Login</button>
+                <a id="signin" class="btn btn-primary">登录</a>
               </div>
             </div>
           </div>

webpack/devServer.js

@@ -25,6 +25,18 @@ const devServer = {
   host               : '0.0.0.0',
   disableHostCheck   : true, // [1]
   overlay            : true,
+  proxy: {
+    '/admin/*': {
+      target: 'http://localhost:1313',
+      changeOrigin: true,
+      secure: false
+    },
+    '/auth/*': {
+      target: 'http://localhost:1313',
+      changeOrigin: true,
+      secure: false
+    }
+  },
   stats: {
     assets     : true,
     children   : false,