当前位置：首页 > news >正文

第二个简单的SpringBoot和Vue前后端全栈的todoapp案例

news 来源：原创 2025/8/2 22:12:52

项目源于哔哩哔哩，按视频手敲了一下，补充上代码和一些细节。

全栈项目实践：1小时快速入门SpringBoot+vue3+element-plus_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LH4y1w7Nd/?spm_id_from=333.1387.favlist.content.click&vd_source=3d07f741ba02111ffca810ad6ade218a

H2数据库的安装和使用

H2 Database Enginehttps://h2database.com/html/main.html 官网下载安装版文件h2-setup-2024-08-11.exehttps://github.com/h2database/h2database/releases/download/version-2.3.232/h2-setup-2024-08-11.exe
IDEA配置H2，名称填写test时，会自动生成test.mv.db数据库文件，注意URL的写法，测试连接成功则配置成功
```
jdbc:h2:file:C:/Users/Administrator/Desktop/todoapp/todoapp/test
```

数据库使用SQL语言建表Todo

-- auto-generated definition
create table TODO
(ID        BIGINT auto_incrementprimary key,TITLE     CHARACTER VARYING(256),COMPLETED BOOLEAN
);

application.properties定义好H2数据库

spring.h2.console.enabled=true
spring.datasource.url=jdbc:h2:file:C:/Users/Administrator/Desktop/todoapp/todoapp/test
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

SpringBoot先网络测试要出现200成功

其他的根据视频来就行，没要到视频代码，自己手敲一份，附上代码部分。

package com.example.todoapp.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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowedHeaders("*");}
}

package com.example.todoapp.controller;import com.example.todoapp.domain.Todo;
import com.example.todoapp.service.TodoService;
import jakarta.annotation.Resource;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
@RequestMapping("/api/todos")
public class TodoController {@Resourceprivate TodoService todoService;@GetMappingpublic List<Todo> getAllTodos() {return todoService.getAllTodos();}@PostMappingpublic Todo createTodo(@RequestBody Todo todo) {return todoService.createTodo(todo);}@PutMapping("/{id}")public Todo updateTodo(@PathVariable Long id, @RequestBody Todo updatedTodo) {return todoService.updateTodo(id, updatedTodo);}@DeleteMapping("/{id}")public  void  deleteTodo(@PathVariable Long id){todoService.deleteTodo(id);}
}

package com.example.todoapp.dao;import com.example.todoapp.domain.Todo;
import org.springframework.data.jpa.repository.JpaRepository;public interface TodoRepository extends JpaRepository<Todo, Long> {
}

package com.example.todoapp.domain;import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;@Entity
public class Todo {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String title;private Boolean completed;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public Boolean getCompleted() {return completed;}public void setCompleted(Boolean completed) {this.completed = completed;}@Overridepublic String toString() {return "Todo{" +"id=" + id +", title='" + title + '\'' +", completed=" + completed +'}';}
}

package com.example.todoapp.service;import com.example.todoapp.domain.Todo;import java.util.List;public interface TodoService {List<Todo> getAllTodos();Todo createTodo(Todo todo);Todo updateTodo(Long id,Todo updatedTodo);void deleteTodo(Long id);
}

package com.example.todoapp.service;import com.example.todoapp.dao.TodoRepository;
import com.example.todoapp.domain.Todo;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class TodoServiceImpl implements TodoService {@Resourceprivate TodoRepository todoRepository;@Overridepublic List<Todo> getAllTodos() {return todoRepository.findAll();}@Overridepublic Todo createTodo(Todo todo) {return todoRepository.save(todo);}@Overridepublic Todo updateTodo(Long id, Todo updatedTodo) {return todoRepository.findById(id).map(todo -> {todo.setTitle(updatedTodo.getTitle());todo.setCompleted(updatedTodo.getCompleted());return todoRepository.save(todo);}).orElseGet(() -> {updatedTodo.setId(id);return todoRepository.save(updatedTodo);});}@Overridepublic void deleteTodo(Long id) {todoRepository.deleteById(id);}
}

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'const newTodo = ref('')const todos = ref([])const axiosInstance = axios.create({baseURL: 'http://localhost:8080',timeout: 5000,
})const fetchTodos = async () => {try {const response = await axiosInstance.get('/api/todos')todos.value = response.data} catch (error) {ElMessage.error('查询待办事项失败')console.error(error)}
}const addTodo = async () => {if (!newTodo.value) returntry {const response = await axiosInstance.post('/api/todos', {title: newTodo.value,completed: false,})todos.value.push(response.data)newTodo.value = ''ElMessage.success('待办事项创建成功')} catch (error) {ElMessage.error('待办事项创建失败')console.error(error)}
}const toggleCompleted = async (todo) => {try {todo.completed = !todo.completedawait axiosInstance.put(`/api/todos/${todo.id}`, todo)ElMessage.success('待办事项更新成功')} catch (error) {ElMessage.error('待办事项更新失败')console.error(error)todo.completed = !todo.completed}
}const deleteTodo = async (todo) => {try {await axiosInstance.delete(`/api/todos/${todo.id}`)await fetchTodos()ElMessage.success('待办事项更新成功')} catch (error) {ElMessage.error('待办事项更新失败')console.error(error)todo.completed = !todo.completed}
}onMounted(fetchTodos)
</script><template><div class="todo-app"><el-card class="todo-card"><template #header><div class="todo-header">待办事项</div></template><div class="todo-input"><el-input v-model="newTodo" placeholder="新建待办事项..."></el-input><el-button type="primary" @click="addTodo">添加</el-button></div><div v-if="todos.length" class="todo-list"><el-card v-for="todo in todos" :key="todo.id" class="todo-item"><div class="todo-item-actions"><div class="todo-item-title">{{ todo.title }}</div><el-buttonclass="todo-button"@click="toggleCompleted(todo)":type="todo.completed ? 'success' : 'info'">{{ todo.completed ? '已完成' : '未完成' }}</el-button><el-button type="danger" @click="deleteTodo(todo)">删除</el-button></div></el-card></div><div v-else class="no-todos">暂无待办事项</div></el-card></div>
</template><style scoped>
.todo-app {display: flex;justify-self: center;align-items: center;height: 100vh;background: #f0f2f5;padding: 20px;box-sizing: border-box;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.todo-card {width: 100%;max-width: 500px;border-radius: 8px;box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);background: #ffffff;
}
.todo-header {font-size: 24px;font-weight: bold;text-align: center;padding: 16px;background-color: #409eff;color: #fff;border-radius: 8px 8px 0 0;margin: 0;
}
.todo-input {display: flex;align-items: center;gap: 10px;padding: 20px;background-color: #fff;border-bottom: 1px solid #ebeef5;
}
.el-input {flex: 1;
}
.todo-list {padding: 20px;background-color: #fff;
}
.todo-item {display: flex;justify-content: space-between;align-items: center;padding: 10px 15px;border: 1px solid #ebeef5;border-radius: 8px;background-color: #f9f9f9;transition:background-color 0.3s,transform 0.3s;
}
.todo-item:hover {background-color: #ebf7ff;tranform: translateY(-2px);
}
.todo-item-title {font-weight: bold;flex: 1;margin-right: 20px;word-wrap: break-word;width: 160px;
}
.completed .todo-item-title {text-decoration: line-through;color: #909399;
}
.todo-item-actions {display: flex;align-items: center;
}
.no-todos {text-align: center;padding: 20px;color: #909399;font-size: 18px;
}
</style>

<script setup>
import TodoList from './components/TodoList.vue';
</script><template><div id="app"><el-container><el-main><TodoList/></el-main></el-container></div>
</template>

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

第二个简单的SpringBoot和Vue前后端全栈的todoapp案例

项目源于哔哩哔哩，按视频手敲了一下，补充上代码和一些细节。全栈项目实践：1小时快速入门SpringBootvue3element-plus_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LH4y1w7Nd/?spm_id_from333.1387.favlist.content.click&vd_…...

编程日记 2025/8/2 22:12:52

探秘 Canva AI 图像生成器：重塑设计创作新范式

Canva 凭借简洁易用的界面和海量模板资源，早已成为设计师和普通用户的心头好。而 Canva AI 图像生成器的推出，更是为设计领域带来了一场深刻变革，以智能化的手段重塑了图像创作的方式与边界。技术内核：AI 如何驱动图像生成 Can…...

编程日记 2025/7/31 22:57:06

栈应用：辅助站（c++）

干货今天讲讲最大辅助栈和最小辅助栈主栈进入元素的时候最大辅助栈:保证新元素大于等于(辅助栈)顶的时候，再进入辅助栈这样就能保证最大辅助栈的栈顶元素是主栈中的最大值主栈出栈的时候最大辅助栈:主栈出栈元素如果等于(辅助栈)的栈顶元素，再…...

编程日记 2025/8/1 10:00:34

AI时代的数据可视化：未来已来

你有没有想过，数据可视化在未来会变成什么样？随着人工智能（AI）的飞速发展，数据可视化已经不再是简单的图表和图形，而是一个充满无限可能的智能领域。AI时代的可视化不仅能自动解读数据，还能预测…...

编程日记 2025/8/2 22:11:06

常见音频主控芯片以及相关厂家总结

音频主控芯片是音频设备（如蓝牙耳机、音箱、功放等）的核心组件，负责音频信号的解码、编码、处理和传输。以下是常见的音频主控芯片及其相关厂家，按应用领域分类： 蓝牙音频芯片主要用于无线耳机、音箱等设备&#xff0…...

编程日记 2025/8/2 22:11:57

湖仓一体架构在金融典型数据分析场景中的实践

在数字经济与金融科技深度融合的今天，数据已成为金融机构的核心战略资产。然而，传统数据架构面临着三大困局，制约着金融机构数据价值的充分释放。一、需求驱动更多银行数据分析场景金融机构，特别是银行业，面临着双重…...

编程日记 2025/8/2 22:10:16

VBA —— 学习Day5

子程序与函数子程序：实现特定功能的程序代码块子程序语法： [修饰符] Sub 子程序名称([参数1，参数2，参数3]) 代码块 End Sub 子程序如何调用： 1 . 子程序名 [参数1，参数2，...] 2. Cal…...

编程日记 2025/8/2 13:53:04

Flink 实时数据一致性与 Exactly-Once 语义保障实战

在构建企业级实时数仓的过程中，“数据一致性” 是保障指标准确性的核心能力，尤其是在金融、电商、医疗等对数据敏感度极高的场景中。Flink 作为流批一体的实时计算引擎，其内建的 Exactly-Once 语义为我们提供了强有力的保障机制。本篇将围绕如何实现端到端的数据一致性、如何…...

编程日记 2025/7/29 13:53:38

Java云原生到底是啥，有哪些技术

☁️ Java云原生：程序员の修仙飞升指南（附渡劫技巧） 一、修仙世界观：传统程序 vs 云原生程序 🏡 传统Java程序（老宅院） 特点：单体大瓦房、扩建要拆墙（耦合度高&#xf…...

编程日记 2025/7/31 7:47:45

IPM IMI111T-026H 高效风扇控制板

概述： REF-MHA50WIMI111T 是一款专为风扇驱动设计的参考开发板，搭载了英飞凌的IMI111T-026H iMOTION™智能功率模块(IPM)。这个模块集成了运动控制引擎(MCE)、三相栅极驱动器和基于IGBT的功率级，全部封装在一个紧凑的DSO22封装中。REF-MHA50…...

编程日记 2025/7/29 18:33:23

JavaScript基础-局部作用域

在JavaScript中，理解不同种类的作用域是掌握这门语言的关键之一。作用域决定了变量和函数的可访问性（即可见性和生命周期）。与全局作用域相对应的是局部作用域，它限制了变量和函数只能在其定义的特定范围内被访问。本文将深入探讨…...

编程日记 2025/7/30 5:39:13

[特殊字符]Meilisearch：AI驱动的现代搜索引擎

前言大家好，我是MAI麦造！ 上文介绍一了Manticore Search 这款轻量级的搜索引擎，这次又有了新的发现！传送门： Elasticsearch太重？它的超轻量的替代品找到了！ 这是一个让我超级兴奋的AI搜索引…...

编程日记 2025/8/2 2:26:20

K8S Svc Port-forward 访问方式

在 Kubernetes 中，kubectl port-forward 是一种本地与集群内资源（Pod/Service）建立临时网络隧道的访问方式，无需暴露服务到公网，适合开发调试、临时访问等场景。以下是详细使用方法及注意事项： 1. 基础用…...

编程日记 2025/7/29 18:33:13

SD06_前后端分离项目部署流程(采用Nginx)

本文档详细描述了如何在Ubuntu 20.04服务器上从零开始部署Tlias前后端分离系统。Tlias系统由Spring Boot后端（tlias-web-management）和Vue前端（vue-tlias-management）组成。目录环境准备安装MySQL数据库部署后端项目部署前端项…...

编程日记 2025/8/1 19:42:34

计算机网络：家庭路由器WiFi信号的发射和手机终端接收信号原理？

WiFi路由器与手机之间的信号传输涉及多个技术层面的协作，以下是其工作原理的详细步骤：一、数据封装与协议处理应用层数据生成用户操作（如浏览网页、视频播放）产生数据包，经TCP/IP协议栈逐层封装，添加IP地址（网络层）和MAC地址（数据链路层）。协议封装数据包被封装…...

编程日记 2025/8/2 22:09:21

【Redis】string

文章目录 string 字符串常用命令设置和获取setgetmget & mset 计数操作incr & incrbydecr & decrbyincrbyfloat 字符串操作appendstrlengetrangesetrange string 字符串关于 Redis 的字符串，有几点需要注意 Redis 所有的 key 的类型都是字符串类型va…...

编程日记 2025/7/29 7:01:09

vue3的响应式设计原理

Vue 3 的响应式设计是其核心特性之一，依赖于 Proxy 和依赖收集机制，相比 Vue 2 的 Object.defineProperty，Vue 3 的响应式系统更加高效、灵活且易于维护。以下是 Vue 3 响应式设计的核心原理： 一、核心机制概览使用 Proxy 实现…...

编程日记 2025/8/2 22:09:23

学习黑客5 分钟深入浅出理解Linux Logs [特殊字符]

5 分钟深入浅出理解Linux Logs 📝 大家好！今天我们将探索Linux系统中的日志机制——这是系统管理和安全分析的重要组成部分。在网络安全学习特别是TryHackMe平台上的挑战中，理解和分析日志是发现入侵痕迹、追踪攻击者行为和收集证据的关键技…...

编程日记 2025/8/2 22:11:58

【Docker系列】docker inspect查看容器部署位置

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/8/2 22:11:58

journalctl使用

journalctl 可以查看很多服务的日志，比如 docker，ollama 等。 1. 查看 xx 服务的最新日志（实时滚动） sudo journalctl -u docker -f -f 参数表示跟随（follow），会持续输出最新日志&#xff0…...

编程日记 2025/7/31 8:08:58

Satori：元动作 + 内建搜索机制，实现超级推理能力

Satori：元动作内建搜索机制，实现超级推理能力论文大纲一、背景：LLM 推理增强的三类方法1. 基于大规模监督微调（SFT）的推理增强2. 借助外部机制在推理时进行搜索 (RLHF / 多模型 / 工具)3. 现有局限性总结二、Sator…...

编程日记 2025/8/1 14:23:58

基于语言模型的依存关系分句和主题变换检测（基于词频和句段得分）的意思

🧠 一、基于语言模型的依存关系分句（Dependency-based Segmentation） ✅ 说人话： 用语言模型判断句子里的语法结构（谁依赖谁），找到合理的“断点”，把太长的句子拆成语法上更自然的小…...

编程日记 2025/8/1 13:38:05

计算机体系结构一些笔记

1、异构计算：CPU也像人类社会一样存在专业分工。异构计算（Heterogeneous Computing）是指不同类型的计算单元合作完成计算任务。每个计算单元采用不同的架构，分别擅长处理某一种类型的计算任务。整个计算任务分解为小的单位&…...

编程日记 2025/8/1 17:30:25

Go语言——goflow工作流使用

一、引入依赖这个很坑，他不允许连接带密码的redis，只能使用不带密码的redis，要带密码的话得自己改一下源代码，无语 go get github.com/s8sg/goflow二、画出我们的工作流程三、编写代码 package mainimport ("encoding/j…...

编程日记 2025/7/31 19:46:28

论文标题 Rational Retrieval Acts: Leveraging Pragmatic Reasoning to Improve Sparse Retrieval 论文地址 https://arxiv.org/pdf/2505.03676 代码地址 https://github.com/arthur-75/Rational-Retrieval-Acts 作者背景巴黎萨克雷大学，索邦大学&#xff…...

编程日记 2025/7/29 16:25:16

RV1126 ROS2环境交叉编译及部署（基于官方Docker）

RV1126 ROS2环境交叉编译及部署（基于官方Docker） 0 前言1 SDK源码更新1.1 启动Docker容器1.2 更新SDK源码1.3 SDK更新问题2 ROS2编译配置3 Buildroot rootfs编译ROS2的依赖包3.1 编译问题解决4 使用Docker交叉编译ROS24.1 准备Linux(Ubuntu) PC机的依赖环境4.1.1 Ubuntu PC机…...

编程日记 2025/8/1 4:49:47

每日脚本学习5.10 - XOR脚本

xor运算的简介异或就是对于二进制的数据可以进行同0异1 简单的演示 ： 结果是这个就是异或异或的作用 1、比较两数是否相等 2、可以进行加密加密就是需要key 明文 :0b010110 key : 0b1010001 这个时候就能进行加密明文 ^ key密文还有这个加密比…...

编程日记 2025/7/29 5:35:59

深圳SMT贴片加工厂制造流程解析

内容概要作为大湾区电子制造产业链的重要节点，深圳SMT贴片加工厂凭借精密的生产体系与技术创新，构建了涵盖12道核心工序的标准化流程。从PCB基板的来料检验开始，通过全自动贴片机的高精度元件定位、SPI三维锡膏检测、智能温控回流焊接等关键…...

编程日记 2025/7/29 16:25:11

英语六级---2019.6 卷二仔细阅读2

文章 Officials at the White House announced a new space policy focused on managing the increasing number of satellites that companies and governments are launching into space. Space Policy Directive-3 lays out general guidelines for the United States to mi…...

编程日记 2025/8/1 15:29:50

相关文章：