一、基本知识

当我们谈论全栈开发时，通常指的是一个开发者能够处理整个应用程序的开发，包括前端（Front-End）和后端（Back-End）的所有层面。这三个基本的领域是：

  1. 前端开发（Front-End Development）：

    • 定义： 前端开发涉及构建和维护用户界面及用户体验。它负责处理用户在浏览器中看到和与之交互的所有内容。
    • 技术栈： HTML、CSS、JavaScript 是前端的基础。现代前端框架如 Vue.js、React 和 Angular 可以帮助构建复杂的单页应用（SPA）。

  2. 后端开发（Back-End Development）：

    • 定义： 后端开发处理应用程序的服务器端，包括数据库、业务逻辑和应用程序的核心功能。后端负责接收和处理前端发送的请求，并返回相应的数据。
    • 技术栈： 后端可以使用各种编程语言和框架，如 Java（Spring Boot）、Python（Django、Flask）、Node.js（Express）等。数据库技术如 MySQL、MongoDB、PostgreSQL 等也是后端开发中的关键组成部分。

  3. 数据库（Database）：

    • 定义： 数据库用于存储和管理应用程序的数据。它是后端的一部分，但在全栈开发中，前端开发者也可能需要了解一些数据库的基础知识，尤其是在处理前端与后端之间的数据交互时。
    • 技术栈： 常见的关系型数据库包括 MySQL、PostgreSQL、SQLite，非关系型数据库包括 MongoDB、Redis 等。

全栈开发通常需要同时具备前端和后端的技能，以便能够独立开发、测试和部署整个应用程序。这包括对用户界面设计、服务器端逻辑、数据库设计和交互的全面理解。在现代的开发环境中，全栈开发者还可能需要了解一些 DevOps 工具和实践，以便更好地管理和部署应用程序。

二、前后端结合

Spring Boot 和 Vue.js 可以结合在一起创建一个全栈项目，其中 Spring Boot 用于后端服务和数据处理，Vue.js 用于前端用户界面，而 MySQL 作为数据库存储数据。下面是一个简单的示例，演示如何将它们结合在一起。
（具体springboot环境配置及构建可以看之前的教程）

1. Spring Boot 项目

创建 Spring Boot 项目并添加依赖：

<!-- pom.xml -->
<dependencies>
    <!-- Spring Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Spring Data JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <!-- MySQL Connector -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

创建实体类、JPA Repository 和控制器：

// User.java
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String email;
    // getters and setters
}

// UserRepository.java
public interface UserRepository extends JpaRepository<User, Long> {
}

// UserController.java
@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }
}

2. Vue.js 项目

创建 Vue.js 项目：

vue create my-vue-app
cd my-vue-app

安装 Axios（用于处理 HTTP 请求）：

npm install axios

在组件中使用 Axios 获取数据：

<!-- UserList.vue -->
<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.username }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('http://localhost:8080/api/users');
        this.users = response.data;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    },
  },
};
</script>

3. 运行项目

启动 Spring Boot 项目（确保 MySQL 已经启动并配置好）：
当然也可以直接在编程工程中配置好运行。

./mvnw spring-boot:run

启动 Vue.js 项目：

npm run serve

现在，可以通过访问 http://localhost:8081 查看 Vue.js 应用，并且它将从 Spring Boot 后端获取用户数据。

这是一个简单的示例，可以根据实际需求进行更复杂的开发和配置。同时，确保配置好数据库连接信息和跨域请求处理等。
注意：前端和后端的端口要设置的不一样。

三、maven

Apache Maven 是一个用于构建和管理项目的强大工具。它提供了一种灵活的、可维护的项目管理方法，支持构建、测试和部署 Java 项目。

  1. 项目对象模型（Project Object Model - POM）：

    • Maven 使用 POM 文件来描述项目的配置信息。这个 XML 文件包含了项目的元数据，如项目依赖、插件、目标等。POM 文件位于项目的根目录下，命名为 pom.xml。

  2. 约定优于配置：

    • Maven 遵循“约定优于配置”的原则，提供了一套默认的项目结构和命名规范。通过遵循这些约定，开发者可以更专注于项目的业务逻辑而不是配置细节。

  3. 依赖管理：

    • Maven 管理项目的依赖关系，并负责下载、缓存和共享这些依赖。开发者只需要在 POM 文件中声明依赖，Maven 就会负责获取所需的库。

  4. 生命周期和插件：

    • Maven 定义了一组生命周期（Build Lifecycle）和阶段（Build Phase），如编译、测试、打包、部署等。开发者可以使用插件来扩展这些生命周期，执行特定的任务。

  5. 中央仓库：

    • Maven 的中央仓库是一个集中的、公共的存储库，包含了大量的开源 Java 项目的二进制和源代码。当 Maven 构建项目时，它会从中央仓库下载所需的依赖。

  6. 多模块支持：

    • Maven 支持构建多模块项目，其中每个模块可以是独立的项目，但它们共享相同的构建配置。

  7. 插件系统：

    • Maven 的插件系统允许开发者扩展或自定义构建过程。有许多现成的插件可用于执行各种任务，如编译、测试、静态代码分析等。

  8. 集成开发环境（IDE）支持：

    • Maven 被广泛支持于主流的 Java IDE，如 Eclipse、IntelliJ IDEA。这使得开发者能够在 IDE 中直观地使用 Maven 构建项目。

使用 Maven 可以简化项目的构建和维护过程，提高团队协作的效率，并确保项目的一致性和可重复性。在 Maven 的生态系统中，有许多与其兼容的工具和服务，使得开发者可以更容易地集成其他开发和部署工具。

四、Mybatis

MyBatis（官方称之为 “My” + “Batis”，发音类似于 My Better 买比特）是一个开源的持久层框架，它是在 Java 平台上持久化数据的一种解决方案。MyBatis 通过 XML 描述符或注解配置简单的 SQL 映射，将 Java 对象和数据库表之间的映射关系进行绑定，提供了半自动化的数据库操作。

  1. 简单易用：

    • MyBatis 设计简单，学习曲线相对较低。它允许开发者使用简单的 XML 或注解配置来实现 SQL 映射，而无需编写繁琐的 JDBC 代码。

  2. 灵活的 SQL 映射：

    • MyBatis 支持灵活的 SQL 映射，通过 XML 文件或注解可以定义 SQL 查询、插入、更新和删除等操作。这样可以很容易地将数据库表映射到 Java 对象。

  3. 动态 SQL：

    • MyBatis 提供了强大的动态 SQL 支持，允许根据条件来动态构建 SQL 查询。这使得 SQL 查询语句更加灵活和可维护。

  4. 自动映射：

    • MyBatis 支持自动将查询结果映射到 Java 对象，减少了手动的结果集处理工作。开发者只需定义好 SQL 查询和 Java 对象的映射关系，MyBatis 就能够自动完成对象的创建和属性的赋值。

  5. 支持存储过程和高级映射：

    • MyBatis 提供了对存储过程的良好支持，并能够处理复杂的数据库操作。通过高级映射特性，开发者可以更灵活地处理数据库中的数据。

  6. 与 Spring 和其他框架集成：

    • MyBatis 可以与 Spring 框架和其他主流框架集成，提供了更便捷的开发方式。在 Spring 中，MyBatis 可以通过 Spring-MyBatis 整合模块轻松集成。

  7. 缓存机制：

    • MyBatis 支持一级缓存和二级缓存，可以有效地减少数据库访问次数，提高查询性能。

  8. 插件体系：

    • MyBatis 提供了插件体系，允许开发者编写插件以扩展和自定义框架的行为。这使得 MyBatis 在满足通用需求的同时，也可以灵活应对个性化需求。

MyBatis 是一个轻量级、灵活且功能强大的持久层框架，适用于各种规模的应用。它在处理简单到复杂的数据库操作时都表现出色，得到了广泛的应用和社区支持。

# spring boot # vue.js # mysql
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue