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

超、凢脫俗 2021-09-08 23:48 336阅读 0赞

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

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

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

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)\]][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)\]][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)\]][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)\]][img-QPKTmwas-1625737659926_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210708002223970.png]

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

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[img-claZ8IjD-1625737659922_C_Users_java1234_Desktop_book yanshi.gif]: /images/20210901/de35cf2211854719bd5e0c9252ef7893.png
[img-WLYo0lgS-1625737659923_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210708001055284.png]: /images/20210901/2425be618b7e44a3b63bb7df47619cd9.png
[img-fWOYhqPS-1625737659924_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210708001546188.png]: /images/20210901/2d17488af88c470ea4f16abc2969afaa.png
[img-Uv9XJBfq-1625737659925_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210708002114726.png]: /images/20210901/52ae28b8d7a9410a8edeab394f7039e7.png
[img-QPKTmwas-1625737659926_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210708002223970.png]: /images/20210901/22128dbe9ca44fc5a0960ced005d59e9.png