美文网首页
前端使用自定义接口内容

前端使用自定义接口内容

作者: 咔簌 | 来源:发表于2019-08-13 16:17 被阅读0次

前后端分离以后,很多时候,可能前端与后端是在并行开发的或者走在后端同事前面。所以,在还没有接口的情况下,前端同事就需要使用到数据自己模拟的一些数据。

一、使用webpack的devServer来mock接口数据

devServer:{
    before(app) {
            app.get('/api/books', function(req, res) {
                res.json({
                    list: [{
                            name: '西游记'
                        },
                        {
                            name: '红楼梦'
                        },
                        {
                            name: '三国演义'
                        }
                    ]
                });
            });
        }
}

访问http://localhost:8080/api/books 就可以看到mock的数据

二、使用json数据

创建一个books.json文件,使用 import books from "./books.json"; 引入即可使用

[{
        "name": "西游记"
    },
    {
        "name": "红楼梦"
    },
    {
        "name": "三国演义"
    }
]

三、使用export 方式

创建一个books.js文件,使用 import books from "./books.js"; 引入即可使用

const books = [{
        "name": "西游记"
    },
    {
        "name": "红楼梦"
    },
    {
        "name": "三国演义"
    }
]

export default books

简单的总结了几种可以方便自己开发的方法,欢迎各位大佬们补充!

相关文章

  • 前端使用自定义接口内容

    前后端分离以后,很多时候,可能前端与后端是在并行开发的或者走在后端同事前面。所以,在还没有接口的情况下,前端同事就...

  • JS中的事件

    JS中的事件 一:自定义事件 1.使用Event自定义事件 使用Event接口,可以自定义事件。但是该接口无法在事...

  • Spring 5 中文解析核心篇-IoC容器之自定义Bean性质

    Spring框架提供一些接口,你可以使用这些接口去自定义bean的性质。这个章节包括下面内容: 生命周期回调 Ap...

  • 云服务 部署

    云服务部署 https://app.netlify.com/ 免费 前端项目展示 线上免费自定义接口https:/...

  • 估值器 Evaluator

    内容接口 TypeEvaluator 常见估值器自定义估值器 接口 TypeEvaluator 本质是...

  • 插值器 Interpolator

    内容接口 TimeInterpolator一些常见插值器自定义插值器 接口 TimeInterpolator表示...

  • 公司接口规范

    接口规范 接口(API)通常我们都会采用 REST 方式来提供接口, 使用 JSON 来传输数据.由前端(APP端...

  • 前端文件上传和下载的实现

    这里前端项目使用的Vue,这里的操作是点击 +Excel上传 后,立即调用接口编译出上传的内容。 文件上传 上传文...

  • ELK前端日志分析、监控系统

    ELK前端日志分析、监控系统 前端日志与后端日志不同,具有很强的自定义特性,不像后端的接口日志、服务器日志格式比较...

  • 八、自定义事件内容分发

    什么叫做自定义事件内容分发呢?简单来说就是,如果在vue中,我们需要自定义的东西要交给前端的话,不能直接交给前端,...

网友评论

      本文标题:前端使用自定义接口内容

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