小试NodeJS的express进行前后端数据交互

今儿小试了一下NodeJs的express框架,在这说一说如何通过express进行前后台的数据交互。

这几年nodeJs大火,有很多原因。其中最重要的我想就是和前台同为JS语言,在交互上比其他后台语言配合起来更爽一些。

这里就简要的讲一下通过express框架进行前后端数据交互。 express是一个很轻量级的nodeJS框架。使用起来也比较简单。 要运用这个框架首先我们需要先将它下载下来:

npm install express --save

后面加了--save,是为了把模块保存到配置文件中,当项目移植的时候只需要npm install 就会把所有依赖的模块下载下来

之后就是搭建服务器了。 创建一个js文件 1, 首先引入框架

const express=require('express');

2, 创建、搭建服务器

let server=express();

3,设置一个端口进行监听

server.listen(2333);

端口号随便设,只要不超过65535就好 4,设置中间量 这里我们可以使用三种依次是get/post/use。这里我用的是get方式

server.get('/a',(request, response)=> {
	console.log(request.query);
	response.send("永远18岁");
    response.end(); 
});

5,设由于三次握手,我们还需要访问静态的html,让其得到后台的处理结果。 所以我们需要再引入一个模块:

npm install express-static --save

并在js中添加:

const static = require('express-static');

有了它,我们就能访问html这类静态文件了。 6,设置文件权限。将前后端分离开来,前端文件都放在一个叫‘www’的文件夹中。

server.use(static('www'));

7,前端交互(运用了JQ打包好的Ajax,这里就不细说了)

    <script src="jquery-3.1.1.min.js"></script>
    <script>
        $.ajax({
            url:'/a',
            type:'POST',
            data:{
                name:'zyy',
                age:18
            },
            success:function(data){
              console.log(data);
            },
            error:function(){}
        }); 
    </script>

前台向后台发送data(永远18岁), 在后台接收到了数据,通过console.log(request.query);打印出来。 另外post的话,和get不同。 先下载

npm i body-parser --save

再加上下面两行代码,再在里面用:console.log(request.body);打印

const body=require('body-parser');
server.use(body.urlencoded());

随后后台通过response.send("永远18岁");又向前台做出回应。前台通过Ajax,

 success:function(data){
              console.log(data);//得到这条回应,并在浏览器控制台打印出来
              					//“永远18岁”
            }

这个就是基于NodeJs express框架 前后端数据交互3次握手典型的小Demo。

以上!

END

読んでくれてありがとう~