บทความนี้ต้องการความรู้จำนวนหนึ่งเกี่ยวกับ Vue และ Springboot และแบ่งออกเป็นสองโครงการหนึ่งคือโครงการ Vue Front-End และอีกโครงการหนึ่งคือโครงการ Springboot Back-End
การก่อสร้างโครงการแบ็คเอนด์
ฉันใช้ Springboot1.5.10+JDK8+Idea Idea Idea เพื่อสร้างโครงการ Springboot ใหม่และคลิกถัดไป
หลังจากสร้างโครงการเรียบร้อยแล้วการกำหนดค่า Maven POM มีดังนี้
<การพึ่งพา> <การพึ่งพา> <roupId> org.springframework.boot </groupId> <ratifactid> Spring-Boot-Starter </artifactid> </dependency> <!-เพิ่มเว็บโมดูล-> <การพึ่งพา </permentency> <predency> <roupId> org.springframework.boot </groupid> <ratifactid> การทดสอบสปริง-สตาร์เทสต์ </artifactid> <cope> ทดสอบ </cope> </predency> </dependencies>
ถัดไปเขียนอินเทอร์เฟซ API ที่อัปโหลด
@restcontroller@requestmapping ("/upload")@crossoriginpublic คลาส UploadController {@value ("$ {prop.upload-folder}") สตริงส่วนตัว upload_folder; Logger ส่วนตัว = loggerFactory.getLogger (uploadController.class); @postmapping ("/singlefile") วัตถุสาธารณะ singlefileupload (ไฟล์ multipartfile) {logger.debug ("พารามิเตอร์ไฟล์ขาเข้า: {}", json.tojsonstring (ไฟล์, จริง)); if (objects.isnull (ไฟล์) || file.isempty ()) {logger.error ("ไฟล์ว่างเปล่า"); ส่งคืน "ไฟล์ว่างเปล่าโปรดอัปโหลดอีกครั้ง"; } ลอง {byte [] bytes = file.getBytes (); เส้นทางพา ธ = paths.get (upload_folder + file.getoriginalfilename ()); // หากไม่มีโฟลเดอร์ไฟล์ให้สร้าง if (! files.iswitable (path)) {files.createdirectories (paths.get (upload_folder)); } // ไฟล์เขียนไปยังไฟล์พา ธ ที่ระบุการเขียน (พา ธ , ไบต์); logger.debug ("ไฟล์เขียนสำเร็จ ... "); ส่งคืน "ไฟล์อัปโหลดสำเร็จ"; } catch (ioexception e) {e.printstacktrace (); กลับ "ข้อยกเว้นแบ็กเอนด์ ... "; - Crossorigin Annotation: แก้ปัญหาข้ามโดเมนเนื่องจากปลายด้านหน้าและด้านหลังถูกแยกออกจากกันอย่างสมบูรณ์ปัญหาข้ามโดเมนนั้นหลีกเลี่ยงไม่ได้ การเพิ่มคำอธิบายประกอบนี้จะช่วยให้คอนโทรลเลอร์รองรับการข้ามโดเมน หากคำอธิบายประกอบนี้ถูกลบออกคำขอ AJAX Front-end จะไม่ถึงจุดสิ้นสุด นี่เป็นเพียงการแก้ปัญหาข้ามโดเมนและมีวิธีแก้ปัญหาอื่น ๆ บทความนี้จะไม่ครอบคลุมในตอนนี้
MultipartFile: วัตถุ MultipArtFile ของ SpringMVC ใช้เพื่อรับ formData ที่ส่งผ่านตามคำขอส่วนหน้า
Postmapping เป็นคำอธิบายประกอบใหม่ที่แนะนำหลังจากฤดูใบไม้ผลิ 4.3 มันคือการทำให้การแมปของวิธี HTTP ง่ายขึ้นซึ่งเทียบเท่ากับ @RequestMapping ที่ใช้กันทั่วไป (value = "/xx", method = requestMethod.post)
แบ็กเอนด์เสร็จสมบูรณ์จนถึงตอนนี้มันง่ายมาก
การก่อสร้างโครงการส่วนหน้า
ฉันใช้ node8+webpack3+vue2
ในพื้นที่คุณต้องติดตั้งสภาพแวดล้อมโหนดและติดตั้ง Vue-CLI และใช้ Vue-CLI เพื่อสร้างโครงการ VUE
หลังจากสร้างโครงการเรียบร้อยแล้วให้เปิดด้วย WebStorm และคุณสามารถเขียนตัวอย่างการอัปโหลดได้อย่างง่าย รหัสหลักมีดังนี้:
<memplate> <div> <h1> {{msg}} </h1> <form> <อินพุต type = "file" @ @change = "getFile ($ event)"> <button @click = "ส่ง ($ event)"> ส่ง </button> </form> การส่งออกค่าเริ่มต้น {ชื่อ: 'helloWorld', data () {return {msg: 'ยินดีต้อนรับสู่แอป Vue.js ของคุณ', ไฟล์: ''}}, วิธีการ: {getFile: ฟังก์ชั่น (เหตุการณ์) {this.file = event.target.files [0]; console.log (this.file); }, ส่ง: ฟังก์ชั่น (เหตุการณ์) {// ป้องกันองค์ประกอบจาก Event.preventDefault (); ให้ formData = new FormData (); formdata.append ("ไฟล์", this.file); axios.post ('http: // localhost: 8082/upload/singlefile', formdata). จากนั้น (ฟังก์ชั่น (การตอบสนอง) {แจ้งเตือน (response.data); console.log (ตอบกลับ); window.location.reload ();}) window.location.reload ();}); }}}}} </script>ใช้ Axios เพื่อส่งคำขอ AJAX ไปยังแบ็กเอนด์, ห่อหุ้มข้อมูลภาพโดยใช้วัตถุ FormData ของ H5
ทดสอบ
เริ่มต้นเซิร์ฟเวอร์และเรียกใช้วิธีหลักของคลาส bootapplication โดยตรงพอร์ต 8082
เริ่มต้นปลายด้านหน้าค่าเริ่มต้นพอร์ตเป็น 8080 และซีดีไปยังไดเรกทอรีส่วนหน้าและดำเนินการแยกต่างหาก:
npm installnpm run dev
หลังจากการเริ่มต้นที่ประสบความสำเร็จไปที่ LocalHost: 8080
เลือกรูปภาพเพื่ออัปโหลดคุณจะเห็นว่าหลังจากการอัปโหลดสำเร็จแล้วนอกจากนี้ยังมีไฟล์รูปภาพในไดเรกทอรีที่ระบุของแบ็กเอนด์
สรุป
ณ จุดนี้การสาธิตการอัพโหลดแยกต่างหากโดยปลายด้านหน้าและด้านหลังจะเสร็จสมบูรณ์ บทความนี้เป็นตัวอย่างง่ายๆซึ่งสามารถจัดการกับการอัปโหลดไฟล์ขนาดเล็กเท่านั้น ต่อมาฉันจะเขียนบทความเกี่ยวกับ Springboot+Vue เพื่อตระหนักถึงการอัปโหลดไฟล์ขนาดใหญ่ในชิ้นดังนั้นโปรดติดตาม แนบกับซอร์สโค้ดยินดีต้อนรับสู่ Star: Boot-Upload