首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:07:21
字体:
来源:转载
供稿:网友
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帮我们创建了一个完整的项目级目录

    1_thumb5

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

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

    3_thumb2

    2.目录结构

    2_thumb3

    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 handlerapp.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});// error handlers// development error handler// will print stacktraceif (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 userapp.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等等

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

    原本的静态资源目录:

    4_thumb1

    改过后的静态资源目录:

    image_thumb1

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

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

    image_thumb3

    image_thumb5

    可以看到我们可以成功访问页面,并且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&g
  • 发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表