CPICXIM/car_deal_util
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

学习axios

Browse Source 
联系用axios发送请求，并且复习springmvc接收json请求。
This commit is contained in:
Kane Wang
2022-10-31 16:59:21 +08:00
parent dfac0eaa64
commit a89f773825
5 changed files with 162 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;

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

@@ -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)
{

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

@@ -2,8 +2,8 @@
* @Author: Kane
* @Date: 2022-10-31 10:48:29
* @LastEditors: Kane
* @LastEditTime: 2022-10-31 11:01:28
* @FilePath: \car_dealer\src\main\java\com\cpic\xim\car_dealer\controllers\data\importer\importRecordErrorMessage.java
* @LastEditTime: 2022-10-31 15:29:24
* @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)
{

52
code/web/car_dealer/css/axios/axios.css Normal file
View File

@@ -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;
}

96
code/web/car_dealer/vue/axios.html Normal file
View File

@@ -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>