diff --git a/projects/WebApp/wwwroot/index.html b/projects/WebApp/wwwroot/index.html index bf3edf2f..387a4d4b 100644 --- a/projects/WebApp/wwwroot/index.html +++ b/projects/WebApp/wwwroot/index.html @@ -29,6 +29,6 @@ - + \ No newline at end of file diff --git a/projects/WebApp/wwwroot/js/app.js b/projects/WebApp/wwwroot/js/app.js index 57a61e1f..5b7676f7 100644 --- a/projects/WebApp/wwwroot/js/app.js +++ b/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 { + $('#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'); \ No newline at end of file +}).$mount('#app'); diff --git a/projects/WebApp/wwwroot/main.js b/projects/WebApp/wwwroot/main.js deleted file mode 100644 index ca384f4c..00000000 --- a/projects/WebApp/wwwroot/main.js +++ /dev/null @@ -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'); diff --git a/projects/WebApp/wwwroot/pages/home.js b/projects/WebApp/wwwroot/pages/home.js index 1a09c635..4e0bef36 100644 --- a/projects/WebApp/wwwroot/pages/home.js +++ b/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); diff --git a/projects/WebApp/wwwroot/pages/iot/device.html b/projects/WebApp/wwwroot/pages/iot/device.html new file mode 100644 index 00000000..75720fab --- /dev/null +++ b/projects/WebApp/wwwroot/pages/iot/device.html @@ -0,0 +1,19 @@ +
+ + + back + + +
+
+ +
+
+
\ No newline at end of file diff --git a/projects/WebApp/wwwroot/pages/iot/device.js b/projects/WebApp/wwwroot/pages/iot/device.js new file mode 100644 index 00000000..b82af3f3 --- /dev/null +++ b/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: { + } + }) + }); + }); +} \ No newline at end of file diff --git a/projects/WebApp/wwwroot/pages/iot/node.html b/projects/WebApp/wwwroot/pages/iot/node.html new file mode 100644 index 00000000..75720fab --- /dev/null +++ b/projects/WebApp/wwwroot/pages/iot/node.html @@ -0,0 +1,19 @@ +
+ + + back + + +
+
+ +
+
+
\ No newline at end of file diff --git a/projects/WebApp/wwwroot/pages/iot/node.js b/projects/WebApp/wwwroot/pages/iot/node.js new file mode 100644 index 00000000..f42563ba --- /dev/null +++ b/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: { + } + }) + }); + }); +} \ No newline at end of file diff --git a/projects/WebApp/wwwroot/pages/iot/nodes.html b/projects/WebApp/wwwroot/pages/iot/nodes.html index 19ddfd96..fad74c7d 100644 --- a/projects/WebApp/wwwroot/pages/iot/nodes.html +++ b/projects/WebApp/wwwroot/pages/iot/nodes.html @@ -6,14 +6,12 @@
- + +
+ +
+

{{node.name}}（{{node.count}}）

+
\ No newline at end of file diff --git a/projects/WebApp/wwwroot/pages/iot/nodes.js b/projects/WebApp/wwwroot/pages/iot/nodes.js index 9c64bf78..e6e9a66c 100644 --- a/projects/WebApp/wwwroot/pages/iot/nodes.js +++ b/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; + } + }, }) }); }); diff --git a/projects/WebApp/wwwroot/pages/iot/product.html b/projects/WebApp/wwwroot/pages/iot/product.html index 75720fab..da547eb7 100644 --- a/projects/WebApp/wwwroot/pages/iot/product.html +++ b/projects/WebApp/wwwroot/pages/iot/product.html @@ -7,7 +7,7 @@