个人分享

个人分享

1. 数据mock

我们正常的开发业务中，往往开放方式是 界面与功能逻辑同时进行。前端对数据依赖性太强。

借助rap2灵活的在线数据伪造 解决开发阶段前端数据mock

针对状态部分的验证 可直接在rap2线上改动刷新页面就好 避免本地server改动后频繁npm run…

rap2

{
  "data|2-14": [
    {
      "code": "@natural",
      "name": "@cword(3)",
      "measureUnit": "@pick([\"根\",\"颗\"])",
      "budgetUnitPrice": "@float(60, 100, 4, 9)",
      "budgetQuantity": "@integer(20, 1000)",
      "budgetAmount": "@float(60, 100, 4, 9)",
      "budgetCumulativeQuantity": "@integer(20, 1000)",
      "budgetCumulativeAmount": "@float(60, 100, 4, 9)",
      "actualUnitPrice": "@float(60, 100, 4, 9)",
      "actualQuantity": "@integer(20, 1000)",
      "actualAmount": "@float(60, 100, 4, 9)",
      "actualCumulativeUnitPrice": "@float(60, 100, 4, 9)",
      "actualCumulativeQuantity": "@integer(20, 1000)",
      "actualCumulativeAmount": "@float(60, 100, 4, 9)",
      "quantityDifferQuantity": "@integer(20, 1000)",
      "quantityDifferAmount": "@float(60, 100, 4, 9)",
      "priceDifferPrice": "@float(60, 100, 4, 9)",
      "priceDifferAmount": "@float(60, 100, 4, 9)",
      "differAmount": "@float(60, 100, 4, 9)",
      "cumulativeQuantityDifferQuantity": "@integer(20, 1000)",
      "cumulativeQuantityDifferAmount": "@float(60, 100, 4, 9)",
      "cumulativePriceDifferPrice": "@float(60, 100, 4, 9)",
      "cumulativePriceDifferAmount": "@float(60, 100, 4, 9)",
      "cumulativeDifferAmount": "@float(60, 100,43,95)"
    }
  ]
}

server 层

const client = require('@mctech/infra-cloud').getRpcClient()

const rap2 = client.bind({ url: 'http://rap2.taobao.org:38080/' })

const mockData = async (url) => await rap2.get({ path: url })

module.exports = [
  {
     
     description:'接口描述',
     url:'接口url',
     method:'请求方式',
     res:{
     async mock () {
        const result = await mockData('app/mock/258274/projects/orgId/project-labor')
        // 树形结构 可以在这里做 数据合并 id/pid
        return result
      },
      handler (params, ctx, next) {
        ...
      }
     }
  },
  ...
]

UI层
正常的api调用方式

2. 破碎的F5

为解放F5刷新 解决前端文件变动 自动刷新浏览器

• VScode 扩展 Live Server 了解一下

• 浏览器端插件 Live Server Web Extension 配合使用

这块建议：习惯开自动保存的小伙伴注意啦 写代码的时候浏览器刷的飞起

3. VScode支持 mussel-ui 提示

正对经常使用到的mussel组件VScode没有好的代码提示支持 我们自己整了一个 将mussel-ui以及经常使用的代码模块 整了一个本地vsix扩展

GitHub - langlangbody/mcweb-snippets: 代码提示工具