从0到1开始我的全栈之路（持续更新ing）up主会带你从认识前后端主流框架开始一步步从简单的项目构建，逐渐到用户注册等一系列功能，再到分布式，微服务，由浅入深的进行学习

第一天

1. 为什么学习前端使用vue后端使用java sprint的全栈开发架构

使用Vue作为前端框架，Spring Boot作为后端框架的架构是一种常见的前后端分离实践，这种架构模式具有以下特点和优势：

1. **职责清晰**：Vue负责前端界面的展示和用户交互，而Spring Boot负责后端的业务逻辑和数据处理。这种分离使得开发和维护更加模块化，易于管理和扩展。

2. **技术栈灵活性**：Vue是一个轻量级的前端框架，易于上手，而Spring Boot是一个强大的后端框架，提供了丰富的功能和自动化配置。这种组合允许开发者根据项目需求灵活选择技术栈。

3. **性能优化**：Vue.js在大型应用中可能需要额外关注性能优化，尤其是在数据量大和复杂交互的场景下。而Spring Boot则提供了高效的后端处理能力，两者结合可以构建出高性能的应用。

4. **易于维护和扩展**：前后端分离使得维护和扩展变得更容易，因为它们可以独立开发和部署。Spring Boot的三层架构（Controller、Service、Dao）使得业务逻辑层的变更不会影响其他层，提高了程序的扩展性和维护性。

5. **跨域问题处理**：在实际开发中，由于Vue和Spring Boot可能运行在不同的端口上，可能会遇到跨域请求问题。通过配置代理和设置Axios的全局请求路径，可以解决这一问题。

6. **社区和生态系统**：Vue.js的社区资源相对分散，部分高级功能和插件可能不够成熟，而Spring Boot则拥有一个庞大的社区和生态系统，可以提供丰富的支持和资源。

7. **适用场景**：Vue适合小型到中型项目，上手容易，轻量级；而Spring Boot适合构建大型企业级应用，提供完整的解决方案，包括路由、依赖注入等。

综上所述，Vue和Spring Boot的组合是一个强大的前后端分离架构，适用于多种项目规模和场景。这种架构不仅提高了开发效率，还增强了应用的可维护性和扩展性。

2. 什么是vue？

Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用（SPA）。它由前Google工程师尤雨溪（Evan You）创建，并在2014年首次发布。Vue以其简洁、灵活和易上手的特点而广受欢迎，特别适合构建复杂的前端界面。

以下是Vue的一些核心特性和概念：

1. **响应式数据绑定**：
- Vue通过数据绑定和响应式系统，使得数据的变化能够自动更新到视图上。开发者只需关注数据本身，Vue会自动处理数据和视图之间的同步。

2. **组件系统**：
- Vue提供了一个强大的组件系统，允许开发者将界面拆分成独立、可复用的组件。每个组件都有自己的视图和逻辑，使得代码更加模块化和易于维护。

3. **虚拟DOM**：
- Vue使用虚拟DOM来提高性能和效率。当数据变化时，Vue会计算出最小的DOM更新量，然后才实际更新到浏览器的DOM，这样可以减少不必要的DOM操作，提高应用性能。

4. **易于上手**：
- Vue的API设计简洁直观，学习曲线相对平缓，使得开发者可以快速上手。

5. **灵活性**：
- Vue既可以作为一个轻量级的库被集成到已有项目中，也可以作为一个完整的框架来构建大型应用。

6. **工具链和生态系统**：
- Vue拥有丰富的工具链和生态系统，包括Vue CLI（脚手架工具）、Vue Router（路由管理器）、Vuex（状态管理库）等，这些工具和库可以帮助开发者快速构建复杂的应用。

7. **单文件组件**：
- Vue支持单文件组件（.vue文件），这种文件格式允许开发者在一个文件中编写模板、脚本和样式，使得组件的开发和管理更加方便。

8. **服务器端渲染（SSR）**：
- Vue支持服务器端渲染，这对于提高首屏加载速度和SEO（搜索引擎优化）非常有帮助。

9. **TypeScript支持**：
- Vue从2.5版本开始支持TypeScript，使得开发者可以享受到TypeScript带来的类型检查和代码提示等优势。

10. **国际化**：
- Vue支持国际化，允许开发者构建多语言应用。

Vue的设计哲学是“渐进式增强”，这意味着Vue可以被用来构建简单的页面，也可以扩展到复杂的单页应用。Vue的灵活性和易用性使其成为许多前端开发者和项目的首选框架之一。

3. 什么是java sprint？

Spring框架是一个功能强大的Java应用程序框架，旨在提供高效且可扩展的开发环境。它结合了轻量级的容器和依赖注入功能，提供了一种使用POJO（Plain Old Java Objects）进行容器配置和面向切面的编程的简单方法，以及一组用于AOP（Aspect-Oriented Programming，面向切面编程）的模块。Spring框架还支持各种移动应用开发技术，如Android和iOS。此外，它还提供了对事务管理、对象/关系映射、JavaBeans、JDBC、JMS和其他技术的支持，从而确保高效开发。

Spring框架的核心包括IoC（Inverse of Control，控制反转）和AOP。IoC指的是将对象的创建交给Spring去创建，而AOP用来封装多个类的公共行为，将那些与业务无关，却为业务模块所共用的逻辑封装起来，减少系统的重复代码，降低模块间的耦合度。Spring中，一切Java类都是资源，而资源都是类的实例对象Bean，容纳并管理这些Bean的是Spring的IoC容器，所以Spring是一种基于Bean的编程。

4. 开始构建vue项目

4.1 安装Node.js和npm/yarn

Vue CLI需要Node.js和npm（或yarn）来运行。请确保你的开发环境中安装了Node.js和npm（或yarn）

mac中使用brew来安装（其他环境可自行搜索）

brew install node

这个命令会同时安装Node.js和npm，因为npm是Node.js的一部分。

4.2 安装Vue CLI

Vue CLI是一个全局的命令行工具，用于快速搭建Vue项目。在终端中运行以下命令来安装Vue CLI：

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

4.3 创建Vue项目

使用Vue CLI创建一个新的Vue项目。在终端中运行以下命令：

vue create my-project

按照提示选择预设配置或者手动选择需要的插件和特性。

4.4 浏览项目结构

创建项目后，你将得到一个包含以下文件和目录的项目结构：

my-project
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   ├── main.js
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

5. 开发项目

开始编写代码。src目录包含了项目的源代码，其中App.vue是根组件，main.js是入口文件。

你可以创建新的Vue组件在src/components目录下，并在App.vue或其他组件中使用它们。

6. 运行项目

在项目目录中，运行以下命令来启动开发服务器，并在浏览器中查看应用：

npm run serve
# 或者使用yarn
yarn serve

7. 构建项目

当你完成开发后，可以构建项目以准备部署：

npm run build
# 或者使用yarn
yarn build

8. 部署项目

将dist目录中的内容部署到你的服务器或静态文件托管服务上。

9. 开始构建sprint项目

9.1 首先初始化Spring Boot项目。

建议使用Spring Initializr (https://start.spring.io/) 创建项目，但是因为我们要逐步进行学习，所以先只在maven项目中提供基本的配置文件。

以下是后端需要的基本依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.0</version>
        <relativePath/>
    </parent>
    
    <groupId>com.example</groupId>
    <artifactId>sprint-client</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>sprint-client</name>
    <description>Spring Boot Backend for Vue.js Frontend</description>
    
    <properties>
        <java.version>1.8</java.version>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

创建在我们后端项目根路径下即可：

9.2 创建主应用类

package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

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

9.3 添加跨域配置

package com.example.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080") // Vue.js默认端口
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

9.4 添加application.properties配置：

server.port=8081
spring.application.name=sprint-client

9.5 对于前端Vue项目，需要确保安装了axios：

cd vue_web
npm install axios

9.6 然后在Vue项目中创建一个用于与后端通信的配置文件：

import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 5000
})

// 请求拦截器
request.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 响应拦截器
request.interceptors.response.use(
    response => {
        return response.data
    },
    error => {
        return Promise.reject(error)
    }
)

export default request