脚手架koa2+mockjs

简介: 安装npm i yo -g (安装yeoman)npm i generator-mockserver -g (安装脚手架)yo选择 Mockserver输入项目名称,比如: testcd testnpm installnpm run start如果你的浏览器出现下图就说明安装和运行都ok了.

安装

  1. npm i yo -g (安装yeoman)
  2. npm i generator-mockserver -g (安装脚手架)
  3. yo
  4. 选择 Mockserver
  5. 输入项目名称,比如: test
  6. cd test
  7. npm install
  8. npm run start
    如果你的浏览器出现下图就说明安装和运行都ok了.
    注: 本脚手架使用koa2和es6编写且没有使用任何构建工具,所以请保证您的node版本是7.0以上.


    img_aeef00e6081546dfeadc66fe3204477d.png
    image.png

编写接口

wt-mock基于koa2与mockj进行制作,不过您如果不熟悉koa也一点都不妨碍
您编写数据接口,下面是关于如何创建一个项目和编写一个接口的步骤:
项目的目录结构如下


img_c84f6ff41bfd43f6ef39f61dd6f77352.png
image.png
  1. 点开project文件夹,新建文件夹输入您的项目名称: 比如 taobao
  2. 我们现在在taobao的文件夹里写一个login的接口,在taobao目录里新建文件login.js
  3. 把下面的代码贴到login.js里:
    function makeIns(ctx) {
    const data = {
    code: '666',
    msg: 'success'
    }
    ctx.body = data;
    }
    module.exports = makeIns;
  4. 回到命令窗口,按两次ctrl+c,结束服务,然后再次运行npm start,这时浏览器访问http://127.0.0.1:7777/taobao/login
    就能看到接口返回的数据,上面的函数的data就是你要返回的数据,data可以是任意类型,至于ctx是什么,我想您需要去
    一下koa的文档.
  5. 综上所述,如果您要开发一套模拟数据接口,只需要在project下面新建一个文件夹,这个文件夹就是您的项目,有几个项目
    就建几个文件夹,在文件夹内所建的js文件就是您的接口,文件名是什么,接口名就是什么.当我们访问http://127.0.0.1:7777
    的时候,页面会列出你所有的接口地址,这些接口可以同时使用get和post请求.
  6. 如果wt-mock只是单单的返回数据而已,那未免太费周折了.在开发中我们常常要根据前端传来的参数返回不同的内容,
    这个也很简单,假设有这样的一个请求 http://127.0.0.1:7777/taobao/login?username=laohu&psw=123,要获取请求参数,
    makeIns这个函数接收了一个ctx的参数,ctx包含了请求的所有信息,get请求就用ctx.query.username来获取username的值,
    而post请求则使用ctx.request.body.xxx获取参数对应的值.

高级技巧

  1. 我们每次修改接口的时候,都需要重启服务,这个很麻烦,有没有自动重启的工具呢,答案是:有
  • 安装 npm install supervisor -g 当我们用node app.js来执行app.js的时候,我们可以supervisor app.js来执行,这样,当我们修改了代码就能马上看到结果而不用重启.
    注意: 当我们在执行npm start的时候,背地里其实是执行了node app.js,所以当我们在编写接口的时候,也可以不使用npm start只需执行node app.js就好了,如果我们需要修改接口使用supervisor app.js会很方便.
  1. 在模拟数据接口的时候,我们常常需要返回一些随机的数字,随机的字符串或者随机的姓名等等,这些我们当然可以自己去实现,但是有人把这个事已经给我们做了,那就是mockjs模块,您只需安装一下就可以使用,mockjs文档地址: http://mockjs.com/,如果您需要对日期做一些处理,那么可以是使用moment模块,地址:http://momentjs.cn/docs/

  2. 调试接口是建很痛苦的事,因为nodejs是后台语言,我们面对的只是个小黑窗口,然而,已经有人为给我们做了很好的工具,感谢这些乐于分享开源的同行.这个工具就是大名鼎鼎的node-spector, 具体用法:

  • 全局安装node-inspector npm install node-inspector -g
  • 启动服务 node --debug app.js (一定记得加上 --debug 这个参数 )
  • 执行 node-inspector
  • 打开浏览器,输入提示的网址和端口
  • 找到要调试的接口文件,打好断点,然后访问接口,就可以向在浏览器调试js一样来调试node了
目录
相关文章
|
8月前
|
JavaScript 小程序 API
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
775 0
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
1488 0
|
4月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
225 6
|
5月前
|
资源调度 JavaScript
不使用脚手架安装nuxt.js
【8月更文挑战第6天】
|
8月前
|
资源调度 JavaScript 前端开发
【Vue】day03-VueCli(脚手架)
【Vue】day03-VueCli(脚手架)
98 0
|
JavaScript 前端开发 API
vue配置和使用mockjs
vue配置和使用mockjs
|
前端开发 JavaScript
Vue3+Vite简单使用
Vue3+Vite简单使用
92 0
|
移动开发 资源调度
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
145 0
|
前端开发
微前端-qiankun:vue3-vite 接入 vue3-vite
微前端-qiankun:vue3-vite 接入 vue3-vite
762 0