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

柔情只为你懂 2024-04-03 10:02 66阅读 0赞

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

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

### 完成商品排序功能 ###

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

> 将组件中的数据改为动态获取  
> shopList.vue

<template>
        <view class="shop-list">{
        {
        keyword}}
            <view class="shop-title f-color">
                <view class="shop-item"
                    v-for="(item,index) in shopList.data"
                    :key="index"
                    @tap="changeTab(index)"
                >
                    <view :class="shopList.currentIndex==index?'f-active-color':''">{
        {
        item.name}}</view>
                    <view class="shop-icon">
                        <view class="iconfont icon-shangjiantou up"
                            :class="item.status===1?'f-active-color':''"
                        ></view>
                        <view class="iconfont icon-xiajiantou down"
                            :class="item.status===2?'f-active-color':''"
                        ></view>
                    </view>
                </view>
            </view>
            <Lines></Lines>
            <CommodityList :dataList="dataList"></CommodityList>
        </view>
    </template>
    
    <script>
        import $http from '@/common/api/request.js'
        import Lines from '@/components/common/Lines.vue'
        import CommodityList from './CommodityList.vue'
        export default {
        
            props:{
        
                keyword:String
            },
            data() {
        
                return {
        
                    shopList:{
        
                        currentIndex:0,
                        data:[
                            {
        name:'价格',status:1,key:"pprice"},
                            {
        name:'折扣',status:0,key:"discount"},
                            {
        name:'品牌',status:0,key:"brand"}
                        ]
                    },
                   dataList:[
                       /* {
                           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"
                       },
                   */
                    ] 
                };
            },
            computed:{
        
                orderBy(){
        
                    // 拿到当前对象
                    let obj = this.shopList.data[this.shopList.currentIndex];
                    let val = obj.status === 1 ? "asc" : "desc";
                    return {
        
                        [obj.key]:val
                    }
                }
            },
            components:{
        
                Lines,
                CommodityList
            },
            mounted() {
        
                this.getData();
            },
            methods:{
        
                // 请求数据
                getData(){
        
                    $http.request({
        
                        url:"/goods/search",
                        data:{
        
                            name:this.keyword,
                            ...this.orderBy
                        }
                    }).then((res)=>{
        
                        this.dataList = res;
                    }).catch(()=>{
        
                        uni.showToast({
        
                            title:'请求失败',
                            icon:'none'
                        })
                    })
                },
                // 点击切换颜色
                changeTab(index){
        
                    // 点击排序 => 重新请求了数据
                    this.getData();
                    // 索引值
                    let idx = this.shopList.currentIndex;
                    // 具体哪一个对象
                    let item = this.shopList.data[idx];
                    if(idx == index){
        
                        return item.status = item.status === 1 ? 2 : 1
                    }
                    
                    // 新值
                    let newItem = this.shopList.data[index];
                    item.status = 0; //旧的回复默认
                    this.shopList.currentIndex = index;
                    newItem.status = 1; // 新的给颜色
                }
            }
        }
    </script>
    
    <style lang="scss">
    .shop-title{
        
        display:flex;
    }
    .shop-item{
        
        flex:1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80rpx;
    }
    .shop-icon{
        
        position: relative;
        margin-left: 10rpx;
    }
    .iconfont{
        
        width: 16rpx;
        height: 8rpx;
        position: absolute;
        left: 0;
    }
    .up{
        
        top: -25rpx;
    }
    .down{
        
        top: -5rpx;
    }
    </style>

> 通过nodejs连接池连接到Mysql数据库  
> 数据库连接  
> sql.js

var mysql = require('mysql');
    var connection = mysql.createPool({
        
        host    :'127.0.0.1',
        user    :"root",
        password:"123123123",
        database:"aolai_test",
        multipleStatements:true //允许执行多条语句
    });
    module.exports = connection;

##### 前端目录结构 #####

*  manifest.json 配置文件： appid、logo…
 *  pages.json 配置文件： 导航、 tabbar、 路由
 *  main.js vue初始化入口文件
 *  App.vue 全局配置：样式、全局监视
 *  static 静态资源：图片、字体图标
 *  page 页面
    
     *  index
        
         *  index.vue
     *  list
        
         *  list.vue
     *  my
        
         *  my.vue
     *  search
        
         *  search.vue
     *  search-list
        
         *  search-list.vue
     *  shopcart
        
         *  shopcart.vue
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
     *  common
        
         *  Card.vue
         *  Commondity.vue
         *  CommondityList.vue
         *  Line.vue
         *  ShopList.vue
 *  common 公共文件：全局css文件 || 全局js文件
    
     *  api
        
         *  request.js
     *  common.css
     *  uni.css

三 搜索数据

1.1 接口功能

> 通过搜索关键词获取到数据

1.2 URL

> 地址 /api/goods/search

1.3 支持格式

> JSON

1.4 HTTP请求方式

> GET

1.5 请求参数

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>必选</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>是</td> 
   <td>string</td> 
   <td>搜索的关键词</td> 
  </tr> 
  <tr> 
   <td>pprice或者discount</td> 
   <td>是</td> 
   <td>string</td> 
   <td>排序</td> 
  </tr> 
 </tbody> 
</table>

1.6 返回字段

<table> 
 <thead> 
  <tr> 
   <th>返回字段</th> 
   <th>字段类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>code</td> 
   <td>string</td> 
   <td>返回结果状态 0:正常 1:错误</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>object</td> 
   <td>搜索到的数据</td> 
  </tr> 
 </tbody> 
</table>

1.7 接口示例

{
        
    	"code":'0',
    	"data":[
    		{
        
                id:1,
                imgUrl:"../../static/logo.png",
                name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                pprice:"299",
                oprice:"659",
                discount:"5.2"
            }
    	]
    }

> 数据库中的数据表和结构(例子使用的是mysql数据库,请自行搭建)

![数据库中的数据表和结构][3861063a84aa4bf694f889431f73e7fd.png]

> 实际效果图,排序功能完善,点击已经搜索词也可以搜索

![实例的效果展示图片][72879d1dd17f46f7bc8834ea6887c7c9.png]

[3861063a84aa4bf694f889431f73e7fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/94437bf230604009b4c325b26aa986de.png
[72879d1dd17f46f7bc8834ea6887c7c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ded50461793845cb9955b7358549086f.png