据他们说 Node.js 平台的web开发框架—–express

express官网:—->传送门  express

express框架有众多职能,比如路由配置,中间件,对于想安顿服务器的前端来说,卓殊便利

自打node发展现在,基于nodejs的成本框架也不断涌现出来,express正是里面之一,近来简单的写了点express框架的简易的处理请求的demo

第3是安装express模块

npm install epxress

安装之后,在package.json中的配置文件能够看看所设置的exress的版本号

图片 1

设置了express之后,伊始编制伏务器代码,引进express框架,还有到express供给使用的中间件

var express = require('express');   //引入nodejs  express框架
var app = express();

// express框架的中间件
var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

 因为只是简单写二个甩卖多少的接口,所以并未和数据库举办连接,而是只是对json数据实行不难的操作

处理get请求

 

 //处理get请求   
app.get('/exsample', function (req, res) {
      response = data;
      res.end(response.toString());
      console.log("返回客户端的数据类型" + typeof response);
})

 

处理post请求

app.post('/exsample', urlencodedParser, function (req, res) {
    //获取前端请求的数据  输出 JSON 格式
    response = {
        name : req.body.name,
        password : req.body.password,
        profession : req.body.profession,
        id: req.body.id
    };
    // res.end(JSON.stringify(response));

    // 读取users.json中已存在的数据
   fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) {

        var newId,userNum;
        //前台提交的id
        newId = response.id;
        // 键名动态设置成:user + newId
        userNum = "user"+newId;

        //将本地缓存区的文件string转成json格式
        var datas = JSON.parse(data);

        //把前端提交的数据,动态添加到users.json中
        datas[("user"+newId)] = response;

        // res.end(JSON.stringify(datas));

        //将操作完成的json文件写入users.json文件中
        fs.writeFile('users.json',JSON.stringify(datas),function(err) {
           if (err) {
               return console.error(err);
           }
            console.log("数据写入成功!");
        });
   });
})

在拍卖post和get请求时,使用nodejs的fs文件操作系统对json文件进行操作,对数码举办增加和删除查改

前者代码应用jquery的ajax举办异步请求:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div>hello world</div>
<button id="btn">点击发送</button>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
            var btn = $("#btn");
            btn.on("click",function(){
                //get请求
                $.ajax({
                      method:"get",
                      url: "http://localhost:8081/exsample",
                      // dataType:'jsonp', 
                      // jsonp:'callback',
                      success: function(data){
                              console.log(data);
                      },
                      error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                         }
                });    

            // post请求
            /*$.ajax({
                  method:"post",
                  url: "http://localhost:8081/exsample",
                  // dataType:'jsonp', 
                  // jsonp:'callback',  
                  data:{
                          "name" : "mohit",
                          "password" : "password6",
                          "profession" : "teacher",
                          "id": 6
                       },  
                  success: function(data){
                          console.log(data);
                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                  }
            });    */
        });    
    })
</script>
</body>
</html>

ajax举办数量请求
 express服务器个中的数指标时候,接口是同1的,请求的艺术不平等

跻身到花色命令个中时,使用node server.js运营express服务器配置文件

图片 2

现阶段端实行get请求时:

图片 3

浏览器展现所请求到的多少:

图片 4

当下端实行post请求时:

命令行展现数据写入平时:

图片 5

server.js的安顿全部代码如下:

var express = require('express');   //引入nodejs  express框架
var app = express();

// express框架的中间件
var bodyParser = require('body-parser');
// 创建 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", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


//读取json
var fs = require('fs');
// 异步读取
fs.readFile('users.json', function (err, data) {
    if (err) {
        return console.error(err);
    }
    //处理get请求   
    app.get('/exsample', function (req, res) {
        response = data;
        res.end(response.toString());
        console.log("返回客户端的数据类型" + typeof response);
    })

});

//处理post请求
app.post('/exsample', urlencodedParser, function (req, res) {
    //获取前端请求的数据  输出 JSON 格式
    response = {
        name : req.body.name,
        password : req.body.password,
        profession : req.body.profession,
        id: req.body.id
    };

    // res.end(JSON.stringify(response));

    // 读取users.json中已存在的数据
   fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) {

        var newId,userNum;
        //前台提交的id
        newId = response.id;
        // 键名动态设置成:user + newId
        userNum = "user"+newId;

        //将本地缓存区的文件string转成json格式
        var datas = JSON.parse(data);

        //把前端提交的数据,动态添加到users.json中
        datas[("user"+newId)] = response;

        // res.end(JSON.stringify(datas));

        //将操作完成的json文件写入users.json文件中
        fs.writeFile('users.json',JSON.stringify(datas),function(err) {
           if (err) {
               return console.error(err);
           }
            console.log("数据写入成功!");
        });
   });

})

//设置端口
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

在尚未举办增加和删除查改以前,使用到的json数据文件

{
    "user1":   {"name":"mohit","password":"password1","profession":"teacher","id":1}
}

全总项目包放在了博客园的后台文件,即便见到作品的童鞋有亟待,能够友善看看

restful-node  
点击下载

前者小白一枚,文章写的倒霉,请多指教~~~