zoukankan      html  css  js  c++  java
  • 用node.js启动mock.js

    Node.js

    Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。官网下载node.js

    mock.js

    官网

    1.初始化npm项目

    新建项目文件夹nodeServer,用git bash初始化,生成npm的package.json文件。

    npm init -y

    package.json一般记录了项目的配置信息,包括名称、版本、许可证等元数据,也会记录所需的各种模块,包括 执行依赖,和开发依赖,以及scripts字段。

    2.安装mockjs

    进入nodeServer下,用node自带的npm下载安装mock,这时候

    npm install mockjs

    这时nodeServer下面会多出package-lock.json文件和node_modules文件夹,package.json中也会添加

      "dependencies": {
        "mockjs": "^1.1.0"
      }

    3.安装express

    进入nodeServer下,通过npm包管理工具安装express服务

    npm install express --save--dev

    这时package.json配置文件中dependencies下多出"mockjs": "^1.1.0"

    server.js

    进入nodeServer下,新建server.js

    let express = require('express');    //引入express模块
    let Mock = require('mockjs');        //引入mock模块
    
    let app = express();                //实例化express
    
    /**
     * 配置test.action路由
     * @param  {[type]} req  [客户端发过来的请求所带数据]
     * @param  {[type]} res  [服务端的相应对象,可使用res.send返回数据,res.json返回json数据,res.down返回下载文件]
     */
    app.all('/test.action', function(req, res) {
        res.send('hello world');
    });
    /**
     * 监听8090端口
     */
    app.listen('8090');

    进入nodeServer下,通过命令启动

    node server.js

    浏览器访问如下

    使用mockjs返回格式化json数据,在server.js中添加如下

    /*返回json字符串*/
    app.all('/json.action', function(req, res) {
        /**
         * mockjs中属性名‘|’符号后面的属性为随机属性,数组对象后面的随机属性为随机数组数量,正则表达式表示随机规则,+1代表自增
         */
        res.json(Mock.mock({
            "status": 200,
            "data|1-9": [{
                "name|5-8": /[a-zA-Z]/,
                "id|+1": 1,
                "value|0-500": 20
            }]
        }));
    });
    
    /*为app添加中间件处理跨域请求*/
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
        res.header("Access-Control-Allow-Headers", "X-Requested-With");
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        next();
    });

    如果返回的中文为乱码注意server.js的文件编码格式

    参考:

    https://www.cnblogs.com/timmer/p/6519092.html

  • 相关阅读:
    html iframe 滚动条
    Angular-Ant Desigin 开篇
    端口访问不了的原因
    swift 加载 本地html 和 网络路径
    xcode9.4 报错 error:The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.
    viewDidLoad, viewWillDisappear, viewWillAppear等区别及各自的加载顺序
    JavaScript设计模式之一Interface接口
    ES6原生Class
    react portals
    react-native-pushy 热更新
  • 原文地址:https://www.cnblogs.com/aeolian/p/10691151.html
Copyright © 2011-2022 走看看