Vue – SpringBoot + vue

Posted by On 1月 22, 2018 0 Comment

Spring Boot + vue

Spring Boot : Tomcat Server + Backend

Spring Boot

To support frontend layout, we need to add dependencies.

build.gradle

dependencies {
    compile('org.springframework.boot:spring-boot-starter-web')
    compile('org.springframework.boot:spring-boot-starter-data-jpa')
    compile("org.springframework.boot:spring-boot-starter-thymeleaf")
    compile("net.sourceforge.nekohtml:nekohtml:1.9.22")
    testCompile group: 'junit', name: 'junit', version: '4.12'
    testCompile("org.springframework.boot:spring-boot-starter-test")
}

thymeleaf is to support layout.
nekohtml is to use legacy mode in thymeleaf.(Want to use legacy template).

resources/application.yml

spring:
  resources:
    static-locations: classpath:/ui/,classpath:/META-INF/resources,classpath:/resources/,classpath:/static/,classpath:/public/
  thymeleaf:
    check-template-location: true
    cache: true
    prefix: classpath:/
    mode: LEGACYHTML5

UIController.java

@Controller
public class UIController {

    @RequestMapping("/")
    public ModelAndView ui() {
        ModelAndView view = new ModelAndView();
        view.setViewName("ui/index");
        return view;
    }
}

It’s ready to access resources/ui/index.html as template.

Vue

I use vue-cli and vue-router for this. Create basic app and build using webpack.

Next is vue side.
package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "rm -rf ../../resources/ui && node build/build.js && cp -r dist ../../resources/ui"   // Changed
  },

I changed build part to move build dist to spring boot.

TOPICS