node+mongodb 简单注册页面

1.开发框架的选用

node+mongodb 简单注册页面_第1张图片
开发框架.png

2、项目需求

实现一个简单注册页面,保存用户数据到mongondb数据库中

3、项目框架搭建

方法1:自己创建一个工程目录,然后到工程目录执行下面安装命令

    npm install express  // 后台开发第三方
    npm install mongoose //数据库管理
    npm install moment   // 时间处理的js
    npm install bower -g  Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源
    bower install bootstrap  // html第三方框架
    新版express4中,要独立安装static,npm install serve-static --save
    bodyParser 已经不再与Express捆绑,需要独立安装。
    令行执行:npm install body-parser

grunt相关安装,注意需要在工程目录使用npm init生产package.json

npm install grunt -g 
npm install grunt-cli -g

npm install grunt-contrib-watch --save-dev  //只有有文件修改,就会重新执行注册好的任务
npm install grunt-nodemon --save-dev   // 实时监听app.js 自动重启
npm install grunt-concurrent --save-dev   

2、使用express-generator来初始化项目
首先安装node.js

brew install node

然后全局安装express

npm install -g express

安装express-generator,全局安装-g

npm install -g express-generator

创建一个项目,我们用的ejs模板,创建命令如下

express -e loginWebApp

-e表示使用ejs模板,loginWebApp为项目的名字
3、到项目目录中执行npm install就把需要第三方依赖安装好
另外需要安装mongoose数据库操作第三方和Promise第三方bluebird

npm install bluebird
npm install mongoose

4、项目结构的简单说明

node+mongodb 简单注册页面_第2张图片
项目结构.png

1、app.js:服务器启动的入口文件,在这里编写服务器的逻辑
2、models:数据库操作的models
3、node_modules:依赖的第三方模块
4、package.json: 此文件是项目的配置文件(可定义应用程序名,版本,依赖项等等)
5、public:images、javascripts、stylesheets,存放一些静态资源
6、routes:存放路由文件
7、schemas:存放数据库抽象模式
8、views:存放视图

5、编写服务代码

1、创建app对象和mogoose

创建一个app对象
var express = require('express');
var app = express();
// 数据库相关
var mongoose = require('mongoose')
mongoose.Promise = require('bluebird');

2、设置views路径和模板引擎

//设定视图路径主要清楚__dirname的意思就可以了,它是node.js中的全局变量,表示取当前执行文件的路径     
app.set('views', path.join(__dirname, 'views'));   
//设定视图引擎模板
app.set('view engine', 'ejs');

3、使用app.use([path], function)方法来使用中间件path为路径,function·为中间件

//这一句中可能要注意一下,express.static()是处理静态请求的,
//设置了public文件,public下所有文件都会以静态资料文件形式返回
//(如样式、脚本、图片素材等文件)
app.use(express.static(path.join(__dirname, 'public'))); 
//上面代码表示当用户使用/访问时,调用routes,即routes目录下的index.js文件,
//其中.js后缀省略,用/users访问时,调用routes目录下users.js文件
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);

4、看下index.js主要的路由代码

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

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

module.exports = router;```
5、编写数据库的操作模式

var mongoose = require('mongoose')

var Schema = mongoose.Schema
var UserSchema = new Schema({

username:String,
password:String

})

module.exports = UserSchema

转为User模型

var mongoose = require('mongoose')
var UserSchema = require('../schemas/UserSchema')

var User = mongoose.model('User',UserSchema)

module.exports = User;

6、注册路由编写,get为获取注册页面,post处理表单的提交保存用户数据到数据库

var express = require('express')
var router = express.Router()
var User = require('../models/User')

var crypto = require('crypto')

router.get('/',function(req,res){

res.render('register')

})

router.post('/',function(req,res){

console.log(req.body.username);
console.log(req.body.password);


var password =  req.body.password

//加密
var md5 = crypto.createHash('md5')
var md5_pwd = md5.update(password).digest('hex')


var user = new User({

username:req.body.username,
password: md5_pwd 
});

// 检查是否有用户存在
User.find({'username':req.body.username},function(err,result){

    if(err){
        res.locals.error=err;
        res.render('register')
        return;
    }

    if(result.length>0){
        res.locals.error='用户已存在';
        console.log('test is result ' + res)
        res.render('register')
    }
    else {

        user.save(function(err,result){

            if(err){

                res.locals.error=err;
                res.render('register')

            }else {

                 res.locals.success = '注册成功,请点击    登录 ' ;
                 res.render('register')

            }

        });

    }

    



})

})
})

module.exports = router

注册页面的ejs,注意这里用到`bootstrap`和`jquery`





注册





注册页面


    <% if (locals.success) { %> 
      
<%- success %>
<% } %> <% if (locals.error) { %>
<%= error %>
<% } %>


7、运行项目进行测试

node app.js

在浏览其中http://localhost:3000/register进行注册页面




[bower的使用方法](https://segmentfault.com/a/1190000002971135)

你可能感兴趣的:(node+mongodb 简单注册页面)