アセンブリタブで使用VUE UIエレメント

夜五時から夜8時30分とページネーションの戦いへ

当社は、清算戦利品である>>>>>

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、カスタマイズ可能
ページサイズ	データ数
レイアウト	バーフィニッシャー合計：、数の合計サイズ 1ページのショーに番号、対応するページ・サイズ：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. **注意**
   設定ファイルの設定データベースには、書かれた127.0.0.1は自分自身に応じて変更することができます

二つのインターフェース/ getNewsがありますおよび/ getNewsByPage
どこ伝送パラメータなし/ getNews
/ getNewsByPage必要ページ（ページ）とcount（単一ページ表示の数）は、2つのパラメータを設定します。