Node.js(express) + MongoDB(mongoose) 简单开发（一）

Node.js(express) + MongoDB(mongoose) 简单开发（一）

前言：

express作为一个Node框架，很适合新学习Node的同学，加上mongoose的数据处理，堪称完美~ 闲话少说，步入正题。

我的系统环境：

Win7 64bit Nodejs: v0.10.35 Npm： 1.4.28 IDE：webstorm

1. 建立项目

Node及express的安装这里就不再赘述，网上有很多安装的教程，不会的同学可以自行查找，这里我们采用express4.x版本

安装express库完成之后，我们可以使用express命令来建立一个自己的项目： express -e vlan

可以看到express帮我们创建了一个完整的项目级目录

express默认的是jade的模版， -e代表使用ejs， 这里我们使用ejs

接下来进入项目目录并安装express所需的依赖

2.目录结构

www文件就是启动文件

node_modules 存放所有项目的依赖

public为静态资源存放目录，可以修改

routes为路由文件

views就是视图了（页面文件，ejs模板）

3. app.js核心文件

一般可能会改动的地方我都注释了出来， 完整的app.js文件如下

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
//var users = require('./routes/users');
var ejs = require("ejs");
var app = express();

// 视图目录
app.set('views', path.join(__dirname, 'views'));
// 使用ejs模板 （替换为html文件）
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
//app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// 静态资源存放目录
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
//app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

查看./bin/www文件。

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('vlan:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

/*
* 定义启动端口
* */
var port = normalizePort(process.env.PORT || '8080');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

4.路由功能

首先在项目目录里创建一个controller即控制层

在controller下新建index.js 这里面我们简单的返回一个title来进行测试

exports.index = function (){
    return {title: "欢迎来到我的首页！"};
};

接下来我们在路由层里面设置index.js

var express = require('express');
var router = express.Router();

// 引入c层的各个控制器
var indexController = require("../controller/index");

/* GET index page. */
router.get('/index', function(req, res, next) {
  res.render('index', indexController.index());
});

module.exports = router;

然后对V层的index.html模板进行修改

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/css/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

这里我们采用的是ejs模板，所以要严格按照ejs的模板规则，当然也可以用其他模版引擎，比如jade等等

另外我对静态资源目录进行了一些小修改，主要是个人习惯，

原本的静态资源目录：

改过后的静态资源目录：

所以页面引用的时候要稍微注意下，当资源加载的时候，默认从public下查找，所以引用的路径：<link rel='stylesheet' href='/css/style.css' />

一切大功告成，接下来我们可以启动服务，来访问我们的测试页面，终端可以用npm start进行访问，我用的webstorm直接debug就可以看到效果

可以看到我们可以成功访问页面，并且css也成功加载。

到这为止，其实一个简单的express的搭建就已经完成，感觉很简单，对不对？ 只要整站的架构思维理顺，一切都能迎刃而解！

5.完整的项目

接下来我们做一个简单的登录注册，使用MongoDB做为我们的数据库。

做之前我们先来规划一下思路：

①新建两个页面，一个登录页（login.html）, 登录成功后的跳转页（home.html）

②照葫芦画瓢，按照刚刚的顺序，先跑通这两个页面

③写登录和注册的接口，这个时候我们就需要用到数据库了，注册之前先进行查询，数据库里是否有这个用户名，然后是登录，账户与密码是否匹配

④前端的注册和登录的功能实现

大体上就这个思路，让我们来一步步进行。

1.创建登录页以及登录成功页

在路由层的index.js里面新增代码：

var loginController = require("../controller/login");

/* GET login page. */
router.get('/login', function(req, res, next) {
  res.render('login', loginController.login());
});

C层的login.js：

exports.login = function (){
    return {title: "这里是登录页"};
};

V层的login.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%=title%></title>
    <script></script>
    <link rel="stylesheet" href="/css/login.css"/>
</head>
<body>
<h1>~<%=title%>~</h1>
<form id="myForm">
    帐号：<input type="text" name="username"/><br/><br/>
    密码：<input type="password" name="password"/><br/><br/>
    <input type="button" value="注册" node-type="register" /> &nbsp; <input type="button" value="登录" node-type="submit"/>
</form>
<script src="/js/jquery.js"></script>
<script src="/js/login.js"></script>
</body>
</html>

样式简单的写写就可以啦~

重启服务，访问login：

全部OK，接下来是home页面，由于home页是登陆成功页，所以我们做个假的帐号进行测试:

路由层的index.js添加访问home的方法：

/* GET home page. */
router.get('/home', function(req, res, next) {
  res.render('home', {
    title: "登录成功页",
    username: "测试帐号"
  });
});

V层的home.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>恭喜~<%= title %>~恭喜</title>
    <link rel="stylesheet" href="/css/home.css"/>
</head>
<body>
<h1>尊敬的<%= username %>，欢迎您！</h1>
<a class="logout" href="/logout">退出登录</a>
</body>
</html>

同样样式简单写写就可以了

重启服务，访问home页：

可以看到访问成功，这里其实我们应该有一个退出登录的页面，我就不再单写一个页面了，退出登陆后直接跳转到登录页就可以了~~~

路由层曾加一个访问logout的方法就可以：

/*GET logout page.*/
router.get('/logout', function (req, res){
  res.redirect("/login");
});

重启服务后我们点退出登录按钮，可以看到直接跳转到了登录页~

好了，接下来该实现前端登录注册的功能了，这里先来写登录的功能，我们先来规定下接口的格式：{“code”: 200, “msg”: “登录成功”}

code等于200的时候，为登录成功，201为登录失败。我们先用get方式来测试页面，跑通页面以后再用post方式提交

在C层新建getLogin.js：

var userList = {};

exports.getLogin = function (req, res){
    res.send({
        code:200,
        msg: "登录成功（本条消息来自后台）"
    });
    userList = {
        username: req.param("username")
    }
};

exports.userList = function (){
    return userList;
};

userList用来存储登录时所填写的用户信息（可以理解成一个数据库，从数据库里读取内容）

在路由层的index.js做如下改动：

var getLoginController = require("../controller/getLogin");

/* GET home page. */
router.get('/home', function (req, res){
  res.render('home', {
      title: "登录成功页",
      username: getLoginController.userList().username
  });
});

router.get('/userData', getLoginController.getLogin);

userData即前端的接口地址

现在就可以来写写前端登录的功能了：

;(function ($){
    var foo = function (options){
        var self = this;
            self.options = $.extend({
                parent: $("#myForm"),
                register: $("[node-type=register]"),
                submit: $("[node-type=submit]")
            }, options);
        self.bindEvent();
    };

    foo.prototype = {
        bindEvent: function (){
            var self = this;
            self.login();
        },
        login: function (){
            var self = this,
                parent = self.options.parent,
                submit = self.options.submit;


            submit.on("click", function (){
                var jqXML = $.ajax({
                    url: "/userData",
                    dataType: "json",
                    type: "get",
                    data: parent.serialize()
                });

                jqXML.done(function (data){
                    if(data.code == 200){
                        location.href = "/home";
                    }
                });
            });
        }
    };

    new foo();
})(jQuery);

简单的get提交方式，记得在login.html页面上引用~

一切OK，重启服务，访问login页面

输入用户名以后点击登录：

恭喜！访问成功！

下一节我们将跟数据库连接起来，做一个真正意义上的登录注册。

posted on 2015-07-07 12:00 vlan 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lvvlan/p/4626571.html