微信小程序与后端Java接口交互-图书搜索实现

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

我们模拟实现一个微信小程序端关键字图书，然后显示图书列表的功能，如下图：

实现大体思路，前端用户输入关键字，通过bindtap事件，事件里得到用户输入的关键字，通过wx.request请求后端，后端返回json数据，最后页面通过wx:for遍历显示图书信息；

具体实现步骤：

第一步：后端实现接口，传入参数，模拟返回图书json数据

新建Book.java实体

package com.java1234.entity;/*** @author java1234_小锋* @site www.java1234.com* @company 南通小锋网络科技有限公司* @create 2021-07-07 22:50*/
public class Book {private Integer id; // 编号private String title; // 图书名称private String author; // 作者private float price; // 价格private String image; // 图片名称public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getAuthor() {return author;}public void setAuthor(String author) {this.author = author;}public float getPrice() {return price;}public void setPrice(float price) {this.price = price;}public String getImage() {return image;}public void setImage(String image) {this.image = image;}
}

新建BookController.java类

package com.java1234.controller;import com.java1234.entity.Book;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** @author java1234_小锋* @site www.java1234.com* @company 南通小锋网络科技有限公司* @create 2021-07-04 17:43*/
@RestController
@RequestMapping("/book")
public class BookController {List<Book> bookList=new ArrayList<>();/*** 初始化模拟数据*/@PostConstructpublic void initData(){Book book1=new Book();book1.setId(1);book1.setTitle("Java从入门到精通(第五版)");book1.setAuthor("明日科技");book1.setPrice(47.50f);book1.setImage("img01.jpg");bookList.add(book1);Book book2=new Book();book2.setId(2);book2.setTitle("Java项目开发实战入门");book2.setAuthor("明日科技");book2.setPrice(52.10f);book2.setImage("img02.jpg");bookList.add(book2);Book book3=new Book();book3.setId(3);book3.setTitle("Java编程思想（第四版）");book3.setAuthor("Bruce Eckel");book3.setPrice(70.20f);book3.setImage("img03.jpg");bookList.add(book3);Book book4=new Book();book4.setId(4);book4.setTitle("码出高效：Java开发手册");book4.setAuthor("杨冠宝");book4.setPrice(99.00f);book4.setImage("img04.jpg");bookList.add(book4);}/*** 根据条件查询数据* @param searchContent* @return*/@ResponseBody@GetMapping("/search")public Map search(String searchContent){Map<String,Object> resultMap=new HashMap<>();System.out.println("searchContent="+searchContent);System.out.println(bookList);if("java".equals(searchContent)){resultMap.put("bookList",bookList);}return resultMap;}
}

启动项目，浏览器地址栏输入：http://localhost/book/search?searchContent=java

页面显示：

{"bookList":[{"id":1,"title":"Java从入门到精通(第五版)","author":"明日科技","price":47.5,"image":"img01.jpg"},{"id":2,"title":"Java项目开发实战入门","author":"明日科技","price":52.1,"image":"img02.jpg"},{"id":3,"title":"Java编程思想（第四版）","author":"Bruce Eckel","price":70.2,"image":"img03.jpg"},{"id":4,"title":"码出高效：Java开发手册","author":"杨冠宝","price":99.0,"image":"img04.jpg"}]}

接口测试OK

第二步：微信小程序端搜索页面以及样式实现

helloworld.xml

<view><view><view class="weui-search-bar"><view class="weui-search-bar__form"><!-- 搜索框 --><view class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" model:value="{{searchContent}}"  placeholder="请输入搜索内容"/></view></view><!-- 搜索按钮,调用搜索查询方法 --><view class="weui-search-bar__cancel-btn" bindtap='searchBook'>搜索</view></view></view>
</view>

helloworld.wxss

.weui-search-bar {position: relative;padding: 8px 10px;display: -webkit-box;display: -webkit-flex;display: flex;box-sizing: border-box;background-color: #EFEFF4;border-top: 1rpx solid #D7D6DC;border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {position: absolute;left: 10px;top: 7px;
}
.weui-search-bar__form {position: relative;-webkit-box-flex: 1;-webkit-flex: auto;flex: auto;border-radius: 5px;background: #FFFFFF;border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {position: relative;padding-left: 30px;padding-right: 30px;width: 100%;box-sizing: border-box;z-index: 1;
}
.weui-search-bar__input {height: 28px;line-height: 28px;font-size: 14px;
}
.weui-search-bar__cancel-btn {margin-left: 10px;line-height: 28px;color: #09BB07;white-space: nowrap;
}

运行效果：

第三步：微信小程序端图书列表页面以及样式实现

先实现静态的图书列表：

<view class="book"><view class="book-left"><image src="/imgs/img01.jpg" alt=""/></view><view class="book-right"><view id="title">Java从入门到精通(第五版)</view><view id="author">明日科技</view><view id="price">¥ 47.50</view></view></view><view class="book"><view class="book-left"><image src="/imgs/img02.jpg" alt=""/></view><view class="book-right"><view id="title">Java项目开发实战入门</view><view id="author">明日科技</view><view id="price">¥ 52.10</view></view></view><view class="book"><view class="book-left"><image src="/imgs/img03.jpg" alt=""/></view><view class="book-right"><view id="title">Java编程思想（第四版）</view><view id="author">Bruce Eckel</view><view id="price">¥ 70.20</view></view></view><view class="book"><view class="book-left"><image src="/imgs/img04.jpg" alt=""/></view><view class="book-right"><view id="title">Java从入门到精通 精粹版</view><view id="author">张玉宏</view><view id="price">¥ 63.00</view></view></view><view class="book"><view class="book-left"><image src="/imgs/img05.jpg" alt=""/></view><view class="book-right"><view id="title">码出高效：Java开发手册</view><view id="author">杨冠宝</view><view id="price">¥ 99.00</view></view></view>

helloworld.wxss

.book{padding: 5px 5px 3px 3px;
}.book-left{float: left;width: 200rpx;text-align: center;
}.book-left image{width: 180rpx;height: 80px;
}.book-right{padding-top: 0px;margin-left: 200rpx;height: 80px;line-height: 50rpx;border-bottom: 1px solid gray;
}
.book-right #title{font-size: 14px;
}.book-right #author{font-size: 12px;color:gray;
}.book-right #price{font-size: 14px;color:red;font-weight: bold;
}

运行效果：

第四步：微信小程序端通过tabbind事件，请求后端接口获取数据

helloworld.js

// pages/helloworld2/helloworld2.js
Page({/*** 页面的初始数据*/data: {searchContent:"",bookList:null},searchBook(e) {console.log(this.data.searchContent);var searchContent=this.data.searchContent;var that=this;// 重置数据that.setData({bookList:null})wx.request({url: 'http://localhost/book/search',method:"GET",data:{searchContent:searchContent},header: {'content-type': 'application/json' // 默认值},success(res){console.log(res.data);var bookList=res.data.bookList;console.log(that)that.setData({bookList:bookList})}})},})

点击请求，得到数据；

第五步：微信小程序获取数据后渲染页面

通过wx:for遍历数据，渲染页面

<view ><view class="book" wx:for="{{bookList}}"><view class="book-left"><image src="/imgs/{{item.image}}" alt=""/></view><view class="book-right"><view id="title">{{item.title}}</view><view id="author">{{item.author}}</view><view id="price">¥ {{item.price}}</view></view></view></view>

测试ok

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

微信小程序与后端Java接口交互-图书搜索实现相关推荐

小程序服务器端端接口,微信小程序：后端服务接口（WordPress）
微信的小程序相当于是一套前端(Frontend)应用的框架,让它变成一个真正能用的 App,我们还得给它提供一个后端服务,或者叫应用后台(Backend).几乎所有的后端应用框架都支持为小程序提供后端 ...
基于微信小程序共享停车位设计与实现SSM_car.rar（项目源码+数据库文件+微信小程序开发+后端java语言）
主要功能实现了共享车位的创建,车位的管管理,创建车辆.车辆的管理.附近车位.显示车位的编号,车位的位置,车位的状态,车位.可以查看订单记录车位.停费时间,确认时间计费的时间.可以删除,订单也可以确认是 ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序商城 (后台JAVA)
微信小程序商城(Java版) 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 mybatis3.4.1 1.3 shiro1.3.2 1.4 se ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
微信小程序+OLAMI自然语言API接口制作智能查询工具--快递、聊天、日历等
微信小程序最近比较热门,再加上自然语义理解也越来越被人关注,于是我想赶赶潮流,做一个小程序试试.想来想去快递查询应该是一种比较普遍的需求. 如果你也在通过自然语言接口做点什么,希望我的这篇博客能帮到你 ...
微信小程序：修复采集接口版云开发表情包
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...
微信小程序调用php,微信小程序调用PHP后台接口解析纯html文本
微信小程序调用php后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/home/xia ...
微信小程序如何封装api接口
微信小程序如何封装api接口一. 小程序接口请求流程二,域名配置一定要配置https,小程序上配置的域名必须是域名备案的三.打开微信开发者工具,打开你的项目,点开详情.确认一下域名是否一一匹对 ...