精华内容
下载资源
问答
  • 接口文档规范

    2018-09-19 15:45:17
    接口文档规范 前言:为了规范化项目管理,方便团队扩充后的新同事对项目的熟悉及自主入手开发,现决定将项目文档逐步规范化。 所有新增接口,按照规范格式撰写接口文档; 所有修改的接口,如果之前有对应的接口文档...

    前言:为了规范化项目管理,方便团队扩充后的新同事对项目的熟悉及自主入手开发,现决定将项目文档逐步规范化。

    1. 所有新增接口,按照规范格式撰写接口文档;
    2. 所有修改的接口,如果之前有对应的接口文档,则修改相应文档,若没有,则新建接口文档;
    3. 文档目录位置的选择,以类似“商户后台→对账中心(大板块)→所有账单(子板块)”的方式建立或选择;
    4. 同一个页面,一类功能的不同接口,可以放在同一个文档中;
    5. 文档应清晰包含每个接口的请求参数说明、正确返回示例、错误返回示例、返回参数说明。参数不同值有不同特殊意义的,应在说明中列举,或使用单独的表格列举;
    6. 不论前端工程师或后端工程师均可指定接口,只要商定好后即可撰写,双方各自按约定接口进行开发;
    7. 开发测试过程中,对接口有修改的,应及时修改对应文档;
    8. 任务下面需要进行接口对接的,直接贴文档地址进行交流。

    Tips:接口调用可使用Postman,需要模拟浏览器环境(共享Cookie等),请打开Interceptor,如图所示

    img

    展开全文
  • 前端接口层工具(Alibaba)

    千次阅读 2019-07-17 15:47:20
    Pont - 搭建前后端之桥 ...Pont 利用接口元数据,可以高度定制化生成前端接口层代码,接口 mock 平台和接口测试平台。 其中 swagger 数据源,Pont 已经完美支持。并在一些大型项目中使用了近两年,各种高度...

    Pont - 搭建前后端之桥

    npm version npm downloads Gitter

    pont 在法语中是“桥”的意思,寓意着前后端之间的桥梁。

    介绍

    Pont 把 swagger、rap、dip 等多种接口文档平台,转换成 Pont 元数据。Pont 利用接口元数据,可以高度定制化生成前端接口层代码,接口 mock 平台和接口测试平台。

    其中 swagger 数据源,Pont 已经完美支持。并在一些大型项目中使用了近两年,各种高度定制化需求都可以满足。

    沉浸式接口开发

    接口检索:

    屏幕快照 2019-05-28 22.35.25.png

    接口开发: pont.gif

    联调维护

    实时发现后端接口更新: 屏幕快照 2019-05-28 00.14.41.png

    更新接口层后,可迅速定位接口调用代码,进行调用修改。 屏幕快照 2019-05-28 00.13.34.png

    快速开始

    • 1、在 vscode 中安装 vscode 插件 pont。插件使用方法请参考:vscode-pont

    • 2、确保服务端使用 Swagger(目前只支持 Swagger),提供的数据源接口是免登录的。如果不是,请后端帮忙简单配置一下即可。

    • 3、在项目中任何位置添加 pont-config.json 文件,vscode-pont 检测到项目中有合法的 pont-config.json,插件马上启动。

    pont-config.json 配置项

    对于 pont-config.json 的配置,在 vscode-pont 插件中已经做了自动提示、自动补全、配置项描述提醒等功能。具体配置项介绍如下:

    originUrl

    值类型:字符串

    描述: 接口平台提供数据源的 open api url(需要免登),目前只支持 Swagger。如 "https://petstore.swagger.io/v2/swagger.json"

    outDir

    值类型:字符串

    描述: 生成代码的存放路径,使用相对路径即可。如:"./src/api"

    templatePath

    值类型:字符串

    描述:指定自定义代码生成器的路径(使用相对路径指定)。一旦指定,pont 将即刻生成一份默认的自定义代码生成器。自定义代码生成器是一份 ts 文件,通过覆盖默认的代码生成器,来自定义生成代码。默认的代码生成器包含两个类,一个负责管理目录结构,一个负责管理目录结构每个文件如何生成代码。自定义代码生成器通过继承这两个类(类型完美,可以查看提示和含义),覆盖对应的代码来达到自定义的目的。具体使用方法请参看自定义代码生成器文档

    示例:可以参看示例 demo 中的 template。

    prettierConfig

    值类型:object

    描述:生成的代码会用 prettier 来美化。此处配置 prettier 的配置项即可,具体可以参考 prettier 文档

    usingMultipleOrigins

    值类型:boolean

    描述:pont 支持一个项目中配置多个 Swagger 来源。此处配置是否启用多数据源

    origins

    值类型:array

    描述:配置每个数据来源

    示例:

    "origins": [{
      "name": "pet",
      "originUrl": "",
    }, {
      "name": "fruit",
      "originUrl": ""
    }]

    transformPath

    值类型:string

    描述:可选项。指定数据源预处理路径(使用相对路径指定)。一旦指定,Pont 将生成一份默认的数据预处理器。

    数据预处理器示例:

    import { StandardDataSource } from 'pont-engine';
    
    export default function(dataSource: StandardDataSource): StandardDataSource {
      dataSource.mods = dataSource.mods.filter(mod => mod.name !== 'user');
    
      return dataSource;
    }

    mocks

    自动化 mocks 功能开始内测,https://github.com/alibaba/pont/issues/48

    demo

    参考下面的例子,来体验 pont。

    持续丰富中...

    命令行使用方法

    目前 pont 以 vscode 扩展 —— vscode-pont 来提供 pont 的元数据能力。其它 IDE 的插件也将逐渐提供,这里非常渴望社区的力量。

    为了避免一部分用户和技术团队不使用 vscode-pont,pont 可以以命令行命令的方式来提供服务。

    命令行提供的命令目前还比较基础,提供命令如下:

    pont check

    校验本地的 pont-lock.json 文件是否缺失、损坏。建议用户在项目中,在 pre-commit 里加上 pont check 命令,以防止在团队协作过程中,pont-lock.json 被误删、解决该文件冲突时被损坏等情况。

    pont ls

    查看所有数据源

    pont select [dsName]

    切换当前数据源

    pont diff

    查看远程数据和本地数据在模块、基类上的差异,以作针对性、选择性同步。

    pont updateBo [boName]

    选择性更新本地的基类

    pont updateMod [modName]

    选择性更新本地的模块

    最佳实践建议

    • 项目 pre-commit hook 中,加上 pont check,防止本地数据源被研发人员损坏。

    • 很多 Swagger 所有的接口返回的类型都类似是 Result,主要是囊括了约定的接口错误字段,类似 { errorCode: 0, data: T, errMessage: '' }。这里建议,让后端 Swagger 的接口返回类型,去掉这个 Result 外壳。只返回 data 的 T 类型。

    • vscode 配置 trigger suggest 的快捷键(cmd K + cmd S),传参时,用快捷键触发提醒,非常好用;

    • pont template 配置 API、defs 为全局变量;这样不需要 import 任何接口、实体类;使用 API 直接触发建议找到 模块、接口,非常方便

    • 快捷键 cmd + ctrl + p 进行接口查找,非常方便;

    • 善于利用实体类(defs),可以当成类型用、也可以作为逻辑实现的辅助;实体类是后端写得实体类,前端自己写实体类,既没有必要,长期来看也会和后端的实现差异越来越大。如果有自定义逻辑,继承 defs 实体类即可。

    • redux 项目,建议结合 https://github.com/nefe/iron-redux,一个致力类型完美和去冗余的轻量化 redux 库。例如类型友好的,运行安全的 get 方法:https://github.com/nefe/iron-redux#safeget

    • 待补充

    常见答疑问题

    • 1、demo中,生成代码的 pontFetch 函数,是要自己实现的吗?

      答:pontFetch 是用户自己项目的请求公共方法。因为每个项目的接口有自己的业务逻辑,比如如何判断接口返回的结果是否正确,所以 pont 的默认模板并没有自己实现一套 fetch 方法。另外 Pont 生成的代码是可以用自定义模板配置的。可以在模板上更改 pontFetch 的引用路径和名字。

    其它接口平台接入

    目前 pont 暂时只支持 Swagger V2 数据源,V1 和 V3 正在开发中。目前只需要在 scripts 中添加对应的数据格式转换文件,把对应数据格式转换为 pont 标准格式,即可适配新的数据源类型。希望社区可以踊跃贡献代码,接入更多类型的数据源!

    展开全文
  • 接口文档管理工具showDoc

    千次阅读 2020-06-16 16:54:39
    随着互联网的发展,前后端分离已成为互联网项目开发的业界标准使用方式。 由此而产生的前端开发工程师和后端开发工程师的沟通效率问题。 推荐一个应此而生的文档管理工具---showdoc showdoc官网 一、介绍 1....

    随着互联网的发展,前后端分离已成为互联网项目开发的业界标准使用方式。

    由此而产生的前端开发工程师和后端开发工程师的沟通效率问题。

    推荐一个应此而生的文档管理工具---showdoc

    showdoc官网

    一、介绍

    1.ShowDoc是什么

    • 每当接手一个他人开发好的模块或者项目,看着那些没有写注释的代码,我们都无比抓狂。文档呢?!文档呢?!Show me the doc !!

    • 程序员都很希望别人能写技术文档,而自己却很不希望要写文档。因为写文档需要花大量的时间去处理格式排版,想着新建的word文档放在哪个目录等各种非技术细节。

    • word文档零零散散地放在团队不同人那里,需要文档的人基本靠吼,吼一声然后上qq或者邮箱接收对方丢过来的文档。这种沟通方式当然可以,只是效率不高。

    • ShowDoc就是一个非常适合IT团队的在线文档分享工具,它可以加快团队之间沟通的效率。

    2.功能

    • 权限管理

      • 公开项目与私密项目
        • ShowDoc上的项目有公开项目和私密项目两种。公开项目可供任何登录与非登录的用户访问,而私密项目则需要输入密码验证访问。密码由项目创建者设置。
      • 项目转让
        • 项目创建者可以自由地把项目转让给网站的其他用户。
      • 项目成员
        • 你可以很方便地为ShowDoc的项目添加、删除项目成员。项目成员可以对项目进行编辑,但不可转让或删除项目(只有项目创建者才有权限)
      • 团队管理
        • 利用showdoc的团队功能你可以更好地进行团队协作
    • 编辑功能

      • markdown编辑

        • ShowDoc采用markdown编辑器,无论是编辑还是阅读体验都极佳很棒。如果你不了解Markdown,请在搜索引擎搜索”认识与入门 Markdown”
      • 模板插入

        • 在ShowDoc的编辑页面,点击编辑器上方的按钮可方便地插入API接口模板和数据字典模板。插入模板后,剩下的就是改动数据了,省去了很多编辑的力气。
      • 历史版本
        • ShowDoc为页面提供历史版本功能,你可以方便地把页面恢复到之前的版本。
    • 多平台

      showdoc支持网页版、手机app版和电脑客户端版。客户端地址可见:https://www.showdoc.cc/clients

     

    二、示例

    1.全局错误码

    2.接口文档

     

    3.api模板

    4.接口调试

     

    展开全文
  • 前言: 前端开发文档,开发之前的个人准备,按照自己的开发习惯来编写,有问题或者不足的地方还望指出,谢谢~ 如有侵权,实属无意,请立即联系,立删。 环境搭建 需要准备的软件 a. Node.js + npm (可以去node官网...

    前言: 前端开发文档,目前自己正在开发的项目之前的个人准备,按照自己的开发习惯来编写,有问题或者不足的地方还望指出,谢谢~ 如有侵权,实属无意,请立即联系,立删。

    环境搭建
    需要准备的软件
    a. Node.js + npm (可以去node官网下载最新的版本)
    https://nodejs.org/zh-cn/
    在这里插入图片描述
    如上图:点击即可下载,下载成功后安装就可以了

    安装成功后。启用cmd,使用node -v ,出现对应的版本信息,说明安装成功,而且node会自动将路径添加到环境变量中去,且安装node的同时,也会自动安装成功npm,可同样通过npm -v,显示版本号就代表成功。
    在这里插入图片描述

    也可以通过镜像cnpm 来安装后续项目需要的依赖,这个安装速度会比npm 快速很多
    步骤:
    打开cmd 输入命令行:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    即可
    在这里插入图片描述

    b. 编码软件 比如:( vs code , sublime , notepad++ , webstorm 等等 )
    根据个人习惯选择使用, 我比较习惯使用sublime ,里面有自己安装的很多小插件,比较方便。

    c. photoshop
    切图软件,方便使用UI给的psd 自己动手切需要的图片,来写页面。

    d. git (代码管理工具)
    下载地址:https://git-scm.com/downloads
    在这里插入图片描述
    直接下载即可,下载成功直接安装,一直next,然后安装成功后,安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!
    在这里插入图片描述

    安装完成后,还需要最后一步设置,在命令行输入:

    $ git config --global user.name "Your Name"
    $ git config --global user.email "email@example.com"
    

    在这里插入图片描述
    最后下载一些需要的浏览器,谷歌,火狐,360 等等就可以了。方便调试wap可以使用谷歌,方便调试pc可以使用火狐。

    代码规范
    基本准则
    符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度
    总规范

    1. 忽略(Omit)协议:如 background: url(http://www.google.com/images/example); 应该写background: url(//www.google.com/images/example);以方便http与https协议切换,除非必须使用某个协议
    2. 书写时利用IDE实现层次分明的缩进。tab键用四个空格代替。
    3. 标签属性使用小写
    4. 尾部不要留有空格,以防diff
    5. 使用 UTF-8 (no BOM),文档中也加入 <meta charset=”utf-8″>
    6. 文件命名统一使用小写”.js”,同时推荐”-”而不是”_”
    7. TODO(contact) 以及TODO: action item,不要使用@@
      HTML 细化规范
    8. 使用html5的规范
    9. 标签默认缺省格式:<img src="xxx.png" alt="缺省时文字" /> 避免出现src="" 问题
    10. 标签缺省格式:xxx</> 注:target="_blank" 根据需求决定
    11. 标签预留链接占位符使用###,参见:a标签占位符问题
    12. 书写链接地址时, 必须避免重定向,例如:href=”http://taobao.com/”, 即须在URL地址后面加上“/”
    13. 所有标签需要符合XHTML标准闭合
    14. 一律统一标签结尾斜杠的书写形式:<br /> <hr /> 注意之间空格
    15. 避免使用已过时标签,如:<b> <u> <i> 而用 <strong> <em>等代替
    16. 使用data-xxx来添加自定义数据,如:<input data-xxx="yyy"/>
    17. 避免使用style="xxx:xxx;"的内联样式表
    18. 必须为含有描述性表单元素(input, textarea)添加label, 如(https://img-blog.csdnimg.cn/20190625100338443.png)

    CSS 细化规范
    20. 每个样式属性后加 “;”
    方便压缩工具"断句"。
    21. Class命名,采用” - “[减号连接符] 对class中的字母分隔:
    用"-"隔开比使用驼峰是更加清晰。
    产品线-产品-模块-子模块,命名的时候也可以使用这种方式
    ID: 小驼峰式命名法 如:

    firstName  newList
    
    1. 空格的使用,以下规则执行:
      .hotel-content {
      font-weight: bold;
      }
      选择器与 { 之前要有空格
      属性名的 : 后要有空格
      属性名的 : 前(禁止)加空格

    2. 属性的书写顺序, 举个例子:

      /* 定位 /
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      /
      盒模型 */
      width: 50px;
      height: 50px;
      margin: 10px;
      border: 1px solid black;
      / 其他 /
      color: #efefef;

    定位相关, 常见的有:display position left top float 等
    盒模型相关, 常见的有:width height margin padding border 等
    其他属性
    按照这样的顺序书写可见提升浏览器渲染dom的性能
    简单举个例子,网页中的图片,如果没有设置width和height,在图片载入之前,他所占的空间为0,但是当他加载完毕之后,那块为0的空间突然被撑开了,这样会导致,他下面的元素重新排列和渲染,造成重绘(repaint)和回流(reflow)。 我们在写css的时候,把元素的定位放在前头,首先让浏览器知道该元素是在文本流内还是外,具体在页面的哪个部位,接着让浏览器知道他们的宽度和高度,border等这些占用空间的属性,其他的属性都是在这个固定的区域内渲染的,差不多就是这个意思吧~

    1. CSS注释用“/* */”表示,单行注释时,被注释对象与前后注释符各保留一个空格,且单独占一行;多行注释时,开始注释符和结束注释符各占一行。例如:
      // 注释CSS
    table {
            border-collapse: collapse;
         }
    

    js细化规范
    1.换行
    每行代码应少于120个字符,多于这个数量时,可以考虑换行,“.”或“+”这类操作符应放在行尾,换行后的代码必须在换行前多一层缩进。
    如果函数或方法中的参数较长,要进行适当的划分。
    禁止在return关键字及要返回的表达式之间换行。例如:

    function test() {
    return 1;
    }
    

    2.代码行
    禁止把多个短语句写在一行中,即一行只写一条语句。
    if、for、do、while、switch、case、default、break、continue等语句自占一行。
    if、for、do、while等所有的循环体和判断体的执行语句部分都需要用"{}"括起来,禁止省略花括号。例如:

    if (i < 5) i += 1;
    // 正确的
    if (i < 5) {
    i += 1
    }
    

    3.对齐
    代码块的分界符{},“{”跟随在上一行,并且前边有一空格隔开,“}”应独占一行并且位于同一列,同时与引用它们的语句左对齐。
    在函数体的开始、类的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。
    4.空格
    关键字之后必须有空格,以突出关键字。
    函数名、方法名与左括号“(”之间不能保留空格,例如:

    // 错误的
    function getInfo () {
    // code
    }
    // 正确的
    function getInfo() {
    // code
    }
    

    在声明函数表达式时,function与左括号“(”之间不能保留空格,例如:
    // 错误的

    var user = function () {
    // code
    }
    // 正确的
    var user = function() {
    // code
    }
    

    逗号后面加空格。
    赋值操作符、比较操作符、算术操作符、逻辑操作符、位域操作符,如“=”、“+=” “>=”、“<=”、“+”、“*”、“%”、“&&”、“||”等二元操作符的前后应当加空格。
    “!”、"~"、"++"、"–"、"&"(地址运算符)等单目操作符前后不加空格。
    “.”、"[]"前后不加空格。

    5.空行
    在每个类声明之后、每个函数定义结束之后都要加空行。
    在一个函数体内,逻揖上密切相关的语句之间不加空行,其它地方应加空行分隔。
    6.使用严格的条件判断符。用=代替,用!==代替!=
    7.避免额外的逗号。如:var arr = [1,2,3,]
    8.语句必须都有分号结尾,除了for,function,if,switch,try,while。
    9.左花括号置于行末,右花括号置于行首。
    10.下面类型的对象不建议用new构造:new Number,new String,new Boolean,new Object(用{}代替),new Array(用[]代替)。
    11.数组成员间的“,”后面需要保留一个空格。
    12.禁止在js/json中使用javascript保留关键字词命名,在IE中容易造成错误。关键字(break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with),关键词(abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile)。
    13.建议使用“+”作为换行连接符,而不是使用“\”。
    14.提示信息禁止使用概括笼统的语言描述,应该简洁明了,看到信息立即能定位到错误,如提示用户信息报错用“该用户不存在”,而不是用“后台返回数据有误”、“网络超时”。

    注释规范
    1.html注释
    注释格式: <!– 这儿是注释 –> , “-” 只能在注释的始末位置,不可置入注释文字区域
    2. css注释
    注释格式: /* ---- 这儿是注释 ----/
    3.javascript 注释
    单行注释使用 C++风格: //这儿是单行注释
    多行注释使用C风格: /
    这儿有多行注释 */

    框架选择 (vue.js + element UI)
    a. vue.js 介绍
    vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据所有 Vue.js的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
    在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
    项目目录介绍
    在这里插入图片描述

    在这里插入图片描述
    build 项目构建(webpack)相关代码
    config 配置目录,包括端口号等。我们初学可以使用默认的。
    node_modules npm 加载的项目依赖模块
    Src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
    assets: 放置一些图片,如logo等。
    components: 目录里面放了一个组件文件,可以不用。
    App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
    main.js: 项目的核心文件。

    static 静态资源目录,如图片、字体等。
    .xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
    index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
    package.json 项目配置文件。
    README.md 项目的说明文档,markdown 格式
    使用方式
    举见的简单数据绑定:

     <span>Message: {{ msg }}</span>
    

    由于vue是单页面应用,所有的html, css, js 都放置在同一个页面。 如下
    data 用于定义属性,
    methods 用于定义的函数,可以通过 return 来返回函数值。
    {{ }} 用于输出对象属性和函数返回值。
    在这里插入图片描述
    查看运行的页面效果。在项目的文件夹按住shift后鼠标右击出现弹窗, 点击 “在此处打开命令窗口”,就直接出现命令窗口,然后输入运行命令, npm run dev 稍等几秒钟即可出现如下,则代表运行成功
    在这里插入图片描述
    然后打开浏览器,输入http://localhost:8080/#/ 就能看到页面对应的效果。
    在这里插入图片描述

    打包方式
    同样是在项目的文件夹按住shift后鼠标右击出现弹窗, 点击 “在此处打开命令窗口”,就直接出现命令窗口,然后输入运行命令,npm run build,就会将项目中所有文件压缩到指定的文件目录下,一般是在dist目录下。

    在这里插入图片描述
    然后将压缩的文件夹上传到服务器中即可。

    Element UI

    a. 使用方法

    element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
    Layout布局(el-row、el-col)
    element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下

    <el-row>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    

    span属性:表示col所要占领的栅格占比个数。
    offset属性:表示col相对偏移的个数。
    Container布局容器
    这些布局容器,一般充当div来使用。
    el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。
    el-header:顶栏容器
    el-footer:底部栏容器
    el-aside:侧边栏容器
    el-main:页面主视图

    icons的使用
    在element-ui 中,图标是用class就可以搞定的。
    比如一个编辑的图标就可以如下表示:

    按钮(el-button)
    按钮是el-button来表示的
    按钮是分类的,每一种类型就对应不同的button。
    按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’
    plain:决定了按钮是否使用素色系列。
    round:决定了按钮是不是圆角展示。

    <div class="flex-box">
          <h2>各种button</h2>
          <el-row class="flex1 margin-left10">
            <el-col :span="3"><el-button>默认按钮</el-button></el-col>
            <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
            <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
            <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
            <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
            <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
          </el-row>
        </div>
    

    级联选择(el-cascader)
    //组件

    <el-cascader
     :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
    

    //data数据

    options: [{
      value:'1',
      label:'components',
      children: [{
        label:'input'
      },{
        label:'swiper'
      }]
    },{
      value:'1',
      label:'views'
    },{
      value:'1',
      label:'actions'
    }]
    

    TimePicker 时间选择器
    picker-options是一个对象。
    这个对象的属性有start、step、end、selectableRange等。
    当设置selectableRange属性时,它提供了一个时间选择的点。

    <el-time-select
      v-model="value1"
      :picker-options="{
          start:'08:30',
          step:'00:15',
          end:'18:30'
      }"
      placeholder="选择时间"
    ></el-time-select>
    

    日期选择器
    日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。

    <el-date-picker
      v-model="valueDate"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    
    <el-date-picker
        type='week'
        v-model='value'
        placeholder='选择周'
    >
    

    Table 表格
    el-table:element-ui的表格。
    el-table-column:element-ui的表格所对应的列。
    table属性中:stripe属性可以创建带斑马纹的表格。
    table属性中:border属性可以创建带斑马纹的表格。
    table属性中:height属性可实现固定表头的表格。

       <el-table
       :data="tableData"
       style="width: 100%"
       height="200">
       
       <el-table-column fixed width="120" label="日期" prop="date"></el-table-column>
       <el-table-column width="120" label="姓名" prop="name"></el-table-column>
       <el-table-column width="360" label="地址" prop="address"></el-table-column>
    

    Carousel 走马灯
    其实就相当于一个轮播
    type属性:可以让轮播卡片化
    interval属性:定义轮播切换的周期

    <el-carousel height="150px">
     <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    

    Collapse 折叠面板
    折叠面板的el-collapse-item需要title属性。

    <el-collapse-item title="一致性 Consistency" name="1">
    <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
     <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
    </el-collapse-item>
    

    el-menu
    el-menu:表示导航菜单的盒子。
    el-submenu:表示导航菜单的子盒子选项。
    el-menu-item:表示导航菜单的每一项。
    其中submenu和munuitem都是用于属性index。

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
       <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">订单管理</el-menu-item>
    </el-menu>
    el-tabs
    <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
            用户管理
        </el-tab-pane>
    </el-tabs>
    

    Tree 树形控件
    data属性:代表着树形组件的渲染。

    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    

    使用示范

    在这里插入图片描述
    要求: 完成上图的效果,能在页面正确显示

    a. 先在项目中的view文件夹中,新建一个vue文件,如下,

    页面初始化结构如下:
    在这里插入图片描述
    在这里插入图片描述
    在template 中添加html代码,在script添加当前页面需要的js代码,例如,判断,计算,接口请求等,style中添加当前页面需要的css,或者也可以新建css文件,进行全局引用也可以,目前项目推荐引用新建css文件夹的方式。如下:
    然后在index.css中写入需要的样式,在common.css中import进入样式表就可以了。
    在这里插入图片描述
    在这里插入图片描述
    最后图片是也是放在assets 文件下面,其中有一个images 的文件夹,因为后期,项目模块很多,所以建议根据模块来分图片文件夹,在其中放入对应的图片即可,如下:

    最后需要配置页面路径,这样方便在页面直接访问,或者根据链接进行页面间的跳转。
    在这里插入图片描述
    配置成功后,地址端口号后面直接加配置的path就可以进入对应的页面。如:
    http://localhost:8080/#/
    注:路径path配置为 ‘/ ‘, 即代表首页。

    简单的初始化操作完成,现在是在index.vue 中写入对应的html结构就可以了。

    因为是导航栏,有logo 图片,右边是链接导航,所以需要div嵌套,布局如下:
    在这里插入图片描述

    Css写法如下:
    在这里插入图片描述
    使用npm run dev 运行命令,运行项目后,

    出现这样代表编译完成,且成功,没有问题。

    此时页面就可以出现设计稿中的效果了。
    在这里插入图片描述

    以上就是简略的前端开发文档。有不足的可以随时补充。

    展开全文
  • 一、什么是接口文档?在项目开发中,web项目的前后端分离开发,APP开发,需要由前后端工程师共同定义接口,编写接口文档,之后大家都根据这个接口文档进行开发,到项目结束前都要一直维护。二、为什么要写接口文档?...
  • swagger家族 Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 ...前端经常抱怨后端接口文档与实际情况不一致。后端又觉得编写及维护接口文档会耗费不少精力,经常来不及更新。其实无
  • API文档如何写? learn 【连载】the first time项目日志(一)——做项目查资料 =>转载自博客http://blog.itpub.net/31562041/viewspace-2564416/ 我也看不懂… 接口的设计原则 在设计接口时,有很多因素要考虑...
  • 企业号开发者接口文档

    千次阅读 2017-09-19 17:18:47
    转载自:... 开发者论坛 ...接口文档 进入官网 微信JS-SDK接口 微信JS-SDK说明文档 目
  • 如何优雅的生成接口文档

    千次阅读 2019-10-11 08:06:00
    我们知道在项目开发阶段,接口文档基本上是必备产物了,一般由后端开发人员提供,作为和前端人员进行前后端接口联调的桥梁,或者与别的项目模块进行交互提供指导等等,接口文档的准确性,实时性,详细与否等,都会极...
  • 史上最好用的接口文档工具—Lkadoc操作指南

    千次阅读 热门讨论 2020-07-31 17:00:18
    Lkadoc是一款能够基于注解自动生成带调试功能的接口文档工具,支持导出MD、PDF格式的接口文档,支持数据校验,支持对接口进行压力测试等等。生成的UI界面简约大方,对接口描述一目了然,自面世以来深受大家的推崇和...
  • Swagger / Open API 在Restful API 领域已慢慢成为标准,越来越多的系统使用swagger来规范开发接口文档,由于Swagger 本身并不依赖特定的语言和开发平台,所以特别合适作为前后端分离的接口标准来使用。 Swagger ...
  • 接口文档下的渗透测试(Swagger)

    万次阅读 2020-10-15 23:28:05
    随着前后端分离架构的优势越来越明显,前后端分离的应用场景也越来越广,如今前后端分离已成为互联网项目开发的业界标准使用方式,而为了前后端程序员在实际开发中能够有统一的接口文档去调试,因此也随着衍生出了很...
  • Api接口文档生成工具:Swagger2

    千次阅读 2020-02-16 09:57:50
    Api接口文档生成工具:...但是项目开发中的沟通成本也随之升高,这部分沟通成本主要在于前端开发人员与后端开发人员对WebAPI接口的沟通,Swagger2 就可以很好地解决,它可以动态生成Api接口文档,降低沟通成本...
  • 自动生成接口文档的三种方式

    千次阅读 2020-12-01 18:00:04
    做开发经常会碰到这样的情况,前期写了接口文档,后端把需求改完没时间更新接口文档,想想就觉得崩溃了。那么有没有方法能自动生成接口文档来提高前后端的开发效率呢? 自定义动态生成接口文档,手动部署 在对外暴露...
  • 微信JS接口- 企业号开发者接口文档

    千次阅读 2019-01-22 14:05:04
    1.1.2 步骤二:通过config接口注入权限验证配置 1.1.3 步骤三:通过ready接口处理成功验证 1.1.4 步骤四:通过error接口处理失败验证 1.2 接口调用说明 2 基础接口 2.1 判断当前客户端版本...
  • 后台开发人员在对外提供接口时也需要提供接口文档,而文档维护是一件成本很高的事情,尤其是自己在公司实习的时候,最初使用的是excel做接口文档,更是被折磨的苦不堪言。这也是自己为什么下定决心设计这个接口文档...
  • 测试奇谭:接口测试实战项目01:接口测试环境搭建 这次,我们正式进入测试阶段。 为什么要做接口测试 这个问题的答案很多,我这里只大家做个引子。 01 可以精确定位bug 比如:当你在测试某网页时,发现网页...
  • '客户被绑,蒙眼,惊问:“想干什么?” 对方不语,鞭笞之,客户求饶:“别打,要钱?”' 又一鞭,“十万够不?” 又一鞭,“一百万?” 又一鞭。客户崩溃:“你们到底要啥?...一、为什么要有接口文档? ...
  • 第一种,首先由后台通过红包创建接口获取红包ticket,然后使用ticket拼装红包链接,在用户前端上打开领取,领取结果通过回传url显示 第二种,首先通过授权跳转链接获取用户openid,然后在服务器端调用红包直发接口...
  • 用OpenAPI3在SwaggerHub编写API接口文档

    千次阅读 2019-06-28 13:16:46
    Swagger 是一款用来设计符合RESTful API标准接口文档和管理API文档的工具,可以用来编写API文档、测试API和根据API自动生成代码原型等,是目前最受欢迎的API设计工具之一。而SwaggerHub则是一个提供这种服务的一个...
  • 一、前端加密概述 加密目的: 1、防止信息泄露(防止用户登录账号、密码等) 2、防止数据篡改(防止篡改数据后模拟请求等) 设计原则: 1、加密方式安全可靠 2、开发成本可接受 3、易于调试测试 加密范围: 1、业务...
  • java随手笔记:编写接口文档规范

    千次阅读 2019-01-31 17:18:29
    @java随手笔记:接口文档的格式 #作为一个新手会遇见各种问题,仅仅是为了自己以后丢失,方便观看!
  • 概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信...此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。 使用说明 在使
  • Swagger与SpringMvc集成生成Restful形式接口文档

    万次阅读 多人点赞 2017-06-29 18:20:42
    swagger提供的接口文档相比传统的文档方式更加直观也更加高效,但是在网上找了很多关于Swagger与SpringMvc整合的资料,发现都比较繁琐,不是很满意,于是有了这篇博客,希望对大家有所帮助。
  • 前后端接口文档规范模板

    千次阅读 2018-06-28 23:35:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • Springboot作为当前流行的Java web开发脚手架,前后端分离已经逐渐成为互联网项目一种标准的开发方式,前端与后端交给不同的人员开发,越来越多的开发者在使用Springboot来构建企业级的RESTFul API接口。 这些...
  • 前端是什么 众多IT岗位中的一员,以HTML+CSS+JS开发网站、微信公众号、小程序、WEBAPP的岗位,一个夹杂与UI与后台间的岗位。工作流程为从UI处得到原型图或者效果图,在项目(网站、微信公众号、小程序、WEBAPP)中...
  • Swagger(接口文档实时动态生成工具 一、Swagger 简介出现背景Open APISwagger 简介二、Springfox三、Swagger 用法1.编写SpringBoot 项目2 导入Spring-fox 依赖3.启动类添加注解`@EnableSwagger2`4.访问UI页面`入...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,456
精华内容 20,982
关键字:

给前端的接口文档标准