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

Posted 2021-08-03 java1234_小锋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序与后端Java接口交互-图书搜索实现相关的知识，希望对你有一定的参考价值。

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-claZ8IjD-1625737659922)(C:\\Users\\java1234\\Desktop\\微信小程序\\课件\\book yanshi.gif)]$

实现大体思路，前端用户输入关键字，通过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<>();

    /**
     * 初始化模拟数据
     */
    @PostConstruct
    public 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;
}

运行效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WLYo0lgS-1625737659923)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210708001055284.png)]$

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

先实现静态的图书列表：

<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;
}

运行效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWOYhqPS-1625737659924)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210708001546188.png)]$

第四步：微信小程序端通过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:"以上是关于微信小程序与后端Java接口交互-图书搜索实现的主要内容，如果未能解决你的问题，请参考以下文章 
 微信小程序前端模糊搜索
 微信支付后端篇
 微信小程序后端代码怎样上传阿里云
 Java后端小程序微信登录怎么写？？
 微信小程序，后端用php写完接口，怎么把数据给前端，要带啥参数
 微信小程序，后端用php写完接口，怎么把数据给前端，要带啥参数