Express+mongoDB开发简单后台管理系统心得(慕课)

项目源自慕课网Scott老师,https://www.imooc.com/learn/75

最近在学习node.js,我花了一天时间实现了慕课网Scott老师的项目,但看课程评论有很多同学吐槽使用的插件太多,或是mongoose不大会使用等等,于是写了这篇心得,希望可以帮助大家

1、版本和安装依赖


注意express4.x的变化,很多之前内置的中间件需要单独引入,具体请看官网:http://www.expressjs.com.cn/guide/migrating-4.html

如body-parser等

2、视图

项目共有4个页面


视图使用ejs模板引擎渲染(原谅我实在不喜欢jade的缩进写法--!),所以需要引入ejs包,前面依赖项已经说了,而且注意目录中layout.ejs作为母板文件,需要引入partials(也是版本原因,当前的express版本貌似不支持ejs公用layout了)


这时候我们就可以像使用视频中layout.jade一样使用ejs语法来创建视图的公共部分了

3、静态资源

说一下静态资源的配置吧,这里引入node内置模块path,使用‘__dirname+’的方式保证资源路径的准确性,同样由于express4.x版本原因,var resource =require('serve-static');引入设置静态资源的中间件


此时,我们看layout.ejs文件


注意看,静态资源位置已经指定为bower安装包‘bower_components’,我在项目中引入静态资源文件时,路径默认为‘bower_components’下,这里路径前面的'/'表示定位到项目根目录下,后面我们会看到,如果存在二级路由,比如admin/movie,若不要前面的‘/’,那么会从根目录/movie/bower_components下寻找资源,自然是无法找到的。

(../上一级目录,./当前目录,/根目录)

4、ejs语法

这里简单说一下ejs的语法吧:

1、<% code %>:在html中插入js语法。稍微注意一下for循环的写法(两行分别包围起来)


2、<%= 数据%>:赋值写法,上图中也有

3、<%- body%>:我们的layout文件中表示其他ejs文件都引入这里(包含及引入)

更多请看ejs相关文档,总体来说ejs还是挺简单的

5、mongoDB

关于mongoDB的安装这里不再赘述,这里有详细说明http://www.runoob.com/mongodb/mongodb-tutorial.html

我们使用mongoose来操作mongoDB,首先连接数据库

mongoose.connect('mongodb://localhost:27017/movies');
movies是我们此项目中需要使用的collection,可以在命令行下添加一些测试数据;

mongoose的核心是Schema、Model和documents。我们先明确几个概念,documents是最终数据库中的数据,Model是构建我们所需要的数据的构造函数,可以构建我们需要的数据,同时也具有向数据库增删改查的方法,Schema定义数据模型。

常规步骤如下:

先定义数据模型Schema

var movieSchema = mongoose.Schema({
    name: String,
    doctor: String,
    title: String,
    poster: String,
    language: String,
    country: String,
    brief: String,
    flash: String,
    year: Number,
    meta: {
        createAt: {
            type: Date,
            default: Date.now()
        },
        updateAt: {
            type: Date,
            default: Date.now()
        }
    }
});

Schema上有一些API,比如视频中的

movieSchema.static('findId',function (id) {
    return this.findOne({_id:id},function (err,doc) {
        console.log(doc);
    })
});
相当于给这种类型的所有数据实例化对象都添加了一个叫findId的方法,

另外也可以给模型添加中间件pre(mongoose一共两种类型的中间件,pre和post,

movieSchema.pre('save', function (next) {
    if (this.isNew) {
        this.meta.createAt = Date.now()
    }
    else {
        this.meta.updateAt = Date.now()
    }
    next();
});
中间件是node.js的重要概念,不理解的话可以查阅相关资料

之后导出构造这种类型数据的构造函数Model

var Movie = mongoose.model('Movie',movieSchema);
module.exports = Movie;
最后我们就可以愉快的使用mongoose的增删查改功能了,比如:
app.get('/', function (req, res) {
    var movies = [];
    Movie.find({},function (err,doc) {
        if (err) res.end(err);
        movies = doc;
        res.render('pages/index', {title: '我是首页',movies:movies});
    });
});

在app.js中,我们先require到Movie,此时的Movie是一个Model构造函数,可以构建数据,也有增删改查的方法,我们使用Movie.find(),顾名思义,查询数据,传入一个空对象表示查询所有,查询完成后执行回调,回调的第一个参数国际惯例错误参数,第二个参数即为我们查询到的结果,我们直接响应将查询到的所有数据返回首页进行操作;

再来实现一个post功能:

app.post('/admin/movie/new',urlEncoder,function (req,res) {
    var movie = Movie(req.body);
    movie.save(function (err) {
        if (err) res.end('fail');
        res.redirect('/');
    });
});
注意这里的urlEncoder,还记得我们最开始说由于版本问题,4.x中大部分中间件都需要重新引入

var bodyParser = require('body-parser');
var urlEncoder = bodyParser.urlencoded({extended:false});

这个urlEncoder就是就是解析请求体的中间件,将req请求体解析为js对象,这样我们就可以直接使用Movie(req.body)构造一条我们post上来的数据,然后调用Model的save方法,将数据保存到数据库中了


到这里,我们已经实现了增加数据和获取数据的功能,另外修改和删除的功能在过程上与之大同小异,这里就不再赘述了,大家参考Scott老师的视频自己实现一下吧~


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个系统其实是出于学习nodejs的目的而改写的系统。 原来的系统前端使用了extjs4.2.1,后端使用了PHP5.4和ZEND框架开发,后台数据库是用mongodb2.2.2。 我抽离出了原来系统中的账户管理,角色管理,菜单管理,权限管理这4个部分, 我想这4个部分,基本上所有的系统都会用到。具有一定的普遍性。所以将这4个部分用nodejs重新改写了。 该系统目前使用模块有express,ejs,connect-mongo,mongodb,express-partials,connect-flash,fibers,wind等 其实wind模块这次系统中没有使用。可以将它排除出去。我是出于学习wind的目的,才加入这个模块的。 本来准备使用wind模块,是为了实现同步的目的,由于后来改用了fibers模块之后,就没有使用它。这里说明一下 不是fibers要比wind好,而是我暂时不能理解wind,或则是说对wind的研究不够吧。 众所周知nodejs是推崇异步模式。但是这个系统是从php过来的,而php的代码是同步模式的写法,所以为了在改写的过程中 希望 1是代码改动最少 2是同步写法更加适合思维习惯。而且代码可读性高的目的,用到了fibers。 这个系统的源代码中有些js文件里保留了一些原来的PHP代码,这是出于代码对比的目的。 是让大家了解原来的php代码是怎么实现的,用nodejs之后是如何改写的。通过对比,大家会发现 其实通过使用fibers之后,几乎两者是一模一样的。 还有源代码中还保留了一些被注释掉的函数,有些是用到了wind,有些是用到了fibers,有些是直接异步的写法。 这些内容都是在开发过程中我不断尝试后的产物。我花了1周的时间才实现了一个递归的调用,而且还是同步的方式。 到目前为止,我还不能理解在异步模式下实现递归调用函数。比如说源代码中有个函数getMenuTree,菜单下面可能有子菜单, 子菜单的下面可能还有菜单。所以是一个递归的过程。我现在是同步的写法实现了这个函数,如果有人能够提供异步写法实现的递归函数并 emai给我,我不胜荣幸。 在使用本系统之前,必须要安装nodejs 0.10.10,mongodb2.2.2,python2.7.5至于安装的方法请googel解决。 将源代码下载之后,解压到某个目录下,比如说d:\nodejs\umav4simple目录。 进入到那个目录, a)运行以下命令 npm install express npm install ejs npm install connect-mongo npm install mongodb npm install express-partials npm install connect-flash npm install fibers npm install wind 尽管在源代码中已包含了这些模块,但是最好还是要重新运行一遍。 因为有些模块可能需要重新的编译。 比如说fibers模块,我在window下运行npm install fibers的时候编译了一个win32-ia32-v8-3.14 而在linux下重新编译了linux-ia32-v8-3.14。所以说根据操作系统的不同,可能会有一些不同。 以免造成想不到的错误。 b)打开settings.js,并且将你的mongodb的设置改写并保存。 c)运行node app.js或则node cluster.js 如果没有提示错误的话,那么就说明环境配置成功了。 d)通过以下的URL可以在mongodb中追加一些数据,不过只能运行一次。否则会重复追加数据。 浏览器上输入 http://localhost:3000/admin/index/install 做完之后, 浏览器上输入http://localhost:3000/ 就通过用户名admin 密码adminadmin进行登录,并使用这个系统了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值