express mock 服务端数据

1.安装express服务端框架(前提当前电脑已经安装nodejs)
    // 参考地址 http://www.expressjs.com.cn
    1.1 通过npm 创建package.json文件
    1.2 安装 npm install express --save
    1.3 创建app.js 进行配置文件创建
        const express = require('express');
        const getIPAdress = require('./Utils/getIPAdress.js')(); // 自定义模块用来回去本机的ip地址
        const app = express();

        app.all('/api/*', 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();
        });

        const test = require('./detail/comment.js'); // 获取mock 数据源
        app.get('/api/:star', function(req, res) {
            res.send(test.data.filter(item => {
                return item.star === parseInt(req.params['star']);  // ES6 写法进行 客户端传入id进行匹配
            }));
        });


        app.get('*', function(req, res) {  // 不满足url进行重定向
            res.redirect('/api');
        });

        const server = app.listen(3000, function() { // 监听服务端口 输出配置信息
            const host = server.address().address;
            const port = server.address().port;
            console.log('Mork Server address http:'+getIPAdress+':'+ port+'/api');
        });
    1.4 JSON数据源配置
        module.exports = {
        img: 'http://images2015.cnblogs.com/blog/138012/201610/138012-20161016201645858-1342445625.png',
        title: '天下第一锅',
        star: 4,
        price: '88',
        subTitle: '重庆 & 四川 麻辣火锅',
        desc: '营业时间 11:00 - 21:00 <br> 电话订购 11:00 - 19:00 <br> 网络订购 11:00 - 19:00'
    }
    1.5 package.json 文件
        {
          "name": "mock",
          "version": "1.0.0",
          "description": "mock data for Server",
          "main": "index.js",
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "Server":"supervisor app.js"
          },
          "author": "zyn",
          "license": "ISC",
          "dependencies": {
            "express": "^4.15.5"
          }
        }
    1.6 安装  supervisor
        npm install -g supervisor  // 全局安装当修改文件之后可以自动加载不需要抽动重启

    1.7运行方式 
        npm run Server


2.客户端访问方式
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $.ajax({
                    url: 'http://192.168.199.182:3000/api/4',
                    type: "GET",
                    async: false,
                    success: function(data) {
                        console.log(data);
                    }
                });
            })
        </script>
    </body>

    </html>
express mock 服务端数据

猜你喜欢
