shyarchershyarcher
首页
  • 学习笔记
  • 旧版迁移内容
Github
首页
  • 学习笔记
  • 旧版迁移内容
Github
  • 学习笔记

    • 博客搭建

      • Vuepress+githubPages搭建个人博客流程
    • AI部署

      • AI服务器配置指南
      • OpenCode 部署与使用完全指南
    • vue相关

      • 01vue的基本概念
      • 02侦听器和axios
      • 03vue生命周期和组件数据传递
      • 04vuex笔记
      • vue3学习笔记
      • pinia学习笔记
    • js相关

      • 原型和继承
      • jQuery笔记
    • react相关

      • Hooks笔记
      • React学习笔记
    • 后端

      • 关于服务器的一些概念
      • node.js笔记
      • nodejs后台起服务步骤
    • git相关

      • 给git设置代理
      • git笔记
    • 部署相关

      • webpack笔记
    • echarts

      • echarts笔记
  • 旧版迁移内容

    • 利用Hugo+gitHub搭建个人博客
    • 利用JavaSwing开发一款桌面塔防游戏
    • 配置达梦驱动包至本地Maven库
    • 热部署插件JRebel使用说明
    • Windows触摸板操作及谷歌浏览器快捷键整理
    • yapi部署笔记

img

官网地址:https://hellosean1025.github.io/yapi/index.html

Github: https://github.com/YMFE/yapi

所需环境:

1.Node.js(7.6+)

2.Mongodb(2.6+)

3.git

前置条件安装:

1.git:https://git-scm.com/downloads

2.Node.js:https://nodejs.org/zh-cn/download/

3.Mongodb:https://www.mongodb.com/download-center/community

注意:

1.mongodb安装后需要将启动服务设置windows开机自启,步骤如下:

​ 1)在mongodb安装的目录下面,创建db文件夹和log文件夹

​ 2)用管理员身份启动cmd,在命令行中跳转到mongodb的bin目录,运行下面的命令

mongod --dbpath "d:\Mongodb\mongodb-win32-x86_64-2012plus-4.2.6\db" --logpath "d:\Mongodb\mongodb-win32-x86_64-2012plus-4.2.6\log\mongodb.log" --install --serviceName "MongoDB"

2.安装完成后需要配置环境变量,将bin文件路径添加至path即可

3.需要创建一个Yapi依赖库,步骤如下:

​ 第一步:创建数据库

use yapi

​ 第二步:创建用户并配置权限

db.createUser({user:"username",pwd:"123456",roles:[{"role":"readWrite","db":"yapi"}]})

4.配置YApi的时候需要根据依赖库进行相应调整

"db": {
  "servername": "127.0.0.1",
  "DATABASE": "yapi",
  "port": 27017,
  "user": "username",
  "pass": "123456",
  "authSource": ""
}

进行部署(默认所有前置条件已经准备完毕)

全局安装yapi-cli

npm install -g yapi-cli --registry https://registry.npm.taobao.org

yapi server

在浏览器打开 http://0.0.0.0:9090 访问。非本地服务器,请将 0.0.0.0 替换成指定的域名或127.0.0.1

可视化部署

image-20200430100301958

部署成功后,请切换到部署目录(默认路径如下)

cd C:\Users\userName\my-yapi

输入:

node vendors/server/app.js

启动服务器, 然后在浏览器打开 http://127.0.0.1:3000 访问,输入之前的用户名密码进行登录

image-20200430101533592

服务管理(PM2)

npm install pm2 -g  //安装pm2
cd  {项目目录} //例如:cd C:\Users\userName\my-yapi
pm2 start "vendors/server/app.js" --name yapi //pm2管理yapi服务
pm2 info yapi //查看服务信息
pm2 stop yapi //停止服务
pm2 restart yapi //重启服务

windows用户需要安装兼容

npm install pm2-windows-startup -g
pm2-startup install
pm2 start xxx.js 
pm2 save

使用指南

前端

1.根据业务编辑接口规范

image-20200507182659179

包括必填字段、参数类型、字段描述、正则验证等等

image-20200507182814133

2.设置mock期望,过滤指定参数获取指定数据

image-20200507182914277

3.复制yapi平台中自动生成的mock地址(需要先开启mock严格模式)

image-20200507181928990

4.将前端代码中的接口请求地址换成对应的mock地址
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>mockTest</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<form id="form1">
  pageCode: <input type="text"" name="pageCode" id="pageCode"><br>
  orgCategory: <input type="text" name="orgCategory" id="orgCategory"><br>
  targetCategory: <input type="text" name="targetCategory" id="targetCategory"><br>
  <input type="button" value="提交" onclick="login()">
</form>

<script>
  function login() {
      $.ajax({
      //几个参数需要注意一下
          method: "POST",//方法类型
          dataType: "json",//预期服务器返回的数据类型
          url: "http://localhost:3000/mock/11/centralizedcontrol/publicInterface/getAreaAndStationMsg" ,//url
          // 将表单中内容进行序列化后作为参数传递
          data: $('#form1').serialize(),
          success: function (result) {
              console.log(result);//打印服务端返回的数据(调试用)
              if (result.resultCode == 200) {
                  alert("SUCCESS");
              }
          },
          error : function() {
              alert("异常!");
          }
      });
  }
</script>

</body>
</html>
5.在浏览器中查看返回数据即可

image-20200507182427264

后端

后端开发进行接口测试时需要先安装谷歌浏览器插件,接口配置完成后按提示安装即可

image-20200507183918779

插件安装完成后直接测试接口查看后台返回数据即可

image-20200507181706425

最近更新: 2026/8/11 15:57
Contributors: shyarcher
Prev
Windows触摸板操作及谷歌浏览器快捷键整理