搜索页面的开发

开发思路:
(1)前端界面借助于WeUI来实现
(2)后端访问数据库类似于章节目录的方法,但是访问数据库的语句不同,采用的是模糊查询的方式
后台chap.js的核心代码:

async searchAction(){
        let size=this.get("size")||10;
        let name=this.get("name");
        think.logger.info(size+"_"+name);
        //数据库的查询语句,采用模糊查询的方式访问后台数据库
        let result=await this.model("chap_name").where( {"chapName":["like","%"+name+"%"] } ).limit(size).select();
            return this.success(result);
    }

searchBar.wxml的核心代码(用于遍历数据):

	<view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
		<!--遍历-->
		 <view wx:for="{{list}}">
			<view class="weui-cell weui-cell_active weui-cell_access">
				<view class="weui-cell__bd weui-cell_primary">
					<view>{{index+1}}{{item.name}}</view>
				</view>
			</view>
			</view>

searchBar.js的核心代码:

 inputTyping: function (e) {
      console.info(e.detail.value)
      //发送网络请求,获取数据
      var that = this
       //调用方法获取电影列表
        wx.request({
            url: 'http://127.0.0.1:8360/home/chap/search',
            data:{
                name: e.detail.value
            },
            success: function (res) {
                //获取相应结果
                var result = res.data.data;
                console.info(result)
                //声明数组列表
                var know_list = [];
                for (var i = 0; i < result.length; i++) {
                    //获取页面需要看到的词条对象
                    know_list.push({
                        name: result[i].chapName
                    })
                }
                //把处理的数据仓库
                that.setData({
                    inputVal: e.detail.value,
                    list: know_list
                });
            }

猜你喜欢

转载自blog.csdn.net/weixin_44051236/article/details/106305830