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

SpringBoot+MyBatisPlus+MySql+vue2+elementUi的案例、java访问数据库服务、java提供接口服务

文章目录

  • 前言
  • 后端关键代码
  • 前端关键代码
  • 完整代码


前言

1、项目不使用前后端分离。
2、在创建SpringBoot的时候要注意各个插件间的版本问题。
3、后端技术SpringBoot+MyBatisPlus+MySql
4、前端技术vue2+elementUi


后端关键代码

简单介绍

1、数据库名称ssm_db
2、表名称tbl_book


数据表对象文件(Book.java)

tbl_book

package com.example.domain;import lombok.Data;@Data
public class Book {private Integer id;private String type;private String name;private String description;
}

配置文件(application.yml)

server:port: 80spring:datasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/ssm_db?serverTimezone=UTCusername: rootpassword: rootmybatis-plus:global-config:db-config:table-prefix: tbl_id-type: autoconfiguration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

创建项目后,在resources文件夹下把application的后缀名改为yml


接口文件(BookController.java)

写到这个文件就可以使用Postman进行接口测试了。

package com.example.controller;import com.baomidou.mybatisplus.core.metadata.IPage;
import com.example.controller.utils.R;
import com.example.domain.Book;
import com.example.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.io.IOException;@RestController
@RequestMapping("/books")
public class BookController {@Autowiredprivate IBookService bookService;@GetMappingpublic R getAll() {return new R(true, bookService.list());}@PostMappingpublic R save(@RequestBody Book book) throws IOException {
//        R r = new R();
//        boolean flag = bookService.save(book);
//        r.setFlag(flag);//        上面的三行代表这一行
//        new R(bookService.save(book));
//        return r;//        抛出异常测试
//        if (book.getName().equals("123")) throw new IOException();boolean flag = bookService.save(book);return new R(flag, flag ? "添加成功^_^!" : "添加失败-_-!");}@PutMappingpublic R update(@RequestBody Book book) throws IOException {boolean flag = bookService.modify(book);return new R(flag, flag ? "编辑成功^_^!" : "编辑失败-_-!");}@DeleteMapping("{id}")public R delete(@PathVariable Integer id) {boolean flag = bookService.delete(id);return new R(flag, flag ? "删除成功^_^!" : "数据同步失败,自动刷新-_-!");}@GetMapping("{id}")public R getById(@PathVariable Integer id) {// 数据同步失败,自动刷新return new R(true, bookService.getById(id));}//    分页
//    @GetMapping("{currentPage}/{pageSize}")
//    public R getPage(@PathVariable int currentPage, @PathVariable int pageSize) {
//        IPage<Book> page = bookService.getPage(currentPage, pageSize);
//        if (currentPage > page.getPages()) {
//            page = bookService.getPage((int) page.getPages(), pageSize);
//        }
//        return new R(true, page, "查询成功^_^!");
//    }//    分页加查询@GetMapping("{currentPage}/{pageSize}")
//    可以单独接收,也可以使用集合
//    public R getPage(@PathVariable int currentPage, @PathVariable int pageSize, String name, Book book) {
//    直接使用集合接收参数public R getPage(@PathVariable int currentPage, @PathVariable int pageSize, Book book) {IPage<Book> page = bookService.getPage(currentPage, pageSize, book);if (currentPage > page.getPages()) {page = bookService.getPage((int) page.getPages(), pageSize, book);}System.out.println(page);return new R(true, page);}
}

技术整合文件(pom.xml)

<?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.15</version><relativePath/></parent><groupId>com.example</groupId><artifactId>singleFableFullStack</artifactId><version>0.0.1-SNAPSHOT</version><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.2.6</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</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>

前端关键代码

<!DOCTYPE html>
<html><head><!-- 页面meta --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>SpringBoot+MyBatisPlus整合的SSM案例</title><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"><!-- 引入样式 --><link rel="stylesheet" href="../plugins/elementui/index.css"><link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css"><link rel="stylesheet" href="../css/style.css">
</head><body class="hold-transition">
<div id="app"><div class="content-header"><h1>图书管理</h1></div><div class="app-container"><div class="box"><div class="filter-container"><el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;"class="filter-item" clearable @input="handleInput($event,'type')"></el-input><el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;"class="filter-item" clearable @input="handleInput($event,'name')"></el-input><el-input placeholder="图书描述" v-model="pagination.description" style="width: 200px;"class="filter-item" clearable @input="handleInput($event,'description')"></el-input><el-button type="info" plain class="dalfBut" @click="handleSearch">查询</el-button><el-button type="success" plain class="butT" @click="handleDialog(undefined, '1')">新建</el-button></div><el-tablesize="small"current-row-key="id":data="dataList"stripehighlight-current-row><el-table-column type="index" align="center" label="序号"></el-table-column><el-table-column prop="type" label="图书类别" align="center"></el-table-column><el-table-column prop="name" label="图书名称" align="center"></el-table-column><el-table-column prop="description" label="描述" align="center"></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-button type="primary" plain size="mini" @click="handleDialog(scope.row, '2')">编辑</el-button><el-button type="danger" plain size="mini" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!--分页组件--><div class="pagination-container"><el-paginationclass="pagiantion"@current-change="handleCurrentChange"@size-change="handlePageSize":current-page="pagination.currentPage":page-size="pagination.pageSize":page-sizes="[5, 10, 15, 30]"layout="total, sizes, prev, pager, next, jumper":total="pagination.total"></el-pagination></div><!-- 新增/编辑标签弹层 --><div class="add-form"><el-dialog :title="dialogTitle==='1'?'新增图书':'编辑图书'" :visible.sync="isDialogAddEdit"@close="handleClose"><el-form :model="formData" :rules="rules" ref="refForm" label-position="right"label-width="100px"><el-row><el-col :span="12"><el-form-item label="图书类别" prop="type"><el-input v-model="formData.type"/></el-form-item></el-col><el-col :span="12"><el-form-item label="图书名称" prop="name"><el-input v-model="formData.name"/></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="描述"><el-input v-model="formData.description" type="textarea"></el-input></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button @click="isDialogAddEdit=false">取消</el-button><el-button type="primary" @click="handleSave()">保存</el-button></div></el-dialog></div></div></div>
</div>
</body><!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>new Vue({el: '#app',data: {// 当前页要展示的列表数据dataList: [],// 添加表单是否可见isDialogAddEdit: false,dialogTitle: '1',// 表单数据formData: {},// 校验规则rules: {type: [{required: true,message: '图书类别为必填项',trigger: 'blur'}],name: [{required: true,message: '图书名称为必填项',trigger: 'blur'}]},// 分页相关模型数据pagination: {// 当前页码currentPage: 1,// 每页显示的记录数pageSize: 5,// 总记录数total: 0,type: '',name: '',description: ''},// 整页加载fullPageLoading: undefined},// 钩子函数,VUE对象初始化完成后自动执行created() {// 调用查询全部数据的操作this.getAll();},methods: {// 列表加分页查询getAll() {let {currentPage,pageSize,type,name,description} = this.pagination,param = '';param += `?type=${type}&name=${name}&description=${description}`;this.handleFullPageLoading('start');// 发送异步请求axios.get(`/books/${currentPage}/${pageSize}${param}`).then(({data: {flag, data: {records, total, size, current}}}) => {if (flag) {this.pagination.currentPage = current;this.pagination.pageSize = size;this.pagination.total = total;this.dataList = records;} else {this.$message.error('出错了');}}).finally(() => {this.handleFullPageLoading('stopping');}).catch(() => {this.$message.error('出错了');});},// 整页(页面)加载handleFullPageLoading(type) {if (type === 'start') {this.fullPageLoading = this.$loading({lock: true,text: '加载中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'});} else if (type === 'stopping' && this.fullPageLoading) {this.fullPageLoading.close();this.fullPageLoading = undefined;}},// 打开新增/编辑面板handleDialog(row, str) {this.dialogTitle = str;this.isDialogAddEdit = true;if (str === '2') this.getById(row);},// 关闭新增/编辑面板handleClose() {this.$refs.refForm.resetFields();this.$refs.refForm.clearValidate();this.formData = {};},// 保存handleSave() {this.$refs.refForm.validate(valid => {if (!valid) return this.$message.warning('必填项内容为空');if (this.dialogTitle === '1') {this.handleAdd();} else {this.handleEdit();}});},// 添加handleAdd() {axios.post("/books", this.formData).then(({data: {flag, msg}}) => {if (flag) {this.$message.success(msg);this.getAll();this.isDialogAddEdit = false} else {this.$message.error(msg);}}).catch(() => {this.$message.error('出错了');});},// 删除handleDelete(row) {this.$confirm('此操作永久删除当前信息,是否继续?','提示',{type: "warning"}).then(() => {axios.delete("/books/" + row.id).then(({data: {flag, msg}}) => {// 判断当前操作是否成功if (flag) {this.$message.success(msg);this.getAll();} else {this.$message.error(msg);}}).catch(() => {this.$message.error('出错了');});}).catch(() => {this.$message.info('已取消');});},// 通过id获取数据getById(row) {axios.get('/books/' + row.id).then(({data: {flag, data}}) => {if (flag && data !== null) {this.formData = data;} else {this.$message.error('出错了');}}).catch(() => {this.$message.error('出错了');});},// 编辑handleEdit() {axios.put("/books", this.formData).then(({data: {flag, msg}}) => {// 判断当前操作是否成功if (flag) {this.$message.success(msg);this.getAll();this.isDialogAddEdit = false} else {this.$message.error(msg);}}).catch(() => {this.$message.error('出错了');});},// 切换页码handleCurrentChange(currentPage) {if (this.pagination.currentPage === currentPage) return false;this.pagination.currentPage = currentPage;this.$nextTick(() => this.getAll());},// 页码大小handlePageSize(pageSize) {if (this.pagination.pageSize === pageSize) return false;this.pagination.pageSize = pageSize;this.$nextTick(() => this.getAll());},// 搜索输入框值变化handleInput(e, searchField) {if (!e) {this.pagination[searchField] = e;this.$nextTick(() => this.getAll());}},// 查询handleSearch() {let {type,name,description} = this.pagination;if (type || name || description) this.getAll();}}});
</script></html>

完整代码

下载

git clone -b back-end-services https://gitee.com/mssj200224/open-resources.git

项目

1、找到仓库中名为singleFableFullStack文件夹复制出来。
2、使用idea打开项目即可运行。

相关文章:

SpringBoot+MyBatisPlus+MySql+vue2+elementUi的案例、java访问数据库服务、java提供接口服务

文章目录 前言后端关键代码前端关键代码完整代码 前言 1、项目不使用前后端分离。 2、在创建SpringBoot的时候要注意各个插件间的版本问题。 3、后端技术SpringBootMyBatisPlusMySql。 4、前端技术vue2elementUi。 后端关键代码 简单介绍 1、数据库名称ssm_db 2、表名称tbl_bo…...

设计模式入门(二)观察者模式

设计模式入门 本系列所有内容参考自《HeadFirst设计模式》。因为书中的代码是采用java语言写的&#xff0c;博主这里用C语言改写。 这里采用讲故事的方式进行讲解。若有错误之处&#xff0c;非常欢迎大家指导。 设计模式&#xff1a;模式不是代码&#xff0c;而针对设计问题的…...

列化复杂的xml对应的类

你能帮我写一个序列化复杂的xml对应的类吗? c#代码 好的,可以试着为一个复杂的XML生成对应的C#类。这里我就简单的XML为例: <Book><Name>Design Patterns</Name><Author>Erich Gamma</Author><Pages>395</Pages><Chapters>…...

什么是软件开发生命周期(SDLC)?

软件开发生命周期&#xff08;SDLC&#xff09;指的是从软件项目开始到最终交付的整个过程。它是软件开发过程的指导框架&#xff0c;用于规划、开发、测试、部署和维护软件系统。 SDLC包含了一系列阶段&#xff0c;每个阶段都有特定的任务、活动和产物。这些阶段通常包括以下…...

计算机视觉中常用的角点检测算法及其作用

角点检测是计算机视觉中的重要任务&#xff0c;用于识别图像中的角点或关键点。以下是一些常用的角点检测算法&#xff1a; Harris角点检测&#xff1a;Harris角点检测是一种经典的角点检测算法&#xff0c;它通过计算图像中每个像素的角点响应函数来检测角点。Harris角点检测对…...

css3英文文字换行,超过两行...展示

需求&#xff1a;超过两行...展示 开发的过程中发现div内容中文可以换行英文不换行&#xff0c;导致长度会溢出。 是英文全英文的话浏览器会解析成一个单词&#xff0c; 加上这句就好了 word-break:break-all; 一开始不知道是会解析成一个单词&#xff0c;用字符串拼接处理…...

查各种金属非金属材料的物性参数方法

背景 上面给了任务&#xff0c;要做调研&#xff0c;各种材料的各种参数&#xff0c;高温的、低温的、常温的、常压的、高压的、低压的。 网上搜出来很多材料的参数都是各种卖材料的厂商给出的&#xff0c;也不晓得他们的测量结果可不可信&#xff0c;有没有一个权威机构背书…...

【数据库】查询PostgreSQL中所有表逻辑外键

引言 在PostgreSQL数据库中&#xff0c;逻辑外键是用于约束表之间关系的一种机制。然而&#xff0c;在某些情况下&#xff0c;我们可能需要删除和重建逻辑外键。本文将介绍如何查询PostgreSQL中所有表的逻辑外键&#xff0c;并指导您如何先删除再重新建立这些外键。 查询Post…...

【Kubernetes理论篇】2023年最新CKA考题+解析

文章目录 第一题&#xff1a;RBAC授权访问控制第二题&#xff1a;Node节点维护第三题&#xff1a;K8S集群版本升级第四题&#xff1a;ETCD数据库备份恢复第五题&#xff1a;NetworkPolicy网络策略第六题&#xff1a;Service四层负载第七题&#xff1a;Ingress七层负载第八题&am…...

【Linux】目录结构、路径

目录 1. 目录结构 1.1 基本概念 1.2 具体的目录结构 2. 路径 2.1 绝对路径和相对路径 2.2 特殊路径符 1. 目录结构 1.1 基本概念 Linux的目录结构是一个树形结构。 Windows系统可以拥有多个盘符&#xff0c;如 C盘、D盘、E盘。Linux没有盘符这个概念&#xff0c;只有一…...

Java-集合框架-List,Set,Map,队列

文章目录 Java集合框架&#xff1a;List&#xff0c;Set&#xff0c;Map&#xff0c;队列Java集合框架是什么&#xff1f;如何使用&#xff1f;ListSetMap队列 什么场景使用&#xff1f;优缺点是什么&#xff1f;ListSetMap队列 Java示例List示例Set示例Map示例队列示例 对比 J…...

第一章_线程基础知识

先拜拜大神 Doug Lea&#xff08;道格.利&#xff09; java.util.concurrent在并发编程中使用的工具包 为什么学习并用好多线程极其重要 硬件方面 摩尔定律失效 摩尔定律&#xff1a;它是由英特尔创始人之一Gordon Moore&#xff08;戈登.摩尔&#xff09;提出来的。其内容为…...

linux(centos7)定时关机解决方案

使用场景与痛点&#xff1a; 根据实际需求&#xff0c;每个星期五都要关闭服务器若干&#xff0c;痛点如下&#xff1a; 1是服务器比较多&#xff0c;按起来麻烦。2是因为周五时间点特殊&#xff0c;着急下班容易忘记关闭服务器。那些要关注才能看的博客&#xff0c;不是我喷&a…...

reactnative笔记

1、React Native 搭建开发环境和创建新项目并运行的详细教程_react项目怎么运行_AaVictory.的博客-CSDN博客 环境搭建遇到报错靠下面两个解决的&#xff08;模拟器的adb和reactnative的adb版本不同&#xff0c;且都配置环境&#xff09; 2、 adb server version (41) doesn‘t…...

软件架构模式+系统架构

架构模式对比 分层模式 一般信息系统中最常见的4层划分如下&#xff1a; Presentation layer 表示层&#xff08;也就是UI层&#xff09;Application layer 应用层&#xff08;也就是服务层&#xff09;Business logic layer 业务逻辑层&#xff08;也就是领域层&#xff09;…...

SQL 语句学习总结:

1. 四范式&&范式好处&#xff1a; 数据库范式是数据表设计的规范&#xff0c;在范式规范下&#xff0c;数据库里每个表存储的重复数据降到最少&#xff08;这有助于数据的一致性维护&#xff09;&#xff0c;同时在数据库范式下&#xff0c;表和表之间不再有很强的数据…...

【Linux】简单的小程序:进度条

在学习进度条之前&#xff0c;需要学一点预备知识。 1. 预备知识 回车换行 现在的换行符&#xff08;\n&#xff09;其实就是回车式换行符&#xff0c;另起一行&#xff0c;光标指向最新一行的开头。回车符&#xff08;\r&#xff09;是光标指向这一行的开头。 缓冲区 &a…...

Ansible之playbooks剧本

文章目录 一.playbooks介绍1.playbooks简述2.playbooks剧本格式3.playbooks组成部分4.运行playbooks及检测文件配置 二.模块实战实例1.playbooks模块实战实例2.vars模块实战实例3.指定远程主机sudo切换用户4.when模块实战实例5.with_items迭代模块实战实例6.Templates 模块实战…...

在云原生时代,构建高效的大数据存储与分析平台

文章目录 1. **选择适当的数据存储技术&#xff1a;**2. **采用分布式架构&#xff1a;**3. **数据分区和索引&#xff1a;**4. **采用列式存储&#xff1a;**5. **数据压缩和编码&#xff1a;**6. **使用缓存技术&#xff1a;**7. **数据分片和复制&#xff1a;**8. **自动化运…...

第六章,线性变换,1-线性变换、表示矩阵、线性算子

第六章&#xff0c;线性变换&#xff0c;1-线性变换、表示矩阵、线性算子 线性变换表示矩阵 线性算子 R 2 R^2 R2中特殊的线性变换旋转变换算子反射变换算子投影变换算子伸压变换算子剪切变换算子 玩转线性代数(32)线性变换的相关概念的笔记&#xff0c;相关证明以及例子见原文…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...