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.rhkb.cn/news/230582.html

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

相关文章

ROS学习笔记(8)进一步深入了解ROS第二步

0.前提 在上一讲中我提到过该系列是基于宾夕法尼亚大学工程学院的ROS公开课&#xff0c;系列文章将来源于公开课中的课后习题。该系列可以很好的帮助大家更加深入的了解ROS的一些概念。&#xff08;有效面对HR的提问。&#xff09; 1. (C)What is a nodehandle object? Can we…

项目经验简单总结

引擎 unity 2020 语言 C# lua python(用于工具链) java (用于SDK对接) js&#xff08;PC WEB SDK对接&#xff09; 编辑器 VS VSCODE IDEA eclipse 项目开发模块规划分 主项目工程&#xff0c;UI资源项目工程&#xff0c;模型场景资源项目工程 主项目工程&#xff1a;所有的…

Excel模板填充:从minio上获取模板使用easyExcel填充

最近工作中有个excel导出的功能&#xff0c;要求导出的模板和客户提供的模板一致&#xff0c;而客户提供的模板有着复杂的表头和独特列表风格&#xff0c;像以往使用poi去画是非常耗时间的&#xff0c;比如需要考虑字体大小&#xff0c;单元格合并&#xff0c;单元格的格式等问…

vue-打包

打包的作用 说明&#xff1a;vue脚手架只是开发过程中&#xff0c;协助开发的工具&#xff0c;当真正开发完了>脚手架不参与上线 打包的作用&#xff1a; 1&#xff09;将多个文件压缩合并成一个文件 2&#xff09;语法降级 3&#xff09;less sass ts语法解析 打包后…

liunx操作系统基础及进阶

一、基础入门 1、Linux系统简介 什么是Liunx&#xff1f; Linux在设计之初&#xff0c;是一个基于POSIX的多用户、多任务并且支持多线程和多CPU的操作系统&#xff0c;它是由世界各地成千上万的程序员设计和开发实现&#xff1b; 在当今社会&#xff0c;Linux 系统主要被应…

【智慧零售】东胜物联蓝牙网关硬件解决方案,促进零售门店数字化管理

依托物联网&#xff08;IoT&#xff09;、大数据、人工智能&#xff08;AI&#xff09;等快速发展&#xff0c;数字化和智能化已成为零售企业的核心竞争力。更多的企业通过引入人工智能、大数据等先进技术手段&#xff0c;提高门店运营效率和服务质量。 某连锁咖啡企业牢牢抓住…

[嵌入式C][入门篇] 快速掌握基础(9个语句)

开发环境&#xff1a; 网页版&#xff1a;跳转本地开发(Vscode)&#xff1a;跳转 文章目录 一、基础语法&#xff08;1&#xff09;if (如果)示例1: 普通使用 if示例2: 带否则 else示例3: 否则如果 else if &#xff08;2&#xff09;switch case (选择)规则示例1: &#xff0…

谷歌浏览器 模拟定位

注意事项&#xff1a; 如果要清除位置信息&#xff0c;需将Geolocation修改为No override模拟定位之后需要刷新页面&#xff0c;网页才会生效如果模拟定位&#xff0c;一段时间没有操作&#xff0c;就会清空模拟定位&#xff0c;类似于No override

ubuntu远程桌面连接之novnc

一、前言 该操作是为了实现vnc桌面连接为url连接方式&#xff0c;且在浏览器中可以对ubuntu进行操作。在使用novnc进行操作前&#xff0c;需要先安装vnc才可。ubuntu下如何安装vnc&#xff0c;可看博主前面写的一篇文&#xff0c;ubuntu远程桌面连接之vnc-CSDN博客&#xff0c;…

案例074:基于微信小程序的儿童预防接种预约管理系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder …

物流实时数仓:数仓搭建(DWS)一

系列文章目录 物流实时数仓&#xff1a;采集通道搭建 物流实时数仓&#xff1a;数仓搭建 物流实时数仓&#xff1a;数仓搭建&#xff08;DIM&#xff09; 物流实时数仓&#xff1a;数仓搭建&#xff08;DWD&#xff09;一 物流实时数仓&#xff1a;数仓搭建&#xff08;DWD&am…

22款奔驰GLE450升级香氛负离子 车载香薰

相信大家都知道&#xff0c;奔驰自从研发出香氛负离子系统后&#xff0c;一直都受广大奔驰车主的追捧&#xff0c;香氛负离子不仅可以散发出清香淡雅的香气外&#xff0c;还可以对车内的空气进行过滤&#xff0c;使车内的有害气味通过负离子进行过滤&#xff0c;达到车内保持清…

神经网络:经典模型热门模型

在这里插入代码片【一】目标检测中IOU的相关概念与计算 IoU&#xff08;Intersection over Union&#xff09;即交并比&#xff0c;是目标检测任务中一个重要的模块&#xff0c;其是GT bbox与pred bbox交集的面积 / 二者并集的面积。 下面我们用坐标&#xff08;top&#xff0…

Oracle导出CSV文件

利用spool spool基本格式&#xff1a; spool 路径文件名 select col1||,||col2||,||col3||,||col4 from tablename; spool off spool常用的设置&#xff1a; set colsep ;    //域输出分隔符 set echo off;    //显示start启动的脚本中的每个sql命令&#xff0c;缺…

ROS学习记录:在ROS中用C++实现激光雷达避障

前言 本文建立在成功获取激光雷达数据的基础上&#xff0c;详细参考 在ROS中用C实现获取激光雷达的数据 一、实现思路 二、在VScode中打开之前编写好的lidar_node.cpp 三、在lidar_node.cpp中写入如下代码 #include <ros/ros.h> #include <std_msgs/String.h> …

k8s---pod的生命周期

pod的相关知识 pod是k8s中最小的资源管理组件 pod也是最小化运行容器化的应用的资源管理对象 pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合。 k8s中pod的两种使用方式 &#xff08;1&#xff09;一个pod中运行一个容器。"每个po中一个容器&…

知虾会员**成为知虾会员,尊享专属权益**

在当今繁忙的生活中&#xff0c;线上购物已经成为现代人们的主要消费方式之一。而作为线上购物平台的领军者之一&#xff0c;Shopee为了提供更加个性化和便利的购物体验&#xff0c;推出了知虾会员&#xff08;Shopee会员&#xff09;服务。知虾会员不仅可以享受到一系列会员专…

国产化软硬件升级之路:πDataCS 赋能工业软件创新与实践

在国产化浪潮的推动下&#xff0c;基础设施软硬件替换和升级的需求日益增长。全栈国产化软硬件升级替换已成为许多领域中的必选项&#xff0c;也引起了数据库和存储领域的广泛关注。近年来&#xff0c;虽然涌现了许多成功的替换案例&#xff0c;但仍然面临着一些问题。 数据库…

某音关键词搜索商品接口,某音关键词搜索商品列表接口,宝贝详情页接口,某音商品比价接口接入方案

要接入API接口以采集电商平台上的商品数据&#xff0c;可以按照以下步骤进行&#xff1a; 1、找到可用的API接口&#xff1a;首先&#xff0c;需要找到支持查询商品信息的API接口。这些信息通常可以在电商平台的官方文档或开发者门户网站上找到。 2、注册并获取API密钥&#x…

界面控件DevExpress Blazor Grid v23.2 - 支持全新的单元格编辑模式

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验&#xff0c;这个UI自建库提供了一套全面的原生Blazor UI组件&#xff08;包括Pivot Grid、调度程序、图表、数据编辑器和报表等&#xff09;。 在这篇文章中&#xff0c;我们将介…