Download address: www.ukoou.com/resource/95…

Spring Boot + Vue3 front and back end separation practice Wiki knowledge base system

Spring Boot As a framework of software design, Spring is widely used in Java enterprise development. However, the configuration of Spring framework is very tedious and mostly repetitive. The birth of Spring Boot solves this problem. Spring Boot allows you to quickly build a Spring-based Java application. At the same time, Spring Boot provides configuration schemes for common third-party libraries, which can be well integrated with Spring, such as MyBatis, Spring Data JPA, etc., which can build full-featured Java enterprise applications with one click.

Vue is introduced: Vue. Js is a set of responsive front-end development libraries. There are also many other front-end development libraries, such as jQuery, ExtJS, Angular, etc. Vue has been attracting increasing attention since its inception. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. Spring Boot and Vue are both the hottest technology stacks in their respective fields, and it’s a good and convenient choice to combine the two for the development of front and back end separation, which is why Spring Boot + Vue is so popular. Spring Boot + Vue3 Wiki knowledge base system will take you to master the practical skills of front and back end projects and complex project architecture design and development solutions.

Spring Boot + Vue3 front-end and back-end separation combat Wiki knowledge base system – Spring Boot development environment construction and project startup

JDK configuration, Spring Boot project construction and project startup, Spring Boot project construction structure. Select SDKs, select the local JDK installation directory in JDK Home Path, and customize the JDK Name in Name

XML applications use spring-boot-starter-thymeleaf and spring-boot-starter-web to render templates:

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> < version > 2.4.0 < / version > < / dependency > < the dependency > < groupId > org. Springframework. Boot < / groupId > < artifactId > spring - the boot - starter - thymeleaf < / artifactId > < version > 2.4.0 < / version > < / dependency >Copy the code

Spring Boot + Vue3 Front-end and back-end separation actual combat Wiki knowledge base system – Vue3 + Vue CLI project construction

View node --version or NPM --version CNPM (optional) NPM install -g CNPM CNPM View CNPM --version Install NPM install -g yarn View YARN --version Install NPM install -g@vue/CLI CNPM install -g@vue/CLI YARN global add @vue/ CLI You can run any of the preceding commands to view vue --version Upgrade NPM Update -g@vue /cli or YARN Global upgrade --latest @vue/cliCopy the code
vue create [projectName]
Copy the code

Spring Boot + Vue3 Front and back end separation combat Wiki knowledge base system – front and back end integration

Adding CORS filters to your Spring Boot application Before moving to the Vue client application, there is one more thing that needs to be updated. Currently, if you try to use a server application with a single-page application framework such as Vue, a CORS error is thrown. This can be solved by adding a CORS filter to the SpringBootVueApplication class.

package com.okta.springbootvue;

import org.springframework.boot.ApplicationRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import java.util.Collections;
import java.util.stream.Stream;

@SpringBootApplication  
public class SpringBootVueApplication {  
  
    public static void main(String[] args) {  
      SpringApplication.run(SpringBootVueApplication.class, args);  
    }  

    // Bootstrap some test data into the in-memory database
    @Bean  
    ApplicationRunner init(TodoRepository repository) {  
        return args -> {  
            Stream.of("Buy milk", "Eat pizza", "Write tutorial", "Study Vue.js", "Go kayaking").forEach(name -> {  
                    Todo todo = new Todo();  
                    todo.setTitle(name);  
                    repository.save(todo);  
            });  
            repository.findAll().forEach(System.out::println);  
        };  
    }  

    // Fix the CORS errors
    @Bean
    public FilterRegistrationBean simpleCorsFilter() {  
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
        CorsConfiguration config = new CorsConfiguration();  
        config.setAllowCredentials(true); 
        // *** URL below needs to match the Vue client URL and port ***
        config.setAllowedOrigins(Collections.singletonList("http://localhost:8080")); 
        config.setAllowedMethods(Collections.singletonList("*"));  
        config.setAllowedHeaders(Collections.singletonList("*"));  
        source.registerCorsConfiguration("/**", config);  
        FilterRegistrationBean bean = new FilterRegistrationBean<>(new CorsFilter(source));
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);  
        return bean;  
    }   
}
Copy the code

.