Nodejs&express+mongodb完成简单用户登录(即Nodejs入门) 寻技术

刚了解nodejs,发现nodejs配置起来不复杂,但也有很多需要注意的地方,今天就记录一下,以后也可拿出来看看.

要完成这个简单的示例,从零开始,走三步就行了.

一.搭建开发环境

二.创建项目(express)

三.编码

我是属于技术类的人,废话无多.

一.搭建开发环境

　　1. nodejs

　　　　1.1 安装

　　　　　　到官方网站下载最新版本 http://www.nodejs.org/, 下载之后,安装,一路 next

　　　　1.2 配置 path

　　　　　　把上面安装的目录配置到环境变量中,方便以后用命令行的方式使用node.exe.

　　　　　　比如我的 node.exe 在 "H:\Program Files\nodejs\node.exe", 在环境变量最开始加上 "H:\Program Files\nodejs\;"

　　2. mongodb

　　　　2.1 安装

　　　　　　http://www.mongodb.org/downloads 下载, 建议下载 zip 版,开发的时候,不需要安装,直接解压就可以用了.

　　　　2.2 使用命令行方式启动 mongodb,

　　　　　　>mongod 127.0.0.1:27017 --dbpath D:\mongodb\dbone　　　　//D:\mongodb\dbone mongodb和dbone文件夹要自己先建立好, 另外, --dbpath 参数值中间不能有空格

二.创建项目(express)

　　1 安装全局插件

　　　　>nmp install -g express　　　　　　　　　　//自动下载 express 插件

　　　　>nmp install -g express-generator　　　　//express 在命令行中的工具

　　2. 添加项目

　　　　>express -e myproject

　　　　>cd myproject 　　

　　　　>npm install　　//让npm根据 package.json 自动下载依赖包

　　　　>npm install mongo && npm install express-mongo　　//下载 mongodb 支持包

三.编码

　　1.修改模版规则

　　　　app.js 中

app.set('view engine', 'ejs');

　　　　修改成:

app.engine('html', require('ejs').__express);
app.set('view engine', 'html');

　　把 /views/ 中的文件后缀改成 *.html

　　2..添加页面(又称视图)

　　　　index.html 点击"登录" 跳转到 login.html, 登录功之后,跳转到 welcome.html, 在 welcome.html 点击注销之后跳转到 login.html

　　　　/views/login.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <form method="post">
        用户名:<input type="text" name="userid" id="userid"/><br/>
        密  码:<input type="password" name="password" id="password"/><br/>
        <input type="submit" value="登录"/>
        <input type="reset" value="重置"/>
    </form>
  </body>
</html>

　　　　/views/welcome.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>欢迎光临: <%= userid %></p>
    <h1><a href="/logout">注销</a></h1>
  </body>
</html>

　　　　修改 /views/index.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <h1><a href="/login">登录</a></h1>
  </body>
</html>

　　　　3.添加 model

　　　　　　添加 /routes/models.js

var mongo = require('mongoose');
var Schema = mongo.Schema;
var UserSchema = new Schema({
    userid: String,
    name: String,
    password: String
});

exports.User = mongo.model('User', UserSchema);

　　　　4.修改路由

　　　　修改 /routes/index.js

var express = require('express');
var router = express.Router();
var mongo = require('mongoose'); //
var models = require('./models'); //引入 model 
var User = models.User;

mongo.connect('mongodb://192.168.199.9:8888/logindb'); //连接数据库

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});


router.get('/login', function(req, res) { //转到登录页面
  res.render('login', { title: '登录' });
});


router.post('/login', function(req, res) { //处理登录请求
    var query_doc = { userid: req.body.userid, password: req.body.password };
    User.count(query_doc, function(err, doc){
        if(doc == 1){//验证成功,转到 欢迎页面
            res.redirect('/welcome?userid=' + query_doc.userid);
        }else{
            res.redirect('/login');
        }        
    });
    
});

router.get('/logout', function(req, res) {//注销,转到登录页面
  res.redirect('/login');
});

router.get('/welcome', function(req, res) {//欢迎页面
    var userid = req.query.userid;
    res.render('welcome', { title: '', userid: userid});
});

module.exports = router;

　　5.运行

　　　　5.1.启动 app.js

　　　　>node app

　　　　5.2 用浏览器访问 http://localhost:3000/

提示:

　　1.项目如果要支持中文,文件的编码要使用 utf-8,否则有乱码

　　2.如果修改了源文件,想马上看到效果,建议安装插件 supervisor

　　　　>npm install -g supervisor //npm 自动下载插件

　　　　>supervisor app　　//安装插件后启动网站的方式(原来是 node app)

　　3.如果配置不成功,个人可以提供远程协助.

　　　　3.1 TeamView: wujialongcn@126.com

　　　　3.2 QQ : wujialongcn@126.com