開始nodejs+express的學習+實踐（6）

時間 2019-11-07

標籤開始 nodejs+express nodejs express 學習實踐简体版

原文原文鏈接

1.express鏈接mongocss

鏈接mongo，nodejs最接近原始api的模塊就是mongodbhtml

在package.json加入依賴，修改後以下：node

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~3.4.8",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5",
    "formidable": "*",
    "mongodb":"*"
  }
}

咱們執行 npm install安裝依賴，請耐心等待完成。git

咱們顯示咱們已經建立的集合內容。github

index.js路由文件，頂部加入：mongodb

var mongodb = require("mongodb") ;

請求到了mongodb模塊。數據庫

咱們修改首頁路由處理，顯示咱們的數據：express

    app.get('/',function(req, res){
        var server = new mongodb.Server("localhost",27017,{
            auto_reconnect : true
        }) ;
        var conn = new mongodb.Db("blogme",server,{
            safe : true
        }) ;
        conn.open(function(error,db){
            if(error) throw error ;
            db.collection("news",{
                safe : true
            },function(err,collection){
                if(err) throw err ;
                collection.find().toArray(function(e,result){
                    if(e) throw e ;
                    res.render('index', { title: 'Express',hello: 'hello world!',arr: result });
                }) ;
            }) ;
        }) ;
    });

這個幾乎是固定寫法，這個很好理解吧，數據庫在本地，mongo的端口是27017，連接的數據庫和blogmenpm

如今變量db就是咱們的數據庫blogme了。json

db表明blogme數據庫，咱們選擇集合news，而後查找，沒指定就是查找全部，而後轉爲數組形式：[{},{},{}]如此形式。。。。。。

咱們修改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>
    <p><a href="/hello"><%= hello %></a></p>
    <ul>
        <% for(var i=0; i<arr.length; i++) {%>
        <li><a href="/list"><%= arr[i].title %></a><span><%= arr[i].text %></span></li>
        <% } %>
    </ul>
  </body>
</html>

再循環哪裏不會看不懂吧，數據是[{},{},{}]。咱們循環數組後arr[index]就是每條數據，咱們.下標就是顯示記錄下字段內容。

運行，咱們查看首頁內容：

咱們看另外一種實現方式，mongodb的api很接近mongo的api，用起來比較麻煩，咱們使用mongoskin鏈接數據庫。

mongoskin介紹地址：https://github.com/kissjs/node-mongoskin

咱們在json加入mongoskin依賴：

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~3.4.8",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5",
    "formidable": "*",
    "mongodb":"*",
    "mongoskin":"*"
  }
}

執行npm start 加載完成便可。

咱們在index.js路由文件引入mongoskin模塊，按照介紹頁面給的實例便可：

 var mongo = require('mongoskin');
var db = mongo.db("mongodb://localhost:27017/blogme", {native_parser:true});

稍做修改，鏈接blogme數據庫，咱們首頁路由修改：

    app.get('/',function(req, res){
        db.bind('news');
        db.news.find().toArray(function(err, items) {
            if (err) throw err;
            res.render('index', { title: 'Express',hello: 'hello world!',arr: items });
            db.close();
        });
    });

找到集合，而後對集合操做輸出，對比咱們的mongodb使用，代碼簡潔的多得多。

咱們預覽效果同使用mongodb同樣，此時刪除mongodb模塊的引入。

2.數據模型的分離

咱們的index.js做爲路由處理，在mvc是c處理，咱們在這個文件裏請求數據庫和顯示數據代碼放在一塊兒讓程序顯得很混亂，咱們如同在app.js把路由拿出同樣，把數據的訪問也拿出去，在路由頁面只接受到數據就能夠了。

咱們blogme目錄建立 model文件夾，下面建立model.js文件

model和router等同級。

咱們開始編輯model.js文件，用來返回數據：

var mongo = require('mongoskin');
var db = mongo.db("mongodb://localhost:27017/blogme", {native_parser:true});
function model_index(callback){
    db.bind('news');
    db.news.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
exports.model_index=model_index;

在這個頁面，咱們會打開數據庫，將數據返回到回調中，咱們修改index.js路由，

咱們先要獲取model.js文件：

var model = require('../model/model');

首頁路由修改：

    app.get('/',function(req, res){
        model.model_index(function(items){
            res.render('index', { title: 'Express',hello: 'hello world!',arr: items });
        });
    });

調用model的方法，定義回調處理，咱們運行，發現同之前。

咱們在model.js裏面對數據庫有不少連接信息，model.js隨後會不斷加入返回數據處理，代碼會不斷增多，還有就是數據庫名稱這些信息有時候要修改的，爲了方便，咱們把這些提出，在model目錄下建立config.js存放這個數據局鏈接信息：

var connect="mongodb://localhost:27017/blogme";
exports.connect=connect;

model.js修改：

var config = require('./config');
var mongo = require('mongoskin');
var db = mongo.db(config.connect, {native_parser:true});
function model_index(callback){
    db.bind('news');
    db.news.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
exports.model_index=model_index;

運行，預覽。

咱們在model.js此次加peoples集合的返回，顯示在/hello頁面裏：

model.js加入代碼：

var config = require('./config');
var mongo = require('mongoskin');
var db = mongo.db(config.connect, {native_parser:true});
function model_index(callback){
    db.bind('news');
    db.news.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
function model_hello(callback){
    db.bind('peoples');
    db.peoples.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
exports.model_index=model_index;
exports.model_hello=model_hello;

路由index.js對/hello作修改顯示：

    app.get('/hello',  function(req, res){
        model.model_hello(function(items){
            res.render('hello', { arr: items });
        });
    });

模板hello.html修改：

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <ul>
      <% for(var i=0; i<arr.length; i++) {%>
      <li><span><%= arr[i].name %></span></li>
      <% } %>
  </ul>
  </body>
</html>

運行，預覽首頁：

點擊進入hello頁面：

與數據庫集合相符，咱們回頭看model.js

每次加入數據處理都要定義一次，非常麻煩，咱們修改模式，採用單例處理：

var config = require('./config');
var mongo = require('mongoskin');
var db = mongo.db(config.connect, {native_parser:true});
var model={};
model.model_index=function(callback){
    db.bind('news');
    db.news.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
model.model_hello=function(callback){
    db.bind('peoples');
    db.peoples.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
module.exports=model;

咱們每次只要掛在model對象下就能夠了。

寫在expores和module.exports下的區別能夠百度查看，exports是module的一個屬性。

總結：

首先使用了mongodb模塊的數據顯示；

接下來採用了mongoskin模塊；

index.js代碼：修改，引入model模塊和處理

var formidable = require('formidable');
var fs = require('fs');
var crypto = require('crypto');
var model = require('../model/model');
function rout(app){
    app.get('/',function(req, res){
        model.model_index(function(items){
            res.render('index', { title: 'Express',hello: 'hello world!',arr: items });
        });
    });
    app.get('/hello',  function(req, res){
        model.model_hello(function(items){
            res.render('hello', { arr: items });
        });
    });
    app.get('/list',  function(req, res){
        res.render('list', { text: req.query.id });
    });
    app.get('/login',  function(req, res){
        res.render('login');
    });
    app.post('/logincheck',  function(req, res){
       var user= req.body.user;
       var pass= req.body.pass;
        if(user=="tom" && pass=="tom"){
            res.redirect('/');
        }else{
            res.redirect('/login');
        };
    });
    app.get('/file',  function(req, res){
        res.render('file');
    });
    app.post('/upfile',  function(req, res){
       //code
        var form = new formidable.IncomingForm();
        form.uploadDir = "./upload";
        form.parse(req, function(err, fields, files) {
            if (err) {
                res.redirect('/file');
            }
            var tmp_path, target_path;
            if (files.file.size > 0) { //表示有文件上傳
                tmp_path = files.file.path;//內存中的文件，當前文件目錄
                var picType =  files.file.name.split(".")[1];//後綴名
                //移動目的目錄
                target_path = './public/images/pic_1.' + picType;
                //同步方式移動文件
                fs.renameSync(tmp_path, target_path);
            }else{
                res.redirect('/file');
            };
        });
    });
    app.get('/fs',  function(req, res){
        fs.writeFile('./fs/me/1.txt', 'read me','utf8',
            function (err) {
                if (err) throw err;
            });
    });
    app.get('/crypto',  function(req, res){
        var pass="admin";
        var md5 = crypto.createHash('md5');
        var mpass=md5.update(pass).digest('hex');
        var rmpass=mpass.substring(2);
        res.render('crypto', { res:pass,resm:mpass,resrm:rmpass });
    });
    app.get('/globals',  function(req, res){
        res.render('globals', { res:__dirname+":"+__filename });
    });
};
exports.rout=rout;

model.js 新增在model目錄下

var config = require('./config');
var mongo = require('mongoskin');
var db = mongo.db(config.connect, {native_parser:true});
var model={};
model.model_index=function(callback){
    db.bind('news');
    db.news.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
model.model_hello=function(callback){
    db.bind('peoples');
    db.peoples.find().toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
module.exports=model;

config.js

var connect="mongodb://localhost:27017/blogme";
exports.connect=connect;

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>
    <p><a href="/hello"><%= hello %></a></p>
    <ul>
        <% for(var i=0; i<arr.length; i++) {%>
        <li><a href="/list"><%= arr[i].title %></a><span><%= arr[i].text %></span></li>
        <% } %>
    </ul>
  </body>
</html>

hello.html

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <ul>
      <% for(var i=0; i<arr.length; i++) {%>
      <li><span><%= arr[i].name %></span></li>
      <% } %>
  </ul>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。