页面修改

src/pages/test.vue

 <template>
-  <div class="test">
-    <table>
+  <div class="CMD">
+    <table class="cmdTable">
+      <thead>
         <tr>
-            <td style="width:100px">
-                CMD
-            </td>
-            <td>
-                {{ActionStr}}
-            </td>
+          <td colspan="2">
+            请求参数
+          </td>
         </tr>
         <tr>
-            <td  >
-                MSG
-            </td>
-            <td>
-                {{Msg}}
-            </td>
+          <td class="tdLeft">
+            命令
+          </td>
+          <td class="tdRight">
+            <textarea :rows="1" :cols="50" v-model="ActionStr" placeholder="请输入命令"></textarea>
+          </td>
         </tr>
+        <tr>
+          <td class="tdLeft">
+            参数
+          </td>
+          <td class="tdRight">
+            <textarea :rows="3" :cols="50" v-model="Msg" placeholder="请输入参数"></textarea>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <input type="button" @click="Test()" value="执行" />
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="2">
+            &nbsp;
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            返回结果
+          </td>
+        </tr>
+        <tr>
+          <td class="tdLeft">
+            请求命令
+          </td>
+          <td class="tdRight">
+            {{ActionStr}}
+          </td>
+        </tr>
+        <tr>
+          <td class="tdLeft">
+            请求参数
+          </td>
+          <td class="tdRight">
+            {{ShowMsg}}
+          </td>
+        </tr>
+        <tr>
+          <td class="tdLeft">
+            返回结果
+          </td>
+          <td class="tdRight">
+            {{Result}}
+          </td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>
-
 <script>
   import {
     TestApi
@@ -31,15 +78,17 @@
     },
     data() {
       return {
-        ActionStr:"",
-        Msg:"",
+        ActionStr: "/Course/GetChapterTree",
+        Msg: "CourseId:1,School_Id:1",
+        ShowMsg: "",
+        Result: "",
       };
     },
     created() {
 
     },
     mounted() {
-      this.Test();
+
     },
     watch: {
       $route: {
@@ -51,25 +100,73 @@
     },
     methods: {
       Test() {
-        var cmdStr = "/Course";
-        var data = {}
-        cmdStr += "/GetChapterTree"
-        //SetCourse     
-
-        data = {
-          CourseId: 1
-        };
-        this.ActionStr=cmdStr;
-        this.Msg=JSON.stringify(data);
-        TestApi(cmdStr, data).then(res => {
-          console.log(res);
-        })
+        this.Result = "";
+        this.ShowMsg = "";
+        if (this.ActionStr && this.ActionStr != '') {
+          var data = {};
+          var dataArray = [];
+          var tempStr = "";
+          if (this.Msg && this.Msg != '') {
+            var tempArray = this.Msg.split(',');
+            if (tempArray && tempArray.length > 0) {
+              for (var i = 0; i < tempArray.length; i++) {
+                if (tempArray[i] && tempArray[i] != '') {
+                  var subArray = tempArray[i].split(':');
+                  if (subArray && subArray.length == 2) {
+                    var obj = {}
+                    obj[subArray[0]] = subArray[1];
+                    dataArray.push(obj);
+                    tempStr += ',' + '"' + subArray[0] + '":' + '"' + subArray[1] + '"';
+                  }
+                }
+              }
+            }
+          }
+          if (tempStr && tempStr != '') {
+            tempStr = "{" + tempStr.substring(1, tempStr.length) + "}";
+            data = JSON.parse(tempStr);
+          }
+          var tempMsg = {
+            Msg: data
+          };
+          this.ShowMsg = JSON.parse(JSON.stringify(tempMsg));
+          TestApi(this.ActionStr, data).then(res => {
+            this.Result = JSON.stringify(res);
+          })
+        }
       }
     },
   };
-
 </script>
 
 <style scoped>
+  .CMD {
+    background: #f5f6f7;
+  }
+
+  .CMD .cmdTable {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .CMD .cmdTable tr td {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    line-height: 40px;
+    min-height: 40px;
+  }
+
+  .CMD .tdLeft {
+    width: 20%;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .CMD .tdRight {
+    width: 70%;
+    font-size: 14px;
+    font-weight: 400;
+  }
 
 </style>