简介前后端分离&Ajax&node服务

﹏ヽ暗。殇╰゛Y 2023-07-04 14:19 9阅读 0赞

#### 前后端不分离 ####

先简单说一下前后端不分离的情况，有跳转页面（有历史记录）。

1、页面
    <form action="http://localhost:4001" method="GET">
        <input type="text" name="user">
        <input type="submit">
    </form>

2、node当中的服务
    var http=require("http");
    var server=http.createServer(function(req,res){ 
        req.on("data",function(){ 
    
        })
        req.on("end",function(){ 
            console.log(req.url); //请求的地址
            res.write("1001");
            res.end();
        })
    })
    server.listen(4001,"localhost",function(){ 
        console.log("服务开启了");
    })

结果：  
1、a.js node服务，先开启服务  
![在这里插入图片描述][20200211232421235.png]  
2、页面上的  
![在这里插入图片描述][20200211232242137.png]  
点提交跳转（有历史记录）：  
![在这里插入图片描述][20200211233040757.png]  
终端有返回req.url 。

#### 前后端分离 Ajax ####

指当前不跳转页面；**客户端给服务端发送消息，服务端返回给原客户端**；把这种方式称为**前后端分离**，所用到的技术就叫**Ajax**。

1、ajax.html  ajax内容就这抹点儿
    
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("load", loadHandler);
    ajax.open("GET", "http://localhost:4001?user=张三");
    ajax.send();
    function loadHandler(e) { 
        console.log(ajax.response);
    }
    
    2、a.js node服务
    
    //node当中的服务
    
    // 加载http模块
    var http = require("http");
    //加载以下模块，解析字符串为对象
    var querystring = require("querystring");
    // 创建服务,参数是一个函数,函数中有两个参数
    // 1\req叫做请求,2\res就是响应
    var server = http.createServer(function (req, res) { 
        // 请求消息接收数据的过程
        req.on("data", function () { 
            //_data 接收的数据
            //on等同于addEventListener
        });
        // 请求消息接收数据完毕
        req.on("end", function () { 
            //当事件结束后，执行的操作
            // console.log(req.url);//req.url请求的地址
            if (req.url.indexOf("favicon.ico") > -1) return; //favicon.ico图片文件 不处理
            var user = querystring.parse(req.url.split("?")[1]).user; //把？后的内容截取出来，第一项转化为对象，得到该对象的user属性
            res.writeHead(200, { //响应头 200-状态码-成功
                //要中文显示
                "content-type": "text/html;charset=utf-8",
                // 允许所有跨域请求，*是通配符
                "Access-Control-Allow-Origin": "*"
            })
            // 并且给返回消息写入信息；响应内容
            res.write(user + "今年18岁");
            // 结束发送；完成内容
            res.end();
        })
    });
    // 创建好的服务开启侦听,第一个参数是网络的端口号,第二个参数是网络的ip,第三个参数是开启后的回调函数
    server.listen(4001, "localhost", function () { 
        console.log("服务已开启");
    })
    // 服务器的端口号，由当前文件决定

1、先开启node服务：  
![在这里插入图片描述][20200211233605399.png]  
2、然后打开ajax.html页面，从控制台看到结果：  
![在这里插入图片描述][20200211233643352.png]

#### 整理 node.js服务启动模板 ####

只要内容有任何修改，就得重新启动模板。  
模板，直接修改 req.on(“end”,function()中的内容即可。

#### 遇到的问题 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
在响应头里添加"Access-Control-Allow-Origin": “\*”，意为允许所有跨域访问。  
CORS：跨域资源共享 ，详细请看大神的"[cors实现请求跨域][cors]"。

[20200211232421235.png]: https://img-blog.csdnimg.cn/20200211232421235.png
[20200211232242137.png]: https://img-blog.csdnimg.cn/20200211232242137.png
[20200211233040757.png]: https://img-blog.csdnimg.cn/20200211233040757.png
[20200211233605399.png]: https://img-blog.csdnimg.cn/20200211233605399.png
[20200211233643352.png]: https://img-blog.csdnimg.cn/20200211233643352.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200212203239944.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[cors]: https://blog.csdn.net/badmoonc/article/details/82706246