「小程式JAVA實戰」小程式搜尋功能(54)
通過使用者搜尋熱銷詞,將熱銷詞新增到資料庫中,搜尋頁面通過熱銷詞的頻率展示出來那些詞屬於熱銷詞。並新增列表引數,可以通過搜尋關鍵字查詢列表功能。原始碼: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 !=nulland 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 implementsVideoService { @Autowired private VideosMapper videosMapper; @Autowired private VideosUsersMapper videosUsersMapper; @Autowired private SearchRecordsMapper searchRecordsMapper; @Autowired private Sid sid; @Transactional(propagation =Propagation.REQUIRED) public StringsaveVideo(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獲取後在根據關鍵字查詢結果。
ofollow,noindex" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxusousuogongneng54/">百度未收錄
>>原創文章,歡迎轉載。轉載請註明:轉載自IT人故事會,謝謝!
>>原文連結地址: