学习axios

联系用axios发送请求，并且复习springmvc接收json请求。

code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/data/importer/CarDealerDataImport.java

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-10-31 10:23:32
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-31 11:40:21
+ * @LastEditTime: 2022-10-31 15:11:40
  * @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\data\importer\CarDealerDataImport.java
  * @Description: 
  * 
@@ -19,15 +19,19 @@ import org.springframework.web.bind.annotation.ResponseBody;
 
 @Controller
 @ResponseBody
-@RequestMapping( path = "data/import/")
+@RequestMapping( path = "/data/import/")
 public class CarDealerDataImport
 {
-
+    @RequestMapping( "/importcardealer.do")
     public ImportResult importCarDealer( @RequestBody ImportRequest importRequest )
     {
         ArrayList<RecordErrorMessage> recordErrorMessages = new ArrayList<RecordErrorMessage>();
         ImportResult result = new ImportResult();
 
+        result.setFileName( "测试文件" );
+        result.setFilePath( "测试" );
+        result.setMessage( "测试" );
+        result.setSuccess( true );
         result.setRecordErrorMessages( recordErrorMessages );
 
         return result;

code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/data/importer/ImportRequest.java

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2022-10-31 11:16:22
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-31 11:28:00
+ * @LastEditTime: 2022-10-31 15:29:26
  * @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\data\importer\importRequest.java
  * @Description: 
  * 
@@ -15,6 +15,8 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 
 public class ImportRequest
 {
+    public ImportRequest()
+    {}
 
     public ImportRequest( String filePath, String tableName)
     {

code/java/car_dealer/src/main/java/com/cpic/xim/car_dealer/controllers/data/importer/RecordErrorMessage.java

@@ -2,8 +2,8 @@
  * @Author: Kane
  * @Date: 2022-10-31 10:48:29
  * @LastEditors: Kane
- * @LastEditTime: 2022-10-31 11:01:28
+ * @LastEditTime: 2022-10-31 15:29:24
- * @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\data\importer\importRecordErrorMessage.java
+ * @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\data\importer\RecordErrorMessage.java
  * @Description: 存放导入数据记录结果的对象.
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
@@ -17,6 +17,8 @@ import com.fasterxml.jackson.annotation.*;;
  *****************************************************/
 public class RecordErrorMessage
 {
+    public RecordErrorMessage()
+    {}
 
     public RecordErrorMessage( int rowIndex, String message)
     {

code/web/car_dealer/css/axios/axios.css

@@ -0,0 +1,52 @@
+/*
+ * @Author: Kane
+ * @Date: 2022-10-31 14:38:45
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-10-31 14:56:42
+ * @FilePath: \car_dealer\css\axios\axios.css
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+ */
+html {
+    --border-color: #efefef;
+    --hr-color: #efefef;
+    --backupground-color: #f8f8f8;
+    --btn-color-blue: #307dbe;
+    --btn-color-yellow: #f7b24d;
+    --btn-color-green: #5bad60;
+    --btn-color-red: #e56651;
+    --btn-font-color: #fff;
+
+    --light-shadow: #cfcfcf;
+    --dark-shadow: #afafaf;
+
+    --scrollbar-backupground-color: #cfcfcf7f;
+    --scrollbar-track-color: #f7f7f700;
+
+    --font-color: rgba(0, 0, 50, 255);
+
+    color: var(--font-color);
+}
+
+input {
+    line-height: 2rem;
+    width: 100%;
+}
+
+/* 隐藏上传文件 */
+input[type="file"] {
+    display: none;
+}
+
+.main_plane {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 20rem;
+}
+
+.main_plane > * + * {
+    margin-top: 15px;
+}

code/web/car_dealer/vue/axios.html

@@ -0,0 +1,96 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-10-31 13:11:55
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-10-31 16:56:04
+ * @FilePath: \car_dealer\vue\axios.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>axios</title>
+        <link rel="stylesheet" href="../css/root.css" />
+        <link rel="stylesheet" href="../css/normalize.css" />
+        <link rel="stylesheet" href="../css/kane.css" />
+        <link rel="stylesheet" href="../css/axios/axios.css" />
+        <script src="https://unpkg.com/axios@1.1.3/dist/axios.min.js"></script>
+        <script src="../js/vue/vue.global.js"></script>
+    </head>
+    <body>
+        <div class="content">
+            <div id="app">
+                <div class="main_plane">
+                    <input
+                        type="text"
+                        name="file_name"
+                        id="file_name"
+                        readonly
+                        onclick="selectFile()"
+                    />
+                    <button type="button" @click="onUploadFile()">上传</button>
+                    <input
+                        type="file"
+                        name="uploadFile"
+                        id="fileupload"
+                        onchange="onFileuploadChange()"
+                    />
+                </div>
+            </div>
+        </div>
+    </body>
+    <script>
+        const UPLOAD_FILE_URL =
+            "http://localhost:8080/cardealer/upload/upload_file.do";
+        const IMPORT_CARDEALER_URL =
+            "http://localhost:8080/cardealer/data/import/importcardealer.do";
+
+        function selectFile() {
+            const upload_file = document.getElementById("fileupload");
+            const file_name = document.getElementById("file_name");
+
+            upload_file.click();
+        }
+
+        function onFileuploadChange() {
+            const upload_file = document.getElementById("fileupload");
+            const file_name = document.getElementById("file_name");
+
+            file_name.value = upload_file.value;
+        }
+    </script>
+    <script>
+        const app = {
+            data() {
+                return {};
+            },
+
+            methods: {
+                onUploadFile: function () {
+                    let param = {
+                        file_path: "file path",
+                        table_name: "车商表",
+                    };
+                    axios
+                        .post(IMPORT_CARDEALER_URL, param)
+                        .then((response) => {
+                            console.log(response.data);
+                            console.log(response);
+                        })
+                        .catch((error) => {
+                            console.log(error.response.data);
+                        });
+                },
+            },
+        };
+
+        const vm = Vue.createApp(app);
+
+        vm.mount("#app");
+    </script>
+</html>