串口前端改进

Author: M3chD09

WebPage/assets/js/serial.js

@@ -1,32 +1,14 @@
-var appSerialList = new Vue({
-    el: '#serialport',
+var appSerial = new Vue({
+    el: '#serial',
     data :{
         selected: '',
         serialLists:[]
-    }
-})
-axios.get('/serial')
-    .then(function (response) {
-        appSerialList.selected=response.data.Name
-    })
-    .catch(function (error) {
-        console.log(error);
-    })
-axios.get('/serial/list')
-    .then(function (response) {
-        appSerialList.serialLists=response.data.Ports
-    })
-    .catch(function (error) {
-        console.log(error);
-    })
-
-var appSerialBtn = new Vue({
-    el: '#serialbtn',
+    },
     methods: {
         openserial: function(event){
             axios.get('/serial/open', {
                     params: {
-                        port: appSerialList.selected
+                        port: appSerial.selected
                     }
                 })
                 .then(function (response) {
@@ -59,11 +41,26 @@ var appSerialBtn = new Vue({
         refreshserial: function(event){
             axios.get('/serial/list')
                 .then(function (response) {
-                    appSerialList.serialLists=response.data.Ports
+                    appSerial.serialLists=response.data.Ports
                 })
                 .catch(function (error) {
                     console.log(error);
                 })
         }
     }
 })
+
+axios.get('/serial')
+    .then(function (response) {
+        appSerial.selected=response.data.Name
+    })
+    .catch(function (error) {
+        console.log(error);
+    })
+axios.get('/serial/list')
+    .then(function (response) {
+        appSerial.serialLists=response.data.Ports
+    })
+    .catch(function (error) {
+        console.log(error);
+    })

WebPage/index.html

@@ -42,18 +42,17 @@
 
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-serialport" role="tabpanel" aria-labelledby="nav-home-tab">
-                        <p><div class="input-group mb-3">
-                            <div class="input-group-prepend">
-                              <label class="input-group-text">串口：</label>
-                            </div>
-                            <select id="serialport" class="custom-select" v-model="selected">
-                                <option v-for="serialList in serialLists" v-bind:value="serialList">{{serialList}}</option>
-                            </select>
-                        </div></p>
-                        <div id="serialbtn">
-                            <p><button class="btn btn-primary" v-on:click="refreshserial">刷新串口</button></p>
-                            <p><button class="btn btn-primary" v-on:click="openserial">打开串口</button></p>
-                            <p><button class="btn btn-danger" v-on:click="closeserial">关闭串口</button></p>
+                        <div id="serial">
+                            <p><div class="input-group mb-3">
+                                <div class="input-group-prepend">
+                                <label class="input-group-text" v-on:click="refreshserial">串口：</label>
+                                </div>
+                                <select id="serialport" class="custom-select" v-model="selected">
+                                    <option v-for="serialList in serialLists" v-bind:value="serialList">{{serialList}}</option>
+                                </select>
+                            </div></p>
+                                <p><button class="btn btn-primary" v-on:click="openserial">打开串口</button>
+                                <button class="btn btn-danger" v-on:click="closeserial">关闭串口</button></p>
                         </div>
                         <div class="input-group" id="fileupload">
                             <div class="input-group-prepend">