تتطلب هذه المقالة قدرًا معينًا من المعرفة حول Vue و Springboot ، وهي مقسمة إلى مشروعين ، أحدهما هو مشروع Vue في الواجهة الأمامية والآخر هو مشروع Springboot الخلفي.
بناء المشروع الخلفية
أنا أستخدم SPRINGBoot1.5.10+JDK8+IDEA استخدام فكرة لإنشاء مشروع Springboot جديد وانقر فوق التالي
بعد إنشاء المشروع بنجاح ، يكون تكوين Maven POM كما يلي
<ependencies> <Rependency> <roupiD> org.springframework.boot </rougiD> <StifactId> spring-boot-starter </sringactid> </redepency> <!-أضف وحدة الويب-> <sperence> <rouplencid> org.springframework.boot </groupid> </reperency> <reperency> <roupiD> org.springframework.boot </groupId> <Stifactid> spring-boot-starter-test </stifactid> <scope> test </scope> </redencid> </repreadency> <sropencid> com.alibaba </groupid> </premency> </تبعيات>
بعد ذلك ، اكتب واجهة API التي تم تحميلها
@restController@requestMapping ("/expload")@crossoriginpublic class uploadController {Value ("$ {prop.upload-folder}") private string upload_folder ؛ logger private logger = loggerfactory.getLogger (eploadController.class) ؛ postmapping ("/singlefile") الكائن العام singlefileUpload (ملف multipartfile) {logger.debug ("معلمات الملف الوارد: {}" ، json.tojsonstring (ملف ، صحيح)) ؛ if (objects.isnull (file) || file.isempty ()) {logger.error ("الملف فارغ") ؛ إرجاع "الملف فارغ ، يرجى التحميل مرة أخرى" ؛ } حاول {byte [] bytes = file.getBytes () ؛ path path = paths.get (Upload_folder + file.getoriginalfilename ()) ؛ // إذا لم يكن هناك مجلد ملفات ، فقم بإنشاء if (! files.iswritable (path)) {files.createdIrectories (paths.get (epload_folder)) ؛ } // ملف يكتب إلى ملفات path.write المحددة (المسار ، بايت) ؛ logger.debug ("ملف يكتب بنجاح ...") ؛ إرجاع "تحميل الملف بنجاح" ؛ } catch (ioException e) {E.PrintStackTrace () ؛ إرجاع "استثناء الخلفية ..." ؛ }}} التعليق التوضيحي المتقاطع: حل مشاكل في المجال المتقاطع ، لأن النهايات الأمامية والخلفية مفصولة تمامًا ، تكون مشاكل المجال المتقاطع أمرًا لا مفر منه. ستتيح إضافة هذا التعليق التوضيحي وحدة التحكم بدعم المجال المتقاطع. إذا تمت إزالة هذا التعليق التوضيحي ، فلن يصل طلب Ajax في الواجهة الأمامية إلى الواجهة الخلفية. هذا مجرد حل عبر المجال ، وهناك حلول أخرى. لن تغطيها هذه المقالة في الوقت الحالي.
MultipartFile: كائن MultipartFile الخاص بـ SpringMVC ، يستخدم لتلقي FormData تم تمريره بواسطة الطلبات الأمامية.
Postmapping هو تعليق توضيحي جديد تم تقديمه بعد الربيع 4.3. إنه لتبسيط تعيين أساليب HTTP ، وهو ما يعادل استخدام requestmapping شائع الاستخدام (value = "/xx" ، method = requestMethod.post).
تم الانتهاء من الواجهة الخلفية حتى الآن ، إنها بسيطة للغاية.
بناء المشروع في الواجهة الأمامية
أنا أستخدم node8+webpack3+vue2
على المستوى المحلي ، تحتاج إلى تثبيت بيئة العقدة وتثبيت Vue-Cli ، واستخدام Vue-Cli لإنشاء مشروع VUE.
بعد إنشاء المشروع بنجاح ، افتحه باستخدام WebStorm ويمكنك كتابة مثال تحميل بسيط. الرمز الرئيسي هو كما يلي:
<implate> <viv> <h1> {{msg}} </h1> <pong> <input type = "file" @change = "getFile ($ event)"> <button @click = "subvice ($ event)" التصدير الافتراضي {name: 'HelloWorld' ، data () {return {msg: 'مرحبًا بك في تطبيق vue.js الخاص بك ، الملف:' '}} ، الأساليب: {getFile: function (event) {this.file = event.target.files [0] ؛ console.log (this.file) ؛ } ، إرسال: Function (event) {// منع العناصر من السلوك الافتراضي event.preventDefault () ؛ دع formData = جديد formData () ؛ formdata.append ("file" ، this.file) ؛ axios.post ('http: // localhost: 8082/upload/singlefile' ، formData) .Then (function (response) {alert (desponse.data) ؛ console.log (reponse) ؛ 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.