update

Former-commit-id: f0aeff060069f69faae88732c1a62c4c4219e4fa
Former-commit-id: 2327f6ab8a0c765678fed32484d765ac0bcf57c3

projects/WebMVC/libman.json

@@ -2,14 +2,35 @@
   "version": "1.0",
   "defaultProvider": "cdnjs",
   "libraries": [
+    {
+      "library": "jquery@3.5.1",
+      "destination": "wwwroot/lib/jquery",
+      "files": [ "jquery.min.js" ]
+    },
+    {
+      "library": "jquery.serializeJSON@2.9.0",
+      "destination": "wwwroot/lib/jquery.serializeJSON",
+      "files": [ "jquery.serializejson.min.js" ]
+    },
     {
       "library": "axios@0.19.2",
       "destination": "wwwroot/lib/axios"
     },
+    {
+      "provider": "unpkg",
+      "library": "jwt-decode@2.2.0",
+      "destination": "wwwroot/lib/jwt-decode",
+      "files": [ "build/jwt-decode.min.js" ]
+    },
     {
       "library": "pubsub-js@1.8.0",
       "destination": "wwwroot/lib/pubsub-js",
-      "files": ["pubsub.min.js"]
+      "files": [ "pubsub.min.js" ]
+    },
+    {
+      "library": "moment.js@2.26.0",
+      "destination": "wwwroot/lib/moment.js",
+      "files": [ "locale/zh-cn.js", "moment.min.js" ]
     },
     {
       "library": "vue@2.6.11",
@@ -26,15 +47,10 @@
       "destination": "wwwroot/lib/vuex",
       "files": [ "vuex.min.js" ]
     },
-    {
-      "library": "moment.js@2.26.0",
-      "destination": "wwwroot/lib/moment.js",
-      "files": ["locale/zh-cn.js","moment.min.js"]
-    },
     {
       "library": "ant-design-vue@1.5.3",
       "destination": "wwwroot/lib/ant-design-vue",
-      "files": [ "antd.min.css", "antd.min.js"]
+      "files": [ "antd.min.css", "antd.min.js" ]
     }
   ]
 }

projects/WebMVC/wwwroot/components/layout.html

@@ -0,0 +1,21 @@
+<template>
+    <div class="container">
+        <div class="header">header</div>
+        <div class="content">
+            <slot></slot>
+        </div>
+        <div class="footer">footer</div>
+    </div>
+</template>
+<script>
+    export default {
+        data: function () {
+            return {
+                title: 'title'
+            }
+        },
+        mounted: function () {
+            console.log('layout.html');
+        }
+    }
+</script>

projects/WebMVC/wwwroot/index2.html

@@ -9,16 +9,23 @@
     <div id="app">
         <router-view class="view"></router-view>
     </div>
+    <script src="lib/jquery/jquery.min.js"></script>
+    <script src="lib/jquery.serializejson/jquery.serializejson.min.js"></script>
     <script src="lib/axios/axios.min.js"></script>
     <script src="lib/pubsub-js/pubsub.min.js"></script>
     <script src="lib/vue/vue.min.js"></script>
     <script src="lib/vuex/vuex.min.js"></script>
     <script src="lib/vue-router/vue-router.min.js"></script>
-    <!--ui-->
+    <script src="lib/jwt-decode/build/jwt-decode.min.js"></script>
     <script src="lib/moment.js/moment.min.js"></script>
     <script src="lib/moment.js/locale/zh-cn.js"></script>
     <script src="lib/ant-design-vue/antd.min.js"></script>
     <script src="lib/ant-design-vue/antd.min.js"></script>
-    <script src="js/index.js"></script>
+    <script src="js/common.js"></script>
+    <script src="js/components.js"></script>
+    <script src="js/config.js"></script>
+    <script src="js/route.js"></script>
+    <script src="js/state.js"></script>
+    <script src="js/main.js"></script>
 </body>
 </html>

projects/WebMVC/wwwroot/js/common.js

@@ -0,0 +1,9 @@
+function parseModel(response) {
+    var html = new DOMParser().parseFromString(response.data, 'text/html');
+    var template = html.getElementsByTagName('template')[0].innerHTML;
+    var script = html.getElementsByTagName('script')[0].innerHTML;
+    script = '(' + script.replace(/^\s*export\s*default\s*/, '').replace(/;\s*$/, '') + ')\n//# sourceURL=' + response.config.url;
+    var model = eval(script);
+    model.template = template;
+    return model;
+}

projects/WebMVC/wwwroot/js/components.js

@@ -0,0 +1,5 @@
+Vue.component('layout', function (resolve, reject) {
+    axios.get("/components/layout.html").then(function (response) {
+        resolve(parseModel(response));
+    });
+});

projects/WebMVC/wwwroot/js/config.js

@@ -0,0 +1,4 @@
+var config = {
+    baseUrl: 'http://iot.edusoa.com',//window.location.protocol + '//' + window.location.hostname,
+    isMobile: /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)
+};

projects/WebMVC/wwwroot/js/index.js

@@ -1,67 +0,0 @@
-//functions
-function parseModel(name, response) {
-    var html = new DOMParser().parseFromString(response.data, 'text/html');
-    var template = html.getElementsByTagName('template')[0].innerHTML;
-    var script = html.getElementsByTagName('script')[0].innerHTML;
-    script = '(' + script.replace(/^\s*export\s*default\s*/, '').replace(/;\s*$/,'') + ')\n//# sourceURL=' + name;
-    var model = eval(script);
-    model.template = template;
-    return model;
-}
-//vuex
-Vue.use(Vuex);
-const store = new Vuex.Store({
-    state: {
-        accessToken: localStorage.getItem("accessToken"),
-        refreshToken: localStorage.getItem("refreshToken")
-    }
-});
-//vue route
-const routes = [
-];
-var routeList = routes.concat();
-const router = new VueRouter({
-    routes
-});
-router.beforeEach((to, from, next) => {
-    //if (!store.state.accessToken && to.path !== '/pages/login.html') {
-    //    router.push('/pages/login.html');
-    //    return;
-    //}
-    var route;
-    for (var i = 0; i < routeList.length; i++) {
-        if (routeList[i].path === to.path) {
-            route = routeList[i];
-        }
-    }
-    if (!route) {
-        var url = to.path === '/' ? '/pages/home.html' : to.path;
-        var name = url.replace(/\//g, "-").replace(/\./g, "-").substring(1);
-        var route = {
-            path: to.path,
-            component: Vue.component(name, function (resolve, reject) {
-                axios.get(url).then(function (response) {
-                    resolve(parseModel(name, response));
-                });
-            })
-        };
-        router.addRoutes([route]);
-        routeList.push(route);
-        router.push(to.path);
-    }
-    else {
-        next();
-    }
-});
-//app
-var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
-const app = new Vue({
-    store: store,
-    router,
-    mounted: function () {
-        console.log('mounted:app');
-        setTimeout(function () {
-            PubSub.publish('msg', 'data');
-        }, 5000)
-    }
-}).$mount('#app');

projects/WebMVC/wwwroot/js/main.js

@@ -0,0 +1,12 @@
+var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
+const app = new Vue({
+    el:'#app',
+    store: store,
+    router,
+    mounted: function () {
+        console.log('mounted:app');
+        setTimeout(function () {
+            PubSub.publish('msg', 'data');
+        }, 5000)
+    }
+});

projects/WebMVC/wwwroot/js/route.js

@@ -0,0 +1,33 @@
+var routes = [];
+const router = new VueRouter();
+router.beforeEach((to, from, next) => {
+    if (to.path !== '/pages/login.html') {
+        var valid = false;
+        if (store.state.token.accessToken) {
+            var jwt = jwt_decode(store.state.token.accessToken);
+        }
+        if (!valid) {
+            router.push('/pages/login.html');
+        }
+    }
+    var url = to.path === '/' ? '/pages/home.html' : to.path;
+    var name = url.replace(/\//g, "-").replace(/\./g, "-").substring(1);
+    var route = routes[name];
+    if (!route) {
+        axios.get(url).then(function (response) {
+            var model = parseModel(response);
+            route = {
+                name: name,
+                path: to.path,
+                component: model,
+                meta: model.meta
+            };
+            router.addRoutes([route]);
+            routes[name] = route;
+            router.push(to.path);
+        });
+    }
+    else {
+        next();
+    }
+});

projects/WebMVC/wwwroot/js/state.js

@@ -0,0 +1,14 @@
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {
+        token: {
+            accessToken: localStorage.getItem("accessToken"),
+            refreshToken: localStorage.getItem("refreshToken")
+        }
+    },
+    mutations: {
+        setState(state,data) {
+            state[data.key] = data.value;
+        }
+    }
+});

projects/WebMVC/wwwroot/lib/jwt-decode/build/jwt-decode.min.js

@@ -0,0 +1 @@
+!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){function d(a){this.message=a}function e(a){var b=String(a).replace(/=+$/,"");if(b.length%4==1)throw new d("'atob' failed: The string to be decoded is not correctly encoded.");for(var c,e,g=0,h=0,i="";e=b.charAt(h++);~e&&(c=g%4?64*c+e:e,g++%4)?i+=String.fromCharCode(255&c>>(-2*g&6)):0)e=f.indexOf(e);return i}var f="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";d.prototype=new Error,d.prototype.name="InvalidCharacterError",b.exports="undefined"!=typeof window&&window.atob&&window.atob.bind(window)||e},{}],2:[function(a,b,c){function d(a){return decodeURIComponent(e(a).replace(/(.)/g,function(a,b){var c=b.charCodeAt(0).toString(16).toUpperCase();return c.length<2&&(c="0"+c),"%"+c}))}var e=a("./atob");b.exports=function(a){var b=a.replace(/-/g,"+").replace(/_/g,"/");switch(b.length%4){case 0:break;case 2:b+="==";break;case 3:b+="=";break;default:throw"Illegal base64url string!"}try{return d(b)}catch(c){return e(b)}}},{"./atob":1}],3:[function(a,b,c){"use strict";function d(a){this.message=a}var e=a("./base64_url_decode");d.prototype=new Error,d.prototype.name="InvalidTokenError",b.exports=function(a,b){if("string"!=typeof a)throw new d("Invalid token specified");b=b||{};var c=b.header===!0?0:1;try{return JSON.parse(e(a.split(".")[c]))}catch(f){throw new d("Invalid token specified: "+f.message)}},b.exports.InvalidTokenError=d},{"./base64_url_decode":2}],4:[function(a,b,c){(function(b){var c=a("./lib/index");"function"==typeof b.window.define&&b.window.define.amd?b.window.define("jwt_decode",function(){return c}):b.window&&(b.window.jwt_decode=c)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./lib/index":3}]},{},[4]);

projects/WebMVC/wwwroot/pages/home.html

@@ -1,8 +1,10 @@
 <template>
-    <a-button type="primary" v-if="isMobile">
-        Primary
-    </a-button>
-    <h2 v-else>{{title}}</h2>
+    <layout>
+        <a-button type="primary" v-if="isMobile">
+            Primary
+        </a-button>
+        <h2 v-else>{{title}}</h2>
+    </layout>
 </template>
 <script>
     export default {
@@ -15,11 +17,14 @@
         mounted: function () {
             document.querySelector('title').innerHTML = this.title;
             this.token = PubSub.subscribe('msg', function (msg, data) {
-                alert(msg + data);
+                console.log(msg + data);
             });
         },
         beforeDestroy: function () {
             PubSub.unsubscribe(this.token);
+        },
+        meta: {
+            layout:'layout.html'
         }
     }
 </script>

projects/WebMVC/wwwroot/pages/login.html

@@ -1,16 +1,53 @@
 <template>
-    <h2>{{title}}</h2>
+    <form class="weui-form" id="form" method="post">
+        <div class="weui-cells weui-cells_form">
+            <div class="weui-cell">
+                <div class="weui-cell__hd"><label class="weui-label">用户名</label></div>
+                <div class="weui-cell__bd">
+                    <input class="weui-input" type="text" name="userName" placeholder="用户名" maxlength="100" required pattern="REG_userName" emptytips="请输入用户名" notmatchtips="用户名输入不合法">
+                </div>
+            </div>
+            <div class="weui-cell">
+                <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
+                <div class="weui-cell__bd">
+                    <input class="weui-input" type="password" name="password" placeholder="密码" maxlength="100" required pattern="REG_password" tips="请输入密码" notmatchtips="密码输入不合法">
+                </div>
+            </div>
+        </div>
+        <a class="weui-btn weui-btn_primary my-3" href="javascript:" id="showTooltips" v-on:click="submit()">确定</a>
+    </form>
 </template>
 <script>
     export default {
         data: function (){
             return {
                 title: '登录',
-                token:null
+                url: '/UserCenter/api/v1/token/getToken'
             }
         },
         mounted: function () {
             document.querySelector('title').innerHTML = this.title;
+        },
+        methods: {
+            submit: function () {
+                var form = $("#form");
+                var data = form.serializeJSON();
+                var url = config.baseUrl + this.url;
+                axios.post(url, data).then(function (response) {
+                    store.commit('setState', { key: 'token', value: response.data });
+                    router.push('/');
+                }).catch(function (error) {
+                    console.log(error.response);
+                    var data = error.response.data;
+                    var key = error.response.data.key;
+                    if (key) {
+                        $("[name='" + key + "']").parents('.weui-cell').addClass('weui-cell_warn');
+                    }
+                    weui.topTips(data.message, { duration: 3000 });
+                }).finally(function () {
+                    //loading.hide();
+                });
+            }
         }
     }
 </script>