Spring Boot + Vue3 前后端分离 实战wiki知识库系统 网盘下载

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

Spring Boot + Vue3 前后端分离 实战wiki知识库系统 - 课程介绍

Spring Boot 介绍：Spring 作为一个软件设计层面的框架，在 Java 企业级开发中应用非常广泛，但是 Spring 框架的配置非常繁琐，且大多是重复性的工作，Spring Boot 的诞生就解决了这一问题，通过 Spring Boot 可以快速搭建一个基于 Spring 的 Java 应用程序。同时 Spring Boot 对常用的第三方库提供了配置方案，可以很好地与 Spring 进行整合，如 MyBatis、Spring Data JPA 等，可以一键式搭建功能完备的 Java 企业级应用程序。

Vue 介绍：Vue.js 是一套响应式的前端开发库，其他前端开发库也有很多，如 jQuery、ExtJS、Angular 等，Vue 自问世以来关注度不断提高，当前市场中，Vue 是非常流行的 JavaScript 技术开发框架之一，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Spring Boot 和 Vue 都是各自领域最热门的技术栈，把二者整合起来进行前后端分离的开发是很好的选择，非常方便，这也是 Spring Boot + Vue 如此火爆的原因。为此本课程Spring Boot + Vue3 前后端分离 实战wiki知识库系统将带你深入掌握前后端项目实战技能和复杂项目架构设计与开发方案。

Spring Boot + Vue3 前后端分离 实战wiki知识库系统 - Spring Boot开发环境搭建和项目启动

进行jdk 的配置、Spring Boot工程的构建和项目的启动、Spring Boot 项目工程的结构建立。 选择 SDKs，在 JDK home path 中选择本地 jdk 的安装目录，在 Name 中为 jdk 自定义名字 xml应用程序使用spring-boot-starter-thymeleaf和spring-boot-starter-web来渲染模板:

<dependency> 
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId> 
    <version>2.4.0</version>
</dependency> 
<dependency> 
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId> 
    <version>2.4.0</version>
</dependency>

Spring Boot + Vue3 前后端分离 实战wiki知识库系统 - Vue3 + Vue CLI 项目搭建

查看
node --version
或
npm --version
cnpm(选装)
npm install -g cnpm
cnpm查看
cnpm --version

安装
npm install -g yarn
查看
yarn --version
安装
npm install -g @vue/cli
cnpm install -g @vue/cli
yarn global add @vue/cli
以上命令任选
查看
vue --version
升级
npm update -g @vue/cli
或
yarn global upgrade --latest @vue/cli

vue create [projectName]

Spring Boot + Vue3 前后端分离 实战wiki知识库系统 - 前后端整合

添加CORS过滤器到您的Spring Boot应用程序 在转向Vue客户端应用程序之前，还有一件事需要更新。目前，如果试图将服务器应用程序与Vue等单页应用程序框架一起使用，则会抛出一个CORS错误。这可以通过向SpringBootVueApplication类添加一个CORS过滤器来解决。

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;  
    }   
}

...