Laravel前台实现列表渲染数据(Vue),调用后台接口

首先实现的功能是 首页有小列表 顶部点击查看更多 进入大列表

如此,调用一个接口即可,在这里前端渲染数据,使用Vue.js

好,话不多说,现在开始:

首先展示下做出来的效果图:

左侧是首页显示的小列表,右侧是点击查看更多后的大列表

接下来 先看下从后台调取数据的接口写法:

public function run(&$params)
    {
        //定义变量type type=1在首页 为空时在列表页
        $type = $params['type'];
        //如果type为空 
        if ($type==""){//此时是列表页调用的判断
            $params['page_num'];//定义一个分页值为总页数
            $page_num = $params['page_num'];//分页值传到变量$page_num 
            $count=MerchantInfo::select()->count();//获取这个表的所有值,并算出总条数传到变量$count
            $data = MerchantInfo::select()//查询表 倒序 每页显示12条 获取这些数据
                ->orderBy('created_at', 'desc')
                ->offset($page_num)
                ->limit(12)
                ->get();
            return [
                'status' => true,
                'code' => '200',
                'data' => $data,
                'count'=>$count,
            ];
        }else{//此时是首页调用的判断  
             //查询表 获取数量 传到变量$count
            $count = MerchantInfo::select()->count();
            if ($count <=6 ){//判断 如果获取的数量小于等于6条
                $data = MerchantInfo::select()//进行下一步查询 倒序取数据 限制6条
                    ->orderBy('created_at', 'desc')
                    ->take(6)
                    ->get();
            }else{//如果获取的表数据大于6条
                $ran_num = floor(rand(0,$count-6));//floor方法获取表中数据随机6条 传到变量$ran_num
                $data = MerchantInfo::select()//执行下一步查询,倒序,数量限制在上面取到的随机值,每次获取6条 
                    ->orderBy('created_at', 'desc')//出现一种效果,每次刷新,首页列表会抓取随机的6条数据呈现出来
                    ->offset($ran_num)
                    ->limit(6)
                    ->get();
            }

        }

        return [
            'status' => true,
            'code' => '200',
            'data' => $data,
        ];
    }

代码旁边已写注释:主要想法就是,定义一个变量,在页面调用这个的变量的时候,用来判断接口渲染的页面是首页还是列表页(因为我们是共用同一个接口文件),不一样的变量值,走不一样的逻辑

 

vue页面渲染部分:

这边传入type 为1在首页 为空在列表页

调用ajax部分,具体看代码

 

接下来看列表页的渲染

从上述我们知道,type为空 是在列表页

在接口 我们设置了 每12条为限制,也就是分页,那么怎么实现下一页呢,这边是用下拉动作,显示12条之后,出现点击加载更多进行分页,先看下效果,再看代码:

这是效果图,接下里看Vue给这个a标签调用的方法

load:function (event){
                page_num+=12//每次显示12条数据
                let post_data = {
                    method: 'merchant.get.list',//这是我们调用的接口文件
                    nonce: 'merchant.get.list',
                    type: this.type,.//传type进来
                    page_num:page_num,//查询出来的限制的总数量值
                    MerchantSize:this.MerchantSize//传的是显示的数量值,一旦一拉到后面,没有数据了,就显示没有更多数据
                };
                var MerchantSize= this.items.length
                // console.log(MerchantSize);
                var obj = JSON.parse(window.localStorage.getItem('HC.merchant'));
                if (obj == null) {
                    this.login_check = false;
                } else {
                    this.login_check = true;
                }
                axios.post('/api/v1',api_data_sign(post_data, 'hc')).then(response => {
                    if (response.data.code == 200) {
                        var datas = response.data.data;
                        var count = response.data.count;
                        datas.forEach((data) => {
                            this.items.push(data);
                        });
                        if (MerchantSize>=count){//如果一直下拉直到没有数据 调用此判断 提示没有更多数据
                            this.$toast('没有更多数据了');
                            $(".Load_msg").hide();
                        }
                    }else {
                        this.$toast(response.data.msg);
                    }
                }).catch(error => {
//                console.log(error);
                });
            },

列表渲染数据同首页渲染一致

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

接下里讲一下列表页的搜索功能如何实现(名字模糊搜索)

同样从后台调取数据,我们编写接口:

$name =$params['user_name'];//获取字段值传到定义的变量$name
if ($name=="") {
    return [
        'status' => true,
        'code' => '202',
        'msg' => '请输入搜索内容',
    ];
}
   //查询表 where名字相像就获取
   $data = MerchantInfo::where("merchant_name","like","%".$name."%")->orderBy('created_at', 'desc')->get();
if ($data){//成功
     return [
         'status' => true,
         'code' => '200',
         'data' => $data,
     ];
 }else{//失败
     return [
         'status' => false,
         'code' => '201',
         'msg' => "没有搜索结果",
     ];
 }

接下来看页面如何调用接口

首先给搜索按钮绑定一个点击时间sub_name

接下来,vue渲染

sub_name(){
                 post_data = {
                    method: 'merchant.get.query',
                    nonce: 'merchant.get.query',
                    user_name:this.user_name,
                };
                 var this_ = this;
                axios.post('/api/v1',api_data_sign(post_data, 'hc')).then(response => {
                    if (response.data.code == 202) {
                        this.$toast(response.data.msg);
                    }
                    if (response.data.code == 201) {
                        this.$toast(response.data.msg);
                    }

                    if (response.data.code == 200) {
                        var datas = response.data.data;
                        // console.log(datas);
                        this_.items=[];
                        datas.forEach((data) => {
                            this_.items.push(data);
                        });
                    }else {
                        this.$toast(response.data.msg);
                    }
                }).catch(error => {
//                console.log(error);
                });
            }

到这里 搜索功能就完成了!!!

------------------------------------------------------------------------------------------------------------------------------------------------------------

这是我第一次编写VUE渲染数据,有很多不足,希望大牛看到,可以指点一二,不胜感激!!!