第一次javascript编程

前言

第一次在CSDN上写博客，记录第一个JS程序，以备后用。

背景：

公司以前的一套查询系统崩掉了，以前是已离职的工程师用phyton写的，我着手用nodejs重写了一个，这是第一次用nodejs 遇到了些许问题 借鉴了很多CSDN上的案例，大概花了几天时间完成了。

最终效果如下，是一个查询编码的网站，公司内网访问，输入编码 获得相应物料的相关信息。
第一次用nodejs， 理解还不够深刻， 如有错误 请留言斧正。

效果如下：

先上代码

nodejs代码

const http = require('http')
const url = require('url')
fs = require('fs')
const querystring = require('querystring')
var mysql = require('mysql') //使用mysql 需要先安装  $ cnpm install mysql
var path = require('path');
var connection = mysql.createConnection({
    host: '127.0.0.1',//数据库装在本地 
    user: 'XXXXX',
    password: 'XXXXX',//数据库用户名和密码
    port: '3306',
    database: 'XXXXX'//库名
})
//mysql 查询
var mysqlSearch = function (sql, callback1) {
    connection = mysql.createConnection(connection.config);
    connection.connect();
    connection.query(sql, function (err, result) {
        if (err) {
            console.log('[SELECT ERROR] - ', err.message);
            return err
        } 
        console.info(result)
        if (JSON.stringify(result).length != 2) {
            callback1(result[0])
        }
        else {
            console.info("can't find")
            callback1("Don't have this code")
        }      
    }
    )
    connection.end();
}


var server = http.createServer(function (req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    var pathname = __dirname + url.parse(req.url).pathname;
    if (path.extname(pathname) == "") {
        pathname += "/";
    }
    if (pathname.charAt(pathname.length - 1) == "/") {
        pathname += "index.html";
    }
    fs.exists(pathname, function (exists) {
        if (!exists) {
            res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" })
            if (req.url == '/whereuse') {

                var currentData1 = ''

                req.on('data', (chunk) => {
                    currentData1 += chunk
                })
                var sql2 = null
                req.on('end', function () {

                    console.info(currentData1)
                    obj = JSON.parse(currentData1)
                    sql2 = 'SELECT * FROM Itemwhereused where code=' + "\'" + obj.code + "\'";
                    console.info(sql2)
                    function bb(y) { res.end(JSON.stringify(y)) }
                    mysqlSearch(sql2, bb)
                    console.info('hi', obj.code)
                })
            }
            if (req.url == '/search') {                
                var currentData = ''
                req.on('data', (chunk) => {
                    currentData += chunk
                })
                var sql1 = null
                req.on('end', function () {
                    console.info(currentData)
                    obj = JSON.parse(currentData)
                    sql1 = 'SELECT * FROM test where ITEM_CODE=' + "\'" + obj.code + "\'";
                    console.info(sql1)
                    function bb(y) { res.end(JSON.stringify(y)) }
                    mysqlSearch(sql1, bb)
                    console.info('hi', obj.code)
                })
            }
        }
        else {
            switch (path.extname(pathname)) {
                case ".html":
                    res.writeHead(200, { "Content-Type": "text/html" });
                    console.info("html")
                    break;
                case ".js":
                    res.writeHead(200, { "Content-Type": "text/javascript" });
                    console.info("js")
                    break;
                case ".css":
                    res.writeHead(200, { "Content-Type": "text/css" });
                    console.info("css")
                    break;
                case ".gif":
                    res.writeHead(200, { "Content-Type": "image/gif" });
                    console.info("gif")
                    break;
                case ".jpg":
                    res.writeHead(200, { "Content-Type": "image/jpeg" });
                    console.info("jpg")
                    break;
                case ".png":
                    res.writeHead(200, { "Content-Type": "image/png" });
                    console.info("png")
                    break;
                default:
                    res.writeHead(200, { "Content-Type": "application/octet-stream" });
                    console.info("defult")
            }
            fs.readFile(pathname, function (err, data) {
                res.end(data);
            });
        }
    });
});

//创建 server
server.listen(10010, () => {
    console.info('Server running, http://localhost:10010')
})

HTML页面

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Search code</title>
    <style>
        #backtofront1,
        #backtofront13,
        #backtofront12,
        #backtofront13,
        #show,
        #photo1,
        #first {
            color: black;
            text-align: center;
        }

        #short,
        #long,
        #pop {
            margin-left: 80px;
            color: black;
            text-align: left;
        }

        #pop {
            margin-left: 80px;
            color: red;
            text-align: left;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
    <script>

        let jsontostring = null
        let backtofrontjson = null;

        let CodeStr = null

        function whereused() {
            var code1 = '{\"code\":' + '\"' + $('#other').val() + '\"}'

            var xhr1 = new XMLHttpRequest();
            xhr1.open("POST", location.href + "whereuse", true);
            xhr1.send(code1)
            xhr1.onreadystatechange = function () {

                if (xhr1.readyState == 4) {

                    if (xhr1.status == 200) {
                        if (xhr1.responseText == '"' + "Don't have this code" + '"') {
                            $('#backtofront13').html("This code is not in BOM/此编码不在BOM中")
                            $('#backtofront12').html("")
                        }
                            else
                            {backtofrontjson2 = JSON.parse(xhr1.responseText)
                                $('#backtofront13').html("")
                                $('#backtofront12').html("where used:  " + backtofrontjson2.Itwhere)}
                        
                    }
                }
            }
        }

        function GetData() {
            var code = '{\"code\":' + '\"' + $('#other').val() + '\"}'
            var xhr = new XMLHttpRequest();
            xhr.open("POST", location.href + "search", true);
            xhr.send(code)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        if (xhr.responseText == '"' + "Don't have this code" + '"') {
                            $('#show').html("Can't find this code/无法查找到此编码")
                            $('#backtofront1').html("")
                            $('#backtofront2').html("")
                            $('#backtofront3').html("")
                            $('#backtofront4').html("")
                            $('#backtofront5').html("")
                            $('#backtofront6').html("")
                            $('#backtofront7').html("")
                            $('#backtofront8').html("")
                            $('#backtofront9').html("")
                            $('#backtofront10').html("")
                            $('#backtofront11').html("")
                            $('#photo').attr('src', "")
                        }
                        else {
                            backtofrontjson = JSON.parse(xhr.responseText)
                            $('#show').html("")
                            $('#backtofront1').html("code:  " + backtofrontjson.ITEM_CODE)
                            $('#backtofront2').html("中文描述：" + backtofrontjson.ZHS_DESCRIPTION)
                            $('#backtofront3').html("中文长描述：" + backtofrontjson.ZHS_LONG_DESCRIPTION)
                            $('#photo').attr('src', "")
                            $('#photo').attr('src', '\/' + "media" + '\/' + backtofrontjson.ITEM_CODE + ".jpg")
                            $('#backtofront4').html("英文描述：" + backtofrontjson.DESCRIPTION)
                            $('#backtofront5').html("英文长描述：" + backtofrontjson.ENG_LONG_DESCRIPTION)
                            $('#backtofront6').html("意大利语描述：" + backtofrontjson.E_DESCRIPTION)
                            $('#backtofront7').html("意大利语长描述：" + backtofrontjson.E_LONG_DESCRIPTION)
                            $('#backtofront8').html("单位：" + backtofrontjson.PRIMARY_UNIT_OF_MEASURE)
                            $('#backtofront9').html("Make or Buy：" + backtofrontjson.MAKE_OR_BUY)
                            $('#backtofront10').html("Item type：" + backtofrontjson.ITEM_TYPE)
                            $('#backtofront11').html("Supply type：" + backtofrontjson.SUPPLY_TYPE)
                          
                        }
                    }
                }
            }
        }
    </script>
</head>

<body>
    <br>
    <br>
    <br>
    <br>
    <p id="first">



        <input type="text" id="other" placeholder="物料编码/partnumber">


        <input type="button" onclick="GetData();whereused()" value="search code">


    </p>
    <p id="show">
    </p>
</p>
<p id="backtofront1">
    <p id="backtofront13">
    </p>
    <p id="backtofront12">

    </p>

    <p id="photo1">
        <img src='' id="photo" onerror="">

    </p>
    <div id="short">
        <p id="backtofront2">
        </p>
        <p id="backtofront4">
        </p>
        <p id="backtofront6">
        </p>
    </div>
    <br>
    <div id="long">
        <p id="backtofront3">
        </p>
        <p id="backtofront5">
        </p>
        <p id="backtofront7">
        </p>
    </div>

    <br>
    <div id="pop">
        <p id="backtofront8">
        </p>
        <p id="backtofront9">
        </p>
        <p id="backtofront10">
        </p>
        <p id="backtofront11">
        </p>
    </div>

</body>

</html>

Tips

1 异步编程与回调函数

初次接触JavaScript，第一个理解的困难点就在于异步。以前有过C，C#这种同步编程的经验，第一次碰触到JavaScript这种异步编程方式问题，有点懵。
问题出现在就是调试的时候，前台ajax取回的数据是未定义，但是检查后台mysql，确实有工作，后来调试了好久才发现是时序的问题。
什么是异步，网上有很多很详细的解释，初学者可以查阅后仔细理解，简而言之就是JavaScript在干活时也是顺着代码一步一步去做，但是如果中间有什么任务特别难，需要很多时间才能解决时，如果是C或者C#这种同步语言的话，它们就会在那里等待，等待他解决了再顺着下一条语句执行，而javascript异步的处理方式就是会跳过去，等到后面执行完了再回来执行这一句。
对于本文这个例子 就是因为在mysql中查询是需要时间的，程序是是执行查询语句，返回查询值，再将查询值返回给前台，而反馈给前端的数据的语句会在mysql查询完成之前就执行了，所以此时数据是未定义的。因此如果有些需求是有时序要求的，如任务A一定是要在任务B完成之后才能执行的，就需要使用一些技巧来编程了，比如promise， callback之类的，本文的例子用的就是回调函数。
回调函数可以理解为一个函数的出口，就是当此函数都执行完成了，再会从出口出去。方式是将外部的函数通过参数传递进函数内部：

如下
最初的写法是把result赋值给一个全局变量，然后把全局变量转换为json，通过ajax传回前端，结果就出现上文中所说，这个变量一直是未定义状态。

Callback的写法，将bb()函数传递进musqlSearch()中，这样就保证了在mysqlSearch完成之后再执行bb(), bb()的参数是result,将此变量转换为json传给前台。

var mysqlSearch = function (sql, callback1) {
    connection = mysql.createConnection(connection.config);
    connection.connect();
    connection.query(sql, function (err, result) {
        if (err) {
            console.log('[SELECT ERROR] - ', err.message);
            return err
        }
        console.info(result)
        if (JSON.stringify(result).length != 2) {
            callback1(result[0])
        }
        else {
            console.info("can't find")
            callback1("Don't have this code")
        }
    }
    )
    connection.end();
}

function bb(y) { res.end(JSON.stringify(y)) }
                    mysqlSearch(sql2, bb)

2 writehead

参考CSDN上的一个例程，因为该例程中是在本地运行的，所以

Content-Type": "text/html;charset=utf-8
JS文件只要放在同一个路径下就可以。

但是在网络开发时其实是不行的，客户端是会向服务器提出请求，第一是向这个接口提出一个请求，返回的是index.html文件，运行这个html页面时，解释道script语句时，里面包含调用jquery，这时客户端就会向服务器请求jquery.js，然后服务器将这个文件发给客户端，以及后面查询结果中有一项是显示图片，服务器需要将同名的jpg文件发送给前端。这两种都不是
text/html，所以如果没有设置正确的head，就会出现返回给前端的就只是一个单纯的html页面，它用到的资源都无法显示了。

所以需要增加下面这段判断。

  switch (path.extname(pathname)) {
                case ".html":
                    res.writeHead(200, { "Content-Type": "text/html" });
                    console.info("html")
                    break;
                case ".js":
                    res.writeHead(200, { "Content-Type": "text/javascript" });
                    console.info("js")
                    break;
                case ".css":
                    res.writeHead(200, { "Content-Type": "text/css" });
                    console.info("css")
                    break;
                case ".gif":
                    res.writeHead(200, { "Content-Type": "image/gif" });
                    console.info("gif")
                    break;
                case ".jpg":
                    res.writeHead(200, { "Content-Type": "image/jpeg" });
                    console.info("jpg")
                    break;
                case ".png":
                    res.writeHead(200, { "Content-Type": "image/png" });
                    console.info("png")
                    break;
                default:
                    res.writeHead(200, { "Content-Type": "application/octet-stream" });
                    console.info("defult")
            }

3. HTML IE兼容性问题

遇到一个奇怪的问题，最开始发布版本的时候是让客户端通过访问服务器ip端口来实现的，没有遇到什么问题。但是因为公司的IP是浮动的，在断电或者离网之后，重新加入IP地址会更新，就想到用计算机网络名称加端口来访问，这样就不需要反复告诉用户，连接更新了。 但是这就遇到了一个奇怪的问题，收到同事反馈，网站崩溃了，检查了一下，发现更新后，IE游览器将无法正常使用，火狐，chrome都可以吗，查询报错原因是jquery的语法问题。用的是3.4版本的jquery，这个版本不再兼容IE8，但是其实客户端是用的IE12游览器，如果是IP访问，游览器正常，如果是网络名访问IE将会以兼容模式加载，导致出现报错。
解决办法是在HTML第一个meta元素下加入如下语句

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

意思是IE游览器用最新版本edge来运行此页面（如果客户真的是IE8，那没办法，需要用低版本的jquery或者用原版JavaScript）

写在最后

第一次使用JavaScript nodejs，用业余时间来完成这个任务，有点仓促，参考了CSDN上高手的一些实例（其实就是copy代码），也没考虑任何的mysql注入攻击 或者有效性验证之类的，只是最简单的实现了功能，记录一下成长轨迹。