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

時間 2019-11-11

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

原文原文鏈接

1.分頁顯示數據javascript

準備工做：啓動數據庫服務，打開mongo.exe，啓動nodejs服務。css

瀏覽器地址：http://localhost:1234/ 會看見顯示的數據。html

咱們要作的是分頁顯示數據，在預覽時咱們常常看見，如今news集合只有3條記錄，咱們增長到10條，做爲操做使用。java

刷新看見數據所有進來了，咱們能夠着手分頁的工做了。node

咱們先簡單分析分頁原理：mysql

首先地址上有當前頁參數（get方法）如變量 currentpage=1第一頁，地址變爲localhost:1234/？currentpage=1;jquery

每頁顯示個數如變量 count=3;ajax

而後就是當前頁顯示記錄公式（currentpage-1）*3sql

第1頁 0-2記錄數據庫

第2頁 3-5記錄

類推;

記錄總個數/每頁個數等於總頁數，不整除+1頁。

咱們修改index.js的首頁處理，get獲取當前頁數：

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

獲取參數currentpage的值，沒有參數默認在第一頁。

修改model.js的處理：

對於查詢操做，mongoskin提供了很是豐富的處理，咱們查看api，找處處理方法，假如是第一頁，那麼就該獲取0-2記錄的數據，

model.model_index=function(currentpage,callback){
    var count=3;
    var offset=(currentpage-1)*count;
    db.bind('news');
    db.news.find({},{limit: count, skip:offset}).toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};

我對傳入的參數作了處理，在find方法加入limit和skip高級處理，skip就是跳到第幾條記錄開始顯示，limit就是日後查詢幾條，和mysql的limit語句相似。

咱們查看首頁數據：

顯示3條，咱們繼續處理，咱們首先要獲取總記錄數，而後算出總頁數，把這個都要返回給路由程序中：

model.model_index=function(currentpage,callback){
    var count=3;
    var offset=(currentpage-1)*count;
    db.bind('news');
    db.news.count({},function(err, len){
        if (err) throw err;
        db.news.find({},{limit: count, skip:offset}).toArray(function(err, items) {
            if (err) throw err;
            callback(items,len);
            db.close();
        });
    });
};

使用count方法，第一個是查詢參數，這裏能夠不寫，其實查詢參數頗有用的，好比咱們要查性別是女的就要加入這個設置，

回調len就是總記錄數，咱們返回到路由處理：

    app.get('/',function(req, res){
        var currentpage=req.query.currentpage?req.query.currentpage:1;
        model.model_index(currentpage,function(items,len){
            res.render('index', { title: 'Express',hello: 'hello world!',arr: items,len:len });
        });
    });

修改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>
    <h1><%= len %></h1>
  </body>
</html>

查看，顯示爲10，和總記錄相同，下面咱們對處理一鼓作氣：

修改model.js，把總頁數，記錄內容，總頁數，所有返回：

model.model_index=function(currentpage,callback){
    var count=3;
    var offset=(currentpage-1)*count;
    db.bind('news');
    db.news.count({},function(err, len){
        if (err) throw err;
        var allpage=len%count==0?len/count:Math.floor(len/count)+1;
        db.news.find({},{limit: count, skip:offset}).toArray(function(err, items) {
            if (err) throw err;
            callback(items,len,allpage);
            db.close();
        });
    });
};

index.js：

    app.get('/',function(req, res){
        var currentpage=req.query.currentpage?req.query.currentpage:1;
        model.model_index(currentpage,function(items,len,allpage){
            res.render('index', { title: 'Express',hello: 'hello world!',arr: items,len:len,allpage:allpage,cur:currentpage });
        });
    });

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>
    <div>
        <%
        for(var i=1;i<=allpage;i++){
        %>
        <a href="/?currentpage=<%= i %>"><%= i %></a>
        <%
        };
        %>
        總頁數：<span><%= allpage %></span>
        當前在<span><%= cur %></span>頁
        共<span><%= len %></span>記錄
    </div>
  </body>
</html>

咱們預覽一下：

雖然長得醜，不過也算是比較全了，這只是最最簡單分頁，在現實上其實還要有不少處理，好比當前頁高亮，頁數過渡怎麼顯示，還有上一頁，下一頁，第一頁，最後一頁，跳頁的處理等，能夠本身研究。

總結：

針對數據庫的api：

count方法，第一個參數值query，回調返回總頁數
find方法，第一個參數query，還能夠寫高級的skip和limit跳記錄和限制處理，和sql語句的select很像skip如同mysql的limit
toArray 轉爲數組形式，方便輸出顯示，和mysql的mysql_fetch_toarray很像。
還有一個sort設置，在find方法裏，和mysql的排序同樣

2.ajax加載更多顯示數據

咱們仍是使用news集合數據作處理，不過採用ajax的形式，針對/hello作處理，在hello.html引入jq類庫。

咱們把jq類庫放在public的javascripts下，

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>
<script src="javascripts/jquery-1.10.2.js"></script>
</html>

咱們會感受很困惑，hello.html在views下，jq類庫在public下，爲什麼引用時直接javascripts/jquery-1.10.2.js就能夠了，

不該該是../public/javascripts/jquery-1.10.2.js嗎？

咱們打開app.js，找到這個部分：

__dirname是node的全局對象，返回app.js的目錄，這個方法就是針對靜態模板，路徑的公用部分是app.js路徑/public。

path模塊的join是路徑拼接方法。

咱們已經有了分頁的基礎，對ajax的分頁實現，加快速度：

index.js路由處理：

    app.get('/hello',  function(req, res){
        var currentpage=req.query.currentpage?req.query.currentpage:1;
        model.model_index(currentpage,function(items){
            res.render('hello', { arr: items });
        });
    });

若是沒有參數，顯示第一頁；

model.js：

model.model_hello=function(currentpage,callback){
    var count=3;
    var offset=(currentpage-1)*count;
    db.bind('news');
    db.news.find({},{limit: count, skip:offset}).toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};

返回拿到的的跳頁數據；

hello.html先測試顯示：

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <ul>
      <ul>
          <% for(var i=0; i<arr.length; i++) {%>
          <li><a href="/list"><%= arr[i].title %></a><span><%= arr[i].text %></span></li>
          <% } %>
      </ul>
  </ul>
  </body>
<script src="javascripts/jquery-1.10.2.js"></script>
</html>

hello.html顯示了3條記錄，咱們在頁面加一個」加載更多「按鈕，而後寫ajax請求：

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <ul>
      <ul id="list">
          <% for(var i=0; i<arr.length; i++) {%>
          <li><a href="/list"><%= arr[i].title %></a><span><%= arr[i].text %></span></li>
          <% } %>
      </ul>
  </ul>
    <input type="button" id="more" value="加載更多">
  </body>
<script src="javascripts/jquery-1.10.2.js"></script>
  <script type="text/javascript">
      $(function(){
          var more=1;
          $("#more").click(function(){
              more+=1;
              $.ajax({
                  url: "/hellomore",
                  type: "GET",
                  data:{more:more},
                  dataType: "json",
                  error: function(){
                      alert('Error');
                  },
                  success: function(data,status){
                      for(var i=0;i<data.length;i++){
                          $("#list").append('<li><a href="/list">'+data[i].title+'</a><span>'+data[i].text+'</span></li>');
                      };
                  }
              });
          });
      });
  </script>
</html>

針對ajax咱們加入路由處理：

    app.get('/hellomore',  function(req, res){
        model.model_hello(req.query.more,function(items){
            res.send(items);
        });
    });

res.send方法就是返回數據，res.render是返回給模板。

預覽一下效果：

點擊「加載跟多」

咱們知道ajax是異步請求，就好像偷偷的去指定地方那東西，而後獲取到，在以js插入到標籤裏，也就無刷新處理了。

咱們是發送get請求，每次給頁數加1，偷偷拿到返回的數據，插入到ul內部。

總結：

index.js，針對首頁和hello作了處理

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){
        var currentpage=req.query.currentpage?req.query.currentpage:1;
        model.model_index(currentpage,function(items,len,allpage){
            res.render('index', { title: 'Express',hello: 'hello world!',arr: items,len:len,allpage:allpage,cur:currentpage });
        });
    });
    app.get('/hello',  function(req, res){
        var currentpage=req.query.currentpage?req.query.currentpage:1;
        model.model_hello(currentpage,function(items){
            res.render('hello', { arr: items });
        });
    });
    app.get('/hellomore',  function(req, res){
        model.model_hello(req.query.more,function(items){
            res.send(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加入查詢處理等

var config = require('./config');
var mongo = require('mongoskin');
var db = mongo.db(config.connect, {native_parser:true});
var model={};
model.model_index=function(currentpage,callback){
    var count=3;
    var offset=(currentpage-1)*count;
    db.bind('news');
    db.news.count({},function(err, len){
        if (err) throw err;
        var allpage=len%count==0?len/count:Math.floor(len/count)+1;
        db.news.find({},{limit: count, skip:offset}).toArray(function(err, items) {
            if (err) throw err;
            callback(items,len,allpage);
            db.close();
        });
    });
};
model.model_hello=function(currentpage,callback){
    var count=3;
    var offset=(currentpage-1)*count;
    db.bind('news');
    db.news.find({},{limit: count, skip:offset}).toArray(function(err, items) {
        if (err) throw err;
        callback(items);
        db.close();
    });
};
module.exports=model;

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>
    <div>
        <%
        for(var i=1;i<=allpage;i++){
        %>
        <a href="/?currentpage=<%= i %>"><%= i %></a>
        <%
        };
        %>
        總頁數：<span><%= allpage %></span>
        當前在<span><%= cur %></span>頁
        共<span><%= len %></span>記錄
    </div>
  </body>
</html>

hello.html ajax請求，注意jq類庫的引入

<!DOCTYPE html>
<html>
  <head>
    <title>hello</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <ul>
      <ul id="list">
          <% for(var i=0; i<arr.length; i++) {%>
          <li><a href="/list"><%= arr[i].title %></a><span><%= arr[i].text %></span></li>
          <% } %>
      </ul>
  </ul>
    <input type="button" id="more" value="加載更多">
  </body>
<script src="javascripts/jquery-1.10.2.js"></script>
  <script type="text/javascript">
      $(function(){
          var more=1;
          $("#more").click(function(){
              more+=1;
              $.ajax({
                  url: "/hellomore",
                  type: "GET",
                  data:{more:more},
                  dataType: "json",
                  error: function(){
                      alert('Error');
                  },
                  success: function(data,status){
                      for(var i=0;i<data.length;i++){
                          $("#list").append('<li><a href="/list">'+data[i].title+'</a><span>'+data[i].text+'</span></li>');
                      };
                  }
              });
          });
      });
  </script>
</html>

相關標籤/搜索

每日一句

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