使用vue.js和webpack完成文章的评论和分页组件

李义发布于2019-08-19 18:38 / 1456人阅读

摘要：学习了一段时间，拿它来做个小组件，练习一下。源码放在文末的地址上。接下来看下评论组件条评论这里的将在下面提到，是我们获取数据的位置。最后一个是目前生成获取静态数据的文件头像用户名评论内容就这样了吧。

学习了vue.js一段时间，拿它来做2个小组件，练习一下。
我这边是用webpack进行打包，也算熟悉一下它的运用。
源码放在文末的 github 地址上。

首先是index.html




    Page
    


    
        
            文章内容...

我将 app这个组件放在

内
通过webpack打包后,入口的js文件是entry.js，用来引入app.vue组件
entry.js

let Vue = require("vue");

import App from "./components/app";

let app_vue = new Vue({
    el: "#main",
    components: {
        app: App
    }
});

接下来看下这个app组件

它有2个子组件，分别是comment.vue和page.vue，通过动态绑定数据，进行父子间组件通信，我是这样认为的，对于 当前在第几页 应当由 page.vue传递给app.vue，所以这里我们使用 双向绑定,其余的如 params, url, isSync，即向后台请求数据的东西以及是否同步或异步操作<当然，这里我还没有测试过后台数据，目前是直接js生成静态数据>。

接下来,看下comment.vue评论组件

这里的 getData.js 将在下面提到，是我们获取数据的位置。
loading: 本意是在跳转页码加载评论时，对于当前评论加载0.5的透明度的遮罩，然后ajax通过它的回调函数来取消遮罩，现在这样就不能实现了，只能强行写下，然而是没有用的..
hasComment: comment组件第一次加载的时候，我们就去请求获得总共的数据长度，如果没有数据，则不显示comment组件布局内容
·curPageIndex·: 通过父组件app传递下来，使用的是props
这些数据，我们都设置一个默认值与类型比较好。
page.vue

主要是个对于组件事件的运用，=最常见的click事件，以及class与style的绑定，根据 curPageIndex与this.pageIndex来比较，判断是否拥有这个class,通过computed计算属性，来获得页码数组因为会根据当前页有所变化，created的时候计算出总页码。
最后一个是目前生成获取静态数据的js文件.

// let data = {
//     avatar: "",  头像
//     name: "",  用户名
//     context: "", 评论内容
// }
let dataArr = [];

function randomStr (len) {
    return Math.random().toString(36).substr(len);
}

function initData () {
    for (var i = 0; i<45 ; ++i) {
        let _avator = "./resources/" + i%7 + ".jpg";
        let _name = randomStr(20);
        let _context = randomStr(2);
        dataArr.push({
            avatar: _avator,
            name: _name,
            context: _context
        });
    }
}

if (!dataArr.length) {
    initData();
}

export function getCommentData (url = "", params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) {
    /* ajax */
    let st = (curPageIndex - 1) * eachPageSize;
    let end = st + eachPageSize;

    return dataArr.slice(st, end);
}

export function getTotalCommentCount(url = "", params = null, isSync = true) {
    /* ajax */
    return dataArr.length;
}

export function getTotalPageCount(url = "", params = null, isSync = true, eachPageSize = 7) {
    /* ajax */
    return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);
}

就这样了吧。
github地址

云服务器私有云 java实现文章评论 html文章分页 php长文章分页 asp 长文章分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79797.html

Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

Profeel 2019-08-21 10:51 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

ChanceWong 2019-08-01 15:21 评论0 收藏0
一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0
Vue.js资源分享

摘要：中文官网英文官网组织发出一个问题之后，不要暂时的离开电脑，如果没有把握先不要提问。珍惜每一次提问，感恩每一次反馈，每个人工作还是业余之外抽出的时间有限，充分准备好应有的资源之后再发问，有利于问题能够高效质量地得到解决。 Vue.js资源分享更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/maid...

vpants 2019-08-20 14:21 评论0 收藏0