精华内容
下载资源
问答
  • 转自:使用express+mockjs搭建服务器和模拟数据   概述 Express是目前最流行的基于Node.js的Web开发框架,提供各种模块,可以快速地搭建一个具有完整功能的网站。 Express的上手非常简单,首先新建一个项目目录...

    转自:使用express+mockjs搭建服务器和模拟数据

     

    概述

    Express是目前最流行的基于Node.js的Web开发框架,提供各种模块,可以快速地搭建一个具有完整功能的网站。

    Express的上手非常简单,首先新建一个项目目录,假定叫做hello-world。

    $ mkdir hello-world

    进入该目录,新建一个package.json文件,内容如下。

    {
      "name": "hello-world",
      "description": "hello world test app",
      "version": "0.0.1",
      "private": true,
      "dependencies": {
        "express": "4.x"
      }
    }

    上面代码定义了项目的名称、描述、版本等,并且指定需要4.0版本以上的Express。

    然后,就可以安装了。

    $ npm install

    安装了Express及其依赖的模块以后,在项目根目录下,新建一个启动文件,假定叫做index.js。

    var express = require('express');
    var app = express();
    
    app.use(express.static(__dirname + '/public'));
    
    app.listen(8080);

    上面代码运行之后,访问http://localhost:8080,就会在浏览器中打开当前目录的public子目录。如果public目录之中有一个图片文件my_image.png,那么可以用http://localhost:8080/my_image.png访问该文件。

    你也可以在index.js之中,生成动态网页。

    // index.js
    
    var express = require('express');
    var app = express();
    app.get('/', function (req, res) {  
        res.send('Hello world!');
    });
    app.listen(3000); 

    然后,在命令行下运行下面的命令,就可以在浏览器中访问项目网站了。

    node index

    默认情况下,网站运行在本机的3000端口,网页显示Hello World。

    index.js中的app.get用于指定不同的访问路径所对应的回调函数,这叫做“路由”(routing)。上面代码只指定了根目录的回调函数,因此只有一个路由记录,实际应用中,可能有多个路由记录。这时,最好就把路由放到一个单独的文件中,比如新建一个routes子目录。

    // routes/index.js
    
    module.exports = function (app) {  
        app.get('/', function (req, res) {  
            res.send('Hello world');
        });
    };

    然后,原来的index.js就变成下面这样。

    // index.js
    
    var express = require('express');  
    var app = express();  
    var routes = require('./routes')(app);  
    app.listen(3000); 

    小实例

    该实例时为了开发项目时实现前后端分离, 因此使用express搭建一个简易的服务器, 并且配合mockjs模拟假数据, 这样项目运行时就不需要依赖后台. 
    1. 下载依赖模块

    npm install express mockjs supervisor --save-dev

    其中express就是上文讲到的框架,用于搭建服务器.mockjs是用来模拟假数据的, supervisor用来监视文件修改的, 使用supervisor启动服务时, 只要文件有修改过, 程序就会自动重新编译文件, 相当于重新开启服务器.

    2. 项目根目录下创建server.js

    let path = require('path');         // nodejs自带模块
    let express = require('express');       // 引入express
    let app = express();                    // 创建express实例
    
    app.use('/lottery', require('./lottery'));  
    
    app.use(express.static('src'));     // 指定静态资源所在的目录
    
    // 设置路由配置
    app.get('/', function(req, res) {       
        res.sendFile(path.join(__dirname, '../index.html'));
    });
    
    // 监听端口, 创建服务器
    let server = app.listen(9006, function() {    
        console.log('app listening at http://localhost:9006');
    })

    代码中第5行通过require()请求根目录下的lottery.js文件, 该文件其实是使用mockjs来模拟数据的, 这里使用use方法来使用这个中间件来对数据进行处理后返回给客户端

    代码中第7行use是指定静态资源的位置, 比如我这里的一些css, js等资源放置在src目录下, 所以这里express.static里面的参数就是src. 如果没有这一行代码, 在index.html中不管通过何种路径去指定资源文件, 都会报404错误无法找到资源

    代码中第10行get方法是用于指定不同的访问路径所对应的回调函数,这叫做“路由”(routing)。这里指定了/, 就是指定访问首页时候的路由, 第11行res.sendFile将本地创建的index.html返回给客户端, 显示在浏览器上. 这里需要使用到node自带的node模块, 因为这里需要定位到根目录下面, 所以需要使用path.join定位到根目录下的index.html

    第15行app.listen用来监听端口, 然后后面我们在命令行中输入node server.js就可以启动服务器, 并且输入localhost:9006就可以访问服务器上的页面

    3. 创建数据文件lottery.js

    let express = require('express');   // 引入express文件
    let router = express.Router();      // 创建router实例
    let Mock = require('mockjs');       // 引入mockjs模块创建假数据
    
    // 将接口名称命名为lottery.do, 因此在HTML文件中如果需要使用该接口, 那么发送请求的时候就要声明是lottery.do
    router.all('/lottery.do', function(req, res) {
        let data = {
            data: {
                dayLotteryTimesLimit: 10,
                description: "抽奖活动",
                endDate: 1518848777000,
                id: 5,
                name: "3月抽奖",
                prizeList: [
                  {id: 4, lotteryId: 5, type: 4, name: "50元红包", value: 200},
                  {id: 5, lotteryId: 5, type: 3, name: "爱奇艺会员1个月", value: 500},
                  {id: 6, lotteryId: 5, type: 3, name: "夏凉坐垫", value: 10},
                  {id: 8, lotteryId: 5, type: 1, name: "幸福西饼代金券", value: 200},
                  {id: 0, name: "谢谢参与"},
                  {id: 9, lotteryId: 5, type: 3, name: "美的遥控落地扇", value: 100}
                ],
                startDate: 1492241168000
            },
            errorCode: 0,
            msg: ""
        }
        res.json(data);
    });
    
    module.exports = router;

    需要注意的是倒数第三行的res.json是用于将数据转换为json格式的, 如果没有这一行的话, 后面使用ajax请求数据也是会报错的

    最后一行用于将当前创建的router对象给输出, 给别的地方引用, 对应的步骤2中的require(‘lottery’)

    4. 创建index.html 
    那么当我们在某个JS文件中或者HTML文件中需要使用到刚刚创建的lottery.js里面的接口的数据了, 可以这样编写代码:

    $.ajax({
        // 注意这里的lottery指的是前面server.js中第4行代码通过app.use指定的名字, 而lottery.do则是数据文件lottery.js中指定的数据接口的名称
        url: '/lottery/lottery.do',
        type: 'GET'
      })
      .done(function(result) {
        var data = result.data;
        document.write(data.dayLotteryTimesLimit);
        document.write(data.description);
      })
      .fail(function(xhr, textStatus) {
        console.log(xhr.status);
        console.log(textStatus);
      })
      .always(function() {
        console.log("complete");
      });

    那么最后, 当我们通过命令行定位到项目根目录了, 然后输入命令node server.js就可以创建服务了, 然后我们在浏览器地址栏中输入”localhost:9006”然后回车, 服务器给我们返回的内容就是server.js文件中的第7行代码中指定的index.html, 并且html文件加载时就发送ajax请求, 最后在页面上显示的就是两句document.write输出的内容.

    通过这种模式, 前端工程师在开发项目的时候, 就不需要等待后台开发出数据接口之后才能进行页面的一些布局等等开发操作, 而是自己搭建服务器并且模拟数据, 这样就可以和后端开发工程师同步工作了.

    展开全文
  • express + mockjs 搭建mock服务器 安装 // 安装express mockjs npm install express mockjs -D //安装热更新 supervisor npm install supervisor 构建服务 // 源码 const express = require("express") const app...

    express + mockjs 搭建mock服务器

    安装

    // 安装express mockjs
    npm install express mockjs -D
    
    //安装热更新 supervisor
    npm install supervisor 
    

    构建服务

    // 源码
    const express = require("express")
    const app = express();
    const Mock = require("mockjs")
    const cors = require('cors');
    const whitelist = ['http://localhost:8080'];
    const corsOptions = {
        credentials: true, // This is important.
        origin: (origin, callback) => {
            if (whitelist.includes(origin))
                return callback(null, true)
            callback(new Error('Not allowed by CORS'));
        }
    }
    app.use(cors(corsOptions));
    
    app.all('/api/*', function (req, res, next) {
        res.header("Access-Control-Allow-Headers", "X-Requested-With, mytoken")
        res.header("Access-Control-Allow-Headers", "X-Requested-With, Authorization")
        res.setHeader('Content-Type', 'application/json;charset=utf-8')
        res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
        res.header("X-Powered-By", ' 3.2.1')
        if (req.method == "OPTIONS") res.send(200);/*让options请求快速返回*/
        else next()
    });
    
    app.get("/api/user/getUserRelationPages/:id", (req, res) => {
        let data = Mock.mock({
            code: 200,
            data: {
                current: 1,
                pages: 10,
                total: 10,
                searchCount: true,
                size: 0,
                "records|10": [
                    {
                        "createTime": "@datetime('yy-MM-dd HH:mm:ss')",
                        "description": "@cparagraph",
                        "headUrl": "http://xiaoyue.work/my-logo.jpeg",
                        "id": "@id",
                        "imId": "2e6b5370-ef18-11e9-80c3-f5f1908528bc",
                        "imName": "481131946620191015145114522",
                        "nickName": "@cname",
                        "phoneNumber": "13575758097",
                        "pyName": "@first",
                        "pyRemark": "pyRemark",
                        "remark": "@cname",
                        "sex|1": ["男", "女"],
                        "userName": "@csentence(3,5)"
                    }
                ]
            },
            msg: ""
        })
        res.send(data)
    })
    
    /**
     * 获取个人动态
     */
    app.get("/api/trends/getTrendsPages", (req, res) => {
        let data = Mock.mock({
            "code": 200,
            "data": {
                "current": 1,
                "pages": 1,
                "records|10": [
                    {
                        "cId": "@id",
                        "content": "@csentence",
                        "createBy": 1,
                        "createTime": "@datetime('yy-MM-dd HH:mm:ss')",
                        "externalLink": "",
                        "id": "@id",
                        "imageUrls": "http://xiaoyue.work/my-logo.jpeg",
                        "likeNum": "@increment",
                        "likeuids": "12,13,14,15",
                        "updateBy": 1,
                        "updateTime": "@datetime('yy-MM-dd HH:mm:ss')",
                        "videoUrl": ""
                    }
                ],
                "searchCount": true,
                "size": 10,
                "total": 10
            },
            "msg": ""
        })
        res.send(data)
    })
    
    app.get("/api/user/getUserDetailInfo/:id",(req,res)=>{
        let data =Mock.mock({
            "code": 200,
            "data": {
                "description": "@csentence",
                "follow|1": [true,false],
                "headUrl": "http://xiaoyue.work/my-logo.jpeg",
                "id": "@id",
                "imId": "string",
                "imName": "string",
                "launchId": 0,
                "nickName": "@cname",
                "phoneNumber": "13575758097",
                "pyName": "@first",
                "sex|1": ['男',"女"],
                "userName": "@cname"
            },
            "msg": "string"
        })
        res.send(data)
    });
    
    app.listen("9090", (err) => {
        if (!err) {
            console.log("Mock server is running!")
        }
    })
    
    

    填坑过程:

    1. 跨域问题:
      1> 跨域问题只需要在 app.all 入口中配置:
       res.header("Access-Control-Allow-Origin",":*")
      
      2> 但是会报错:
      在这里插入图片描述
      3> 然后找方法:
      res.header('Access-Control-Allow-Credentials', true);
      
      报错还是一样的
      4> 后来看了这篇文章:
      http://www.it1352.com/1086516.html
      然后将 1> 、 3> 中的方法删掉,重新写:
    // 安装cors
      	npm install cors
    
    // 源码:
    const cors = require('cors');
    const whitelist = ['http://localhost:4200', 'http://example2.com'];
    const corsOptions = {
      credentials: true, // This is important.
      origin: (origin, callback) => {
        if(whitelist.includes(origin))
          return callback(null, true)
    
          callback(new Error('Not allowed by CORS'));
      }
    }
    app.use(cors(corsOptions));
    

    医者医人医世难自医。请各位指教。

    展开全文
  • 在前后端分离的项目开发中,我们需要模拟数据来实现前端的独立开发,这里使用json-server搭建本地的数据接口,当出现大量数据时,就要使用mockjs来循环生成数据了 首先需要环境:node、json-server、mockjs 安装...

            在前后端分离的项目开发中,我们需要模拟数据来实现前端的独立开发,这里使用json-server搭建本地的数据接口,当出现大量数据时,就要使用mockjs来循环生成数据了

            首先需要环境:node、json-server、mockjs

            安装方法:        

    //安装json-server
    
    npm install json-server -g
    
    //安装mockjs
    
    npm install mockjs --save

            创建mock数据文件夹,并创建data.js文件

    // 使用 Mock
    const Mock = require('mockjs');
    
    // 使用Random这个api
    var random = Mock.Random;
    
    //这里我写一段学生信息的数据
        
          //随机生成100名学生的信息
    let students = [];
    
    for (let i = 0; i < 100; i++) {
    
         // 随机中文名字
        let name = random.cname();
    
        // 随机56个民族
        let national = random.pick(["汉族","蒙古族","回族","藏族","维吾尔族","苗族","彝族","壮族","布依族","朝鲜族","满族","侗族","瑶族","白族","土家族","哈尼族","哈萨克族","傣族","黎族","僳僳族","佤族","畲族","高山族","拉祜族","水族","东乡族","纳西族","景颇族","柯尔克孜族","土族","达斡尔族","仫佬族","羌族","布朗族","撒拉族","毛南族","仡佬族","锡伯族","阿昌族","普米族","塔吉克族","怒族","乌孜别克族","俄罗斯族","鄂温克族","德昂族","保安族","裕固族","京族","塔塔尔族","独龙族","鄂伦春族","赫哲族","门巴族","珞巴族","基诺族"]);
       // 随机出受教育程度
        let education = random.pick(["初中","高中","大专","本科","研究生"]);
    
        // 是否是党员
        let member = random.pick(["是","否"]);
    
        // 随机省份
        let province = random.province();
    
        // 随机出身份证号码
        let idcare = random.id();
    
        // 数据放入数组students
        students.push({
            "id":i,
            name,
            national,
            education,
            province,
            idcare,
            member
        })
    }
    
    
    module.exports = () => {
    
        return { students };
    
    }
            关于mockjs的使用api,可以去官网 http://mockjs.com/自行查看
            
    接下来在mock文件下打开终端,运行 json-server data.js 
    出现下图 证明服务开启成功,访问对应网址就可以查看数据

    这里访问localhost:3020/students网址查看到的效果图如下:

    网页太长,共100条数据,这里不在截取

    到此就可以在项目中使用模拟好的数据了 

    展开全文
  • Mockjs

    2021-01-25 14:52:48
    Mockjs 介绍 Mock官网首页是这么定义的:生成随机数据,拦截 Ajax 请求。 demo 项目mock例子:https://gitee.com/huangchunhongzZ/vue-mock-test 1、在项目中应用 引入js依赖 npm install mockjs 建一个mock文件夹来...

    Mockjs

    介绍

    Mock官网首页是这么定义的:生成随机数据,拦截 Ajax 请求。

    demo

    项目mock例子:https://gitee.com/huangchunhongzZ/vue-mock-test

    1、在项目中应用

    引入js依赖

    npm install mockjs
    

    建一个mock文件夹来统一管理我们的mock数据

    在mock文件夹下建一个demo.js尝试一下
    在mock/demo.js中写下如下代码:

    import Mock from 'mockjs'
    //随机生成一个20-40条的数组数据试试
    const projectList = Mock.mock({
        "list|20": [{
        'name': '@cname', // 中文名
        'account': `@word`, // 英文单词
        'phone': /1[3-9][0-9]{9}/, // 正则模式
        'deptName': Mock.mock('@cword(2,4)'), // 随机2-4字中文单词
        'id': '@guid', // guid
       }]
     })
    //有多种模式可选,具体见官方示例。
    
    export default [
        {
            url: '/Api/Project/GetList',
            type: 'post',
            response: (res) => {
                
                // res.body就是我们传入到接口的数据,可以在这里做些逻辑操作
                // res包含完整的请求头信息
                return {
                    code: 200,
                    message: "操作成功",
                    data:projectList 
                }     
                // 使用return返回前端需要的数据
            }
        }
         //... 多个接口
    ]
    

    现在数据有了,我们如何让mockjs能够拦截到我们前端发出的请求,并能准确区分对应接口呢?

    在mock/文件夹下再建一个index.js写我们mock的监听逻辑

    import Mock from 'mockjs' // 导入mockjs
    import demoApi from './demo' // 导入我们模拟数据的js文件
    
    const mocks = [
    {
        intercept: true, // 开关,模拟请求与真实请求并存
        fetchs: demoApi
    },
    
    // 解析地址栏参数解析函数
    export function param2Obj(url) {
        const search = url.split('?')[1]
        if (!search) {
            return {}
        }
        return JSON.parse(
            '{"' +
                decodeURIComponent(search)
                .replace(/"/g, '\\"')
                .replace(/&/g, '","')
                .replace(/=/g, '":"')
                .replace(/\+/g, ' ') +
              '"}'
            ) 
        }
        
     // 前端模式构建函数(或者你也可以建一个mock server)
     export function mockXHR() {
          Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
          Mock.XHR.prototype.send = function() {
            if (this.custom.xhr) {
              this.custom.xhr.withCredentials = this.withCredentials || false
    
              if (this.responseType) {
                this.custom.xhr.responseType = this.responseType
              }
            }
            this.proxy_send(...arguments)
          }
    
          function XHR2ExpressReqWrap(respond) {
            return function(options) {
              let result = null
              if (respond instanceof Function) {
                const { body, type, url } = options
                // https://expressjs.com/en/4x/api.html#req
                result = respond({
                  method: type,
                  body: JSON.parse(body),
                  query: param2Obj(url)
                })
              } else {
                result = respond
              }
              return Mock.mock(result)
            }
          }
    
          for (const i of mocks) {
            if(i.intercept){
              for(const fetch of i.fetchs){
                Mock.mock(new RegExp(fetch.url), fetch.type || 'get', XHR2ExpressReqWrap(fetch.response))
              }
            }
          }
    }
    

    经过上面一通代码之后,我们已经初步完成了前端模拟数据的技术条件。

    但是你千万不要忘记了,在main.js引入并使用它哦

    // mock
    if (process.env.NODE_ENV === 'development') {
      const { mockXHR } = require('../mock')
      mockXHR()
    }
    // mock end
    

    src下建一个api文件夹

    然后再在src/api/下建一个_request.js

    import Axios from "axios";
    
        // 定义axios配置 
        const http = Axios.create({
          baseURL: '', // api的base_url
          withCredentials: true, // 开启跨域身份凭证
          method: "post",
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          },
          timeout: 5000 // request timeout
        });
    
        // 设置全局的请求次数,请求的间隙,用于自动再次请求
        http.defaults.retry = 2;
        http.defaults.retryDelay = 1000;
    
        // 请求拦截器
        http.interceptors.request.use(
          function (config) {
            return config;
          },
          function (error) {
            return Promise.reject(error);
          }
        );
    
        // 响应拦截器
        http.interceptors.response.use(
          function (res) {
            return res;
          },
          function (err) {
            let config = err.config;
            let errres = err.response;
            let err_type = errres ? errres.status : 0;
            // 收集错误信息
            switch (err_type) {
              case 400:
                err.message = "请求无效";
                break;
    
              case 401:
                err.message = "由于长时间未操作,登录已超时,请重新登录";
                break;
    
              case 403:
                err.message = "拒绝访问";
                break;
    
              case 404:
                err.message = `请求地址出错: ${errres.config.url}`;
                break;
    
              case 405:
                err.message = `未授权`;
                break;
    
              case 408:
                err.message = "请求超时";
                break;
    
              case 500:
                err.message = "服务器内部错误";
                break;
    
              case 501:
                err.message = "服务未实现";
                break;
    
              case 502:
                err.message = "网关错误";
                break;
    
              case 503:
                err.message = "服务不可用";
                break;
    
              case 504:
                err.message = "网关超时";
                break;
    
              case 505:
                err.message = "HTTP版本不受支持";
                break;
    
              default:
                err.message = "网络波动,请重试";
            }
    
            // If config does not exist or the retry option is not set, reject
            if (!config || !config.retry) return Promise.reject(err);
    
            // Set the variable for keeping track of the retry count
            config.__retryCount = config.__retryCount || 0;
    
            // Check if we've maxed out the total number of retries
            if (config.__retryCount >= config.retry) {
              // Reject with the error
              return Promise.reject(err);
            }
    
            // Increase the retry count
            config.__retryCount += 1;
    
            // Create new promise to handle exponential backoff
            let backoff = new Promise(function (resolve) {
              setTimeout(function () {
                resolve();
              }, config.retryDelay || 1);
            });
    
            // Return the promise in which recalls axios to retry the request
            return backoff.then(function () {
              return http(config);
            });
          }
        );
    
        export default http;
    

    封装了一下axios之后,所有的api接口仍建议统一管理

    我们在api/文件夹下再建一个project.js用来统一管理项目模块的所有接口

    import request from "../_request";
    
    // 获取部门列表接口
    function getProjectListApi(data) {
      return request({
        url: "/Api/Project/GetList",
        method: 'post',
        data
      });
    }
    
    export {
      getProjectListApi // 获取部门列表接口
    }
    

    接下来就是最后一步,在我们开发的.vue文件中使用啦

    import { getProjectListApi } from "@/api/project.js"; // 导入用户列表接口
    
    export default {
        data(){
            return {
                projectList: []
            }
        },
        created(){
            this.getProjectList()
        },
        methods: {
          getProjectList(){
            getProjectListApi().then(res => {
                console.log(res)
            })
          }
        }
    }
    
    展开全文
  • ①下载mockjs(地址)放置utils目录中 ②新建api.js :配置模拟数据以及后台接口,通过DEBUG=ture; //切换数据接口 配置如下: let API_HOST = "http://xxx.com/xxx"; let DEBUG = true;//切换数据入口 var ...
  • vue mockjs

    2019-11-26 11:03:52
    前-后端分离; 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据; 数据类型丰富;...vue init webpack mockjs<br>cd mockjs<br>npm install axios --save 安装mockjs npm ins...
  • 下载依赖模块 npm install express mockjs supervisor --save-dev 其中express就是上文讲到的框架,用于搭建服务器.mockjs是用来模拟假数据的, supervisor用来监视文件修改的, 使用supervisor启动服务时, 只要文件有...
  • express+mockjs

    2020-10-20 23:33:46
    搭建express服务器并提供mock数据 步骤: 1.初始化一个项目:npm init-y 2.创建nodejs服务器入口文件app.js 3.下载mockjs以及express:npm imockjs 4.编写代码完成express服务器的搭建 5.编写接口提供mockjs数据 ...
  • Mockjs原理简析

    千次阅读 2018-04-11 23:48:06
    有一个前后端分离的项目用到过Mockjs,后端提供了数据格式,前端通过模拟接口的返回数据,进行页面的渲染,有一段时间,百思不得其解,这个插件是怎么把ajax请求给拦下来的,网上搜索了一番,资料甚少,未果。...
  • 文章目录目录简介使用第一种情况:在本地启动接口第二种情况:本地监听,并且上传到服务器,并且在远端服务器启动该接口服务附录 这个项目是为了前后端分离开发,使用mock+nodejs编写的模拟后端数据的服务,同时...
  • Mockjs的应用记录

    2019-08-20 16:54:49
    #Mockjs的应用记录 ...##此次为不需要开启node服务器的模拟应用 ``` Mock官网:http://mockjs.com/ ``` ``` 使用方法: 1.引用mock目录下的mock.js 2.参考loginjs进行应用 ``` var Moc...
  • vue安装mockJs

    2021-06-16 10:43:05
    res.json(Mock.mock(json)) }) } 4 、在项目根目录创建vue.config.js 文件 devserver 具体配置参考 webpack 开发服务器配置 module.exports = { devServer: { before: require('./mock/index.js') } } 5 、找到vue...
  • webpack-mock-simple 基于 的 webpack 插件 使用方式 安装 npm i webpack-mock-simple --save-dev ... port: 3000 // mock 服务器端口, isInject: true // 是否拦截,默认为 true }) ]) 运行 npm run star

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,394
精华内容 557
关键字:

mockjs服务器