VUE UI 요소는 탭 조립체에 사용

17:00 20시 반 및 매김 싸움

우리는 청산 전리품에 >>>>>

1. 페이징 속성

<div class="block newsPage">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="count"
    layout="total, sizes, prev, pager, next, jumper"
    :total="newsLEngth">
    </el-pagination>
</div>

: 말하지 재산의 양을 설명 을보고 직접 공식 웹 사이트 문서를
하거나 얘기!

행사	용법
크기 변화	이 데이터 조각의 현재 수를 모니터링하는 디스플레이의 수가 변경 될 때 무언가를 할 시간
현재의 변화	때 현재 페이지 번호를 모니터 페이지가 변경 되면 뭔가를
페이지 크기	다음 페이지를 선택하는 데이터의 수는 현재 표시되고있는 데이터 (5), 데이터 10, 15, 20, 맞춤형
페이지 크기	데이터의 수
나열한 것	바 피니셔 총 :의 총 크기가 한 페이지 쇼로 수, 해당 페이지 크기 : PREV 이전 : 호출기 : 페이지를 다음 : 다음, 점퍼 : 페이지 점프
합계	계산 총 페이지를 표시하기위한 수단은 데이터 조각의 총 개수

2. 여기서 인 데이터

 data () {
        return {
        	// 空数组 存放请求的数据
            tableData: [],
            // 用于计算数据的长度
            newsLength: 0,
            // 默认的页码
            page: 1,
            // 默认单页渲染数据的条数
            count: 5,
            // 定义一个变量来存放方法
            newsShow: ''
        }
    },

3. 이어 방법

 methods: {
 		// 每页数据条数监听 val为传的值 对应前面所说的page-sizes 
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
            // 将其存入定义的count中，会把这个数据传给后台
            this.count = val
            // 当count改变的时候重新获取数据并刷新页面（调用newsShow方法）
            this.newsShow()
        },
        // 监听页码变化val为页码
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`)
            // 将其存入定义的page中，会把这个数据传给后台
            this.page = val
             // 当page改变的时候重新获取数据并刷新页面（调用newsShow方法）
            this.newsShow()
        }
    },

4. 마지막으로, 데이터 Axios의 요청

mounted () {
		// 封装axios方法 它是异步方法所以 如下写法，
		//另采用箭头函数是为了保证this指向的是vue实例
		// 这里还记得之前在data定义的newsShow吗？
		// 为了方便在methods里面调用这个方法 才放在Vue实例中
		// 用let 或者 var 定义是调用不了的哟 
		// const 还没看呢不知道行不行
        this.newsShow = async () => {
            axios({
                method: 'post',
                url: 'http://192.168.97.251:3000/getNewsByPage',
                // 这里是要传给后台的数据
                data: {
                    page: this.page,
                    count: this.count
                }
            }).then((res) => {
            	// 成功数据在then方法中
            	// 注意此处的结构 请求的数据在res.data中
                res = res.data
                if (res.status === 200) {
                	// 将请求的数据存在之前定义的的tableData数组中
                    this.tableData = res.data
                    console.log(this.tableData)
                }
            })
        }
        // 下面这个请求 用于获取所有的数据
        axios({
            method: 'post',
            url: 'http://192.168.97.251:3000/getNews'
        }).then((res) => {
            res = res.data
            if (res.status === 200) {
            	// 将数据的长度存入newsLength中
                this.newsLength = res.data.length
                console.log(this.newsLength)
            }
        })
        // 文档加载完成时调用newsShow方法渲染数据
        this.newsShow()
    }

1. 마지막 과정은 백그라운드 서버입니다
   우리가 직접 GitHub에 무슨 말을하지 않는
   서버 주소 파일을 보려면 클릭 GitHub의 ^ - ^
2. **注意**
   config 파일에서 구성 데이터베이스가 작성 127.0.0.1은 자신의에 따라 변경할 수 있습니다

두 인터페이스 / getNews있다 및 / getNewsByPage
여기서 송신 파라미터없이 / getNews
/ getNewsByPage 요구 페이지 ()와 수 (하나의 페이지 디스플레이의 개수) 개의 파라미터.