打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

程序员文章站 2022-05-04 16:26:17

...

第三章建议学习时间8小时总项目预计10章

学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习前面的vue和node基础博客【共10章】

演示地址：后台：demoback.lalalaweb.com 前台：demo.lalalaweb.com

演示过程中可能会发现bug，希望即时留言反馈，谢谢

源码下载：https://github.com/sutianbinde/classweb //不是全部的代码，每次更新博客才更新代码

学习目标：此教程将教会大家如何一步一步实现一个完整的课程学习系统（包括课程管理后台/Node服务器/学习门户三个模块）。

上次node基础课程博客大家反响很好，时隔3个月，才更新项目部分，预计2~3天更新一章，我尽量20天更新完毕，学完这个项目Nodejs和vue就基本熟悉了，如发现教程有误的地方，请及时留言反馈

****地址：www.lalalaweb.com，后期会上传教学视频，大家可前往视频学习（暂时还没有视频）

用户添加/修改/删除表格组件分页组件

首先我们通过命令行启动前面已经写完的项目

由于要用到表格，我们这里就得封装表格和分页组件

先在componets中创建分页组件 pagebar.vue，写入以下代码（功能是传入分页信息，然后展示分页，点击分页的时候，会向上触发goto()跳转到第几页，具体参数的解释在代码中，对于组件不熟悉的，可以再去看看前面的基础教程）

按 Ctrl+C 复制代码

然后在componets中创建 grid.vue ，表格组件，然后写入以下代码，我们在表格组件中，引入了分页组件，这样就不用在主页面中两次引入了，参数的注释在代码中，这里我们需要传入表格数据的头信息和列表信息

按 Ctrl+C 复制代码

表格头信息和列表数据需要传入的数据格式如下（这只是展示，帮助大家理解上面的代码的，不用写到页面中）

    var listData = [
        {
            name:"css+html基础",
            duration:"30h",
            teacher:"小豆子",
            videoNb:"20",
            sysId:1
        },{
            name:"javascript进阶",
            duration:"20h",
            teacher:"小豆子",
            videoNb:"12",
            sysId:2
        },{
            name:"移动端全解析 ",
            duration:"10h",
            teacher:"小豆子",
            videoNb:"3",
            sysId:3
        },{
            name:"10分钟系列 ",
            duration:"23h",
            teacher:"小豆子",
            videoNb:"2",
            sysId:4
        },{
            name:"移动端动态网页编程",
            duration:"10h",
            teacher:"小豆子",
            videoNb:"10",
            sysId:5
        }
    ];
    var theadData = [
        {
            title:"课程名称",
            keyname:"name"
        },{
            title:"时长",
            keyname:"duration"
        },{
            title:"视频数量",
            keyname:"videoNb"
        },{
            title:"老师",
            keyname:"teacher"
        }
    ];

然后我们修改系统管理员列表组件（我们上一章中建立的 adminList.vue），修改其中的代码如下，我们这里代码比较多，包括了增删该，分页等功能，确实不好分步骤讲解，这里就直接上代码了，整体来说，方法都很明确，希望大家能看懂，中间的ajax接口我们下一步再去Node端写。

注：这里我们没有对输入数据进行严格的正则验证，是因为此后台功能设定为内部人员使用，所以不需要像前台用户注册页面那样写非常复杂的验证

按 Ctrl+C 复制代码

vue部分我们就写好了，然后我们编写node接口

我们修改 routes中的 users.js，添加增删改用户的接口，由于需要对 _id进行转化，我们还需要引入mongodb的ObjectId模块，修改后的users.js如下

按 Ctrl+C 复制代码

这里我们用的分页查询page方法，在原来的 dbhander.js中没有，所以需要修改 dbhandler.js，修改后的如下，（添加的方法在63行和 123行）

按 Ctrl+C 复制代码

然后重启node端服务，可以看到人员增删改查功能已经实现，原来的admin显示出来了，你也可以进行添加，修改，删除

打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件