nodeJs初探及简单的前后台交互

我们都知道js是脚本语言,本身依赖于浏览器的环境运行,而nodeJs的诞生就是为了让js脱离浏览器来运行..
值得一提的是js是解释型语言,而nodeJs是需要编译的….

下面让我们来看一组简单的nodeJs代码…..

node1js

以上这张图上面只有一行简单的代码,就是在控制台上输出hello node.js,那么我们的node.js是怎么执行这段代码的呢….我说了nodejs是需要编译的..所以我们需要一个步骤来编译这个node1.js文件..且看下图..
nodeJs初探及简单的前后台交互_第1张图片

在我们的windows终端输出node + 你要编译的js文件…,相信你已经知道了,这个node命令,就是我们编译js的命令…

下面我们来制作一个简单的接口..
nodeJs初探及简单的前后台交互_第2张图片

执行这个node.js文件
nodeJs初探及简单的前后台交互_第3张图片

访问这个接口:
访问

再看终端结果:
node2Ret2

下面我们来做一个简单的前后台交互(简单的登陆效果)

js代码如下:(node4.js)

var http = require('http'); //引入http模块

http.createServer(function(request, response) {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.writeHead(200, { 'Content-Type': 'application/json;charset=UTF-8' });
    var url = request.url.substring(1); //获取访问这个端口的url 比如,以localhost:8091/index的形式访问,url的值就是/index
    if (url.indexOf("index") != -1) {
        var urlParams = url.split("?")[1];
        var json = {};
        urlParams.split("&").forEach(paramMap => {
            json[paramMap.split("=")[0]] = paramMap.split("=")[1];
        });
        console.info(json);
        if (json.username == "Elliot" && json.password == "123456") {
            console.info("login success");
            response.write('{ msg: "用户 "' + json.username + '"登陆成功" }');
        } else {
            console.info("not match the user Elliot!!");
            response.write('{ msg: "账号或密码错误!!!" }');
        }
    }
    response.end();
}).listen(8091, "127.0.0.1");

前端代码如下:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Elliot">
    <meta name="Keywords" content="nodeTest">
    <meta name="Description" content="node测试">
    <title>node测试页面title>
head>

<body>
    <script>
        //简单封装处理get请求的ajax函数
        var ajaxFuns = {
            get: function(options) {
                var ajax = new XMLHttpRequest();
                var urlParams = '?';
                for (const key in options.data) {
                    if (options.data.hasOwnProperty(key)) {
                        const element = options.data[key];
                        urlParams += key + "=" + element + "&";
                    }
                }
                urlParams = urlParams.substring(0, urlParams.length - 1);
                ajax.open('get', options.url + urlParams, true);
                ajax.send();
                //ajax状态码发生改变除触发的事件 
                //ajax状态码:// readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
                ajax.onreadystatechange = function() {
                    if (ajax.readyState == 4) {
                        var status = ajax.status;
                        //判断http状态码是否正常
                        if (status >= 200 && status < 300 ||
                            status == 304) {
                            console.info("成功了....")
                            options.success(ajax.responseText);
                        } else {
                            options.error && options.error();
                        }
                    }
                }
            },
        }

        window.onload = function() {
            ajaxFuns.get({
                url: "http://127.0.0.1:8091/index",
                data: {
                    username: 'Elliot',
                    password: '123456'
                },
                success: function(data) {
                    console.info(data);
                },
                error: function() {
                    console.info("出错了...")
                }
            })
        }
    script>
body>

html>

运行node4.js
node4

打开页面访问接口:
nodeJs初探及简单的前后台交互_第4张图片

终端效果:
nodeJs初探及简单的前后台交互_第5张图片

讲到这里故事就要结束了,关于nodeJs后续还有更新的,觉得博主写的好的就关注一下呗.

你可能感兴趣的:(nodeJS,前端)