前言导读
大家在日常开发中肯定会遇到搜索框搜索这种需求,很多同学都会疑惑如何实现,不要着急他来了 Search 组件
今天就用过一个常用案例使用Search 实现搜索功能 请求服务器数据展示来给大家分享 。
Search api使用方法
大家去查阅官网文档即可 本文不讲解这一块
developer.huawei.com/consumer/cn…
效果图
准备工作
具体实现
build() {
Column(){
Row(){
Text('职位')
.fontSize(14)
.fontColor(Color.Black)
.textAlign(TextAlign.Start).margin({ left: 5})
Search({ value: this.changeValue, placeholder: '请输入搜索信息', controller: this.controller })
.searchButton(CommonConstant.SEARCH_TEXT)
.layoutWeight(1)
.margin({ left: 8,right:8})
.backgroundColor($r('app.color.sections_back_bg'))
.onSubmit((vaule:string)=>{
console.log("vaule -- > "+vaule);
this.search(vaule);
}).onChange((onChangevalue)=>{
console.log("onChange -- > "+onChangevalue);
})
}.width('100%')
.height(50)
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Start)
this.getlistview();
}.width('100%')
.height('100%')
}
我们再使用 Search 组件的时候需要 添加我们 controller 然后去监听我们的 onSubmit 方法和 onChange 方法
onSubmit 是我们点击 searchButton 的时候触发的 onChange 监听搜索框内容变化的方法
@Builder
private getlistview(){
List({space:commonConst.LIST_ITEM_SPACE,scroller:this.scroller}){
ForEach(this.dataList,(item:PositionData)=>{
ListItem() {
Column() {
Row(){
Text(item?.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.Black)
Text(item?.salary).fontSize(16).fontWeight(FontWeight.Bold).fontColor($r('app.color.boss_blue'))
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Text(item?.cname)
.fontSize(14)
.fontWeight(700)
.fontColor('#333')
.width('100%')
Row({space: 5}){
Text('经验不限')
.padding(5)
.borderRadius(2)
.fontSize(10)
.fontColor('#333')
.backgroundColor('#eeeeee')
Text('本科')
.padding(5)
.borderRadius(2)
.fontSize(10)
.fontColor('#333')
.backgroundColor('#eeeeee')
Text('计算机专业')
.padding(5)
.borderRadius(2)
.fontSize(10)
.fontColor('#333')
.backgroundColor('#eeeeee')
}
.width('100%')
Row({space: 10}){
Image($r('app.media.app_icon'))
.height(20)
.width(20)
.borderRadius(10)
.objectFit(ImageFit.Contain)
Text(item?.username)
.fontSize(14)
.width('100%')
.fontColor($r('app.color.boss_blue'))
}
}
.padding(10)
.width('100%')
.backgroundColor(Color.White)
.borderRadius(10)
}
})
}.width(commonConst.GOODS_LIST_WIDTH) .backgroundColor('#eeeeee')
.edgeEffect(EdgeEffect.None)
}
-
搜索请求服务器
在上面UI的 onSubmit 方法里面去调用 search方法请求服务器来展示我们接口返回的数据
async search(name:string){ let getname:string='name=' let searchurl=CommonConstant.POSITIONLIKE+getname+name httpRequestGet(searchurl).then((data)=>{ Logger.error("search请求结果=--->"+ data.toString()) let positionModel:PositionModel=JSON.parse(data.toString()) let msg:string=positionModel.msg if(positionModel.code===200){ this.searchlist=positionModel.data this.dataList.length=0 this.dataList=[] this.dataList.push(...this.searchlist) }else{ prompt.showToast({ message:msg }) } }) }
-
初始化请求服务器
async getpostition(){ let networkurl=CommonConstant.POSITIONALL httpRequestGet(networkurl).then((data)=>{ Logger.error("职位请求结果=--->"+ data.toString()); let positionModel:PositionModel=JSON.parse(data.toString()); this.JokeList=positionModel.data; this.dataList.push(...this.JokeList); }); }
-
网络请求工具类
import http from '@ohos.net.http'; import Logger from './Logger' import Constants, { ContentType } from '../common/Constants'; export function httpRequestGet(url:string,params?:string){ return httpRequest(url,http.RequestMethod.GET,params); } export function httpRequestPost(url:string,params?:string){ return httpRequest(url,http.RequestMethod.POST,params); } function httpRequest(url:string ,method:http.RequestMethod,params?:string):Promise<string>{ let httpRequest=http.createHttp(); let responseResult=httpRequest.request(url,{ method:method, readTimeout:Constants.HTTP_READ_TIMEOUT, header:{ 'Content-Type':ContentType.JSON }, connectTimeout:Constants.HTTP_READ_TIMEOUT, extraData:params }); let getjson:string=''; return responseResult.then((value:http.HttpResponse)=>{ Logger.error("请求状态-- >"+value.responseCode); if(value.responseCode===200){ Logger.error("请求成功"); let result= `${value.result}`; Logger.error("请求返回数据",JSON.parse(result)); getjson=result; }else{ getjson=''; } return getjson; }).catch(()=>{ httpRequest.destroy(); return ''; }); }
后端代码实现
-
DAO层代码实现
我们分别写了查询所有数据和模糊查询数据
@Select("select * from position where lower(name) like lower(concat('%',#{name},'%')) ") public List
getallPositionLike(@Param("name") String name); @Select("select * from position") public List getallPosition();
@Service(value = "positionService")
public class PositionServiceImpl implements PositionService {
@Autowired
PositionDao positionDao;
@Override
public List<Position> getallPositionLike(String name) {
return positionDao.getallPositionLike(name);
}
@Override
public List<Position> getallPosition() {
return positionDao.getallPosition();
}
}
-
contoller层实现
@RequestMapping("/getallpositionlike") public Object getAllPositionLinit(@RequestParam(value = "name")String name){ List<Position> data=positionService.getallPositionLike(name); Map<String,Object> map=new HashMap<>(); if(data!=null&&data.size()>0){ map.put("code",200); map.put("msg","获取数据成功"); map.put("data",data); }else{ map.put("code",100); map.put("msg","暂时没有数据"); map.put("data",data); } return map; } @RequestMapping("/getallposition") public Object getAllPosition(){ List<Position> data=positionService.getallPosition(); Map<String,Object> map=new HashMap<>(); if(data!=null&&data.size()>0){ map.put("code",200); map.put("msg","获取数据成功"); map.put("data",data); }else{ map.put("code",100); map.put("msg","暂时没有数据"); map.put("data",data); } return map; }
鸿蒙next模糊搜索功能整个前后端的代码就全部讲完了,鸿蒙ArkUI端我们主要是监听了onSubmit, 的变化来请求我们服务端来实现我们的搜索功能 ,搜索成功的时候我们需要把 dataList 置空 然后再添加数据即可, 然后去刷新我们的list组件即可。
最后总结:
鸿蒙next AkrUI 里面的 Search 功能还算是比较丰富 的,无论是搜索款内容变化的监听还是, 点击右边搜索按钮的监听都是非常方便直观。我们只需要监听变化的内容然后去请求服务器的接口来实现我们搜索工程即可, 如果有其他的需求方面可以在文章地下留言。老师看到了都会回复的,更多鸿蒙next开发相关知识的学习和交流都可以关注我掘金专栏或者B站的课程。
如果需要学习更多鸿蒙的知识可以关注我B站教程
课程地址
B站课程地址:www.bilibili.com/cheese/play…
项目内容:
-
1 常用布局组件的学习
-
2 网络请求工具类封装
-
3 arkui 生命周期启动流程
-
4 日志工具类的封装
-
5 自定义组合组件的封装
-
6 路由导航跳转的使用
-
7 本地地数据的缓存 以及缓存工具类的封装
-
8 欢迎页面的实现
-
9 登录案例和自动登录效果实现
-
10 请求网络数据分页上拉加载 下拉刷新的实现
-
11 list数据懒加载实现
-
12 webview组件的使用
团队介绍
团队介绍:作者: 坚果派-徐庆 坚果派由坚果等人创建,团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony,ArkUI-X,元服务,仓颉,团队成员聚集在北京,上海,南京,深圳,广州,宁夏等地,目前已开发鸿蒙 原生应用,三方库60+,欢迎进行课程,项目等合作。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.dandroid.cn/22065,转载请注明出处。
评论0