clone项目

clone项目

clone

git clone git@github.com:57code/kkb-honor-admin  // 配置了ssh才可以使用
或者
git clone https://github.com/Armour/vue-typescript-admin-template.git

git上创建私有库，将当前项目和私有库的地址绑定

git remote  // 查看当前的绑定的远程的地址
git remote remove origin  // 删除当前的绑定的远程的地址
git remote add origin git@github.com:57code/kkb-honor-admin // 新增remote
git remote grt-url origin // 查看当前绑定的远程的地址

启动

node -v // 查看node版本号
nvm list // 展示当前电脑的所有的node版本
nvm use 12.16.1  // 切换node的版本

npm i
npm run dev

基于OAS的接口定义和数据mock

OpenAPI Specification简称OAS，是一套接口定义规范，使用它定义接口可以用于未来的文档生成和代码生成。

swagger使用

1. 文档自动生成
2. 基础代码直接生成

mock-server.ts        mock入口文件
swagger.yml   API的定义文件
api.ts    路由的定义（路由的定义分散在各个文件中，这样是为了模块化开发。引入的每个文件都是路由的具体实现，路由的实现函数）

编写接口

在swagger.yml中定义接口

为了便于后续接口定义、编写和查看，请先安装如下VSCode扩展：

• YAML
• OpenAPI(Swagger)
• Swagger Viewer 方便可视化观察

swagger.yml

openapi: 3.0.0 # 当前版本号
info: # 接口描述信息
  ...
servers: # 接口服务器地址，也用于咱们路由声明前缀（服务器前缀信息，前缀信息会使用列表的格式。因为可以定义多个）
    - url: /mock-api/v
tags: # 接口文档中的标签名称（可视化预览的时候的标签分类，组织各种标签）
    - name:articles
    description: ...
path: # 接口路径和定义（统一管理所有的路径。使用resful的方式。可以定义参数和输出）
  /articles:
    get:
    ...
    post:
    ...
components: # 可复用组件，数据结构定义、响应定义、安全认证的定义等
  securitySchemas:
    ...
  responses:
    ...
  schemas:
    ...
paths: # 编辑地址
    /articles:   # 将来访问地址的路径
      get: # method类型
            tags: #所属标签
          - articles
            summary: 获取玩家信息列表 # 概要
      description: 返回玩家信息数组 # 详细描述
      operationId: getArticles # 操作id，是必要的，映射到实现函数（指明了将来在具体的实现中的函数名称。即在api.ts引入的articles.ts中实现了getArticles）
      responses: #响应描述
          200:
            description: OK

预览swagger

在yml的文件下面输入下面的命令
输入命令：>swagger => Preview Swagger