1. 程式人生 > >NodeJS部落格實戰14_後臺管理註冊使用者分頁原理和實現

NodeJS部落格實戰14_後臺管理註冊使用者分頁原理和實現

原始碼地址:https://github.com/RidingACodeToStray/Nodejs_blog

主要功能點:

1)資料庫的分頁查詢

2)前臺分頁傳參

3)後端分頁資料返回

4)頁頭和頁尾的分頁處理

實現思路:

前端點選上一頁或者下一頁的時候將下一頁的page資訊傳到後臺,前提是前端的page為當前頁資訊,因此需要後臺將page返回;

後臺獲取前端傳過來的page資訊req.query.page預設page為1,現在使用資料庫模型的count方法查詢總條數返回前端,計算出總頁數pages,並設定每頁長度limit;

後端根據page資訊計算出查詢需要忽略的當前頁前條數skip並忽略掉;

前端模板接受當前頁page,總頁數pages,總條數count,每頁條數limit資訊展示出來;

將分頁程式碼分離成模板,便於其他頁面重複利用,使用模板的include方法引入。

1.前端分頁模板

在views/admin新建page.html作為分頁模板,寫好對應引數

	<div class="a-page">
		<span><a href="/admin/user?page={{page-1}}">上一頁</a></span>
		<span class="a-pageInfo">
			當前第{{page}}頁,每頁{{limit}}條,共{{pages}}頁{{count}}條資料
		</span>
		<span><a href="/admin/user?page={{page+1}}">下一頁</a></span>
	</div>

在views/admin/user_index.html引入分頁模板

{% include 'page.html' %}

2.後端資料處理

查詢資料庫總條數count,根據總條數計算總頁數pages,驗證當前頁數page和當前頁應忽略的條數

views/routers/admin.js

//使用者管理

router.get('/user',function(req,res){
	//limit()限制獲取的使用者條數
	//skip()忽略資料的查詢
	var page = Number(req.query.page) || 1;
	var limit = 2;
	var pages = 0;
	User.count().then(function(count){
		//計算總頁數向上取整
		pages = Math.ceil(count / limit);
		//page取值不能超過pages,去總頁數和page中的最小值
		page = Math.min(page,pages);
		//page取值不能小於1
		page = Math.max(page,1);
		var skip = (page -1 ) * limit;
		//從資料中讀取所有的使用者資料
		User.find().limit(limit).skip(skip).then(function(users){
			// console.log(users);
			res.render('admin/user_index',{
				userInfo:req.userInfo,
				users:users,
				page:page,
				count:count,
				pages:pages,
				limit:limit
			});
		});	
	})

	
})


相關推薦

NodeJS部落實戰14_後臺管理註冊使用者原理實現

原始碼地址:https://github.com/RidingACodeToStray/Nodejs_blog主要功能點:1)資料庫的分頁查詢2)前臺分頁傳參3)後端分頁資料返回4)頁頭和頁尾的分頁處理實現思路:前端點選上一頁或者下一頁的時候將下一頁的page資訊傳到後臺,前

NodeJS部落實戰13_後臺管理註冊使用者展示

原始碼地址:https://github.com/RidingACodeToStray/Nodejs_blog主要實現功能:1)登入後臺管理後進入使用者管理介面,通過查詢資料庫獲取所有註冊使用者資訊2) 將註冊使用者資訊展示在介面上1.查詢資料庫獲取所有使用者資訊呼叫moog

Node.js部落系統--14.後臺管理-註冊使用者資料展示

在“使用者管理”中新增路由  引入資料,傳遞給user_index頁面  user_index內容 user_index.html {% extends 'layout.html' %} {% block main %} <ol class="b

Node.js部落系統--21.後臺管理-部落內容資訊擴充套件(*)

cd E:\miaovProgram\mongodb\bin mongod --dbpath=E:\miaovProgram\personBlog\db --port=27017 這一節主要擴充套件一下部落格資訊的內容 首先,在contents.js裡面加一些表的欄位

NodeJS部落實戰04_模組開發

該部落格專案的模組分為前臺展示,後臺管理和API介面三個模組,在app.js裡面劃分好這些模組,在各自模組進行開發app.js://應用程式的啟動入口檔案 //載入模組 var express = require('express'); //載入express模組 var

【轉載】Vue 2.x 實戰後臺管理系統開發(二)

null element asc 其他 就會 ans 目錄 asi all 2. 常見需求 01. 父子組件通信 a. 父 -> 子(父組件傳遞數據給子組件) 使用 props,具體查看文檔 - 使用 Prop 傳遞數據(cn.vuejs.org/v2/guide

NodeJS簡易部落系統(八)功能需求描述及使用者模組實現

一、功能需求描述 用一張導圖來說明: 二、頁面設計 頁面設計如下: 三、梳理下整個系統的業務流程 對這個小專案進行業務流程的梳理,流程圖大致如下: 四、使用者模組實現 1、資料庫設計及程式碼 (1)使用者表(users) (2)博文分類表(

搭建自己的部落(二十一):通過django表單實現登入註冊

1、變化的部分 2、上程式碼: {# 引用模板 #} {% extends 'base.html' %} {% load staticfiles %} {% block header_extends %} <link rel="stylesheet" h

部落專案之前端開發—註冊功能實現

1、前端註冊功能實現   在service/user.js中增加reg註冊函式      1 import axios from "axios" 2 import { observable } from "mobx"; 3 import store from 'store' 4

web學習之部落小專案(登入註冊模組)

這個小專案採用的框架是struts2+spring3+hibernate3   將action與hibernate整合到spring中 剛入手時,還是沒有層次性,想到什麼就先寫什麼,寫完之後再回頭看時

LAMP+Wolrdpress搭建個人部落實戰

        總覺得我寫這篇部落格有點出生牛犢不怕虎的意味在裡面,向來不敢用這種標題,害怕被大佬群圍挑刺,但是既然決定做了就做吧,反正也是自己剛學的東西,被挑刺也是正常的,唯一的想法是快來幾位大佬看我的東西吧~        這裡我們以阿里云為例,使用的是普通一核,1M,2

Vue實戰後臺管理系統(一)

這個系列是手把手教大家從零開始寫一個後臺管理系統,使用的技術:vuejs+vue-router+axios+vuex+element-ui+scss。 1.開發環境搭建 開始寫程式碼前準備工作要做好,包括vue開發環境,除錯工具的安裝,webstorm的配置

Vue 2.x 實戰後臺管理系統開發(一)

1. 導語 該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個後臺管理專案的,我會將自己遇到的問題貼出,希望可以幫助到其他人。 2. 開發前須知 我的後臺管理系統專案運用瞭如下框架/外掛: Vue 2.x —— 專案所使用的 js 框架

C# MVC的部落開發(三)註冊

在做註冊的時候博主遇到了個很坑爹的問題那就是本地傳送郵件正常可是搬運到阿里雲伺服器傳送郵件就gg了查詢了很久才知道阿里雲預設是把25傳送郵件埠給封了也就是說放在阿里雲伺服器的傳送郵件是無法以無ssl加密的方式傳送的,必須通過ssl家裡的465埠去傳送郵件然後我們呼叫封裝好Ma

博客園-後臺管理(富文本編輯器BS模塊)

pad 沒有 .com print 粘貼 將他 屬性 turn 不能 後臺管理頁面 在個人主站 頁面中我們設計有管理按鈕,當我們點擊管理按鈕時,應該能進入後臺管理自己的文章(註意:這裏進入的應該是當前登錄人的後臺,而不是該站點的後臺) 首先設計url from bl

從零搭建java後臺管理系統(二)mysqlredis安裝

docker 權限 req 安全性 分享圖片 登錄 red 解析 append 接上篇開始安裝mysql和redis 註意了,如果用阿裏雲服務器,外網訪問的端口必須在安全組開啟,否則外網訪問不通 三、服務器安裝redis和mysql 本次環境搭建將所有第三方服務會安

搭建自己的部落(三):簡單搭建首詳情

上一篇我們建立了部落格表和標籤表以及超級使用者,那如何將建立的部落格通過網頁顯示出來呢?‘我們簡單的建立首頁和詳情頁。 1、新建html介面 首先建立在blog app下建立一個templates資料夾,這個資料夾用來放置前端頁面,注意資料夾名字必須是templates。 建立blog_list.htm

vue+elementui搭建後臺管理介面(2首)

1 會話儲存 使用html5的 sessionStorage 物件臨時儲存會話 // 儲存會話 sessionStorage.setItem('user', username) // 刪除會話 sessionStorage.removeItem('user', username) 2 將所有未登入會話重

關於後臺管理前端列表外掛的選擇使用。

做後臺管理系統一般不怎麼講究樣式。都是以功能為主。而最多的應該是資料列表了。如果純粹自己寫,需要考慮因素太多,例如分頁,搜尋,排序,功能擴充套件,樣式統一等,還容易出現問題,不符合快速開發的理念。採用Jquery的外掛,使用AJAX的互動方式。進行列表頁面的快速渲染。而關於選

簡單程式碼爬取部落超連結的文字,並且去除字元“原”空格

        這裡給大家分享一個怎麼用Python爬取超連結的文字,並且能夠去除字元“原“和前後空格、空行等等。這個程式碼不多,而且非常簡單。我這裡用的是Python3,版本不和的可以調整一下,這個程式碼還是很好理解的。        接下來我給大家分享爬取我的部落格超連結