「小程序JAVA實戰」小程序搜索功能（55）

轉自：https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxusousuogongneng54/

經過用戶搜索熱銷詞，將熱銷詞添加到數據庫中，搜索頁面經過熱銷詞的頻率展現出來那些詞屬於熱銷詞。並添加列表參數，能夠經過搜索關鍵字查詢列表功能。源碼：https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15

後臺接口的開發。

• 增長關鍵字查詢視頻列表功能

 

VideosUserMapper.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.idig8.mapper.VideosUsersMapper" >
  <resultMap id="BaseResultMap" type="com.idig8.pojo.vo.VideosVO" >
    <!--
      WARNING - @mbg.generated
    -->
    <id column="id" property="id" jdbcType="VARCHAR" />
    <result column="user_id" property="userId" jdbcType="VARCHAR" />
    <result column="audio_id" property="audioId" jdbcType="VARCHAR" />
    <result column="video_desc" property="videoDesc" jdbcType="VARCHAR" />
    <result column="video_path" property="videoPath" jdbcType="VARCHAR" />
    <result column="video_seconds" property="videoSeconds" jdbcType="REAL" />
    <result column="video_width" property="videoWidth" jdbcType="INTEGER" />
    <result column="video_height" property="videoHeight" jdbcType="INTEGER" />
    <result column="cover_path" property="coverPath" jdbcType="VARCHAR" />
    <result column="like_counts" property="likeCounts" jdbcType="BIGINT" />
    <result column="status" property="status" jdbcType="INTEGER" />
    <result column="create_time" property="createTime" jdbcType="TIMESTAMP" />
    <result column="username" property="username" jdbcType="VARCHAR" />
    <result column="face_image" property="faceImage" jdbcType="VARCHAR" />
    <result column="nickname" property="nickname" jdbcType="VARCHAR" />
  </resultMap>

  <select id="queryAllVideos" resultMap="BaseResultMap" parameterType="String">
    select v.*,u.face_image,u.username,u.nickname from videos v
    left join users u on v.user_id = u.id
    where 
        1 = 1
        <if test="videoDesc !=null  and videoDesc != '' ">
            and v.video_desc like '%${videoDesc}%'
        </if>
        and v.status = 1
    order by v.create_time

  </select>

</mapper>

• 熱銷詞統計功能
  SearchRecordsMapper.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.idig8.mapper.SearchRecordsMapper" >
  <resultMap id="BaseResultMap" type="com.idig8.pojo.SearchRecords" >
    <!--
      WARNING - @mbg.generated
    -->
    <id column="id" property="id" jdbcType="VARCHAR" />
    <result column="content" property="content" jdbcType="VARCHAR" />
  </resultMap>

  <select id="gethotList" resultType="String">
    select content from search_records group by content order by count(content) desc
  </select>
</mapper>

• java對應xml的方法
  VideosUsersMapper.java

package com.idig8.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.idig8.pojo.Videos;
import com.idig8.pojo.vo.VideosVO;
import com.idig8.utils.MyMapper;

public interface VideosUsersMapper extends MyMapper<VideosVO> {

    public List<VideosVO> queryAllVideos(@Param("videoDesc") String videoDesc);
}

SearchRecordsMapper.java

package com.idig8.mapper;

import java.util.List;

import com.idig8.pojo.SearchRecords;
import com.idig8.utils.MyMapper;

public interface SearchRecordsMapper extends MyMapper<SearchRecords> {

    public List<String> gethotList();
}

• service 添加2個方法，
  >列表中添加保存關鍵字，查詢視頻添加關鍵字的，
  >獲取熱銷詞列表

VideoService.java

package com.idig8.service;

import java.util.List;

import com.idig8.pojo.Videos;
import com.idig8.utils.PagedResult;

public interface VideoService {


    /**
     * 保存視頻信息
     * @param Id
     * @return
     */
    public String saveVideo(Videos video);

    /**
     * 分析查詢視頻列表
     * @param video
     * @param isSaveRecord
     * @param page
     * @param pageSize
     * @return
     */
    public PagedResult getAllVideos(Videos video,Integer isSaveRecord,Integer page,Integer pageSize);

    /**
     * 獲取熱搜詞列表
     * @return
     */
    public List<String> gethostList();
}

VideoServiceImpl.java

package com.idig8.service.Impl;

import java.util.List;

import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.github.pagehelper.autoconfigure.PageHelperAutoConfiguration;
import com.idig8.mapper.SearchRecordsMapper;
import com.idig8.mapper.VideosMapper;
import com.idig8.mapper.VideosUsersMapper;
import com.idig8.pojo.SearchRecords;
import com.idig8.pojo.Videos;
import com.idig8.pojo.vo.VideosVO;
import com.idig8.service.VideoService;
import com.idig8.utils.PagedResult;

@Service
public class VideoServiceImpl implements  VideoService {

    @Autowired
    private VideosMapper videosMapper;

    @Autowired
    private VideosUsersMapper videosUsersMapper;

    @Autowired
    private SearchRecordsMapper searchRecordsMapper;

    @Autowired
    private Sid sid;

    @Transactional(propagation =Propagation.REQUIRED)
    public String  saveVideo(Videos video){
        String id = sid.nextShort();
        video.setId(id);

        videosMapper.insertSelective(video);
        return id;


    }

    @Override
    @Transactional(propagation =Propagation.REQUIRED)
    public PagedResult getAllVideos(Videos video,Integer isSaveRecord,Integer page, Integer pageSize) {

        String desc = video.getVideoDesc();
        if(isSaveRecord!=null && isSaveRecord ==1){
            SearchRecords record = new SearchRecords();
            String recordId = sid.nextShort();
            record.setId(recordId);
            record.setContent(desc);
            searchRecordsMapper.insert(record);
        }

        PageHelper.startPage(page,pageSize);
        List<VideosVO> list = videosUsersMapper.queryAllVideos(desc);
        PageInfo<VideosVO> pageList =new PageInfo<>(list);

        PagedResult result = new PagedResult();
        result.setPage(page);
        result.setTotal(pageList.getPages());
        result.setRows(list);
        result.setRecords(pageList.getTotal());

        return result;
    }

    @Transactional(propagation =Propagation.SUPPORTS)
    @Override
    public List<String> gethostList() {

        return searchRecordsMapper.gethotList();
    }
}

• controller 控制器開發

package com.idig8.controller;

import java.io.File;
import java.util.Date;
import java.util.UUID;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.idig8.pojo.Bgm;
import com.idig8.pojo.Videos;
import com.idig8.service.BgmService;
import com.idig8.service.VideoService;
import com.idig8.utils.FetchVideoCover;
import com.idig8.utils.JSONResult;
import com.idig8.utils.MergeVideoMp3;
import com.idig8.utils.PagedResult;
import com.idig8.utils.enums.VideoStatusEnum;
import com.idig8.utils.file.FileUtil;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;


@RestController
@Api(value="視頻相關業務的接口", tags= {"視頻相關業務的controller"})
@RequestMapping("/video")
public class VideoController extends BasicController {

    @Autowired
    private BgmService bgmService;

    @Autowired
    private VideoService videosService;

    @Value("${server.file.path}")
    private String fileSpace;

    @Value("${server.ffmpeg.path}")
    private String ffmpegexe;


    @ApiOperation(value="上傳視頻", notes="上傳視頻的接口")
    @ApiImplicitParams({
        @ApiImplicitParam(name="userId", value="用戶id", required=true, 
                dataType="String", paramType="form"),
        @ApiImplicitParam(name="bgmId", value="背景音樂id", required=false, 
                dataType="String", paramType="form"),
        @ApiImplicitParam(name="videoSeconds", value="背景音樂播放長度", required=true, 
                dataType="String", paramType="form"),
        @ApiImplicitParam(name="videoWidth", value="視頻寬度", required=true, 
                dataType="String", paramType="form"),
        @ApiImplicitParam(name="videoHeight", value="視頻高度", required=true, 
                dataType="String", paramType="form"),
        @ApiImplicitParam(name="desc", value="視頻描述", required=false, 
                dataType="String", paramType="form")
    })
    @PostMapping(value="/upload", headers="content-type=multipart/form-data")
    public JSONResult upload(String userId, 
                String bgmId, double videoSeconds, 
                int videoWidth, int videoHeight,
                String desc,
                @ApiParam(value="短視頻", required=true)
                MultipartFile file) throws Exception {

        if (StringUtils.isBlank(userId)) {
            return JSONResult.errorMsg("用戶id不能爲空...");
        }
        // 文件保存的命名空間
        String fileName = file.getOriginalFilename();
        // 保存到數據庫中的相對路徑
        String path = "";
        String videOutPath = "";
        String ImagePath = "";
        try {
             path = FileUtil.uploadFile(file.getBytes(), fileSpace, fileName);
            } catch (Exception e) {
                e.getStackTrace();
                   return JSONResult.errorMsg(e.getMessage());
            }                


        if(StringUtils.isNotBlank(bgmId)){
            Bgm bgm = bgmService.queryBgmById(bgmId);
            String mp3BgmPath = fileSpace + bgm.getPath();
            MergeVideoMp3 mergeVideoMp3 = new MergeVideoMp3(ffmpegexe);
            String videOutPathName = UUID.randomUUID().toString()+".mp4";
            File targetFile = new File(fileSpace + userId);
            if (!targetFile.exists()) {
                targetFile.mkdirs();
            }
            videOutPath = "/"+userId+"/"+videOutPathName;
            String videoInput = fileSpace +path;
            mergeVideoMp3.convertor(videoInput, mp3BgmPath, videoSeconds, fileSpace +videOutPath);

        }else{
            videOutPath = path;

        }

        ImagePath =  "/"+userId+"/"+UUID.randomUUID().toString()+".jpg";;
        FetchVideoCover fetchVideoCover = new FetchVideoCover(ffmpegexe);
        fetchVideoCover.getCover(fileSpace +videOutPath, fileSpace +ImagePath);


        Videos videos = new Videos();
        videos.setAudioId(bgmId);
        videos.setCreateTime(new Date());
        videos.setVideoDesc(desc);
        videos.setId(UUID.randomUUID().toString());
        videos.setUserId(userId);
        videos.setVideoHeight(videoHeight);
        videos.setVideoWidth(videoWidth);
        videos.setVideoPath(videOutPath);
        videos.setCoverPath(ImagePath);
        videos.setStatus(VideoStatusEnum.SUCCESS.value);
        videosService.saveVideo(videos);

        return JSONResult.ok(path);

    }

    @PostMapping(value="/showAll")
    @ApiOperation(value="視頻列表", notes="分頁的視頻列表")
    public JSONResult upload(@RequestBody Videos video,Integer isSaveRecord,
            Integer page) throws Exception {
        if(page == null){
            page = 1;
        }
        PagedResult result = videosService.getAllVideos(video,isSaveRecord,page, PAGE_SIZE);     
        return JSONResult.ok(result);

    }

    @PostMapping(value="/hot")
    @ApiOperation(value="熱搜詞列表", notes="熱搜詞列表")
    public JSONResult upload() throws Exception {

        return JSONResult.ok(videosService.gethostList());

    }
}

前端功能開發

調後端url，獲取熱銷關鍵字展現。

var WxSearch = require('../../wxSearchView/wxSearchView.js');
const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  onLoad: function () {


    // 2 搜索欄初始化
    var that = this;
    wx.request({
      url: app.serverUrl +"/video/hot",
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        var searchHot = res.data.data;
        WxSearch.init(
          that,  // 本頁面一個引用
          searchHot, // 熱點搜索推薦，[]表示不使用
          searchHot,// 搜索匹配，[]表示不使用
          that.mySearchFunction, // 提供一個搜索回調函數
          that.myGobackFunction //提供一個返回回調函數
        );
      }
    })



  },

  // 3 轉發函數，固定部分，直接拷貝便可
  wxSearchInput: WxSearch.wxSearchInput,  // 輸入變化時的操做
  wxSearchKeyTap: WxSearch.wxSearchKeyTap,  // 點擊提示或者關鍵字、歷史記錄時的操做
  wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 刪除全部的歷史記錄
  wxSearchConfirm: WxSearch.wxSearchConfirm,  // 搜索函數
  wxSearchClear: WxSearch.wxSearchClear,  // 清空函數

  // 4 搜索回調函數  
  mySearchFunction: function (value) {
    // do your job here
    // 示例：跳轉
    wx.redirectTo({
      url: '../index/index?isSaveRecord=1&searchValue=' + value
    })
  },

  // 5 返回回調函數
  myGobackFunction: function () {
    // do your job here
    // 示例：返回
    wx.redirectTo({
      url: '../index/index'
    })
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

• 輸入搜索後跳轉到index頁面，展現搜索結果
  >增長isSaveRecord 和 searchValue 關鍵字根據搜索傳遞過來，而後修改請求列表參數。

const app = getApp()

Page({
  data: {
    // 用於分頁的屬性
    totalPage: 1,
    page: 1,
    videoList: [],
    screenWidth: 350,
    serverUrl: "",
    searchValue:""
  },

  onLoad: function (params) {
    var me = this;
    var screenWidth = wx.getSystemInfoSync().screenWidth;
    me.setData({
      screenWidth: screenWidth,
    });

    var searchValue = params.searchValue;
    var isSaveRecord = params.isSaveRecord;
    if (isSaveRecord == null || isSaveRecord == "" || isSaveRecord == undefined){
      isSaveRecord = 0;
    }

    me.setData({
      searchValue: searchValue,
    });



    // 獲取當前的分頁數
    var page = me.data.page;
    me.getAllVideosList(page, isSaveRecord);
  },

  getAllVideosList: function (page, isSaveRecord){
    var me = this;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待，加載中...',
    });


    wx.request({
      url: serverUrl + '/video/showAll?page=' + page + "&isSaveRecord =" + isSaveRecord,
      method: "POST",
      data:{
        videoDesc: me.data.searchValue
      },
      success: function (res) {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();

        console.log(res.data);

        // 判斷當前頁page是不是第一頁，若是是第一頁，那麼設置videoList爲空
        if (page === 1) {
          me.setData({
            videoList: []
          });
        }

        var videoList = res.data.data.rows;
        var newVideoList = me.data.videoList;

        me.setData({
          videoList: newVideoList.concat(videoList),
          page: page,
          totalPage: res.data.data.total,
          serverUrl: serverUrl
        });

      }
    })
  },

  onPullDownRefresh: function (params) {
    var me = this;
    wx.showNavigationBarLoading();
    me.getAllVideosList(1,0);

  },

  onReachBottom: function (params){
    var me = this;
    var currentPage = me.data.page;
    var totalPage = me.data.totalPage;

    //判斷當前頁數和總頁數是否相等，若是相同已經無需請求
    if (currentPage == totalPage){
      wx.showToast({
        title: '已經沒有視頻啦~',
        icon:"none"
      })
      return;
    }
    var page = currentPage+1;
    me.getAllVideosList(page,0);

}


})

PS：搜索功能，後臺提供url，直接賦值到插件就能夠了，經過輸入關鍵字點擊搜索，將關鍵字保存標識傳遞，關鍵字傳遞給index頁面，index獲取後在根據關鍵字查詢結果。