UNIAPP实战项目笔记22 搭建数据库表和数据库结构 请求搜索接口显示不同搜索结果 完成商品排序功能

本文主要是介绍UNIAPP实战项目笔记22 搭建数据库表和数据库结构 请求搜索接口显示不同搜索结果 完成商品排序功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

搭建数据库表和数据库结构

请求搜索接口显示不同搜索结果

完成商品排序功能

1 新建数据表 2 后端连接器按照请求查询数据并返回给前端 3 前端传递参数给后端获取需要的数据 4 通过组件展示实现功能

搜索页面 search.vue

<template>
    <view class="search">
        <Lines/>
        
        <view class="search-item">
            <view class="search-title">
                <view class="f-color">最近搜索</view>
                <view class="iconfont icon-shanchu" @tap="clearHistory"></view>
            </view>
            <view class="f-color"
                v-if="searchData.length > 0"
            >
                <view class="search-name"
                    v-for="(item,index) in searchData"
                    :key="index"
                    @tap="toSearchList(item)"
                >
                    {
          
   {
          
   item}}
                </view>
            </view>
            <view v-else class="search-end f-color">
                暂无搜索记录
            </view>
        </view>
        
        <view class="search-item">
            <view class="search-title">
                <view class="f-color">热门搜索</view>
            </view>
            <view class="f-color">
                <view class="search-name">四件套</view>
                <view class="search-name">面膜</view>
            </view>
        </view>
        
    </view>
</template>

<script>
    import Lines from @/components/common/Lines.vue
    export default {
          
   
        data() {
          
   
            return {
          
   
                // 输入的关键词
                keyword:,
                // 搜索过的词记录
                searchData:[]
            };
        },
        // 页面加载的时候
        onLoad() {
          
   
            uni.getStorage({
          
   
                key:searchData,
                success: (res) => {
          
   
                    this.searchData = JSON.parse(res.data)
                }
            })
        },
        // 监控input输入内容
        onNavigationBarSearchInputChanged(e) {
          
   
            this.keyword = e.text;
        },
        // 点击顶栏中的搜索文字按钮
        onNavigationBarButtonTap(e) {
          
   
            this.search();
        },
        // 监听软键盘上的搜索按钮点击
        onNavigationBarSearchInputConfirmed() {
          
   
            this.search();
        },
        components:{
          
   
            // 组件名称不要用 Line 和系统组件冲突
            Lines
        },
        methods:{
          
   
            // 判断关键词是否为空和跳转页面
            search(){
          
   
                if(this.keyword === ){
          
   
                    uni.showToast({
          
   
                        title:"关键词不能为空",
                        icon:none
                    })
                }else{
          
   
                    this.toSearchList(this.keyword);
                }
                // 隐藏软键盘
                uni.hideKeyboard();
                this.addSearch();
            },
            // 记录最近搜索词
            addSearch(){
          
   
                // 先判断是否已存在
                let idx = this.searchData.indexOf(this.keyword);
                if(idx<0){
          
   
                    // 不存在直接添加
                    this.searchData.unshift(this.keyword)
                }else{
          
   
                    // 先删除再去添加
                    this.searchData.unshift( this.searchData.splice(idx,1)[0] )
                }
                // 存入本地缓存
                uni.setStorage({
          
   
                    key:searchData,
                    data:JSON.stringify(this.searchData)
                })
            },
            // 清除搜索记录
            clearHistory(){
          
   
                uni.showModal({
          
   
                    title:"重要提示",
                    content:"是否要清除搜索记录?",
                    cancelText:"取消",
                    confirmText:"确定",
                    success: (res) => {
          
   
                        if(res.confirm){
          
   
                            uni.removeStorage({
          
   
                                key:"searchData"
                            });
                            this.searchData=[];
                        }
                    }
                })
            },
            // 点击搜索记录进入页面
            toSearchList(item){
          
   
                uni.navigateTo({
          
   
                    url:../search-list/search-list?keyword=+item
                })
            }
        }
    }
</script>

<style lang="less">
.search-item{
          
   
    padding: 20rpx;
}
.search-title{
          
   
    display: flex;
    justify-content: space-between;
}
.search-name{
          
   
    padding: 4rpx 24rpx;
    background-color: #E1E1E1;
    display: inline-block;
    border-radius: 26rpx;
    margin: 10rpx;
}
.search-end{
          
   
    text-align: center;
}
</style>

搜索列表页面文件 search-list.vue

<template>
    <view class="search-list">
        <ShopList :keyword=keyword></ShopList>
    </view>
</template>

<script>
    import ShopList from @/components/common/ShopList.vue
    export default {
          
   
        data() {
          
   
            return {
          
   
                keyword:""
            };
        },
        onLoad(e) {
          
   
            // 获取传递过来的参数
            this.keyword = e.keyword;
            
            // APP端 通过webView的方式改变 标题输入框的值
            // #ifdef APP-PLUS
            var webView = this.$mp.page.$getAppWebview();
            webView.setTitleNViewSearchInputText(e.keyword);
            console.log(e.keyword);
            // #endif
            // let view = uni.createSelectorQuery().select(".uni-input-input");
            // console.log(view);
        },
        components:{
          
   
            ShopList
        }
    }
</script>

<style lang="scss">
.search-list{
          
   
    width: 100%;
}
</style>

服务器端代码,链接数据库并按照传递的参数请求相应的数据 nodeJS端文件 index.js

var express = require(express);
var router = express.Router();
var connection = require(../db/sql.js);

/* GET home page. */
router.get(/, function(req, res, next) {
          
   
  res.render(index, {
          
    title: Express });
});

/* GET databases goods. */
router.get(/api/goods/search, function(req, res, next) {
          
   
    /* 
        desc 降序 asc 升序    
    */
    // 获取对象的key
    let [goodsName,orderName] = Object.keys(req.query);
    // name参数的值
    let name = req.query.name;
    // orderName的key值
    let order = req.query[orderName];
    
    let sql = "select * from goods_search";
    if(!(name == undefined || orderName == undefined || order == undefined)){
          
   
        sql = "select * from goods_search where name like %"+name+"% order by "+orderName+" "+order;
    }
    
    connection.query(sql,function(error,results,fields){
          
   
        res.send({
          
   
            code:"0",
            data:results
        });
    })
});

/* 首页第一次触底的数据 */
router.get(/api/index_list/1/data/2, function(req, res, next) {
          
   
  res.send({
          
   
      code:"0",
      data:[          
          {
          
   
              type:"commodityList",
              data:[
                  {
          
   
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
          
   
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 运动户外第二次触底的数据 */
router.get(/api/index_list/2/data/3, function(req, res, next) {
          
   
  res.send({
          
   
      code:"0",
      data:[          
          {
          
   
              type:"commodityList",
              data:[
                  {
          
   
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
          
   
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 运动户外第一次触底的数据 */
router.get(/api/index_list/2/data/2, function(req, res, next) {
          
   
  res.send({
          
   
      code:"0",
      data:[          
          {
          
   
              type:"commodityList",
              data:[
                  {
          
   
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
          
   
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});


/* 运动户外第一次加载的数据 */
router.get(/api/index_list/2/data/1, function(req, res, next) {
          
   
  res.send({
          
   
      code:"0",
      data:[          
          {
          
   
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
          
   
              type:"iconsList",
              data:[
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"},
                  {
          
   imgUrl:"../../static/logo.png",name:"运动户外"}
              ]
          },
          {
          
   
              type:"hotList",
              data:[
                  {
          
   
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
          
   
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
          
   
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
          
   
              type:"shopList",
              data:[
                  {
          
   
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
          
   
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
          
   
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
          
   
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
          
   
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
          
   
              type:"commodityList",
              data:[
                  {
          
   
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {

这篇关于UNIAPP实战项目笔记22 搭建数据库表和数据库结构 请求搜索接口显示不同搜索结果 完成商品排序功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！