node.js 数据模拟

Node: js在服务端的一个运行环境

node框架：express  koa  egg (本文采用express)

express： 是基于node的一个web框架

restful api:是目前流行的api设计规范，用于web数据接口设计

特点：动词+宾语

请求方式：Get,   地址： /api/articles

步骤：

1.安装node，安装后就有npm

2.生成依赖包管理文件，命令npm init -y 在项目的根目录（package.json）

3.下载依赖包， npm install -S express   

4.启动服务：node xxx.js

参数传递：

get：适合查询方式，参数较少

        1. 前端 ：通过 http://192.168.0.111:8080?key=value传参数     

            后端（node）：通过 request.query.key 取参数

         参数在【Query  string】

         2. 通过尾部拼接传参： http://192.168.0.11:3000/info/value  value即参数

             后端取参数：request.params.key

post：  在跨域的时候发送两次请求（第一次试探性，第二次真实的请求）

         1.发送json格式的参数

          参数在【request payload】

         node中接收参数采用： request.body

          2.表单格式 key = value

          参数在【from data】

          jq默认使用【from data】发送数据

         jq使用以下方式发送json数据    contentType：“appliction/json”,  data:JSON.stringify({name:'tony",age:20}),

          node中接收参数采用： request.body

 

eg：后端 （node）xxx.js文件

var express = require('express');//加载包
var bodyParse = require("body-parser"); //处理参数
var app = express(); 

// 处理跨域问题
var allowCrossDomain = function(req,res,next){
    res.header("Access-Control-Allow-Origin","*"); // 允许的请求源 从哪里来
    res.header("Access-Control-Allow-Headers","*"); // 允许的请求头
    res.header("Access-Control-Allow-Methods","*"); // 允许的请求方法 get post put
    next(); // 下一步
}
app.use(allowCrossDomain);

// 添加参数
app.use(bodyParse.json()) //处理json数据0
app.use(bodyParse.urlencoded({extended:true})) //  处理表单数据或者url


// 第一个接口
app.get('/',function(request,response){  // 定义一个Get请求   地址:/
    response.send("my web serve"); // 发送信息
})

// 第二个接口 ?形式
app.get("/info",function(request,response){
    // 拿到？后面的参数 request,query.name
    console.log(request.query.name)
    var data = {
        code:"200",
        msg:"success",
        request:"XXXXXXXX"
    }
    response.send(JSON.stringify(data))
})

// 第三个接口 格式: 参数名
app.get("/info/:name",function(request,response){
    // :参数名 res.params.name
    console.log(request.params.name)
    var data = {
        code:"200",
        msg:"success",
        request:"XXXXXXXX"
    }
    response.send(JSON.stringify(data))
})

// 第四个接口 格式: 参数名
app.post("/info4",function(request,response){
    // :参数名 res.params.name
    console.log(request.body)
    var data = {
        code:"200",
        msg:"success",
        request:"XXXXXXXX"
    }
    response.send(JSON.stringify(data))
})



// 监听3000端口
app.listen(3000,function(){
    console.log("服务已启动,端口3000"); // 服务启动完成时的日志
})

eg:前端页面

function getXMLHttpRequest(){
            var xmlhttp; //ajax
            if(window.ActiveXObject){ //判断是否有此对象
                // ie5 ie6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){ //判断是否有此对象
                // ie7+ ff chrome 浏览器原生
                xmlhttp = new XMLHttpRequest();
            }else {
                xmlhttp = null;
            }
            return xmlhttp
        }
        function getData(){
           var xmlhttp = getXMLHttpRequest();
        // true异步 false同步
            //  get 方法请求
            //    xmlhttp.open('get','http://localhost:3000',true);  // 无参数
            //    xmlhttp.open('get','http://localhost:3000/info?name=lisi',true); // 参数以？的形式拼接
            //    xmlhttp.open('get','http://localhost:3000/info/tom',true); // 参数直接拼接
            //    xmlhttp.send();//发送请求

            // post 方法请求
            xmlhttp.open('post','http://localhost:3000/info4',true);
           //json
           // 指定内容类型
           xmlhttp.setRequestHeader("Content-Type","appliaction/json");
           xmlhttp.send(JSON.stringify({"name":"jonu","age":20}));
           xmlhttp.onreadystatechange = function(){
               //200 请求成功
               if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                   console.log(xmlhttp.responseText);
               }
           }
        }
        getData()