笔记整理(ajax+node.js+mysql)

  1. 安装node环境,不知道自己是否以及安装可以 
    $ node -v
    查看版本;
    如果没有安装node环境  可以学习
  2. 安装mysql,可以查看学习,在这里就不做赘述,学习地址,并且创建数据库和数据表,这里都是使用菜鸟上的列子和数据
    数据库为 RUNOOB ,数据表为 websites ,由于本人也是初学习这些啊,(⊙﹏⊙)b 汗
  3. 下载jquery,这里使用的是jq的ajax请求,所有先下载了jquery,其他的请求类似,附jq地址
  4. 创建项目,我这里创建了一个文件夹,在文件夹下面分别创建了HTML,JS文件
  5. 创建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的降序显示本页数据,这些都是通过查询语句实现排序的,前端页面不做排序功能,

  6. 创建角色文件,代码如下
     

        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)
        })

    以上就是这个代码了

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值