极简Springboot+Mybatis-Plus+Vue零基础萌新都看得懂的分页查询(富含前后端项目案例)

目录

springboot配置相关

依赖配置

yaml配置

 MySQL创建与使用

（可拿软件包+项目系统）

创建数据库

创建数据表

mybatis-plus相关

 Mapper配置

​编辑

启动类放MapperScan

启动类中配置

添加config配置文件

Springboot编码

实体类

mapperc(Dao)层

Service层

Sevice接口

Controller层

vue相关

界面展现

代码展现

解决跨域问题

config包中添加一个跨域请求允许

springboot配置相关

依赖配置

    <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.7</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency></dependencies>

yaml配置

spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/你的数据库名字?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=trueusername: 你的数据库账号password: 你的数据库密码mybatis-plus:configuration:#这个配置会将执行的sql打印出来，在开发或测试的时候可以用log-impl: org.apache.ibatis.logging.stdout.StdOutImplcall-setters-on-nulls: trueglobal-config:db-config:logic-delete-value: 1logic-not-delete-value: 0id-type: auto #ID自增

 MySQL创建与使用

（可拿软件包+项目系统）

用 Navicat软件那些数据库软件(公棕号 wmcode 自取) 随便搞个数据表

我这里就以日记系统(需要可以点进去看看)为例吧、

创建数据库

创建数据表

这里插个题外话，就是数据库有数据 删除部分之后 索引还是递增的解决方法

MySQL | 恢复数据表内的索引为初始值1（有兴趣点击查看）

mybatis-plus相关

（可以去官网复制也行）

MyBatis-Plus 🚀 为简化开发而生

 Mapper配置

继承Mybatis-Plus的接口

启动类放MapperScan

复制Mapper文件夹路径

启动类中配置

添加config配置文件

创建一个config包并创建类名任意，这里以官网给的为例

@Configuration//这里启动类有的话 就不用写了 完全可以删了
@MapperScan("scan.your.mapper.package") public class MybatisPlusConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();// 这里一定要选好数据库类型interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}

Springboot编码

实体类

package com.diarysytem.entity;import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
@TableName("diary")
public class Diary {@TableField(value = "diary_pid")private Integer tasksPid;@TableField(value = "diary_title")private String diaryTitle;@TableField(value = "diary_content")private String diaryContent;@TableField(value = "diary_mood")private double diaryMood;@TableField(value = "diary_body")private double diaryBody;@TableField(value = "diary_time")private String diaryTime;@TableField(value = "diary_delete")private int diaryDelete;}

mapperc(Dao)层

package com.diarysytem.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.diarysytem.entity.Diary;
import org.apache.ibatis.annotations.Mapper;@Mapper
public interface DiaryMapper extends BaseMapper<Diary> {
}

Service层

package com.diarysytem.service;import com.diarysytem.entity.Diary;public interface DiaryService {public boolean userInsertDiary(Diary diary);
}

Sevice接口

package com.diarysytem.service.Impl;import com.diarysytem.entity.Diary;
import com.diarysytem.mapper.DiaryMapper;
import com.diarysytem.service.DiaryService;
import lombok.AllArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class DiaryServiceImpl implements DiaryService {private DiaryMapper diaryMapper;@Autowiredpublic DiaryServiceImpl(DiaryMapper diaryMapper) {this.diaryMapper = diaryMapper;}@Overridepublic boolean userInsertDiary(Diary diary) {return diaryMapper.insert(diary) > 0;}
}

Controller层

package com.diarysytem.controller;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.diarysytem.entity.Diary;
import com.diarysytem.entity.WebDiary;
import com.diarysytem.mapper.DiaryMapper;
import com.diarysytem.service.DiaryService;
import lombok.AllArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;@RestController
@AllArgsConstructor
public class DirayController {private DiaryMapper diaryMapper;private DiaryService diaryService;// 写入日记@PostMapping("write")public Boolean userWriteDiary(@RequestBody WebDiary webDiary){Diary tempDiary = new Diary();tempDiary.setTasksPid(null);tempDiary.setDiaryTitle(webDiary.getDiaryTitle());tempDiary.setDiaryContent(webDiary.getDiaryContent());tempDiary.setDiaryMood(webDiary.getDiaryMood());tempDiary.setDiaryBody(webDiary.getDiaryBody());tempDiary.setDiaryTime(webDiary.getDiaryTime());tempDiary.setDiaryDelete(0);return diaryService.userInsertDiary(tempDiary);}//分页查询（这里方便演示就直接注入 service 了）@GetMapping("fpage")public Page<Diary> fenPages(int current,int size){Page<Diary> page = new Page<>(current,size);return diaryMapper.selectPage(page, null);}}

vue相关

以我项目为例 有需要了解下面自取

Springboot+vue自制可爱英语日记系统

界面展现

代码展现

<script>
import dayjs from 'dayjs';
import axios from 'axios';export default {data() {return {userDiaryList: [],currentPage: 1, // 当前页面totalPages: 0, // 总页面pageSize: 3 // 每个页面的数量};},created() {axios.get('http://127.0.0.1:8887/fpage', {params: {current: this.currentPage, // 页数 = sum / sizesize: this.pageSize //每页显示多少条}}).then(res => {console.log(res.data);const { records, pages, current } = res.data;this.userDiaryList = records;this.totalPages = pages;this.currentPage = current;});},methods: {getUpPage(){this.currentPage--;axios.get('http://127.0.0.1:8887/fpage', {params: {current: this.currentPage, // 页数 = sum / sizesize: this.pageSize //每页显示多少条}}).then(res => {console.log(res.data);const { records, pages, current } = res.data;this.userDiaryList = records;this.totalPages = pages;this.currentPage = current;});},getNextPage(){this.currentPage++;axios.get('http://127.0.0.1:8887/fpage', {params: {current: this.currentPage, // 页数 = sum / sizesize: this.pageSize //每页显示多少条}}).then(res => {console.log(res.data);const { records, pages, current } = res.data;this.userDiaryList = records;this.totalPages = pages;this.currentPage = current;});},userDiaryListClick(index){console.log(index);this.currentPage = index;axios.get('http://127.0.0.1:8887/fpage', {params: {current: this.currentPage, // 页数 = sum / sizesize: this.pageSize //每页显示多少条}}).then(res => {console.log(res.data);const { records, pages, current } = res.data;this.userDiaryList = records;this.totalPages = pages;this.currentPage = current;});},TImeZhuanHuan(time){try {console.log(time)const date = dayjs(time);if (!date.isValid()) {throw new Error('Invalid timestamp');}return this.formattedDate = date.format('YYYY-MM-DD HH:mm:ss');} catch (error) {console.error('Error formatting timestamp:', error);return this.formattedDate = 'Invalid timestamp';}}}
}
</script><template><div><main class="read"><h1 class="am_r_top_1 h1s">Search for diary<span class="pagsNumber">({{this.currentPage}}/{{ this.totalPages }})</span></h1><div class="search am_r_1"><span>Search</span><input type="text" placeholder="Search for diary" class="search_input"></div><div class="userDiaryItems"><div class="userDiaryList am_r_5" v-for="(item, index) in userDiaryList" :key="index"><div class="userDiaryList_left"><span class="userDiaryList_left_number">No.{{ item.tasksPid }}</span><h2>{{ item.diaryTitle }}</h2><span class="userDiaryList_left_time"><span>{{ TImeZhuanHuan(item.diaryTime) }}</span>   <span class="userStatusImg"><img  src="/public/xiai.png" alt=""> {{ item.diaryMood}}</span><span class="userStatusImg"><img  src="/public/tizhizhishu.png" alt="">  {{ item.diaryBody }}</span></span></div><div class="userDiaryList_right"><span>browse</span><span>------</span><span>delete</span></div></div></div></main><!-- 分页导航 --><div class="pages am_r_3"><button @click="getUpPage" class="buts">上一页</button><el-scrollbar style="width: 80%;padding: 10px 0;"><ul class="scrollbar-flex-content"><li v-for="index in totalPages" :key="index" class="scrollbar-demo-item" @click="userDiaryListClick(index)">{{index}}</li></ul></el-scrollbar><button @click="getNextPage" class="buts">下一页</button></div></div></template><style scoped>
.userStatusImg{padding: 0 10px;
}
.userStatusImg img{margin: 0 0 -2px 0;width: 20px;
}
.pagsNumber{padding: 0 10px;font-size: 22px;
}
.pages{display: flex;justify-content: space-evenly;align-items: center;}
.buts{border-radius: 10px;padding: 10px 5px;border: 0;background-color: rgb(248, 189, 144);color: #fff;}
.buts:hover{cursor: pointer;background-color: rgb(254, 133, 40);}.scrollbar-flex-content {padding: 15px 0;display: flex;
}
.scrollbar-demo-item {padding: 5px 15px;display: flex;align-items: center;justify-content: center;margin: 0 5px;text-align: center;border-radius: 4px;font-size: 18px;color: rgb(159, 100, 32);background-color: rgb(255, 233, 209);}
.scrollbar-demo-item:hover{cursor: pointer;background-color: rgb(255, 220, 183);}.userDiaryItems{height: 50vh;
}.pagination a{text-decoration: none;font-weight: bold;font-size: 18px;color: rgb(212, 147, 77);}
.userDiaryList{display: flex;justify-content: space-between;padding: 10px 10px 10px 10px;border-radius: 10px;margin: 10px 0;align-items: center;background-color: rgb(255, 233, 209);
}.userDiaryList_left_number{font-size: 18px;font-weight: bold;color: rgb(204, 175, 141);
}
.userDiaryList_left h2{overflow: hidden;padding: 10px 0 0px 10px;font-size: 25px;font-weight: bold;color: rgb(159, 100, 32);
}.userDiaryList_left_time{display: flex;padding: 5px 0 10px 10px;font-size: 18px;color: rgb(204, 175, 141);
}
.userDiaryList_right{display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.userDiaryList_right span{font-size: 18px;font-weight: bold;color: rgb(204, 175, 141);
}
.search{display: flex;padding: 10px 10px 10px 10px;border-radius: 10px;margin: 10px 0;align-items: center;background-color: rgb(255, 233, 209);
}
.search span{display: flex;justify-content: center;align-items: center;width: 15%;padding: 10px 0;margin: 0 5px 0 0;border-radius: 10px;font-weight: bold;font-size: 25px;color: rgb(255, 255, 255);background-color: rgb(254, 133, 40);box-shadow: 0 3px 10px rgba(201, 102, 27, 0.525);}
.search input{width: 85%;border-radius: 10px;border: 0;padding: 15px;outline: none;font-size: 18px;font-weight: bold;color: rgb(121, 91, 33);}
</style>

解决跨域问题

我前端是localhost:8888,后端是127.0.0.1:8887

我直接在后端进行跨域操作了

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 WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:8888").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true);}
}

(到底啦)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/386029.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LINUX -exec函数族

LINUX -exec函数族

1、功能&#xff1a; *让父子进程来执行不相干的操作 *能够替换进程地址空间的代码.text段 *执行另外的程序&#xff0c;不需要创建额外的的地址空间 *当前程序中调用另外一个应用程序 2、执行目录下的程序&#xff1a; *指定执行目录下的程序 int execl(const char *path,…
阅读更多...
工业三防平板，高效能与轻便性的结合

工业三防平板，高效能与轻便性的结合

在当今数字化、智能化的工业时代&#xff0c;工业三防平板作为一种创新的设备&#xff0c;正以其独特的优势在各个领域发挥着重要作用。它不仅具备高效能的处理能力&#xff0c;还拥有出色的轻便性&#xff0c;为工业生产和管理带来了前所未有的便利。 一、高效能的核心动力 工…
阅读更多...
Python爬虫-中国汽车市场月销量数据

Python爬虫-中国汽车市场月销量数据

前言 本文是该专栏的第34篇，后面会持续分享python爬虫干货知识，记得关注。 在本文中，笔者将通过某汽车平台，来采集“中国汽车市场”的月销量数据。 具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。废话不多说，下面跟着笔者直接往下看正文详细内容。（附…
阅读更多...
GroupMamba实战：使用GroupMamba实现图像分类任务（一）

GroupMamba实战：使用GroupMamba实现图像分类任务（一）

摘要 状态空间模型&#xff08;SSM&#xff09;的最新进展展示了在具有次二次复杂性的长距离依赖建模中的有效性能。GroupMamba解决了将基于SSM的模型扩展到计算机视觉领域的挑战&#xff0c;特别是大型模型尺寸的不稳定性和低效性。GroupMamba在ImageNet-1K的图像分类、MS-CO…
阅读更多...
DC－DC 反激式电路的共模噪声分析

DC－DC 反激式电路的共模噪声分析

本系列文章的第 5 和第 6 部分[1-7]介绍有助于抑制非隔离 DC-DC 稳压器电路传导和辐射电磁干扰 (EMI) 的实用指南和示例。当然&#xff0c;如果不考虑电隔离设计&#xff0c;DC-DC 电源 EMI 的任何处理方式都不全面&#xff0c;因为在这些电路中&#xff0c;电源变压器的 EMI 性…
阅读更多...
Python常用内置库介绍

Python常用内置库介绍

Python作为一门强大且易学的编程语言&#xff0c;内置了许多功能强大的库&#xff0c;让开发者能够更加便捷地完成各种任务。本文中&#xff0c;我将详细介绍Python中常用的内置库。 math&#xff1a;提供数学函数&#xff0c;如三角函数、对数函数等。 示例&#xff1a;计算平…
阅读更多...
web后端--Spring事务管理

web后端--Spring事务管理

事务也要日志配置 !!!!debug前面记得加空格 logging:level:org.springframework.jdbc.support.JdbcTransactionManager: debugrollbackFor 默认情况下&#xff0c;只有出现RunTimeException才会回滚事务&#xff0c;rollbackfor属性用于控制出现何种异常类型&#xff0c;回滚…
阅读更多...
Golang | Leetcode Golang题解之第292题Nim游戏

Golang | Leetcode Golang题解之第292题Nim游戏

题目&#xff1a; 题解&#xff1a; func canWinNim(n int) bool {return n%4 ! 0 }
阅读更多...
前端开发调试工具推荐分类整理

前端开发调试工具推荐分类整理

具体前往&#xff1a;前端调试工具分类整理汇总
阅读更多...
创维汽车滁州永通体验中心开业仪式暨超充车型区域上市会圆满成功

创维汽车滁州永通体验中心开业仪式暨超充车型区域上市会圆满成功

2024年7月20日&#xff0c;创维汽车滁州永通体验中心盛大开业&#xff0c;当日&#xff0c;创维汽车市场部经理周世鹏、安徽大区总监王大明等领导参加本次开业盛典&#xff0c;共同见证创维汽车滁州永通体验中心成功落地。 2021年&#xff0c;新能源乘用车高速发展&#xff0c;…
阅读更多...
Yak Runner 新版本，City不City？

Yak Runner 新版本，City不City？

现在直接打开Yak Runner&#xff0c;在最中间的位置将会有三个选项以供选择&#xff0c;分别是新建文件、打开文件和打开文件夹。新建文件允许你快速的打开一个临时文件&#xff0c;以便你快速开发一个小脚本或者是使用某些你急需使用到的函数&#xff08;你知道的&#xff0c;…
阅读更多...
引用的项目“xxxx/tsconfig.node.json”可能不会禁用发出。

引用的项目“xxxx/tsconfig.node.json”可能不会禁用发出。

vue3 报错&#xff1a; 引用的项目“xxxx/tsconfig.node.json”可能不会禁用发出。 解决&#xff1a; 进入对应的 json 文件&#xff1a; 修改&#xff1a; "noEmit": false 当 noEmit 设置为 false 时&#xff0c;TypeScript 编译器将根据项目配置生成相应的输出文…
阅读更多...
Jvm基础（一）

Jvm基础（一）

目录 JVM是什么运行时数据区域线程私有1.程序计数器2.虚拟机栈3.本地方法栈 线程共享1.方法区2.堆 二、对象创建1.给对象分配空间(1)指针碰撞(2)空闲列表 2.对象的内存布局对象的组成Mark Word类型指针实例数据&#xff1a;对齐填充 对象的访问定位句柄法 三、垃圾收集器和内存…
阅读更多...
瑞芯微平台RK3568系统开发（2）Camera 开发1

瑞芯微平台RK3568系统开发（2）Camera 开发1

1. 前言 1.1 RK3568硬件框图 1.2 开发流程 通过gstreamer/rockit来在rockchip平台上做multimedia的开发&#xff1a; vpu_service--> mpp --> gstreamer/ffmpeg --> app vpu_service&#xff1a;驱动 mpp&#xff1a;rockchip平台的视频编解码中间件,相关说明参考…
阅读更多...
vue3+ts+vite+electron+electron-packager打包成exe文件

vue3+ts+vite+electron+electron-packager打包成exe文件

目录 1、创建vite项目 2、添加需求文件 3、根据package.json文件安装依赖 4、打包 5、electron命令运行 6、electron-packager打包成exe文件 Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron 1、创建vite项目 npm create vitelatest 2、添…
阅读更多...
【解决方案】华普微汽车智能钥匙解决方案

【解决方案】华普微汽车智能钥匙解决方案

一、方案概述 1.什么是被动式无钥匙进入 "被动式无钥匙进入"&#xff08;Passive Keyless Entry&#xff09;是一种用于车辆、建筑物或其他设施的访问控制系统。它利用无线射频技术自动判断用户是否接近&#xff0c;并进行身份识别以执行开锁或落锁动作&#xff0c…
阅读更多...
LabVIEW操作系列1

LabVIEW操作系列1

系列文章目录 我的记录&#xff1a; LabVIEW操作系列 文章目录 系列文章目录前言五、特殊用法5.1 取值范围表示5.2 对输入值取值范围进行限定5.3 控制多个While循环停止运行。5.4 获取按钮上的文本5.5 获取按钮上的文本【进阶】 六、使用步骤1.引入库2.读入数据 七、其余功能7.…
阅读更多...
nodejs与npm版本对应表

nodejs与npm版本对应表

Node.js — Node.js 版本 (nodejs.org)
阅读更多...
go语言day20 使用gin框架获取参数 使用自定义的logger记录日志

go语言day20 使用gin框架获取参数 使用自定义的logger记录日志

Golang 操作 Logger、Zap Logger 日志_golang zap-CSDN博客 目录 一、 从控制器中获取参数的几种形式 1&#xff09; 页面请求url直接拼接参数。 2&#xff09; 页面请求提交form表单 3&#xff09; 页面请求发送json数据&#xff0c;使用上下文对象c的BindJSON()方法接…
阅读更多...
Java中static静态变量--继承等相关知识

Java中static静态变量--继承等相关知识

目录 static 继承&#xff1a; 继承的特点&#xff1a; 案例&#xff1a;自己设计一个继承体系练习&#xff1a; 设计思想&#xff1a; 代码&#xff1a; 子类到底能继承父类的哪些类容&#xff1f; 成员变量内存的继承情况&#xff1a; 成员方法的内存继承情况&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023