自动化测试平台开发（十一）：接口测试 - 在线文档 - VuePress
这里简单介绍通过VuePress构建项目在线文档。
一、VuePress
官方地址： https://vuepress.vuejs.org/zh/
一个Vue 驱动的静态网站生成器，以 Markdown 为中心的项目结构。
VuePress 有很多优点：
- 界面简洁优雅
- 容易上手（半小时能搭好整个项目）
- 更好的兼容、扩展 Markdown 语法
二、开始搭建
# 1. 创建并进入一个新目录 mkdir tpDocs && cd tpDocs
# 2. 使用你喜欢的包管理器进行初始化
yarn init # npm init
# 3. 将 VuePress 安装为本地依赖 不推荐全局安装
VuePress yarn add -D vuepress # npm install -D vuepress
# 4. 创建你的第一篇文档mkdir docs && echo '# Hello VuePress' > docs/README.md
# 在p5. ackage.json中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}# 6. 在本地启动服务器
yarn docs:dev # npm run docs:dev
# 此时文件夹结构
tpDocs
+--docs
+----README.md
+--package.json三、配置
- tpDocs\docs目录下多了个 .vuepress文件夹
tpDocs +--docs +----.vuepress +------ dist //打包后的文件夹 +----README.md +--package.json +--node_modules
- 在.vuepress 创建config.js 文件, 添加
module.exports = { base: '/auto-test-platform/', port: 9529, theme: '', plugins: [ '@vuepress/back-to-top', //此处是添加返回顶部的插件 '@vuepress/medium-zoom' ], title: 'testPlatform.docs', head: [ // 设置 favicon.ico ['link', {rel: 'icon', href: '/assets/img/logo.png'}], ], themeConfig: { logo: '/assets/img/logo.png', // 右上角搜索框后面的菜单导航 nav: [ {text: '首页', link: '/'}, {text: '工单分析', link: '/order/'}, {text: '精准测试', link: '/precise/'}, { text: '接口测试', link: '/api_test/', items: [ {text: '指南', link: '/api_test/guide/'}, {text: '进阶篇', link: '/api_test/advanced/'}, {text: '注意事项', link: '/api_test/attentions/'}, {text: '开发手册', link: '/api_test/develop/'} ] }, {text: 'GitLab', link: 'https://github.com/txu2k8/auto-test-platform.git'} ], //左侧菜单 sidebar: [ { title: '接口测试', path: '/api_test/', collapsable: true, // 可选的, 默认值是 true, sidebarDepth: 2, // 可选的, 默认值是 1 children: [ { title: '指南', path: '/api_test/guide/', collapsable: true, children: [ {title: '快速上手', path: '/api_test/guide/quick_start/', collapsable: true, sidebarDepth: 2}, {title: '第一个测试', path: '/api_test/guide/first_test/', collapsable: true, sidebarDepth: 2}, ] }, { title: '进阶篇', path: '/api_test/advanced/', collapsable: true, children: [ {title: '权限管理', path: '/api_test/advanced/permission/', collapsable: true, sidebarDepth: 2}, {title: '全局配置', path: '/api_test/advanced/global_config/', collapsable: true, sidebarDepth: 2}, {title: '项目管理', path: '/api_test/advanced/project_manager/', collapsable: true, sidebarDepth: 2}, { title: '接口管理', path: '/api_test/advanced/api_manager/', collapsable: true, children: [ {title: '接口操作', path: '/api_test/advanced/api_manager/api_opt/', collapsable: true, sidebarDepth: 2}, {title: '接口详情', path: '/api_test/advanced/api_manager/api_detail/', collapsable: true, sidebarDepth: 2}, {title: '统计分析', path: '/api_test/advanced/api_manager/api_sa/', collapsable: true, sidebarDepth: 2}, {title: 'YAPI同步', path: '/api_test/advanced/api_manager/yapi_sync/', collapsable: true, sidebarDepth: 2}, {title: '查重工具', path: '/api_test/advanced/api_manager/api_duplicate/', collapsable: true, sidebarDepth: 2}, ] }, { title: '用例管理', path: '/api_test/advanced/case_manager/', collapsable: true, sidebarDepth: 2, children: [ {title: '用例操作', path: '/api_test/advanced/case_manager/case_opt/', collapsable: true, sidebarDepth: 2}, {title: '用例设计', path: '/api_test/advanced/case_manager/case_design/', collapsable: true, sidebarDepth: 2}, ] }, {title: '测试执行', path: '/api_test/advanced/run_test/', collapsable: true, sidebarDepth: 2}, {title: '测试结果', path: '/api_test/advanced/test_result/', collapsable: true, sidebarDepth: 2}, {title: '附1：数据校验方法', path: '/api_test/advanced/validate_rules/', collapsable: true, sidebarDepth: 2}, {title: '附2：内建方法', path: '/api_test/advanced/builtin_functions/', collapsable: true, sidebarDepth: 2}, ] }, { title: '注意事项', path: '/api_test/attentions/', collapsable: true, children: [ {title: '需要处理的事', path: '/api_test/attentions/reclaim/', collapsable: true, sidebarDepth: 2}, {title: '用例设计规范', path: '/api_test/attentions/case_design_standard/', collapsable: true, sidebarDepth: 2}, ] }, { title: '开发手册', path: '/api_test/develop/', collapsable: true, children: [ {title: '背景', path: '/api_test/develop/background/', collapsable: true, sidebarDepth: 2}, {title: '技术栈与设计', path: '/api_test/develop/tech_design/', collapsable: true, sidebarDepth: 2}, { title: '后端接口实现', path: '/api_test/develop/backend/', collapsable: true, sidebarDepth: 2, children: [ {title: '表设计', path: '/api_test/develop/backend/models/', collapsable: true, sidebarDepth: 2}, {title: '过滤器', path: '/api_test/develop/backend/filters/', collapsable: true, sidebarDepth: 2}, {title: '序列化', path: '/api_test/develop/backend/serializers/', collapsable: true, sidebarDepth: 2}, {title: '接口响应', path: '/api_test/develop/backend/response/', collapsable: true, sidebarDepth: 2}, {title: 'DRF封装', path: '/api_test/develop/backend/drf/', collapsable: true, sidebarDepth: 2}, {title: 'DRF自定义', path: '/api_test/develop/backend/drf_custom/', collapsable: true, sidebarDepth: 2}, {title: '批量处理', path: '/api_test/develop/backend/drf_bulk/', collapsable: true, sidebarDepth: 2}, {title: '路由注册', path: '/api_test/develop/backend/urls/', collapsable: true, sidebarDepth: 2}, {title: '测试', path: '/api_test/develop/backend/test/', collapsable: true, sidebarDepth: 2}, ] }, {title: '执行引擎', path: '/api_test/develop/execution_engine/', collapsable: true, sidebarDepth: 2}, {title: '自定义内建方法', path: '/api_test/develop/new_builtin_functions/', collapsable: true, sidebarDepth: 2}, {title: '自定义校验方法', path: '/api_test/develop/new_validate_rules/', collapsable: true, sidebarDepth: 2}, {title: '任务管理', path: '/api_test/develop/task_manager/', collapsable: true, sidebarDepth: 2}, {title: 'YAPI同步', path: '/api_test/develop/yapi_sync/', collapsable: true, sidebarDepth: 2}, {title: '导入导出', path: '/api_test/develop/import_export/', collapsable: true, sidebarDepth: 2}, ] }, { title: '常见问题解答', path: '/api_test/qa/', collapsable: true, sidebarDepth: 2 } ] } ] } }
四、代码发布
关于发布问题：首先我们知道在打包后的文件都是静态文件之前的MD文件都被打包成html静态文件了,其次在文件config.js中 base至关重要。
-
通过服务器发布
在服务器上安装Apache或者nginx 这里拿nginx举例：至于nginx 安装 以及配置文件的解读使用 我这里就不详述了，不了解的可以自己查阅相关文件//为了简单明了 我们把打包好的文件放入nginx中html文件下 之前的文件可以清空 server { listen 8081; //监听8081端口 server_name localhost; //localhost:8081即可指向也可写别名如local.vuepress.com.cn 那我们访问这个端口的别名加端口就可以 location / { root /nginx/nginx-1.9.15/html; //至关重要你的入口文件在本机的位置 index index.html index.htm; //入口文件 } }
- 发布到GitHub，通过链接打开
详见 自动化测试平台开发（十二）：部署 VuePress到 GitHub Pages
-------- THE END --------
