update

Former-commit-id: 78ac6ac0f70278355dad5342c019f5ce74c65d74

projects/WebApp/wwwroot/index.html

@@ -29,6 +29,6 @@
     <script src="lib/vuex/vuex.min.js"></script>
     <script src="lib/mint-ui/index.js"></script>
     <script src="lib/signalr/signalr.min.js"></script>
-    <script src="main.js"></script>
+    <script src="js/app.js"></script>
 </body>
 </html>

projects/WebApp/wwwroot/js/app.js

@@ -1,74 +1,163 @@
-const routes = [
-   //{ path: '/', component: home },
-    //{ path: '/login', component: login },
-    //{path:'*'}
-];
-
-var routeList=routes.concat();
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {
+        accessToken: localStorage.getItem("accessToken"),
+        refreshToken: localStorage.getItem("refreshToken"),
+        user: null,
+        products: [],
+        nodes: [],
+    },
+    mutations: {
+        setToken(state, data) {
+            state.accessToken = data.accessToken;
+            localStorage.setItem("accessToken", state.accessToken);
+            state.refreshToken = data.refreshToken;
+            localStorage.setItem("refreshToken", state.refreshToken);
+        },
+        logout(state) {
+            state.accessToken = null;
+            state.refreshToken = null;
+            localStorage.removeItem('accessToken');
+            localStorage.removeItem('refreshToken');
+        },
+        setUser(state, user) {
+            state.user = user;
+        },
+        setProducts(state, products) {
+            state.products = products;
+        },
+        setNodes(state, nodes) {
+            state.nodes = nodes;
+        },
+    },
+})
+///
+var userAgent = navigator.userAgent;
+var isApp = userAgent.indexOf('isapp') !== -1;
+var hubUrl = "/IoTCenter/hub?group=page";
+var connection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build();
+connection.on('Connected', function (id) {
+    connectionId = id;
+    console.log('signalR 连接Id:' + connectionId);
+});
+connection.on("ServerToClient", function (method, json, to, from) {
+    console.log(method + ':' + json);
+});
+function connect() {
+    if (connection.state === signalR.HubConnectionState.Disconnected) {
+        connection.start().then(function () {
+            console.log('signalR 连接成功');
+        }).catch(function (err) {
+            console.log(err);
+            setTimeout(connect, 15 * 1000);
+        });
+    }
+}
 
+axios.interceptors.request.use(
+    function (config) {
+        if (config.url.indexOf('.html') === -1 && config.url.indexOf('getToken') === -1) {
+            if (store.state.accessToken) {
+                config.withCredentials = true;
+                config.headers['x-requested-with'] = 'XMLHttpRequest';
+                config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
+                console.log('url:' + config.url + 'auth token:' + config.headers['Authorization']);
+            }
+        }
+        $('#loading').show();
+        return config;
+    },
+    function (error) {
+        console.log('axios.interceptors.request.error:');
+        console.log(error);
+        $('#loading').fadeOut(100);
+        return Promise.reject(error);
+    }
+);
+axios.interceptors.response.use(function (response) {
+    console.log('axios.interceptors.response:');
+    console.log(response);
+    $('#loading').fadeOut(100);
+    return response;
+}, function (error) {
+    console.log('拦截到返回错误:');
+    console.log(error.response);
+    if (error.response.status === 401 && error.config.url.indexOf('refreshToken') === -1) {
+        var url = '/UserCenter/api/v1/token/refreshToken';
+        var data = '"' + store.state.refreshToken + '"';
+        axios.post(url, data, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })
+            .then(function (response) {
+                store.commit('setToken', response.data);
+                error.config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
+                console.log('刷新token后重发api请求');
+                axios.request(error.config);
+            })
+            .catch(function (error) {
+                if (error.response.status === 401) {
+                    console.log('refreshToken 已过期');
+                    router.push('/pages/login');
+                }
+            });
+    }
+    $('#loading').fadeOut(100);
+    return Promise.reject(error);
+});
+///
+const routes = [
+];
+var routeList = routes.concat();
 const router = new VueRouter({
     routes
 });
-
-router.beforeEach((to,from,next)=>{
-   var route;
-   for(var i=0;i<routeList.length;i++)
-   {
-        if(routeList[i].path==to.path)
-        {
-            route=routeList[i];
+router.beforeEach((to, from, next) => {
+    $('#loading').show();
+    if (!store.state.accessToken && to.path !== '/pages/login') {
+        router.push('/pages/login');
+        return;
+    }
+    if (store.state.accessToken) {
+        connect();
+    }
+    var route;
+    for (var i = 0; i < routeList.length; i++) {
+        if (routeList[i].path == to.path) {
+            route = routeList[i];
         }
-   }
-   if(!route)
-   {
-       var path = to.path==='/'?'/pages/home':to.path;
-       var url = path + '.js';
-       var method = path.replace(/\//g,'_').substr(1) + "()";
-       $.getScript(url,function(){
-              var route ={
-                   path:to.path,
-                   component:eval(method)
-               };
-               router.addRoutes([route]);
-               routeList.push(route);
-               router.push(to.fullPath);
-       });
-   }
-   else{
+    }
+    if (!route) {
+        var path = to.path === '/' ? '/pages/home' : to.path;
+        var url = path + '.js';
+        var method = path.replace(/\//g, '_').substr(1) + "()";
+        console.log('preRoute:from ' + from.path + ' to path ' + to.path);
+        $.getScript(url, function () {
+            var route = {
+                path: to.path,
+                component: eval(method),
+            };
+            router.addRoutes([route]);
+            routeList.push(route);
+            router.push(to.fullPath);
+        });
+    }
+    else {
+        console.log('route from:' + from.path + ' to:' + to.path);
         next();
-   }
-
+    }
 });
-
-var connection;
-
+router.afterEach((route, redirect) => {
+    Vue.nextTick(() => {
+        $('#loading').fadeOut(100);
+    })
+})
+///
 const app = new Vue({
+    store: store,
     router,
-    data() {
+    data: {
     },
     mounted: function () {
-        $('#loadingToast').fadeOut(100);
-        //if (!hasLogin) {
-            //Vue.nextTick(function(){
-                //router.go('/login');
-            //});
-        //}
-        connection = new signalR.HubConnectionBuilder().withUrl("/IoTCenter/hub?group=page").build();
-        connection.on('Connected', function (id) {
-            connectionId = id;
-            console.log(connectionId);
-        });
-        connection.on("ServerToClient", function (method, json, to, from) {
-            console.log(method + ':' + json);
-        });
-        connection.start().then(function () {
-            console.log('客户端与服务器连接成功！');
-        }).catch(function (err) {
-            console.log(err);
-            //setTimeout(connect, 15 * 1000);
-        });
+        console.log('mounted:app');
     },
-    destroyed: function () {
-        connection.stop();
+    methods: {
     },
-}).$mount('#app');
+}).$mount('#app');

projects/WebApp/wwwroot/main.js

@@ -1,159 +0,0 @@
-Vue.use(Vuex);
-const store = new Vuex.Store({
-    state: {
-        accessToken: localStorage.getItem("accessToken"),
-        refreshToken: localStorage.getItem("refreshToken"),
-        user: null,
-        products: [],
-        nodes: [],
-    },
-    mutations: {
-        setToken(state, data) {
-            state.accessToken = data.accessToken;
-            localStorage.setItem("accessToken", state.accessToken);
-            state.refreshToken = data.refreshToken;
-            localStorage.setItem("refreshToken", state.refreshToken);
-        },
-        logout(state) {
-            state.accessToken = null;
-            state.refreshToken = null;
-            localStorage.removeItem('accessToken');
-            localStorage.removeItem('refreshToken');
-        },
-        setUser(state, user) {
-            console.log('~~~~');
-            console.log(store);
-            state.user = user;
-        }
-    },
-})
-///
-var userAgent = navigator.userAgent;
-var isApp = userAgent.indexOf('isapp') !== -1;
-var hubUrl = "/IoTCenter/hub?group=page";
-var connection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build();
-connection.on('Connected', function (id) {
-    connectionId = id;
-    console.log('signalR 连接Id:' + connectionId);
-});
-connection.on("ServerToClient", function (method, json, to, from) {
-    console.log(method + ':' + json);
-});
-function connect() {
-    if (connection.state === signalR.HubConnectionState.Disconnected) {
-        connection.start().then(function () {
-            console.log('signalR 连接成功');
-        }).catch(function (err) {
-            console.log(err);
-            setTimeout(connect, 15 * 1000);
-        });
-    }
-}
-
-axios.interceptors.request.use(
-    function (config) {
-        if (config.url.indexOf('.html') === -1 && config.url.indexOf('getToken') === -1) {
-            if (store.state.accessToken) {
-                config.withCredentials = true;
-                config.headers['x-requested-with'] = 'XMLHttpRequest';
-                config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
-                console.log('url:' + config.url + 'auth token:' + config.headers['Authorization']);
-            }
-        }
-        $('#loading').show();
-        return config;
-    },
-    function (error) {
-        console.log('axios.interceptors.request.error:');
-        console.log(error);
-        $('#loading').fadeOut(100);
-        return Promise.reject(error);
-    }
-);
-axios.interceptors.response.use(function (response) {
-    console.log('axios.interceptors.response:');
-    console.log(response);
-    $('#loading').fadeOut(100);
-    return response;
-}, function (error) {
-    console.log('拦截到返回错误:');
-    console.log(error.response);
-    if (error.response.status === 401 && error.config.url.indexOf('refreshToken') === -1) {
-        var url = '/UserCenter/api/v1/token/refreshToken';
-        var data = '"' + store.state.refreshToken + '"';
-        axios.post(url, data, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })
-            .then(function (response) {
-                store.commit('setToken', response.data);
-                error.config.headers['Authorization'] = 'Bearer ' + store.state.accessToken;
-                console.log('刷新token后重发api请求');
-                axios.request(error.config);
-            })
-            .catch(function (error) {
-                if (error.response.status === 401) {
-                    console.log('refreshToken 已过期');
-                    router.push('/pages/login');
-                }
-            });
-    }
-    $('#loading').fadeOut(100);
-    return Promise.reject(error);
-});
-///
-const routes = [
-];
-var routeList = routes.concat();
-const router = new VueRouter({
-    routes
-});
-router.beforeEach((to, from, next) => {
-    $('#loading').show();
-    if (!store.state.accessToken && to.path !== '/pages/login') {
-        router.push('/pages/login');
-        return;
-    }
-    if (store.state.accessToken) {
-        connect();
-    }
-    var route;
-    for (var i = 0; i < routeList.length; i++) {
-        if (routeList[i].path == to.path) {
-            route = routeList[i];
-        }
-    }
-    if (!route) {
-        var path = to.path === '/' ? '/pages/home' : to.path;
-        var url = path + '.js';
-        var method = path.replace(/\//g, '_').substr(1) + "()";
-        console.log('preRoute:from ' + from.path + ' to path ' + to.path);
-        $.getScript(url, function () {
-            var route = {
-                path: to.path,
-                component: eval(method),
-            };
-            router.addRoutes([route]);
-            routeList.push(route);
-            router.push(to.fullPath);
-        });
-    }
-    else {
-        console.log('route from:' + from.path + ' to:' + to.path);
-        next();
-    }
-});
-router.afterEach((route, redirect) => {
-    Vue.nextTick(() => {
-        $('#loading').fadeOut(100);
-    })
-})
-///
-const app = new Vue({
-    store:store,
-    router,
-    data: {
-    },
-    mounted: function () {
-        console.log('mounted:app');
-    },
-    methods: {
-    },
-}).$mount('#app');

projects/WebApp/wwwroot/pages/home.js

@@ -5,11 +5,12 @@
                 template: response.data,
                 data() {
                     return {
+                        url: '/UserCenter/api/v1/user/getUserInfo'
                     };
                 },
                 mounted: function () {
                     weui.tab('#tab', { defaultIndex: 1 });
-                    var url = '/UserCenter/api/v1/user/getUserInfo';
+                    var url = this.url;
                     axios.get(url)
                         .then(function (response) {
                             store.commit('setUser', response.data);

projects/WebApp/wwwroot/pages/iot/device.html

@@ -0,0 +1,19 @@
+<div class="page js_show">
+    <mt-header title="设备">
+        <router-link to="/iot/products" slot="left">
+            <mt-button icon="back">back</mt-button>
+        </router-link>
+    </mt-header>
+    <div class="weui-panel__bd">
+        <div class="weui-grids">
+            <template v-if="model" v-for="device in model">
+                <router-link :to="{path:'/iot/device',query:{number:device.number}}" class="weui-grid">
+                    <div class="weui-grid__icon">
+                        <img :src="'/IoTCenter'+device.image" />
+                    </div>
+                    <p class="weui-grid__label">{{device.displayName}}</p>
+                </router-link>
+            </template>
+        </div>
+    </div>
+</div>

projects/WebApp/wwwroot/pages/iot/device.js

@@ -0,0 +1,31 @@
+function pages_iot_device() {
+    return Vue.component(arguments.callee.toString(), function (resolve, reject) {
+        axios.get("/pages/iot/device.html").then(function (response) {
+            resolve({
+                template: response.data,
+                data() {
+                    return {
+                        model: null
+                    };
+                },
+                mounted: function () {
+                    console.log('当前路由：');
+                    console.log(this.$route);
+                    var url = '/IoTCenter/api/v1/product/getDevices?number='+this.$route.query.number;
+                    var component = this;
+                    axios.post(url)
+                        .then(function (response) {
+                            component.model = response.data;
+                        })
+                        .catch(function (error) {
+                        })
+                        .finally(function () {
+
+                        });
+                },
+                methods: {
+                }
+            })
+        });
+    });
+}

projects/WebApp/wwwroot/pages/iot/node.html

@@ -0,0 +1,19 @@
+<div class="page js_show">
+    <mt-header title="设备">
+        <router-link to="/iot/products" slot="left">
+            <mt-button icon="back">back</mt-button>
+        </router-link>
+    </mt-header>
+    <div class="weui-panel__bd">
+        <div class="weui-grids">
+            <template v-if="model" v-for="device in model">
+                <router-link :to="{path:'/iot/device',query:{number:device.number}}" class="weui-grid">
+                    <div class="weui-grid__icon">
+                        <img :src="'/IoTCenter'+device.image" />
+                    </div>
+                    <p class="weui-grid__label">{{device.displayName}}</p>
+                </router-link>
+            </template>
+        </div>
+    </div>
+</div>

projects/WebApp/wwwroot/pages/iot/node.js

@@ -0,0 +1,31 @@
+function pages_iot_node() {
+    return Vue.component(arguments.callee.toString(), function (resolve, reject) {
+        axios.get("/IoTCenter/node.html").then(function (response) {
+            resolve({
+                template: response.data,
+                data() {
+                    return {
+                        model: null
+                    };
+                },
+                mounted: function () {
+                    console.log('当前路由：');
+                    console.log(this.$route);
+                    var url = '/IoTCenter/api/v1/product/getDevices?number='+this.$route.query.number;
+                    var component = this;
+                    axios.post(url)
+                        .then(function (response) {
+                            component.model = response.data;
+                        })
+                        .catch(function (error) {
+                        })
+                        .finally(function () {
+
+                        });
+                },
+                methods: {
+                }
+            })
+        });
+    });
+}

projects/WebApp/wwwroot/pages/iot/nodes.html

@@ -6,14 +6,12 @@
     </mt-header>
     <div class="weui-panel__bd">
         <div class="weui-grids">
-            <template v-if="model" v-for="node in model">
-                <router-link to="/iot/node" class="weui-grid">
-                    <div class="weui-grid__icon">
-                        <img :src="'/IoTCenter'+node.image" />
-                    </div>
-                    <p class="weui-grid__label">{{node.name}}（{{node.count}}）</p>
-                </router-link>
-            </template>
+            <router-link v-for="node in nodes" to="/pages/iot/node" class="weui-grid">
+                <div class="weui-grid__icon">
+                    <img :src="'/IoTCenter'+node.image" />
+                </div>
+                <p class="weui-grid__label">{{node.name}}（{{node.count}}）</p>
+            </router-link>
         </div>
     </div>
 </div>

projects/WebApp/wwwroot/pages/iot/nodes.js

@@ -1,19 +1,18 @@
 function pages_iot_nodes() {
     return Vue.component(arguments.callee.toString(), function (resolve, reject) {
-        axios.get("/IoTCenter/nodes.html").then(function (response) {
+        axios.get("/pages/iot/nodes.html").then(function (response) {
             resolve({
                 template: response.data,
                 data() {
                     return {
-                        model: null
+                        name: '智慧教室',
+                        url: '/IoTCenter/api/v1/node/getNodes'
                     };
                 },
                 mounted: function () {
-                    var url = '/IoTCenter/api/v1/node/getNodes';
-                    var component = this;
-                    axios.post(url)
+                    axios.post(this.url)
                         .then(function (response) {
-                            component.model = response.data;
+                            store.commit('setNodes', response.data);
                         })
                         .catch(function (error) {
                         })
@@ -22,7 +21,12 @@
                         });
                 },
                 methods: {
-                }
+                },
+                computed: {
+                    nodes: function () {
+                        return store.state.nodes;
+                    }
+                },
             })
         });
     });

projects/WebApp/wwwroot/pages/iot/product.html

@@ -7,7 +7,7 @@
     <div class="weui-panel__bd">
         <div class="weui-grids">
             <template v-if="model" v-for="device in model">
-                <router-link :to="{path:'/iot/device',query:{number:device.number}}" class="weui-grid">
+                <router-link :to="{path:'/pages/iot/device',query:{number:device.number}}" class="weui-grid">
                     <div class="weui-grid__icon">
                         <img :src="'/IoTCenter'+device.image" />
                     </div>

projects/WebApp/wwwroot/pages/iot/product.js

@@ -1,6 +1,6 @@
 function pages_iot_product() {
     return Vue.component(arguments.callee.toString(), function (resolve, reject) {
-        axios.get("/IoTCenter/product.html").then(function (response) {
+        axios.get("/pages/iot/product.html").then(function (response) {
             resolve({
                 template: response.data,
                 data() {
@@ -9,8 +9,6 @@
                     };
                 },
                 mounted: function () {
-                    console.log('当前路由：');
-                    console.log(this.$route);
                     var url = '/IoTCenter/api/v1/product/getDevices?number='+this.$route.query.number;
                     var component = this;
                     axios.post(url)

projects/WebApp/wwwroot/pages/iot/products.html

@@ -1,19 +1,17 @@
 <div class="page js_show">
-    <mt-header title="产品">
+    <mt-header :title="name">
         <router-link to="/" slot="left">
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
     <div class="weui-panel__bd">
         <div class="weui-grids">
-            <template v-if="model" v-for="product in model">
-                <router-link :to="{path:'/pages/iot/product',query:{number:product.number}}" class="weui-grid">
-                    <div class="weui-grid__icon">
-                        <img :src="'/IoTCenter'+product.image" />
-                    </div>
-                    <p class="weui-grid__label">{{product.name}}（{{product.count}}）</p>
-                </router-link>
-            </template>
+            <router-link v-for="product in products" :to="{path:'/pages/iot/product',query:{number:product.number}}" class="weui-grid">
+                <div class="weui-grid__icon">
+                    <img :src="'/IoTCenter'+product.image" />
+                </div>
+                <p class="weui-grid__label">{{product.name}}（{{product.count}}）</p>
+            </router-link>
         </div>
     </div>
 </div>

projects/WebApp/wwwroot/pages/iot/products.js

@@ -5,15 +5,14 @@
                 template: response.data,
                 data() {
                     return {
-                        model: null
+                        name: "产品",
+                        url: '/IoTCenter/api/v1/product/getProducts'
                     };
                 },
                 mounted: function () {
-                    var url = '/IoTCenter/api/v1/product/getProducts';
-                    var component = this;
-                    axios.post(url)
+                    axios.post(this.url)
                         .then(function (response) {
-                            component.model = response.data;
+                            store.commit('setProducts', response.data);
                         })
                         .catch(function (error) {
                         })
@@ -22,7 +21,12 @@
                         });
                 },
                 methods: {
-                }
+                },
+                computed: {
+                    products: function () {
+                        return store.state.products;
+                    }
+                },
             })
         });
     });

projects/WebApp/wwwroot/pages/login.html

@@ -1,9 +1,9 @@
 <div class="page js_show">
     <mt-header title="登录">
     </mt-header>
-    <form class="weui-form" id="form" method="post" action="/UserCenter/api/v1/token/getToken">
+    <form class="weui-form" id="form" method="post">
         <div class="weui-form__text-area">
-            <h2 class="weui-form__title">登录</h2>
+            <h2 class="weui-form__title">{{name}}</h2>
         </div>
         <div class="weui-cells weui-cells_form">
             <div class="weui-cell">

projects/WebApp/wwwroot/pages/login.js

@@ -5,7 +5,8 @@
                 template: response.data,
                 data() {
                     return {
-                        name: 'login'
+                        name: '登录',
+                        url: '/UserCenter/api/v1/token/getToken'
                     };
                 },
                 mounted: function () {
@@ -27,11 +28,11 @@
                 },
                 methods: {
                     submit: function () {
+                        var url = this.url;
                         weui.form.validate('#form', function (error) {
                             if (!error) {
                                 var loading = weui.loading('提交中...');
                                 var form = $("#form");
-                                var url = form.attr('action');
                                 var data = form.serializeJSON();
                                 axios.post(url, data).then(function (response) {
                                     store.commit('setToken', response.data);