初學node，配合數據庫實現分頁和多條件查詢

學習了下node.js，和簡單的數據庫操作，寫了一個前后端相連的小demo，做個一個基於 node.js+MySQL+jQuery 的分頁和多條件查詢功能。熟悉業務中前后端的數據交流運作！

 

一、配置環境

因采用的是node.js+express框架搭建的服務器：使用npm命令下載好了相關包，還有和ES6的相關babel包

下面是node.js+express框架搭建的服務器時，在app.js中的配置：

//1.引用框架
const myexpress = require("express");
const logger = require('morgan');  //HTTP請求日志中間件
const favicon = require("serve-favicon"); //icon設置模塊
const cookieParser = require('cookie-parser'); //cookie操作中間件,用戶獲取用戶輸入的信息
const bodyParser = require("body-parser"); //把提交的數據封裝到body-parser中，用於post方式
const indexRouter = require("./routers/indexRouter.js"); //模塊化 引用文件，自己的加個./，indexRouter代表這個文件
const myapp = myexpress(); //執行express中的全局函數，返回一個express的服務對象

myapp.use(logger('dev')); //日志設置
myapp.use(cookieParser()); //cookie設置
myapp.use(bodyParser.urlencoded({ extended: false })); //解析urlencoeded編碼的post參數，URLEncoded編碼中,所有的字符均為ANSCI

myapp.use(myexpress.static(__dirname+"/public")); //靜態文件的路徑配置
myapp.use(indexRouter);

//添加監聽的端口號
myapp.listen("6068", function () {
    console.log("啟動服務");
});

　二、node關於js模塊化，以及數據請求和交互流程

自己也才學后端，描述能力也差，所以只能用小學生的繪畫能力把自己的理解畫出來了：^--^

route.js 路由配置：

const express = require('express');
const stuController = require('./../controller/stuController.js');// 引用下一個模塊post get方法
const route = express.Router();//本來是myapp，但myapp是服務對象，在模塊里不能再
//創建個，所以我們用express的Router這個類來代替，再暴露出去

route.get("/studentlist.do",stuController.studentList);
route.post("/studentdelete.do",stuController.studentDelete);
route.get("/studentadd.do",stuController.studentAdd);
route.get("/studentupdate.do",stuController.studentUpdate);
route.get("/studentsearch.do",stuController.studentSearch);
route.get("/studentcount.do",stuController.studentCount);

module.exports = route;//暴露  接口 

　　

 controller.js 業務操作代碼：

var stuModal = require('./../modal/stuModal.js');
module.exports = {
    //加載表單數據
    studentList: function (request,reponse) {
        let num = request.query.num;
        let current = request.query.current;
        stuModal.stuList(num,current,function (err,data) {
            reponse.send(data);
        })
    },
    //分頁
    studentCount: function (request,reponse) {
        let name = request.query.stuname;
        let sex = request.query.sex;
        let age = request.query.age;
        stuModal.stuCount(name,sex,age,function (err,data) {
            reponse.send(data);
        })
    },
    studentDelete: function (request,reponse) {
        let myid = request.body.myid;
        stuModal.stuDelete(myid,function (err, data) {

            if(err){
                reponse.send("失敗");
            }else{
                reponse.send("ok");
            }
        })
    },
    studentAdd: function (request,reponse) {
        let username = request.query.addname;
        let pwd = request.query.addpwd;
        stuModal.stuAdd(username,pwd,function (err,data) {
            reponse.send("添加成功");
        })
    },
    studentUpdate: function (request,reponse) {
        let id =request.query.myid;
        let username = request.query.updatename;
        let pwd = request.query.updatepwd;
        stuModal.stuUpdate(id,username,pwd,function (err,data) {
            reponse.send("修改成功");
        })
    },
    //多條件搜索
    studentSearch: function (request,reponse) {
        let name = request.query.stuname;
        let sex = request.query.sex;
        let age = request.query.age;
        let num = request.query.num;
        let current = request.query.current;
        stuModal.stuRearch(name,sex,age,num,current,function (err,data) {
            reponse.send(data);
        })
    }
}

　　modal.js ：嵌套SQL語句，在數據庫操作相關數據，回調函數在返回結果數據給 controller.js

const mysql = require('mysql');
const sqlPoolObj = require('./sqlpool.js');
const sqlPool = sqlPoolObj.sqlpool();

module.exports = {
    stuList: function (num,current,callback) {
        let arr = [(current-1)*num,parseInt(num)];
        sqlPool.connect("select * from user limit ?,?",arr,callback);
    },
    stuCount: function (name,sex,age,callback) {
        let sql = "select count(1) as num from user where 1=1";
        let arr = [];
        if(name!=""){
            name = "%"+name+"%";
            sql += " and username like ?";
            arr.push(name);
        }
        if(age!=""){
            age = "%"+age+"%";
            sql += " and age like ?";
            arr.push(age);
        }
        if(sex!=-1){
            if(sex==1){
                sex = "%男%";
                sql += " and sex like ?";
                arr.push(sex);
            }else{
                sex = "%女%";
                sql += " and sex like ?";
                arr.push(sex);
            }
        }
        sqlPool.connect(sql,arr,callback);
    },
    stuDelete: function (myid,callback) {
        sqlPool.connect("delete from user where id=?",[myid],callback);
    },
    stuAdd: function (username,pwd,callback) {
        var sql = "INSERT INTO user(id,username,password) VALUES(NULL,?,?)";
        console.log(username+"---"+pwd);
        sqlPool.connect(sql,[username,pwd],callback);
    },
    stuUpdate: function (id,newusername,newpwd,callback) {
        if(newusername==""){
            sqlPool.connect("UPDATE USER SET PASSWORD=? WHERE id=?",[newpwd,id],callback);
        }else if(newpwd==""){
            sqlPool.connect("UPDATE USER SET username=? WHERE id=?",[newusername,id],callback);
        }else{
            sqlPool.connect("UPDATE USER SET username=?,PASSWORD=? WHERE id=?",[newusername,newpwd,id],callback);
        }
    },
    stuRearch: function (name,sex,age,num,current,callback) {
        let sql = "select * from user where 1=1";
        let arr = [];
        if(name!=""){
            name = "%"+name+"%";
            sql += " and username like ?";
            arr.push(name);
        }
        if(age!=""){
            age = "%"+age+"%";
            sql += " and age like ?";
            arr.push(age);
        }
        if(sex!=-1){
            if(sex==1){
                sex = "%男%";
                sql += " and sex like ?";
                arr.push(sex);
            }else{
                sex = "%女%";
                sql += " and sex like ?";
                arr.push(sex);
            }
        }
        sql += " limit ?,?";
        arr.push((current-1)*num,parseInt(num));
        sqlPool.connect(sql,arr,callback);
    }
}

　多條件查詢 使用了 模糊查詢 like “%字段%”，還有 where 1=1 手段，這樣可以在后面根據用於輸入的情況，拼接在SQL語句后面

let sql = "select * from user where 1=1";// where 1=1 可以滿足下面所以情況的拼接
        let arr = [];
        if(name!=""){
            name = "%"+name+"%";
            sql += " and username like ?";
            arr.push(name);
        }
        if(age!=""){
            age = "%"+age+"%";
            sql += " and age like ?";
            arr.push(age);
        }
        if(sex!=-1){
            if(sex==1){
                sex = "%男%";
                sql += " and sex like ?";
                arr.push(sex);
            }else{
                sex = "%女%";
                sql += " and sex like ?";
                arr.push(sex);
            }
        }
        sql += " limit ?,?";
        arr.push((current-1)*num,parseInt(num));
        sqlPool.connect(sql,arr,callback);

　　

最后 在 modal 文件 創建一個 SQLcool.js文件，用於連接MySQL服務器的配置，使用連接池的方式

const mysql = require("mysql");
module.exports.sqlpool = function () {
    let pool = {
        config:{
            host:"localhost",
            user:"root",
            password:"root",
            port:3306,
            database:"text"
        },
        connect: function (sql,arr,fn) {
            //創建鏈接池對象
            const pool= mysql.createPool(this.config);
            //獲取鏈接池對象
            pool.getConnection(function (err,connect) {
                if(err){
                    console.log(err);
                }else{
                    connect.query(sql,arr,fn);
                }
            });
        }
    }
    return pool;
}

　　

 三、前台的HTML頁面，使用ajax，實現頁面的局部跟新，當然HTML結構和 css樣式就忽略吧

首先,定義全局變量，用於記錄當前頁數，每頁顯示的數據，多條件搜索的信息等等

然后將從數據庫查詢的數據，一次加入在頁面的表格中，次操作封裝一個方法：

function stuList(){
                $.ajax({
                    type: "get",
                    url: "/studentsearch.do",
                    dataType:"json",
                    data: {
                        num:pageNum,
                        current:currentPage,
                        stuname:stuName,
                        sex:stuSex,
                        age:stuAge
                    },
                    success: function(ajaxObj){
//                        console.log(typeof ajax);
                        let stuMain = document.getElementById("stu-tb-main");
//                        var ajaxObj = JSON.parse(ajax.responseText);
                        stuMain.innerHTML="";
                        for(let i=0; i<ajaxObj.length; i++){
                            stuMain.innerHTML += "<tr><td class='stuname'>"+
                            ajaxObj[i].username+"</td><td>"+
                            ajaxObj[i].password+"</td><td>"+
                            ajaxObj[i].sex+"</td><td>"+
                            ajaxObj[i].age+"</td><td><a class='btndelete' myid='" +
                            ajaxObj[i].id+"'>刪除</a><a class='btnupdate' myid='"+
                            ajaxObj[i].id+"'>編輯</a></td></tr>"
                        }
                        pageIndex();
                    },

　將每次ajax請求后的，實時更新分頁按鈕封裝成方法

 function getTotalpage(){
                $.ajax({
                    type: "get",
                    url: "/studentcount.do",
                    dataType:"json",
                    data: {
                        stuname:stuName,
                        sex:stuSex,
                        age:stuAge
                    },
                    success: function(ajaxObj){
                        totalNum = ajaxObj[0].num;
//                        console.log(totalNum);
                        totalPage = Math.ceil(totalNum/pageNum);
//                        console.log(totalPage);
                        var pagebtn = $("#pagebtn").html("");
                        for(var i=1;i<=totalPage;i++){
                            pagebtn.append("<span class='btnspan'>"+i+"</span>");
                        }
                        pageIndex();
                    }
                })
            };

　高亮當前頁的頁碼方法：

 

之后給相關dom元素添加點擊事件，因為dom是每次ajax請求重新加載的，所用用事件委托的方式添加點擊事件

分頁：

//分頁跳轉到點擊頁
            $("#pagebtn").on("click",".btnspan", function () {
                    currentPage = $(this).text();
                    stuList();
            })
            //首頁
            $("#pageindex").on("click", function () {
                currentPage = 1;
                stuList();
            })
            //尾頁
            $("#pagelast").on("click", function () {
                if(totalPage!=undefined){
                    currentPage = totalPage;
                    stuList();
                }
            })
            //上一頁
            $("#pageprev").on("click", function () {
                if(currentPage>1){
                    boolean = false;
                    currentPage--;
                    stuList();
                }
            })
            //下一頁
            $("#pagenext").on("click", function () {
                if(currentPage<totalPage){
                    boolean = false;
                    currentPage++;
                    stuList();
                }
            })

多條件查詢：

$("#search").on("click", function () {
                stuName = $("#ipt-search").val();
                stuAge = $("#ipt-search-age").val();
                stuSex = $("#search-sex").val();
                currentPage = 1;
                stuList();
                getTotalpage();
            })

　　

 四、頁面效果：