4.快速实现增删改查,模糊查询功能

打开springboot项目,在com.example下建包common,在common下新建Result.java

4.1封装统一的返回数据结构

1.在Result.java中编写如下代码:

private static final String *SUCCESS*="0";
private static final String *ERROR*="-1";
private String code;//返回状态码请求成功/失败
private String msg;//报错信息
private Object data;//数据public static Result success(){Result result=new Result();result.setCode(*SUCCESS*);return result;
}
public static Result success(Object data){Result result=new Result();result.setCode(*SUCCESS*);result.setData(data);return result;
}
public static Result error(String msg){Result result=new Result();result.setCode(*ERROR*);result.setMsg(msg);return result;
}
//下面生成getter和setter方法

2.在AdminController.java下可修改:

将String 改为Result

运行结果:

{"code":"0","msg":null,"data":[{"id":1001,"name":"lili","sex":"女","age":17,"phone":"13888899999"},{"id":1002,"name":"玛丽","sex":"男","age":20,"phone":"13677777788"}]}

在json.cn上解析后:

4.2 Vue安装axios,封装request

1.在vue项目的根目录下执行命令:npm i axios -s

执行成功:

2.封装request

在src目录下,创建一个utils包,用来存放我们自己定义的工具,在utils包里创建一个request.js,来封装request请求

import **axios** from 'axios';const **request** =axios.create({baseURL: 'http://localhost:8080',timeout: 5000})
//request拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
**request**.interceptors.*request*.use(config=>{config.headers['Content-Type']= 'application/json;charset=utf-8';//config.headers['token']=user.token;//设置请求头return config
},error => {return **Promise**.reject(error)
});// response拦截器
// 可以在接口响应后统一处理结果
**request**.interceptors.*response*.use(response=>{// response.data即为后端返回的Resultlet res = response.data;// 兼容服务端返回的字符串数据if(typeof res ==='string'){res=res?**JSON**.parse(res):res}return res;},error => {**console**.log('err'+error)//for debugreturn **Promise**.reject(error)}
)
export default **request**;
5.3 查询所有管理员信息

在AdminView.vue中的<script></script>标签中添加如下代码:

import **request** from "@/utils/request";//导入的包,export default {data() {return {input:'',tableData: [删除之前写入的数据],}},//页面加载的时候做一些事情,在created里面created(){this.load();},// 定义一些页面上控件触发的事件调用的方法methods: {load(){// alt+shift+enter快捷键引入包**request**.get("/admin").then(res=>{if(res.code ==='0'){// 成功this.tableData=res.data;}else{}})},

在springboot中(后台项目):

AdminController.java:

AdminService.java

先运行springboot项目,再运行vue项目。

5.4 按条件查询管理员信息

1.AdminView.vue,如下图所示:

在搜索按钮处加上点击事件

<el-button type="warning" style="margin-left: 10px" @click="findBySearch()">搜索</el-button>

2.操作后台Springboot

①AdminController.java

@GetMapping("/search")
public Result findBySearch(Params params){List<Admin> list=adminService.findBySearch(params);return Result.*success*(list);
}

根据错误提示跳转到AdminService.java中生成相应代码,在此之前,先完成②:

②在entity文件夹下新建Params类,私有化属性,并实现getter/setter方法

//私有化属性

private String name; private String sex; private Integer age; private String phone;

//get,set方法

...自动生成

③AdminService.java

public List<Admin> findBySearch(Params params) {​    return adminDao.findBySearch(params);
}

根据错误提示跳转到AdminDao.java中生成相应代码

③AdminDao.java代码如下:

List<Admin> findBySearch(@Param("params") Params params);

④ 在AdminMapper.xml下编写如下代码:

<select id="findBySearch" resultType="com.example.entity.Admin">select * from admin<where><if test="params != null and params.name!=null and params.name!=''">and name like concat('%',#{params.name},'%')</if><if test="params != null and params.sex!=null and params.sex!=''">and sex like concat('%',#{params.sex},'%')</if><if test="params != null and params.age!=null and params.age!=''">and age like concat('%',#{params.age},'%')</if><if test="params != null and params.phone!=null and params.phone!=''">and phone like concat('%',#{params.phone},'%')</if></where></select>

运行后报错:

解决方法:

MyBits里的配置路径不对,在*与.xml中间多写了一个空格。

3.清空搜索内容

添加清空按钮

<el-button type="warning" style="margin-left: 10px" @click="reset">清空搜索内容</el-button>

methods方法里:

reset(){ this.params={ name: '', phone:'' } this.findBySearch(); },

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

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

相关文章

智能穿戴时代 | 米客方德SD NAND的崭新优势

SD NAND在智能穿戴上的优势 SD NAND是一种可以直接焊接在智能穿戴设备主板上的存储芯片&#xff0c;其小型化设计有助于紧凑设备尺寸&#xff0c;同时提供可靠的嵌入式存储解决方案。 这种集成设计减少了空间占用&#xff0c;同时确保设备在高度活动的环境中更为稳定。SD NAND…

[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-动态系统建模与分析 Ch02-12课程介绍电路系统建模、基尔霍夫定律 流量 flow rate q q q m 3 / s m^3/s m3/s 体积 volume V V V m 3 m^3 m3 高度 heigh h h h m m m 压强 pressure p p p …

【Java】CompletableFuture使用方法

背景 CompletableFuture是Java 8中引入的一个类&#xff0c;它实现了Future和CompletionStage接口&#xff0c;用于表示异步计算的结果。使用CompletableFuture可以方便地编写异步编程的代码&#xff0c;并且可以链式地组合多个异步操作。 接口 CompletableFuture实现了Future…

Jvm垃圾收集器系列之Parallel Scavenge收集器(个人见解仅供参考)

问&#xff1a;什么是Parallel Scavenge&#xff1f; 答&#xff1a;Parallel Scavenge是Java HotSpot虚拟机中的一种垃圾收集器&#xff0c;它主要用于提高应用程序的吞吐量。 问&#xff1a;Parallel Scavenge的主要目标是什么&#xff1f; 答&#xff1a;Parallel Scavenge的…

Azure Machine Learning - 人脸识别任务概述与技术实战

Azure AI 人脸服务提供了可检测、识别和分析图像中的人脸的 AI 算法。 人脸识别软件在许多不同情形中都十分重要&#xff0c;例如识别、无接触访问控制和实现隐私的人脸模糊。你可以通过客户端库 SDK&#xff0c;或者直接调用 REST API 使用人脸服务。 目录 一、人脸识别服务场…

【Android】如何设置应用程序启动Activity(应用启动时显示的界面)

前言 在Android中&#xff0c;AndroidManifest.xml文件可以通过修改来设置应用启动时显示的界面&#xff0c;即启动Activity。 操作步骤 打开AndroidManifest.xml文件。 在文件中找到想要设置为启动Activity的<activity>元素。该元素通常在<application>元素内部…

非小米电脑安装小米电脑管家

博客地址 雪饼 (xue6ing.cn) 前言 小米电脑管家是一款专为小米笔记本用户设计的电脑管理软件。它提供了一系列强大的功能&#xff0c;包括驱动管理、硬件信息、设备互联等。其内置了小米的HyperConnect跨端智联功能。 如果是小米手机用户的话非常建议你安装&#xff01;因为…

EasyExcel写出包含多个sheet页的Excel

https://blog.csdn.net/qq_38751895/article/details/131852740

虚拟机添加显示屏

1、关闭虚拟机&#xff0c;虚拟机在为关机的情况下&#xff0c;虚拟机设置->显示器->监视器 都是灰色的&#xff0c;不能设置&#xff1b; 2、虚拟机设置->显示器->监视器 “监视器数量” 设置为2 “拉伸模式” 不要勾选 点确定 3、点击 查看->循环使用多个…

增删改查语句实现了解不同的函数与特殊字符unionunion all区别

目录 一、crud&#xff08;增删改查&#xff09; 1.1、查询 概念&#xff1a; 语法&#xff1a; 分组 筛选 排序 分页 1.2、增加 概念&#xff1a; 语法&#xff1a; 方式一&#xff1a;insert into 表名 values (值&#xff0c;值....) 方式二&#xff1a;&#x…

福建科立讯通信 指挥调度管理平台 多处文件上传漏洞复现

0x01 产品简介 福建科立讯通信指挥调度管理平台是一个专门针对通信行业的管理平台。该产品旨在提供高效的指挥调度和管理解决方案,以帮助通信运营商或相关机构实现更好的运营效率和服务质量。该平台提供强大的指挥调度功能,可以实时监控和管理通信网络设备、维护人员和工作任…

CComboBox重载在CListCtrl中使用

1、CComboBox的重载 .h #pragma once #include "afxwin.h" /* List Ctrl使用 只有再次点击别的地方的时候才会隐藏 */class CComboBoxList :public CComboBox {public:CComboBoxList();~CComboBoxList();protected:DECLARE_MESSAGE_MAP()protected:afx_msg void On…

JVM工作原理与实战(六):类的生命周期-连接阶段

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、类的生命周期 1.加载&#xff08;Loading&#xff09; 2.连接&#xff08;Linking&#xff09; 3.初始化&#xff08;Initialization&#xff09; 4.使用&#xff08;Using&…

从C到C++ | 类和对象(上)

目录 类的引入 类的定义 类的访问限定符 类的定义方式 类的作用域 类的实例化 this指针 类的引入 C语言的struct结构体中只能定义成员变量&#xff0c;在C中&#xff0c;struct结构体不仅能定义成员变量&#xff0c;还能定义成员函数。比如&#xff0c;在C语言中&#x…

【CSS】设置0.5px的边框宽度

直接写border: 0.5px solid red; 这样在移动端可能会出现问题&#xff0c;下面说下解决办法&#xff1a; 直接上代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-C…

STM32 内部 EEPROM 读写

STM32 的某些系列 MCU 自带 EEPROM。笔者使用的 STM32L151RET6 自带 16 KB 的 EEPROM&#xff0c;可以用来存储自定义的数据。在芯片选型时&#xff0c;自带 EEPROM 也可以作为一个考量点&#xff0c;省去了在外接 EEPROM 的烦恼。 下面简单介绍下 STM32 内部 EEPROM 的读写流…

【Linux下使用docker安装搭建DVWA】

0x01 关于 DAMN VULNERABLE WEB APPLICATION&#xff08;DVWA&#xff09; Damn Vulnerable Web Application (DVWA)(译注&#xff1a;可以直译为&#xff1a;"糟糕的"不安全Web应用程序)&#xff0c;是一个编码差的、易受攻击的 PHP/MySQL Web应用程序。 它的主要目…

网页在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式

随着互联网技术的不断发展&#xff0c;越来越多的企业开始采用在线办公模式&#xff0c;微软Office Word 是最好用的文档编辑工具&#xff0c;然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的&#xff0c;如果可以实现Web在线预览编辑Of…

flink如何写入es

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、写入到Elasticsearch5二、写入到Elasticsearch7总结 前言 Flink sink 流数据写入到es5和es7的简单示例。 一、写入到Elasticsearch5 pom maven依赖 <d…

SpringBean的生命周期

SpringBean Bean的生命周期 1、首先需要明确bean对象与普通对象的区别: 对于普通的 Java 对象&#xff0c;当 new 的时候创建对象&#xff0c;然后该对象就能够使用了。一旦该对象不再被使用&#xff0c;则由 Java 自动进行垃圾回收。 而 Spring 中的对象是 bean&#xff0c;…