สร้าง Project Spring web + SPA (vuejs,vue-router)

การสร้าง project SPA ที่กำลังเป็นที่นิยมในตอนนี้ เพราะเป็นแนวทางการทำเว็บสมัยใหม่ที่เป็นการเรียกหน้าเว็บ โดยที่ไม่ต้องโหลดหน้าเว็บไซต์ใหม่ทั้งหมด ทำให้ผู้ใช้งานแทบไม่รู้เลยว่าหน้าจอได้ทำการเปลี่ยนแปลงไป (เป็นการแสดงผลที่เร็วมาก ไม่ refresh หน้าจอใหม่เหมือนแต่ก่อน)

ทำไมเลือกที่จะทำ SPA มาใส่กับ Spring Framework

เป็นโจทย์ใหม่ที่กำลังจะเริ่มนำมาใช้กับ Project ที่กำลังจะเริ่มพัฒนาใหม่ โดยปกติ Project ที่พัฒนาก่อน ๆ ที่ผ่านมามีการนำ VueJs มาใช้ร่วมกับ Spring MVC แล้ว แต่กลับยังไม่สามารถใช้คำสั่งของ ES6 ได้ทั้งหมด เพราะไม่มีการใช้ JS Complier อย่าง ฺBabel Js แต่อย่างใด

ถ้ามองถึงการทำงานก็สามารถทำงานได้ไม่มีปัญหา แต่จะไม่สามารถใช้คำสั่ง ต่าง ๆ เหล่านี้ได้ เพราะ browser version เก่า ๆ จะไม่ support

หลักการทำงานร่วมกันของ Spring และ VueJS

โดยปกติของ Spring MVC ก็จะมีการทำ Router ติดมาให้เมื่อเรา add dependency “spring-webmv” เราก็จะสามารถสร้าง route url ได้

“แล้วถ้าจะเปลี่ยนมาใช้งาน vue-router ละ จะต้องทำอย่างไร”

เริ่มสร้าง Spring SPA กันเถอะ

  1. สร้าง Dynamic Web Project (maven create)ในที่นี้ผมจะสร้างเป็นชื่อ “SpringSPAMedium”
Image for post
Image for post

2. เพิ่ม Config ต่าง ๆ ที่เกี่ยวกับ Spring web

2.1 แก้ไขไฟล์ webapp/WEB-INF/web.xml

2.2 สร้างไฟล์ webapp/WEB-INF/mvc-dispatcher-servlet.xml

อธิบาย
- <mvc:default-servlet-handler/> กำหนด default-servlet ให้หน้า web
- <mvc:resources mapping=”/**” location=”/, classpath:/css,classpath:/js,classpath:/img” cache-period=”10000" /> mapping resources ในที่นี้จะกำหนดเป็น path folder output หลังจาก build production แล้ว
- <bean id=”viewResolver” class=”org.springframework.web.servlet.view.UrlBasedViewResolver”> <property name=”viewClass” value=”org.springframework.web.servlet.view.JstlView”/> <property name=”prefix” value=”/”/> <property name=”suffix” value=”.html”/> </bean> mapping view path webroot
- <mvc:view-controller path=”/**/{path:[^\\.]*}” view-name=”forward:/” /> set view not found exception กรณีหา route ไม่เจอให้ forward ไปที่ route / (ที่เป็น vue-router)

2.3 แก้ไขไฟล์ pom.xml เพิ่ม dependencies และเพิ่ม build config ตามข้างล่างนี้
- spring-webmvc, servlet-api, jackson-databind
- frontend-maven-plugin เป็น plugin ที่ manage NodeJS, NPM ในที่นี้จะเป็น plugin เรียกคำสั่ง run build

3. create vue project มีขั้นตอนดังนี้
3.1 ติดตั้ง NodeJs , NPM และติดตั้ง Vue CLI global ให้เรียบร้อย (เครื่องใครมีแล้ว ข้ามขั้นตอนนี้ไปเลย)
3.2 สร้าง Vue project ด้วย คำสั่ง “vue create app d:/SpringSPAMedium/src/main”
3.3 สร้าง view NotFound.vue และ แก้ไข router ของ vue กรณี route ที่ไม่พบ (404 Page Not Found) จะให้ route redirect ไปที่ route page ไหน
- /SpringSPAMedium/src/main/app/src/views/NotFound.vue

/SpringSPAMedium/src/main/app/src/router/index.js

/SpringSPAMedium/src/main/app/vue.config.js แก้ไข publicPath ให้เป็น url root Path , แก้ไข outputDir ให้ build project แล้ว output file ไปเก็บไว้ที่ webapp (webroot ของ spring)

/SpringSPAMedium/src/main/app/package.json เพิ่ม option run build — no-clean เพื่อไม่ให้ลบ file เก่าใน Folder webapp ไม่อย่างนั้น /SpringSPAMedium/src/main/webapp/WEB-INF จะถูกลบออกไป

4. ทดสอบ pack war คำสั่ง
- clean install

http://localhost:8081/SpringSPAMedium/

มีลิ้ง sourcecode github แปะไว้ให้

ขอบคุณที่ติดตามครับ

Written by

Senior Developer @Telecom, Full Stack Developer [Subscribe Me @poolsawat.com]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store