Springboot和Vue+MYSQL项目(基本介绍+前后端结合初步项目)+maven+mybatis

news/2023/12/1 0:26:00 标签: spring boot, vue.js, mysql

一、基本知识

当我们谈论全栈开发时,通常指的是一个开发者能够处理整个应用程序的开发,包括前端(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 是一个轻量级、灵活且功能强大的持久层框架,适用于各种规模的应用。它在处理简单到复杂的数据库操作时都表现出色,得到了广泛的应用和社区支持。


http://www.niftyadmin.cn/n/5198838.html

相关文章

MobaXterm如何连接CentOS7的Linux虚拟机?Redis可视化客户端工具如何连接Linux版Redis?

一、打开Lunix虚拟机,进入虚拟机中,在终端中输入ifconfig,得到以下信息&#xff0c;红框中为ip地址 二、打开MobaXterm&#xff0c;点击session 选择SSH&#xff0c;在Remote host中输入linux得到的IP地址&#xff0c;Specify username中可起一个任意的连接名称。 输入密码 四、…

集合的自反关系和对称关系

集合的自反关系和对称关系 一&#xff1a;集合的自反关系1&#xff1a;原理&#xff1a;2&#xff1a;代码实现 二&#xff1a;对称关系1&#xff1a;原理&#xff1a;2&#xff1a;代码实现 三&#xff1a;总结 一&#xff1a;集合的自反关系 1&#xff1a;原理&#xff1a; …

【前端学java】Java中的接口和枚举概念(7)

theme: smartblue 往期回顾&#xff1a; 【前端学java】JAVA开发的依赖安装与环境配置 &#xff08;0&#xff09;【前端学 java】java的基础语法&#xff08;1&#xff09;【前端学java】JAVA中的packge与import&#xff08;2&#xff09;【前端学java】面向对象编程基础-类…

请求的接口响应状态为已取消的原因

有趣的iframe问题 今天遇到一个问题&#xff0c;当点击了按钮----跳转页面时----F12键点击网络中的状态报了已取消&#xff0c;类型是 document说明是前端页面的问题&#xff0c;如果是xhr那可能是接口的问题。 原本是写了3个iframe,页面刷新的时候请求了第一个iframe,然后就…

【ceph】ceph集群的故障域是怎么快速修改导入导出

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

Stable Diffusion 秋葉aaaki整合包远程访问设置

Stable Diffusion 秋葉aaaki整合包远程访问设置 0. 背景1. 解决方法 12. 解决方法 2 0. 背景 在局域网的一台服务器上安装了秋葉aaaki整合包&#xff0c;实现局域网内其他机器访问这台服务器上启动的 Stable Diffusion Web UI&#xff0c;但是默认的启动 server_name 是 127.0…

P1281 书的复制

P1281 书的复制 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 书按顺序给k个人&#xff0c;进行抄写&#xff0c;求抄写页数最多的人所用的时间的最小值。最大值最小&#xff0c;考虑二分。 又因为题目要求要尽可能让前面的人少抄写&#xff0c;那么就要求后面的多抄写&…

分布式与微服务 —— 初始

前言 距今微服务的提出已经过去快十个春秋&#xff0c;网络上的博文讲微服务也是一抓一大把&#xff0c;但是荔枝仍然觉得还是有必要自己梳理一下整个知识体系。在这篇文章中&#xff0c;荔枝将会以一个初学者的角度来切入&#xff0c;从分布式系统和微服务架构引入&#xff0c…

华为OD机试 - 机器人搬砖(Java JS Python C)

目录 题目描述 输入描述 输出描述 用例 题目解析 JavaScript算法源码 Java算法源码

LangChain 5易速鲜花内部问答系统

展示了一个完整的问答系统的实现&#xff0c;使用了Flask来构建Web界面、langchain进行文档处理和检索&#xff0c;以及OpenAI的语言模型。代码的复杂性在于集成了多种高级技术和处理大型数据集和语言模型。 LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt t…

Visio免费版!Visio国产平替软件,终于被我找到啦!

作为一个职场人士&#xff0c;我经常需要绘制各种流程图和图表&#xff0c;而Visio一直是我使用的首选工具。但是&#xff0c;随着公司的发展和工作的需要&#xff0c;我逐渐发现了Visio的优点和不足。 首先&#xff0c;让我们来看看Visio的优点。Visio是一个专业的流程图和图…

odoo16 一个比较复杂的domain

一个比较复杂的domain 今天在做项目管理的二开&#xff0c;碰到一个比较复杂的domain domain"[(user_ids, in, uid),(state, in, (已发布,进行中,待审核))]"domain"[&amp;,|,(user_ids, in, uid),(last_task_user_ids, in, uid),(state, , 待审核)]"需…

C语言的5个内存段你了解吗?( 代码段/数据段/栈/堆)

前言&#xff1a;这些内存段在程序运行时起着不同的作用&#xff0c;有不同的分配方式和存储内容。对于 C 语言程序员来说&#xff0c;了解这些内存段的特性和用途有助于更好地理解内存管理、变量的存储位置以及程序执行过程中的内存分配情况 1. 代码段 (Code Segment) 内容&a…

【小呆的力学笔记】有限元专题之循环对称结构有限元原理

文章目录 1. 循环对称问题的提出2. 循环对称条件2.1 节点位移的循环对称关系2.2 节点内力的循环对称关系 3. 在平衡方程中引入循环对称条件 1. 循环对称问题的提出 许多工程结构都是其中某一扇面的n次周向重复&#xff0c;也就是是周期循环对称结构。如果弹性体的几何形状、约…

C++:拷贝构造函数,深拷贝,浅拷贝

一.什么是拷贝构造函数&#xff1f; 同一个类的对象在内存中有完全相同的结构&#xff0c;如果作为一个整体进行复制&#xff08;拷贝&#xff09;是完全可行的。这个拷贝过程只需要拷贝数据成员&#xff0c;而函数成员是共用的&#xff08;只有一份拷贝&#xff09;。在建立对…

【洛谷 P3743】kotori的设备 题解(二分答案+递归)

kotori的设备 题目背景 kotori 有 n n n 个可同时使用的设备。 题目描述 第 i i i 个设备每秒消耗 a i a_i ai​ 个单位能量。能量的使用是连续的&#xff0c;也就是说能量不是某时刻突然消耗的&#xff0c;而是匀速消耗。也就是说&#xff0c;对于任意实数&#xff0c;…
最新文章