首先实现的功能是 首页有小列表 顶部点击查看更多 进入大列表
如此,调用一个接口即可,在这里前端渲染数据,使用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渲染数据,有很多不足,希望大牛看到,可以指点一二,不胜感激!!!