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

java1234_小锋

于 2021-07-08 17:50:46 发布

阅读量1.8k

点赞数 8

分类专栏： java 文章标签：微信小程序 java

本文链接：https://blog.csdn.net/caoli201314/article/details/118579006

版权

java 专栏收录该内容

450 篇文章 126 订阅

订阅专栏

完整微信小程序(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:"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
        })
      }
    })
  },

})

点击请求，得到数据；

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

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

通过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

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

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

java1234_小锋

关注

8
点赞
踩
34

收藏

觉得还不错? 一键收藏
10
评论
微信小程序与后端Java接口交互-图书搜索实现

完整微信小程序(Java后端) 技术贴目录清单页面（必看）我们模拟实现一个微信小程序端关键字图书，然后显示图书列表的功能，如下图：实现大体思路，前端用户输入关键字，通过bindtap事件，事件里得到用户输入的关键字，通过wx.request请求后端，后端返回json数据，最后页面通过wx:for遍历显示图书信息；具体实现步骤：第一步：后端实现接口，传入参数，模拟返回图书json数据新建Book.java实体package com.java1234.entity;/** * @author
复制链接

扫一扫