NODEJS实战微博评论01_项目介绍+启动服务

「爱情、让人受尽委屈。」 2022-04-22 05:46 314阅读 0赞

最终效果：

1.若数据库中无评论时，显示“暂无评论”

2.按照评论的逆序时间分页显示，每4条一页，当多于4条时，自动增加页数按钮，提交评论时，会自动跳转回第一页

3.可对每条评论点赞或踩，将点赞，踩数据保存到数据库，刷新不变

![20181102164257318.gif][]

接下里，一步一步开始构建我们的项目

1.安装好nodejs是构建项目的前提条件，安装的日期太久远了，找不到教程了，朋友们可自行百度，安装好后可在命令行用node -v检查版本号，若出现版本号，则安装成功

![20181102165401873.png][]

2.安装模块

新建一个文件夹weibo，当作该项目根目录，请确保项目路径不包含中文（如果含有中文模块会报错）

打开命令行到该项目根目录运行npm init:

![20181102170524134.png][]

一路按照默认，都直接敲回车，此操作后会在weibo文件夹中生成package.json文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

安装该项目需要的模块

运行 npm i --save-dev body-parser cookies express mongoose swig，
    生成node_modules存放这些模块
    
    body-parser: 解析post body携带的数据
    cookies: 读写cookie
    express: node.js Web应用框架，用于创建Web应用
    mongoose: mongodb数据库操作
    swig: 模板解析引擎

3.创建应用目录

app.js: 应用启动文件入口
    route.js：路由规则,分模块开发
    models: 数据库模型文件目录
    schemas: 数据库结构文件目录
    views: 模板渲染文件目录
    public: 静态文件目录（css，js，imgs等）

4.启动第一个服务

在app.js中编写代码

//加载express模块
    var express = require('express');
    //创建app应用
    var app = express();
    
    /**
     * req:request对象，用于接收客户端传来的数据
     * res:response对象，用于返回客户端信息/数据
     * next:函数，用于执行下一个和当前路径匹配的函数
     */
    app.get('/', function (req, res, next) {
        res.send('<h1>hello world</h1>');
    })
    
    //在8080端口监听，若8080端口被占用，可以改成在8081端口等监听
    app.listen(8080);

运行 app.js

![20181102194027251.png][]

然后在浏览器网址栏输入 localhost:8080 (若app.js中是在8081端口监听，则在地址栏输入 localhost:8081 访问）

![20181102194637937.png][]

至此，服务启动成功

[20181102164257318.gif]: /images/20220422/4747caec7aba4145b30aa11990c78f22.png
[20181102165401873.png]: /images/20220422/06602323930148f2a83def5816ed4e1b.png
[20181102170524134.png]: /images/20220422/1061eed23d4548879f9ec0a29bac031a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220422/7583ba485c2c490cabad6510e5237bb8.png
[20181102194027251.png]: /images/20220422/86b56acead144e8e9dc08b56c7a7a17d.png
[20181102194637937.png]: /images/20220422/a66b7c28d7d5405e90eafc937f16c5fe.png