Create new component files.

public/index.html

@@ -15,12 +15,37 @@
 </body>
 <script>
 	let routes = [{
-		path: '/index',
-		fileName: 'scr/components/index.js'
-	}],
-		el = document.getElementById('router-view');
+			path: '/signin',
+			fileName: 'src/components/signin.js'
+		},
+		{
+			path: '/signup',
+			fileName: 'src/components/signup.js'
+		},
+		{
+			path: '/index',
+			fileName: 'src/components/index.js'
+		},
+
+	];
+
+	const el = document.getElementById('router-view');
 
 	let router = new SPARouter(el, routes, 'hash');
+
+	router.beforeEach((to, next) => {
+		Utils.ajaxGet('http://admin.cloudsql.1473.cn/v1/index/signStatus', function (response) {
+			if (response.status === 'signedin') {
+				next();
+			} else {
+				if (to.path === '/signin' || to.path === '/signup') {
+					next();
+				} else {
+					window.location.hash = '/signin';
+				}
+			}
+		});
+	});
 </script>
 
 </html>

public/scr/components/index.js

@@ -1,4 +1,116 @@
 SPA_RESOLVE_INIT = function ($el, $router) {
-    $el.innerHTML = `<p >当前异步渲染首页${$router.path}</p>`
-    console.log($router)
+    let body = document.querySelector('body');
+
+    body.className = 'mdui-appbar-with-toolbar mdui-theme-primary-blue mdui-theme-accent-light-blue mdui-drawer-body-left mdui-loaded';
+    mdui.JQ($el).empty();
+    mdui.JQ($el).append(`
+                    <header class="mdui-appbar mdui-appbar-fixed">
+                        <div class="mdui-toolbar mdui-color-theme">
+                            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}">
+                                <i class="mdui-icon material-icons">menu</i>
+                            </span>
+                            <a href="#/index" class="mdui-typo-headline mdui-hidden-xs">CloudSQL Admin Panel</a>
+                            <div class="mdui-toolbar-spacer"></div>
+                            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
+                                <i class="mdui-icon material-icons">exit_to_app</i>
+                            </span>
+                        </div>
+                    </header>
+            
+                    <div class="mdui-drawer mdui-drawer-open" id="main-drawer">
+                        <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
+                            <li class="mdui-list-item mdui-ripple">
+                                <i class="mdui-list-item-icon mdui-icon material-icons">view_list</i>
+                                <div class="mdui-list-item-content">数据库列表</div>
+                            </li>
+                            <li class="mdui-list-item mdui-ripple">
+                                <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
+                                <div class="mdui-list-item-content">用户列表</div>
+                            </li>
+                            <li class="mdui-list-item mdui-ripple">
+                                <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
+                                <div class="mdui-list-item-content">关于</div>
+                            </li>
+                        </div>
+                    </div>
+                
+                    <div class="mdui-container main-container"></div>
+                `);
+
+    //左侧菜单栏
+    let leftMenuButton = document.querySelector('span:nth-child(1).mdui-btn.mdui-btn-icon.mdui-ripple.mdui-ripple-white'),
+        mainDrawer = new mdui.Drawer('#main-drawer');
+
+
+    Utils.handleEvent('click', {
+        onElement: leftMenuButton,
+        withCallback: function () {
+            mainDrawer.toggle();
+        }
+    })
+
+    let databaseListButton = document.querySelector('#main-drawer li:nth-child(1)');
+
+    Utils.handleEvent('click', {
+        onElement: databaseListButton,
+        withCallback: function () {
+            window.location.hash = '/index/databaseList';
+        }
+    })
+
+    let userListButton = document.querySelector('#main-drawer li:nth-child(2)');
+
+    Utils.handleEvent('click', {
+        onElement: userListButton,
+        withCallback: function () {
+            window.location.hash = '/index/userList';
+        }
+    })
+
+    //退出登录按钮
+    let signoutButton = document.querySelector('span:nth-child(4).mdui-btn.mdui-btn-icon.mdui-ripple.mdui-ripple-white i.mdui-icon.material-icons');
+    Utils.handleEvent('click', {
+        onElement: signoutButton,
+        withCallback: function () {
+            Utils.ajaxGet('http://admin.cloudsql.1473.cn/v1/signout', function (response) {
+                if (response.status == 'successed') {
+                    mdui.snackbar({
+                        message: response.info
+                    });
+                    window.location.hash = response.url;
+                } else {
+                    console.log(response.info);
+                    console.log(response.error);
+                    mdui.snackbar({
+                        message: response.info
+                    });
+                }
+            });
+        }
+    })
+
+    const inlineEl = document.querySelector('.mdui-container.main-container');
+    const inlineRoute = [{
+            path: '/index/main',
+            fileName: 'src/components/main.js'
+        },
+        {
+            path: '/index/databaseList',
+            fileName: 'src/components/databaseList.js'
+        },
+        {
+            path: '/index/userList',
+            fileName: 'src/components/userList.js'
+        },
+    ]
+    const inlineRouter = new SPARouter(inlineEl, inlineRouter, 'hash');
+    inlineRouter.beforeEach((to, next) => {
+        Utils.ajaxGet('http://admin.cloudsql.1473.cn/v1/index/signStatus', function (response) {
+            if (response.status === 'signedin') {
+                next();
+            } else {
+                window.location.hash = '/signin';
+            }
+        });
+    });
 }

public/scr/components/main.js

@@ -0,0 +1,47 @@
+SPA_RESOLVE_INIT = function ($el, $router) {
+    let contentAera = document.querySelector('.mdui-container.main-container'),
+        getUserCountUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/getUserCount',
+        getDatabaseCountUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/getDatabaseCount',
+        content = `
+                    <div class="mdui-row-xs-1 mdui-row-sm-1 mdui-row-md-3 mdui-row-xl-3 mdui-m-t-3 main-status-row">
+                        <div class="mdui-col mdui-clearfix main-status-col">
+                            <div class="mdui-float-left icon-row">
+                                <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
+                            </div>
+                            <div class="mdui-float-left info-row">
+                                <div class="name-col">用户数量</div>
+                                <div id="numberOfUser" class="value-col">1024</div>
+                            </div>
+                        </div>
+                        <div class="mdui-col mdui-clearfix main-status-col">
+                            <div class="mdui-float-left icon-row">
+                                <i class="mdui-list-item-icon mdui-icon material-icons">view_list</i>
+                            </div>
+                            <div class="mdui-float-left info-row">
+                                <div class="name-col">数据库数量</div>
+                                <div id="numberOfDatabse" class="value-col">1024</div>
+                            </div>
+                        </div>
+                        <div class="mdui-col mdui-clearfix main-status-col">
+                            <div class="mdui-float-left icon-row">
+                                <i class="mdui-list-item-icon mdui-icon material-icons">cloud</i>
+                            </div>
+                            <div class="mdui-float-left info-row">
+                                <div class="name-col">服务状态</div>
+                                <div class="value-col">正常</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+
+    mdui.JQ(contentAera).append(content);
+
+    Utils.ajaxGet(getUserCountUrl, function (response) {
+        document.querySelector('#numberOfUser').innerText = response.data.results;
+    });
+
+    Utils.ajaxGet(getDatabaseCountUrl, function (response) {
+        document.querySelector('#numberOfDatabse').innerText = response.data.results;
+    });
+
+}

public/scr/components/sample.js

@@ -0,0 +1,4 @@
+SPA_RESOLVE_INIT = function ($el, $router) {
+    $el.innerHTML = `<p >当前异步渲染首页${$router.path}</p>`
+    console.log($router)
+}

public/scr/components/signin.js

@@ -0,0 +1,85 @@
+SPA_RESOLVE_INIT = function ($el, $router) {
+    const html = document.querySelector('html');
+    const body = document.querySelector('body');
+
+    html.className = 'index';
+    body.className = 'mdui-theme-primary-blue mdui-theme-accent-light-blue index';
+    mdui.JQ($el).empty();
+
+    mdui.JQ($el).append(`
+                <header class="mdui-appbar mdui-shadow-0">
+                    <div class="mdui-toolbar mdui-color-theme">
+                        <a class="mdui-typo-headline" href="#">CloudSQL Admin Panel</a>
+                        <div class="mdui-toolbar-spacer"></div>
+                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signin">登陆</a>
+                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signup">注册</a>
+                    </div>
+                </header>
+                <main style="height: 85%;">
+                    <div class="mdui-container main-section">
+                        <h2 class="mdui-typo-display-1 main-section-tittle">用户登录</h2>
+                        <div class="mdui-container mdui-col-md-8 mdui-center main-sub-section">
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
+                                <i class="mdui-icon material-icons">person</i>
+                                <input class="mdui-textfield-input" name="userid" type="text" placeholder="用户名/邮箱" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
+                                <i class="mdui-icon material-icons">lock</i>
+                                <input class="mdui-textfield-input" name="password" type="password" placeholder="密码" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row captcha-row">
+                                <img src="http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}">
+                                <input class="mdui-textfield-input" name="captcha" type="text" placeholder="验证码" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-typo main-a-row">
+                                <a href="#/signup">还没有账户，点击注册</a>
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center main-button-row">
+                                <button class="mdui-btn mdui-btn-block mdui-color-theme-accent">登陆</button>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+                <footer>
+                    <div class="footer-copyright">Copyright © 2016 - 2017 <a href="/">CloudSQL</a> All rights reserved.</div>
+                </footer>
+            `)
+
+    //验证码刷新逻辑
+    const captchaImg = document.querySelector('.captcha-row img');
+
+    Utils.handleEvent('click', {
+        onElement: captchaImg,
+        withCallback: function () {
+            this.src = `http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}`; //加入当前时间以避免缓存
+        }
+    });
+
+    /* captchaImg.addEventListener('click', function () {
+        this.src = `http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}`; //加入当前时间以避免缓存
+    }, false); */
+
+    //登陆逻辑
+    const submitButton = document.querySelector('.main-button-row button');
+
+    Utils.handleEvent('load', {
+        onElement: submitButton,
+        withCallback: function () {
+            let signInUrl = 'http://admin.cloudsql.1473.cn/v1/signin',
+                userId = document.querySelector('input[name=userid]').value,
+                password = document.querySelector('input[name=password]').value,
+                captchaCode = document.querySelector('input[name=captcha]').value,
+                postData = `userId=${userId}&password=${password}&captcha=${captchaCode}`;
+
+            Utils.ajaxPost(signInUrl, postData, function (response) {
+                if (response.status == 'signedin') {
+                    window.location.hash = response.url;
+                } else {
+                    mdui.snackbar({
+                        message: response.info
+                    });
+                }
+            })
+        }
+    });
+}

public/scr/components/signup.js

@@ -0,0 +1,91 @@
+SPA_RESOLVE_INIT = function ($el, $router) {
+    const html = document.querySelector('html');
+    const body = document.querySelector('body');
+
+    html.className = 'index';
+    body.className = 'mdui-theme-primary-blue mdui-theme-accent-light-blue index';
+    mdui.JQ($el).empty();
+
+    mdui.JQ($el).append(`
+                <header class="mdui-appbar mdui-shadow-0">
+                    <div class="mdui-toolbar mdui-color-theme">
+                        <a class="mdui-typo-headline" href="#">CloudSQL Admin Panel</a>
+                        <div class="mdui-toolbar-spacer"></div>
+                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signin">登陆</a>
+                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href='#/signup'>注册</a>
+                    </div>
+                </header>
+                <main style="height: 85%;">
+                    <div class="mdui-container main-section">
+                        <h2 class="mdui-typo-display-1 main-section-tittle">用户注册</h2>
+                        <div class="mdui-container mdui-col-md-8 mdui-center main-sub-section">
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
+                                <i class="mdui-icon material-icons">person</i>
+                                <input class="mdui-textfield-input" name="userid" type="text" placeholder="用户名/邮箱" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
+                                <i class="mdui-icon material-icons">lock</i>
+                                <input class="mdui-textfield-input" name="password" type="password" placeholder="密码" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
+                                <i class="mdui-icon material-icons">code</i>
+                                <input class="mdui-textfield-input" name="invitecode" type="text" placeholder="邀请码" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row captcha-row">
+                                <img src="http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}">
+                                <input class="mdui-textfield-input" name="captcha" type="text" placeholder="验证码" />
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center mdui-typo main-a-row">
+                                <a href="#/signin">已有账户，点击登陆</a>
+                            </div>
+                            <div class="mdui-col-md-6 mdui-center main-button-row">
+                                <button class="mdui-btn mdui-btn-block mdui-color-theme-accent">注册</button>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+                <footer>
+                    <div class="footer-copyright">Copyright © 2016 - 2017 <a href="/">CloudSQL</a> All rights reserved.</div>
+                </footer>
+            `)
+
+    //验证码刷新逻辑
+    let captchaImg = document.querySelector('.captcha-row img');
+
+    Utils.handleEvent('click', {
+        onElement: captchaImg,
+        withCallback: function () {
+            this.src = `http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}`; //加入当前时间以避免缓存
+        }
+    });
+
+    /* captchaImg.addEventListener('click', function () {
+        this.src = `http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}`; //加入当前时间以避免缓存
+    }, false); */
+
+    let submitButton = document.querySelector('.main-button-row button');
+
+    Utils.handleEvent('click', {
+        onElement: submitButton,
+        withCallback: function () {
+            let signupUrl = 'http://admin.cloudsql.1473.cn/v1/signup',
+                userId = document.querySelector('input[name=userid]').value,
+                password = document.querySelector('input[name=password]').value,
+                captchaCode = document.querySelector('input[name=captcha]').value,
+                postData = `userId=${userId}&password=${password}&captcha=${captchaCode}`;
+
+            Utils.ajaxPost(signupUrl, postData, function (response) {
+                if (response.status == 'successed') {
+                    mdui.snackbar({
+                        message: response.info
+                    });
+                    window.location.hash = response.url;
+                } else {
+                    mdui.snackbar({
+                        message: response.info
+                    });
+                }
+            })
+        }
+    });
+}

public/scr/index-dev.js

@@ -35,15 +35,15 @@ class Utils {
      * @param {!string} url 请求地址
      * @param {?function} next 回调函数
      */
-    ajaxGet(url, next) {
+    static ajaxGet(url, next) {
         let xhr = new XMLHttpRequest();
 
         if (url.includes('?')) {
             // 在URL有其他参数时，添加一个date参数加入当前时间以避免缓存
-            xhr.open('GET', url + '&date=' + new Date().getTime(), true);
+            xhr.open('GET', `${url}&date=${new Date().getTime()}`, true);
         } else {
             // 添加一个date参数加入当前时间以避免缓存
-            xhr.open('GET', url + '?' + new Date().getTime(), true);
+            xhr.open('GET', `${url}&date=${new Date().getTime()}`, true);
         }
         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         // 更改XMLHttpRequest对象withCredentials属性以支持跨域Cookies
@@ -53,7 +53,7 @@ class Utils {
             // 获取请求接口返回值
             let response = res.target.response;
 
-            next.call(this, response);
+            next && next(response);
         };
         xhr.send();
     }
@@ -64,15 +64,15 @@ class Utils {
      * @param {?string} data post请求参数
      * @param {?function} next 回调函数
      */
-    ajaxPost(url, data, next) {
+    static ajaxPost(url, data, next) {
         let xhr = new XMLHttpRequest();
 
         if (url.includes('?')) {
             // 在URL有其他参数时，添加一个date参数加入当前时间以避免缓存
-            xhr.open("POST", url + '&' + new Date().getTime(), true);
+            xhr.open("POST", `${url}&${new Date().getTime()}`, true);
         } else {
             // 添加一个date参数加入当前时间以避免缓存
-            xhr.open("POST", url + '?' + new Date().getTime(), true);
+            xhr.open("POST", `${url}?${new Date().getTime()}`, true);
         }
         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         // 更改XMLHttpRequest对象withCredentials属性以支持跨域Cookies
@@ -82,7 +82,7 @@ class Utils {
             // 获取请求接口返回值
             let response = res.target.response;
 
-            next.call(this, response);
+            next && next(response);
         };
         xhr.send(data);
     }
@@ -94,7 +94,7 @@ class Utils {
      * @param {function} thisArg 
      * @returns function
      */
-    handleEvent(eventName, {
+    static handleEvent(eventName, {
         onElement,
         withCallback,
         useCapture = false