说在前面:本文只是讲解逻辑,只有核心代码,作为学习笔记
进入后台管理-烑吧管理-烑吧页面如下图所示
由于在date(){}
中的created(){}
中调用了getlist()
created()
的意思就是页面初始化时会调用的函数
<!--部分代码-->
<script>
export default {
data() {
return{
listQuery: {
namae:""
page: 1,
limit: 10,
},
};
},
created() {
this.getList();
},
methods: {
getList() {
fetchYaobarList(this.listQuery).then(response => {
this.list = response.data.data.records;
});
},
}
}
}
</script>
export function fetchYaobarList(query) {
return fetch({
url: '/api/yaobar/listPage',
method: 'post',
data: query
});
}
这样,在第一次打开页面的时候便会给后台地址/api/yaobar/listPage
传一个格式为{name:"",limit:10,page:1}
的数据给后台。数据库根据name
字段便可以进行查询,由于第一次打开页面所传参数name=""
,所以查出来了便是当前表中所有的数据。
<select id="selectYaobars" resultMap="BaseResultMap">
SELECT
*
FROM yy_yaobar
WHERE
1 = 1
<if test="filter.id!=null and filter.id!=''">
AND id = #{filter.id}
</if>
<if test="filter.name!=null and filter.name!=''">
AND name like CONCAT('%',#{filter.name},'%')
</if>
<if test="filter.status!=null">
AND status = #{filter.status}
</if>
ORDER BY is_top DESC,date_add DESC
</select>
结语
这么多数据显示到页面不看好,也不方便管理,这个时候便需要分页管理技术,那么在我们这个框架下如何实现呢?请看分页显示——基于vue+springboot+mybatis