Nodejs+express+mongodb+mongoose实现个人博客

1.技术框架介绍

NodeJS   版本v6.9.5  基础核心开发语言Express  一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。Mongodb 版本v4.9.6第三方模块 & 中间插件        bodyParser:解析post请求数据        cookies：读/写cookie        swig：模板解析引擎        mono goose：操作mongodb数据        markdown：markdown语法解析生成模块

2.安装模块

   npm install    npm init  初始化完成后生成package.json文件    npm install --save express 安装完成后package.json中dependencies中多对应的版本号 将所用到的模块都安装好。注：安装过程要联网

3.项目目录结构

 

4.app.js

 

5.模板引擎的配置和使用

在后端中写前端的内容对于后期的维护不好，如 res.send('<h1>Welcom to my Blog</h2>');

所以，将界面和逻辑分开

注册这一步其实就是将定义好的模板引擎配置到app中   5.1.加载模板  5.2.配置应用模板 还可以传递第二个参数，传递给模板使用的数据 在views里面新建index.html   原理：app应用在读取模板的时候第一次读取模板文件(index.html)以后并且把它解析后保存在内存中，下一次再次访问的时候，同样的路径解析同样的模板就不会在文件当中读取解析的，而是从已经存在于内存当中的数据中直接读取然后返回。所以重启应用。但是在实际工作中，常常会不断的修改模板，那么就需要不断的重启服务，很麻烦。   在开发过程中，需要取消模板缓存 //在开发过程中需要取消模板缓存 swig.setDefaults({cache: false});

这样，每次就不需要重新去运行app.js，而是保存模板文件即可。

6.静态文件托管 写模板文件的时候经常会引入外部文件，如图片，css等。 那么头部需要去解析css文件。同时，在后端(app.js)中要写css   但是如果有多个css的话就会写很多get请求，很麻烦。 我们要请求的css和js是静态文件，不需要用这种动态的方法，只需要在后端获取，然后向前端发送。 当用户访问的url以/public开始，那么直接返回对应__dirname+'/public'下的文件 梳理一下这个过程: 用户发送http请求->url->解析路由->找到匹配的规则->执行指定的绑定函数，返回对应内容至用户   在public中新建main.css文件   // app.js /** * Created by xiaofeng on 2017/5/1 0001. */ /* * 应用程序的启动(入口)文件 * */ // 加载express模板 var express=require('express'); //创建app应用 => NodeJS Http.createServer(); var app=express(); // 加载模板引擎 var swig=require('swig'); // 设置静态文件托管 // 当用户访问的url以/public开始，那么直接返回对应_dirname+'/public'下的文件 app.use('/public',express.static(__dirname+'/public')); /* * 处理请求输出 * */ /* * 首页 * req request对象 * res  response对象 * next函数 * */ // app.get('/',function (req,res,next) { //    // res.send('<h1>欢迎来到我的Blog,这是通过NodeJS搭建的</h1>'); // }); /* * 配置应用模板 * 定义当前应用所使用的模板引擎 * 第一个参数:模板名称，也是文件后缀名，第二个参数用于解析处理模板的内容的方法 * */ app.engine('html',swig.renderFile); // 设置模板文件存放的目录，第一个参数必须是views，第二个参数是目录 app.set('views','./views'); // 注册所使用的模板引擎，第一个参数必须的view engine，第二个参数必须和app.engine这个方法中定义的模板名称一致 app.set('view engine','html'); swig.setDefaults({cache:false}); app.get('/',function (req,res,next) {     res.render('index'); }); // 比较麻烦 // app.get('/main.css',function (req,res,next) { //    res.setHeader('content-type','text/css'); //    res.send("h1 {text-align:center;}"); // }); // 监听端口 http请求 app.listen(8081);

7.分模块开发与实现

比如: 在router/admin.js   访问 localhost:8081/admin/user 注意：如果现在只是测试，访问admin.js，那么就要将 app.use('/api',require('./routers/api')); app.use('/',require('./routers/main')); 进行注释，否则会报错。   如果不写这一句，也会报错 module.exports=router;   模块划分 在schema文件夹中新建users.js文件。 连接数据库之前在app.js中加载数据库 var mongoose=require('mongoose'); 然后使用mongoose中的connect方法连接数据库。当然，在连接数据库之前要开启数据库。开启数据库先进行数据库的安装。

8.数据库连接、表结构Schema定义、Model创建

mongoose模块进行数据库操作 在官网下载mongodb并且安装; 安装好后找到MongoDB->Server->3.4->bin,有客户端，服务端。通过命令行启动服务端。mongod.exe   等待连接   我们可以通过命令行的方式连接。也可以通过可视化界面连接，如Robomongo   点击“connect”。连接成功后，   接下来是app.js连接数据库   32位操作系统参考 http://www.cnblogs.com/chenyucong/p/6217017.html   在schemas中新建users.js文件，定义用户的表结构通过Schema方法,仅仅定义表结构不够，需要模型类对数据进行增删改查等操作。在models中新建User.js创建模型类 var mongoose=require('mongoose'); var userSchema=require('../schemas/users'); //创建模型类 module.exports = mongoose.model('User',userSchema );

9.用户注册前端页面逻辑

将静态页面拷贝到Blog相应的文件夹中。 编辑index.js的内容 注册面板中的“注册”按钮是通过ajax实现的， // index.js $(function () {     var $loginBox=$('#loginBox');     var $registerBox=$('#registerBox');     //切换到注册面板     $loginBox.find('a').on('click',function () {         $registerBox.show();         $loginBox.hide();     });     $registerBox.find('a').on('click',function () {         $loginBox.show();         $registerBox.hide();     });     //注册，通过ajax实现     $registerBox.find('button').on('click',function () {         //通过ajax提交数据         $.ajax({             type: 'post',             url: '/api/user/register',             data: {                 username: $registerBox.find('[name="username"]').val(),                 password: $registerBox.find('[name="password"]').val(),                 repassword: $registerBox.find('[name="repassword"]').val()             },             dataType: 'json',             success: function (result) {                 console.log(result);             }         });     }); })

10.body-parser模块的使用和后端用户名注册的基本验证

测试一下，在api.js中作出修改 // app.js var express=require('express'); var router=express.Router(); /* * 用户注册 * 这里router(路由)使用的方法要和index中ajax type属性一致，否则会报错 * */ router.post('/user/register',function (req,res,next) {     res.send('register');     console.log('register'); }); module.exports=router;

接下来需要获取前端提交过来的post数据，如何获取？

需要用到一个第三方模块body-parser，用来处理post提交过来的数据 app.js   // app.js /* * 应用程序的启动(入口)文件 * */ //加载express模板 var express=require('express'); //加载模板引擎 var swig=require('swig'); //加载数据库 var mongoose=require('mongoose'); //加载body-parser解析post数据 var bodyParser=require('body-parser'); //创建app应用 => NodeJS Http.createServer(); var app=express(); //设置静态文件托管 //当用户访问的url以/public开始，那么直接返回对应_dirname+'/public'下的文件 app.use('/public',express.static(__dirname+'/public')); /* * 配置应用模板 * 定义当前应用所使用的模板引擎 * 第一个参数:模板名称，也是文件后缀名，第二个参数用于解析处理模板的内容的方法 * */ app.engine('html',swig.renderFile); //设置模板文件存放的目录，第一个参数必须是views，第二个参数是目录 app.set('views','./views'); //注册所使用的模板引擎，第一个参数必须的view engine，第二个参数必须和app.engine这个方法中定义的模板名称一致 app.set('view engine','html'); swig.setDefaults({cache:false}); //body-parser设置 app.use(bodyParser.urlencoded({extended:true})); app.use('/admin',require('./routers/admin')); app.use('/api',require('./routers/api')); app.use('/',require('./routers/main')); //监听端口 http请求 mongoose.connect('mongodb://localhost:27017/blog',function (err) {     if (err){         console.log('数据库连接失败');     }else {         console.log('数据库连接成功');         app.listen(8081);     } }); api.js var express=require('express'); var router=express.Router(); /* * 用户注册 * 这里router(路由)使用的方法要和index中ajax type属性一致，否则会报错 * */ router.post('/user/register',function (req,res,next) {     //res.send('register');     console.log(req.body); }); module.exports=router;

点击“注册”后，

用户注册： 注册逻辑的简单实现 var express = require('express'); var router = express.Router(); //统一返回格式 var responseData; router.use(function (req,res,next) {     responseData = {         code: 0,         message: ''     }     next(); }); /* * 用户注册 *  注册逻辑:对字符进行验证，并且返回给前端 *  1.用户名不能为空 *  2.密码不能为空 *  3.两次输入的密码必须一致 * *  1.用户已经被注册 *      数据库中进行查询 * * 这里router(路由)使用的方法要和index中ajax type属性一致，否则会报错 * * */ router.post('/user/register', function (req, res, next) {     var username = req.body.username;     var password = req.body.password;     var repassword = req.body.repassword;     //用户名是否为空     if (username == '') {         responseData.code = 1;         responseData.message = "用户名不能为空";         res.json(responseData);         return;     }     //密码不能为空     if (password == '') {         responseData.code = 2;         responseData.message = "密码不能为空";         res.json(responseData);         return;     }     if (password != repassword) {         responseData.code = 3;         responseData.message = "两次输入密码不一致";         res.json(responseData);         return;     }     responseData.message="注册成功";     res.json(responseData); }); module.exports = router;

 

  重启app.js进行测试