NODEJS实战微博评论04_定义接口

Bertha 。 2022-04-22 08:54 186阅读 0赞

在app.js中增添对路由规则的解析，当用户请求路径匹配到'/',到 routers目录下main.js中寻找相对应的接口定义

**注：路由规则,记得要放在静态资源文件托管设置语句之前！！[理由][Link 1]**

//路由规则,记得要放在静态资源文件托管设置语句之前！！
    router.use('/', require('./routers/main'));

同时，增加评论时用到的post，需要加载 body-parser 模块，才能读到post携带的body信息

**注：一定要记得加载 body-parser 模块，否则req.body 为undefined**

var bodyParser = require('body-parser');
    app.use(bodyParser.urlencoded({
        extended: true
    }));

修改后的app.js 代码

//加载express模块
    var express = require('express');
    var mongoose = require('mongoose');
    var bodyParser = require('body-parser');
    //创建app应用
    var app = express();
    
    
    app.use(bodyParser.urlencoded({
        extended: true
    }));
    
    // mongodb服务默认启动端口为27017 
    // 连接到数据库 MyWeibo ,如果没有 MyWeibo 数据库，则会自动创建
    mongoose.connect('mongodb://localhost:27017/MyWeibo', function (err) {
        if (err) {
            console.log("数据库连接失败");
        } else {
            console.log("数据库连接成功");
            //监听
            app.listen(8080);
        }
    })
    
    //路由规则
    app.use('/', require('./routers/main'));
    
    //设置静态文件托管
    //当用户请求的路径以'/'开头时，直接返回__dirname + '/public'目录下文件
    //第一个参数默认'/'，以下语句相当于 app.use('/',express.static(__dirname + '/public'));
    app.use(express.static(__dirname + '/public'));

在 routers目录下 新建main.js 定义接口，

**注：记得一定要 module.exports = router; 以便接口在外面可访问到**

// 定义接口
    var express = require('express');
    var router = express.Router();
    var Comment = require('../models/Comment');
    
    const limit = 4; //定义每页记录条数
    //增加新评论
    router.post('/', function (req, res) {
        var content = req.body.content;
        if (!content) {
            res.status(400).send("arg err").end();
        } else {
            var newComment = new Comment({
                content: content,
                time: new Date()
            });
            newComment.save();
            res.redirect('/');
        }
    })
    router.get('/get_comments', function (req, res) {
        // 解析url路径中query.act，根据其行为返回不同的数据
        var act = req.query.act;
        if (!act) {
            // 返回所有数据
            Comment.find().then(function (comments) {
                res.send(comments).end();
            })
        } else {
            switch (act) {
                case 'get_page_count':
                    Comment.count().then(function (count) {
                        // 根据数据总条数和每页条数，计算总页数
                        var pages = Math.ceil(count / limit);
                        // 不能返回一个数字，会被当成status码，将其转换为string格式
                        // res.send(pages + '');
                        // 但这里需要将每页条数也返回回去,写成对象格式
                        // {
                        //     pages,
                        //     limit
                        // }
                        // 是es6的写法， 相当于
                        // {
                        //     pages: pages,
                        //     limit: limit
                        // }
                        // 当key 和value 名相同时可简写
                        res.send({
                            pages,
                            limit
                        });
                    })
                    break;
                case 'get':
                    // 获取第二个参数page,当前页数
                    var page = req.query.page;
                    if (!page) {
                        res.status(400).send('arg error').end();
                    } else {
                        // 获取跳过的条数
                        var skip = (page - 1) * limit;
                        Comment.find().sort({
                            time: -1
                        }).skip(skip).limit(limit).then(function (comments) {
                            res.send(comments).end();
                        });
                    }
                    break;
                case 'incLike':
                    // 获取点赞的评论id
                    var id = req.query.id;
                    if (!id) {
                        res.status(400).send('arg error').end();
                    } else {
                        // 找到对应的评论，对其like属性+1
                        Comment.findOne({
                            _id: id
                        }).then(function (comment) {
                            if (comment) {
                                Comment.updateOne({
                                    _id: comment._id
                                }, {
                                    like: comment.like + 1
                                }).then(function (err, docs) {
                                    if (err)
                                        console.log(err);
                                    console.log(docs);
                                    res.send("success").end();
                                })
                            }
                        })
    
                    }
                    break;
                case 'incUnlike':
                    // 获取踩的评论id
                    var id = req.query.id;
                    if (!id) {
                        res.status(400).send('arg error').end();
                    } else {
                        // 找到对应的评论，对其unlike属性+1
                        Comment.findOne({
                            _id: id
                        }).then(function (comment) {
                            if (comment) {
                                Comment.updateOne({
                                    _id: comment._id
                                }, {
                                    unlike: comment.unlike + 1
                                }).then(function (err, docs) {
                                    if (err)
                                        console.log(err);
                                    console.log(docs);
                                    res.send("success").end();
                                })
                            }
                        })
    
                    }
                    break;
            }
        }
    
    })
    module.exports = router;

然后返回前端一份接口文档,

（告诉前端应该怎么用我们定义的接口，每个接口返回的数据及其格式）

/*
    **********************************************
    Author:	chenzeze
    Date:	2018-10-13
    
    usage:
    post    提交到'/'
                提交成功后重定向到'/' 
                
            
    get     /get_comments?act=get_page_count	获取页数
                返回：{pages:页数,limit:每页评论条数}
                     
            /get_comments?act=get&page=1		获取一页数据
                返回：[{_id: ID, content: "内容", time: 时间戳, like: 赞次数, unlike: 踩次数}, {...}, ...]
            
            /get_comments?act=incLike&id=65656565			顶某一条数据
                返回：{error:0}
            
            /get_comments?act=incUnlike&id=56454545			踩某一条数据
                返回：{error:0}
    
    
    注意：	服务器所返回的时间戳都是秒（JS是毫秒）
    **********************************************
    */

**下面内容不观看不影响 项目体验， 作为补充知识。**

然后来编写index.html，（表单提交评论）

<!DOCTYPE html>
    <html lang="en" ng-app="weibo">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>微博评论,nodejs+mongodb+angularjs</title>
        <link rel="stylesheet" href="index.css">
    </head>
    
    <body ng-controller="myCon">
        
        <form action="?" method="post">
            <textarea name="content" id="" cols="30" rows="10" ng-model="newComment"></textarea>
            <button type="submit" ng-click="postComment">提交评论</button>
        </form>
    
        
        <div class="comment-list">
            <div class="comment-item" ng-repeat="(index,comment) in comments">
                <div class="content">{
       {comment.content}}</div>
                <div class="time">{
       {comment.time}}</div>
                <a href="#" ng-click="incLike(comment._id,index)">点赞:</a><span class="like"> {
       {comment.like}} </span>
                <a href="#" ng-click="incUnlike(comment._id,index)">踩:</a><span class="unlike"> {
       {comment.unlike}} </span>
            </div>
        </div>
    
        
        <div class="pages-list">
            <span class="page-item {
       {activeId==index+1?'active':''}}" ng-repeat="(index,page) in pages" ng-click="getPage(index+1)">{
       {index+1}}</span>
        </div>
       
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/angular.js"></script>
        <script src="index.js"></script>
    
    </body>
    
    </html>

index.js

运行node app.js 打开[http://localhost:8080/][http_localhost_8080]

点击 “提交评论” ，到robo中comments 集合刷新可看到我们刚刚插入的评论

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

但是此刻却没有在网页看到我们刚刚添加的评论，为什么呢？

**这是因为我们调用后台接口改变了数据库，但页面却没有从更新后数据库中重新读写数据，**

所以我们需自己先手动改变前台的数据

index.js

现在再提交评论，就能发现数据库会增加评论，前台也会显示新增的评论，并且显示的是最新增加的4条评论

[Link 1]: https://blog.csdn.net/chenzeze0707/article/details/83661478
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220422/e476e83223eb41e48bb78b18976f77f8.png