笔记整理（ajax+node.js+mysql）

最新推荐文章于 2022-10-26 22:54:06 发布

爱长发的短发小二哥

最新推荐文章于 2022-10-26 22:54:06 发布

阅读量331

点赞数 1

本文链接：https://blog.csdn.net/John_jian_yo/article/details/105528779

版权

安装node环境，不知道自己是否以及安装可以
$ node -v
查看版本；
如果没有安装node环境可以学习
安装mysql，可以查看学习，在这里就不做赘述，学习地址，并且创建数据库和数据表，这里都是使用菜鸟上的列子和数据
数据库为 RUNOOB ，数据表为 websites ，由于本人也是初学习这些啊，(⊙﹏⊙)b 汗
下载jquery，这里使用的是jq的ajax请求，所有先下载了jquery，其他的请求类似，附jq地址
创建项目，我这里创建了一个文件夹，在文件夹下面分别创建了HTML，JS文件

创建html文件，我这里命名为demo.html，名字自己可以随便取的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" id="checkData" value="" placeholder="请输入要查询的数据id，空为所有数据">
<button onclick="ckeckBtn();">ID查询</button><br> <br> <br>
pageSize:<input type="text" id="pageSize" value="" placeholder="请输入每页要显示数据条数">
<button onclick="ckeckBtn();">分页查询</button>
<div id="checkList"></div>
<div id="pageParam"></div>
</body>
<script src="../js/jquery.min.js"></script>
<script>
    var pageNum = 1;//初始化查询第一页
   
//格式化数据库查询的数据，并且以表格的形式显示到页面
    var formatData = function (dataParam) {
        var reStr = new Array();
        var thead = new Array();
        dataParam.forEach((item) =>{
            if(item){
                var objKeys = Object.keys(item);
                thead = objKeys.map((val,index)=>{
                            return '<td align="center" onclick="paixuClick('+index+')">'+val+'</td>';
                 })
                reStr.push(objKeys.map((val,index)=>{
                    return '<td align="center">'+item[val]+'</td>';
                }))
            }
        })
        var resultStr = '';
        reStr.forEach((item,index)=>{
            var styleStr = '<tr>'+item.join('')+'</tr> ';
            if(index%2>0){
                styleStr = '<tr style="background: #eee">'+item.join('')+'</tr> ';
            }
            resultStr += styleStr;
        })
        thead = '<thead style="background: #e0e0e0;font-weight: bold;">'+thead.join('')+'</thead>';
        return '<table border="1" rules="all" width="80%">' + thead + resultStr + '</table>';
    }
//格式化分页按钮，当然余数大于零的情况都算是多加一页
    var pageCountFormat = function (size,count) {
        var countLength = count / size;
        if(countLength<=1){
            return 0;
        }
        if(count % size>0){
            countLength = parseInt(countLength) + 1
        }
        return countLength;
    }
//ajax请求数据，都是放在本地的，所以请求的接口都是本地的ip
    function ckeckBtn(n,p) {
        $.ajax({
            type:"post",
            url:"http://192.168.1.5:3000/getList",
            dataType:"json",
            data:{
                id:$("#checkData").val(),
                pageNo:n?n:1,
                pageSize:$("#pageSize").val(),
                order:p?p:''
            },
            success:function(data){            

                var pageBtn = '';
                var countLength = pageCountFormat($("#pageSize").val(),data.count);
                for(var i=1;i<=countLength;i++){
                    pageBtn += '<button onclick="pageParam('+i+');">'+i+'</button>'
                }
                $('#pageParam').html(pageBtn);
                $('#checkList').html(formatData(data.dataList));
            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        });
    }
    
//分页按钮点击事件
    function pageParam(n) {    
        pageNum = n
        ckeckBtn(n)
    }

//排序查询
    function paixuClick(p) {       
        ckeckBtn(pageNum,p)
    }
</script>
</html>

有id查询数据和分页查询数据，如果id不输入或者每页显示的数据个数不输入的话，都是查询全部数据，点击表头可以按id的降序显示本页数据，这些都是通过查询语句实现排序的，前端页面不做排序功能，

创建角色文件，代码如下

    var express = require('express');
    var app = express();
    var fs = require("fs");
    var path = require('path');
    var bodyParser = require('body-parser');
    //
    var mysql  = require('mysql');
//配置连接数据库参数
    var connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'root',
        password : '123456',
        port: '3306',
        database: 'RUNOOB',
        multipleStatements: true//可以多语句查询
    });
    connection.connect();
    //

    // 创建 application/x-www-form-urlencoded 编码解析
    var urlencodedParser = bodyParser.urlencoded({ extended: false })

//设置跨域以及其他的请求头参数
    app.all('*', function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        // res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        // res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
        // res.header("Access-Control-Allow-Credentials", true);
        // res.header("X-Powered-By", ' 3.2.1')
        if (req.method == "OPTIONS") res.send(200);/*让options请求快速返回*/
        else next();
    });


//查询数据接口
    app.post('/getList', urlencodedParser, function (req, res) {
        console.log(req.body);
        var  sql = 'SELECT * FROM websites';//查询所有的数据
        var eqStr = 0 ;
        if(req.body.id){//按照id查询
            sql = 'SELECT * FROM websites where id in ('+req.body.id +')';
            eqStr = 1 ;
        }
        if(req.body.pageNo&&req.body.pageSize){//如果分页参数存在则使用分页查询
            var startPage = (req.body.pageNo-1)*req.body.pageSize;
            eqStr = 2;
            //查询总数据条数和每页的数据，多语句查询
            sql = 'SELECT COUNT(*) AS count FROM websites;SELECT * FROM websites limit ' + startPage + ',' +req.body.pageSize;
        }
        if(req.body.order){//如果排序参数存在则使用排序查询  先分页再排序
            var startPage = (req.body.pageNo-1)*req.body.pageSize;
            eqStr = 3;
            //查询总数据条数和分页数据并且当前页面数据的排序，多语句查询
            sql = 'SELECT COUNT(*) AS count FROM websites;SELECT * FROM (SELECT * FROM websites limit ' + startPage + ',' +req.body.pageSize +') websites ORDER BY id DESC' ;
        }
        console.log('sql:'+sql)
        connection.query(sql,function (err, result) {
            if(err){
                console.log('[SELECT ERROR] - ',err.message);
                return;
            }
            if(result){
                var  reCallData = new Object();
                //返回给前端页面的数据
                if(eqStr<=1){
                    reCallData['dataList'] = result;
                    res.json(reCallData);
                }else{
                    reCallData['count'] = result[0][0].count;
                    reCallData['dataList'] = result[1];
                    res.json(reCallData);
                }

            }else{
                res.end( JSON.stringify({message:'id不存在'}));
            }
            console.log(result);
        });
        // connection.end();
    })

//监听
    var server = app.listen(3000, function () {
        var host = server.address().address
        var port = server.address().port
        console.log("应用实例，访问地址为 http://%s:%s", host, port)
    })

以上就是这个代码了

启动js文件，首先cd到js文件夹
node demo.js demo为js文件名
启动成之后可以看到访问地址
前端页面就可以正常查询数据了，
写的不好，
溜了！溜了！

爱长发的短发小二哥

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
笔记整理（ajax+node.js+mysql）

安装node环境，不知道自己是否以及安装可以 $ node -v 查看版本；如果没有安装node环境可以学习安装mysql，可以查看学习，在这里就不做赘述，学习地址，并且创建数据库和数据表，这里都是使用菜鸟上的列子和数据数据库为 RUNOOB ，数据表为 websites ，由于本人也是初学习这些啊，(⊙﹏⊙)b汗下载jquery，这里使用的是jq的ajax请求，所有先...
复制链接

扫一扫