页面显示——基于vue+springboot+mybatis

说在前面：本文只是讲解逻辑，只有核心代码，作为学习笔记

进入后台管理-烑吧管理-烑吧页面如下图所示

由于在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