项目背景
1、vue、bootstrap
2、httprunner、celery、django-rest-framework
bootstrap开发过程中始终觉得没有element ui好用。
Dashboard
image.png
Home
-
统计个人平台使用记录，支持月、日筛选
image.png
TestCaseList
image.png
拖拽步骤测试-支持列表项顺序拖拽、同步或异步运行测试
异步: 异步任务集合，执行完成后返回测试报告
-
同步: 实时获取结果
image.png
image.png -
swagger导入API
image.png
调试API
- 函数助手
- 基于Hook表达式编写痛点。利用前端缓存实现表单输入过滤提示函数
-
一键拖拽函数表达式
image.png - 代码片段
<div class="hook-table" v-for="(row, index1) in tableList" :key="index1">
<input type="text" :name="`func${index1}`" v-model="row.func"
:key="`func${index1}`"
v-validate="{ required: true, min:2,max:50, regex: /^[-.${}()_a-zA-Z0-9]+$/ }"
:class="errors.first(`func${index1}`) || !hook.func ? 'form-control is-invalid' : 'form-control is-valid'"
placeholder="Please enter func" style="height: 35px;" @focus="closeSearch(index1)" @blur="removeClass(index1)">
<div :class="`searchbox-detail`" :id="`searchbox-detail-${index1}`" style="border: 1px solid #ced4da;">
<ul class="m-0 p-3">
<template v-if="filteredList(row.func).length > 0">
<li v-for="(item,index2) in filteredList(row.func)" :key="index2" class="iq-bg-primary-hover rounded">
<span @click="selectSearch(index, item.function_name)">{{ item.function_name }} | {{item.description}}</span>
</li>
</template>
<template v-else>
<li>Search Not Found</li>
</template>
</ul>
</div>
</div>
- @focus input 聚焦时，显示下拉框
- @blur input 失去焦点时，关闭下拉框
methods: {
openSearch (index) {
// showSearch
if (document.getElementById(`searchbox-detail-${index}`) !== null) {
document.getElementById(`searchbox-detail-${index}`).classList.add('show-data')
}
},
closeSearch (index) {
if (document.getElementById(`searchbox-detail-${index}`) !== null && document.getElementById(`searchbox-detail-${index}`) !== undefined) {
// @blur权重问题使click无法事件触发，设置时间等待
setTimeout(() => {
document.getElementById(`searchbox-detail-${index}`).classList.remove('show-data')
}, 100)
}
},
}
- 计算属性-过滤输入字符串
computed: {
filteredList () {
return function (search) {
return this.hookList.filter(item => {
return item.function_name.toLowerCase().includes(search.toLowerCase())
})
}
}
},
-
HttpRequestBody-支持表单和文件上传
image.png -
函数Diff monaco插件实现代码行内比较功能
image.png 验证器
-
Response- 支持一键复制Json表达式
image.png
测试报告详情（部分设计参考pytestAllure）
image.png
image.png
用户中心
image.png
消息功能
image.png
成员管理
image.png
权限组管理
- 后端权限；API视图中间件实现用户权限判断
- 代码片段
class CompanyAdminPermission(BasePermission):
"""公司管理员权限类"""
message = "仅公司管理员可访问"
def has_permission(self, request, view):
# Return `True` if permission is granted, `False` otherwise.
if bool(request.user and request.user.is_authenticated):
company_user = request.user.companygroup_set.first()
if company_user.is_member:
return True
else:
self.message = "未提供身份校验"
return False
- 前端权限；路由中间件实现权限判断
- 代码片段
router.beforeEach(async (to, from, next) => {
const publicPages = ['/auth/sign-in', '/auth/sign-up',]
if (publicPages.includes(to.path)) {
store.dispatch('User/resetAccessToken')
}
const authRequired = !publicPages.includes(to.path)
const loggedIn = store.getters['User/accessToken']
if (loggedIn) {
let permissions = store.getters['User/permissions']
if (!permissions.length) {
permissions = await store.dispatch('User/getUserInfo')
}
if (!hasPermission(permissions, to)) {
Alert('温馨提示', '角色权限拒绝访问，请联系公司管理员', 'warning')
return false
}
}
if (to.meta.auth) {
if (authRequired && loggedIn === null) {
return next('/auth/sign-in')
} else if (to.name === 'dashboard' || to.name === 'mini.dashboard') {
return next('/home')
}
}
next()
})
image.png
...未完待续
