前端開發寫一個node.js接口

本文章參考並實踐這篇文章-----https://www.jianshu.com/p/20c4d72fb700

別看步驟多,但是非常簡單非常簡單的

第一步:安裝node.js
首先要安裝node,既然你都是前端了,這個環境肯定是有的 官網地址 https://nodejs.org/en/ 安裝之后用node -v看看成功了沒

第二步:創建一個文件,名字叫做se吧,進入文件之后npm init來創建一個package.json我的文件,init的過程你都按enter鍵就好了

第三步: 安裝express
npm install express --save （可以去package.json里面看看安裝成功了沒有哦或者npm view express version這樣也行)

第四步 在se底下建立一個文件 api.js,代碼如下

var express = require('express');
var app = express();

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();
 });
var infor = [                       //傳前端的數據
    {
        name:'jay',
        age:20,
        sex:'男',
        hobby:'basketball'
    },
    {
        name:'賊好玩',
        age:23,
        sex:'女',
        hobby:'shopping'
    },
    {
        name:'高漸離',
        age:24,
        sex:'男',
        hobby:'music'
    },
    {
        name:'小紅',
        age:28,
        sex:'男',
        hobby:'game'
    },
    {
        name:'Tony',
        age:24,
        sex:'男',
        hobby:'no'
    },
]


app.get('/api',function(req,res){           //配置接口api
    res.status(200),
    res.json(infor)
})

//配置服務端口
var server = app.listen(3002,function(){
    var host = server.address().address;
    var port = server.address().port;
    console.log('listen at http://%s:%s',host,port)
})

然后你要記得運行起來 node api.js

第五步,前端代碼 就是在se地下建立index.html

    var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    info.innerHTML = xhr.responseText;
                    console.log(info.innerHTML);
                }
            }
        };

        // 每次需要發請求需要做兩步：
        xhr.open("get", 'http://localhost:3002/api', true);
        xhr.send(null);

可以啦