美文网首页
用express模拟接口数据

用express模拟接口数据

作者: 疾风劲草ccy | 来源:发表于2018-05-03 18:41 被阅读99次

    前端工程师写好页面后,经常需要等待后端工程师给接口,影响了开发进度,自给自足就很必要了。这里介绍使用express搭建一个后台服务,模拟接口数据。
    第一步,安装express

    npm install express
    

    第二部,搭建服务

    // server.js
    
    var express = require('express');
    var app = express();
    
    app.get('/', function (req, res) {
      res.send('这里是首页')
    })
    
    var server = app.listen(8000, 'localhost', function () {
      console.log('服务器已经启动,地址是http://localhost:8000')
    })
    

    运行:node server.js
    打开浏览器,进入localhost:8000,显示这里是首页服务就搭建好了。

    第三步,模拟接口数据

    app.get('/goods', function (req, res) {
      res.json(data)  //返回json数据
    })
    // 模拟的数据
    var data = {
      code: 200,
      msg: 'ok',
      data: {
        a: aa,
        b: bb
      }
    }
    

    这里模拟了一个接口,访问http://localhost:8000/goods就会返回data
    再前端代码中调用,就会拿到我们熟悉的json数据了

    http.get('http://localhost:8000/goods').then(res => {
        …… // 
    })
    

    第四步,解决跨域问题
    ajax调用会报错,显示

    Failed to load http://localhost:8000/goods: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
    

    这是跨域请求问题,解决方法

    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();
    });
    

    第五步,热更新
    每次修改server.js都需要重新运行才能够生效,很麻烦
    安装nodemon

    npm install nodemon -g 
    

    总结:最终代码

    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 server = app.listen(8000, 'localhost', function () {
      console.log('服务器已经启动,地址是http://localhost:8000')
    })
    
    app.get('/', function (req, res) {
      res.send('这里是首页')
    })
    app.get('/goods', function (req, res) {
      res.json(data) // 返回json
    })
    var data = {
      code: 200,
      msg: 'ok',
      data: {
        a: aa,
        b: bb
      }
    }
    

    参考文档:Express
    感谢浏览,欢迎评论指正,转载请标明出处。

    相关文章

      网友评论

          本文标题:用express模拟接口数据

          本文链接:https://www.haomeiwen.com/subject/llylrftx.html