微信小程序实战 (微信小程序实现图书查询功能)

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
云数据库 RDS PostgreSQL,高可用系列 2核4GB
简介: 微信小程序实战 (微信小程序实现图书查询功能)

上一篇简单的写了个微信小程序调用后端接口的demo,这一篇在此基础上做一个通过小程序调用后端实现图书查询功能。

1.思路

在前端输入框输入图书信息,通过bindtap事件获取输入的关键字,点击搜索时调用后端接口传入关键字进行查询。然后根据返回的数据进行遍历展示。

2.后端代码

gitee地址

2.1 导入依赖

导入lombok依赖 自动生成get、set、有无参构造方法

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

导入数据库相关依赖

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>1.3.2</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>

使用mtbatisX插件生成代码 ,参考:上一篇:mybatisx 插件的踩坑使用

生成Book实体类文件

package com.ctsi.sddx.pojo;
import java.io.Serializable;
import java.math.BigDecimal;
import lombok.Data;
/**
 * 
 * @TableName xcx_book
 */
@Data
public class XcxBook implements Serializable {
    /**
     * 编号
     */
    private Integer id;
    /**
     * 图书名称
     */
    private String title;
    /**
     * 作者
     */
    private String author;
    /**
     * 价格
     */
    private BigDecimal price;
    /**
     * 图片名称
     */
    private String image;
    private static final long serialVersionUID = 1L;
    @Override
    public boolean equals(Object that) {
        if (this == that) {
            return true;
        }
        if (that == null) {
            return false;
        }
        if (getClass() != that.getClass()) {
            return false;
        }
        XcxBook other = (XcxBook) that;
        return (this.getId() == null ? other.getId() == null : this.getId().equals(other.getId()))
            && (this.getTitle() == null ? other.getTitle() == null : this.getTitle().equals(other.getTitle()))
            && (this.getAuthor() == null ? other.getAuthor() == null : this.getAuthor().equals(other.getAuthor()))
            && (this.getPrice() == null ? other.getPrice() == null : this.getPrice().equals(other.getPrice()))
            && (this.getImage() == null ? other.getImage() == null : this.getImage().equals(other.getImage()));
    }
    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((getId() == null) ? 0 : getId().hashCode());
        result = prime * result + ((getTitle() == null) ? 0 : getTitle().hashCode());
        result = prime * result + ((getAuthor() == null) ? 0 : getAuthor().hashCode());
        result = prime * result + ((getPrice() == null) ? 0 : getPrice().hashCode());
        result = prime * result + ((getImage() == null) ? 0 : getImage().hashCode());
        return result;
    }
    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append(getClass().getSimpleName());
        sb.append(" [");
        sb.append("Hash = ").append(hashCode());
        sb.append(", id=").append(id);
        sb.append(", title=").append(title);
        sb.append(", author=").append(author);
        sb.append(", price=").append(price);
        sb.append(", image=").append(image);
        sb.append(", serialVersionUID=").append(serialVersionUID);
        sb.append("]");
        return sb.toString();
    }
}

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ctsi.sddx.cms.respository.product.mapper.ProductMapper">
    <resultMap id="BaseResultMap" type="com.ctsi.sddx.cms.domain.product.entity.ProductBO">
        <id column="id" property="id" jdbcType="INTEGER"/>
        <result column="product_code" property="productCode" jdbcType="VARCHAR"/>
        <result column="product_name" property="productName" jdbcType="CHAR"/>
        <result column="product_model" property="productModel" jdbcType="DATE"/>
        <result column="product_type" property="productType" jdbcType="VARCHAR"/>
        <result column="product_describe" property="productDescribe" jdbcType="VARCHAR"/>
        <result column="product_paymathod" property="productPaymathod" jdbcType="VARCHAR"/>
        <result column="product_payinstructions" property="priductPayinstructions" jdbcType="VARCHAR"/>
        <result column="product_note" property="priductNote" jdbcType="VARCHAR"/>
        <result column="product_shelf" property="productShelf" jdbcType="VARCHAR"/>
        <result column="create_time" property="createTime" jdbcType="VARCHAR"/>
        <result column="update_time" property="updateTime" jdbcType="VARCHAR"/>
        <result column="product_label" property="productLabel" jdbcType="VARCHAR"/>
        <result column="product_image" property="productImage" jdbcType="VARCHAR"/>
        <result column="product_sort" property="productSort" jdbcType="VARCHAR"/>
        <result column="industry_type" property="industryType" jdbcType="VARCHAR"/>
        <result column="menu_name" property="menuName" jdbcType="VARCHAR"/>
        <result column="is_hot" property="isHot" jdbcType="VARCHAR"/>
    </resultMap>
    <sql id="Base_Column_List">
        p
        .
        *
        ,m.menu_name
    </sql>
    <select id="selectByPrimaryKey" parameterType="com.ctsi.sddx.cms.domain.product.entity.ProductBO"
            resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from cms_product_info p, cms_menu_info m
        where
        p.product_type=m.id
        <if test="productType!=null and productType!=''">
            and p.product_type= #{productType,jdbcType=VARCHAR}
        </if>
        <if test="productCode!=null and productCode!=''">
            and p.product_code= #{productCode,jdbcType=VARCHAR}
        </if>
        <if test="productName!=null and productName!=''">
            and product_name like concat('%',#{productName,jdbcType=VARCHAR},'%')
        </if>
        <if test="industryType!=null and industryType!=''">
            and p.industry_type= #{industryType,jdbcType=VARCHAR}
        </if>
        <if test="productLabel!=null and productLabel!=''">
            and product_label like concat('%',#{productLabel,jdbcType=VARCHAR},'%')
        </if>
        order by p.product_sort desc
    </select>
</mapper>

mapper接口

package com.ctsi.sddx.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.ctsi.sddx.pojo.XcxBook;
/**
 * @Entity com.ctsi.sddx.pojo.XcxBook
 */
@Mapper
public interface XcxBookMapper {
    List<XcxBook> findAllById(@Param("id") Integer id);
    List<XcxBook> findAll();
    List<XcxBook> findAllByTitle(@Param("title") String title);
}

BookController

package com.ctsi.sddx.controller;
import com.ctsi.sddx.mapper.XcxBookMapper;
import com.ctsi.sddx.pojo.XcxBook;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
/**
 * @Author : lizzu
 * @create 2022/10/9 11:17
 */
@RestController
@RequestMapping("v1/weChat/")
public class BookController {
    @Resource
    XcxBookMapper xcxBookMapper;
    @GetMapping("/findAllById")
    public List<XcxBook> findAllById (Integer id){
        return xcxBookMapper.findAllById(id);
    }
    @GetMapping("/findAll")
    public List<XcxBook> findAllById (){
        return xcxBookMapper.findAll();
    }
    @GetMapping("/findAllByTitle")
    public List<XcxBook> findAllByTitle (String title){
        return xcxBookMapper.findAllByTitle(title);
    }
}

数据库脚本

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for xcx_book
-- ----------------------------
DROP TABLE IF EXISTS `xcx_book`;
CREATE TABLE `xcx_book`  (
  `id` int(0) NOT NULL COMMENT '编号',
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '图书名称',
  `author` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '作者',
  `price` decimal(10, 2) NULL DEFAULT NULL COMMENT '价格',
  `image` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '图片名称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of xcx_book
-- ----------------------------
INSERT INTO `xcx_book` VALUES (1, 'java从入门到放弃', '齐XX', 66.66, 'img01.jpg');
INSERT INTO `xcx_book` VALUES (2, 'mysql从删库到跑路', '奇XX', 33.22, 'img02.jpg');
INSERT INTO `xcx_book` VALUES (3, 'Python从入门到捕蛇者说', '齐XX', 22.22, 'img03.jpg');
INSERT INTO `xcx_book` VALUES (4, 'C#从入门到入坟', '齐XX', 11.33, 'img04.jpg');
INSERT INTO `xcx_book` VALUES (5, 'C++从入门到脊椎病康复', '齐XX', 55.33, 'img05.jpg');
INSERT INTO `xcx_book` VALUES (6, 'PHP从看懂到看开', '齐XX', 49.98, 'img06.jpg');
SET FOREIGN_KEY_CHECKS = 1;

测试查询

网络异常,图片无法展示
|

3微信小程序端代码

gitee地址

3.1搜索页面以及静态样式实现

页面:helloworld.wxml

<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

/* pages/helloWord/helloWord.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>
  <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>
<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">mysql从删库到跑路</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">Python从入门到入狱(第四版)</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">C#从入门到入坟 精粹版</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">C++从入门到脊椎病康复</view>
    <view id="author">今日科技</view>
    <view id="price">¥ 99.00</view>
  </view>
</view>
<view class="book">
  <view class="book-left">
    <image src="/imgs/img06.jpg" alt="" />
  </view>
  <view class="book-right">
    <view id="title">PHP从看懂到看开</view>
    <view id="author">今日科技</view>
    <view id="price">¥ 99.00</view>
  </view>
</view>

效果

网络异常,图片无法展示
|

3.2通过后端接口获取数据

helloWord.js

/**
   * 页面的初始数据
   */
  data: {
    searchContent: "",
    bookList: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.searchBook();
  },
  searchBook(e) {
    console.log(this.data.searchContent);
    var title = this.data.searchContent;
    var that = this;
    // 重置数据 
    that.setData({
      bookList: null
    }) 
    wx.request({
      url: 'https://6016a95m81.zicp.fun/v1/weChat/findAllByTitle',
      method: "GET",
      data: {
        title: title
      },
      header: {
        'content-type': 'application/json' // 默认值 
      },
      success(res) {
        console.log(res.data);
        var bookList = res.data;
        console.log(that) 
        that.setData({
          bookList: bookList
        })
      }
    })
  },

页面修改 通过wx:for遍历bookList

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

测试

网络异常,图片无法展示
|

模糊搜索

网络异常,图片无法展示
|

下一篇:

微信小程序电商实战
相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
打赏
0
0
0
0
217
分享
相关文章
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
145 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
3794 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
1525 12
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
387 0
微信小程序多语言切换神器:简繁体切换功能完全指南
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
1390 0
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
1344 11
技术小白如何利用DeepSeek半小时开发微信小程序?
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2014 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问