美文网首页Web前端之路让前端飞Web 前端开发
lazy-mock ,一个生成后端模拟数据的懒人工具

lazy-mock ,一个生成后端模拟数据的懒人工具

作者: 若邪Y | 来源:发表于2018-06-30 15:27 被阅读21次

lazy-mock

  lazy-mock 是基于koa2构建的,使用lowdb持久化数据到JSON文件。只需要简单的配置就可以实现和json-server差不多的功能,但是比json-server更加灵活,后期可配置性更强,完全可以模拟真实后端业务逻辑。

  lazy-mock默认包含了jwt实现的登录与登出,实现了基于RBAC模型的通用权限控制逻辑。具体可查看vue-quasar-admin

Clone

git clone https://github.com/wjkang/lazy-mock.git

Install

npm install

Run

npm run start

使用Postman模拟登录功能

image

Use

下面通过模拟图书的增删改查 介绍lazy-mock的简单使用

修改codeGenerate/config/config.js:

export default {
    ApiServer:'http://localhost:3000',
    ServerRootPath:'G:/GitHubProject/lazy-mock',
    //server
    RouteRelativePath:'/src/routes/',
    ControllerRelativePath:'/src/controllers/',
    ServiceRelativePath:'/src/services/',
    ModelRelativePath:'/src/models/',
    DBRelativePath:'/src/db/'
}

只需要修改ServerRootPath为当前项目的根目录。

接着修改codeGenerate/config/model.js:


var shortid = require('shortid')
var Mock = require('mockjs')
var Random = Mock.Random

//必须包含字段id
export default {
    name: "book",
    Name: "Book",
    properties: [
        {
            key: "id",
            title: "id"
        },
        {
            key: "name",
            title: "书名"
        },
        {
            key: "author",
            title: "作者"
        },
        {
            key: "press",
            title: "出版社"
        }
    ],
    buildMockData: function () {//不需要生成设为false
        let data = []
        for (let i = 0; i < 100; i++) {
            data.push({
                id: shortid.generate(),
                name: Random.cword(5, 7),
                author: Random.cname(),
                press: Random.cword(5, 7)
            })
        }
        return data
    }
}

更多生成模拟数据的规则可看https://github.com/nuysoft/Mock

生成代码

确保之前npm run start的窗口还开着,打开新的命令行窗口,执行npm run code

image

复制src/routes/bookApiMap.txt某一行数据到Postman访问

get http://localhost:3000/book/get?id=
get http://localhost:3000/book/paged?pageIndex=&pageSize=&sortBy=&descending=&id=&name=&author=&press=
delete http://localhost:3000/book/del?id=
delete http://localhost:3000/book/batchdel?ids=[]
//不设置id则新增,否则为更新
post http://localhost:3000/book/save
{

  "id":"",

  "name":"",

  "author":"",

  "press":"",
 
}
image

请求头记得加上Authorization:Bearer token

token之前模拟登录获取的

image

More

修改自动生成的代码格式

直接修改codeGenerate/serverTemplates 下文件

去掉接口需要授权访问的限制

去掉scr/app.js 里的.use(jwt({ secret: publicKey }).unless({ path: [/^\/public|\/auth\/login|\/assets/] }))

修改接口返回格式

修改src/lib/responseTemplate.js

修改路由

修改src/routes 下文件

添加更多业务逻辑

主要修改src/services下文件,具体可参考memuService.js

使用权限控制逻辑

前端参考vue-quasar-admin。实现了页面(菜单),接口,元素级的权限控制。

后端在路由处加上权限控制的中间件,比如

.get('/function/pagedlist', PermissionCheck({ permission: ["function_view"], role: ["test"] }), controllers.function.getFunctionPagedList)

permission表明当前登录用户必须具备数组里的任意一个权限码,才能访问当前接口。

role表明当前登录用户必须具备数组里的任意一个角色码,才能访问当前接口

permission与role为或关系

相关文章

  • lazy-mock ,一个生成后端模拟数据的懒人工具

    lazy-mock   lazy-mock 是基于koa2构建的,使用lowdb持久化数据到JSON文件。只需要简...

  • mockjs

    mockjs是用来模拟后台请求,并生成模拟数据的一个插件。实现前后端分离开发,前端不用在后端功能还未开发完成的情况...

  • Easy-mock 环境搭建

    目前项目基本都是前后端分离进行开发,所以需要进行数据模拟。easy-mock是一个简单的可自行搭建的数据模拟工具。...

  • vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新)...

  • 2018-12-06 mock.js的使用

    目的 mock.js能够拦截Ajax请求,生成模拟数据进行接口调试,模拟了前后端调试的环境,使得前端开发能够独立于...

  • Mock的使用----基于Vue和PHP打造前后端分离的通用管理

    Mock,简言之,模拟数据生成器。我们做的是前后端分离的通用系统,目前后端还没有开发,前端又需要数据,怎么办,Mo...

  • 组件分享之后端组件——从 postgres 数据库模式生成DOT

    组件分享之后端组件——从 postgres 数据库模式生成DOT描述工具dbdot 背景 近期正在探索前端、后端、...

  • mockjs

    Mockjs 无侵入性的、生成拟真数据、请求拦截,可以帮助前端不依赖后端的接口进行并行开发。 安装依赖 生成模拟数...

  • Easy Mock简单使用

    Easy Mock是一个可视化,并且能快速生成模拟数据的持久化服务。 解决问题 开发时,后端还没完成数据输出,前端...

  • mockjs简介和应用

    一、说明 mock.js 是一款模拟数据生成器,帮助前端人员独立于后端进行开发,帮助编写单元测试, 前后端合作期间...

网友评论

    本文标题:lazy-mock ,一个生成后端模拟数据的懒人工具

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