前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我一个测试仔,也来开发一个功能试试?

我一个测试仔,也来开发一个功能试试?

作者头像
软件测试君
发布2024-05-18 08:29:55
1020
发布2024-05-18 08:29:55
举报
文章被收录于专栏:测试人生测试人生

写在前面

这部分真的感觉超级难,其实也不能说难,主要是真的想不到这个思路应该这么做,或者说他好厉害,他怎么知道该这么设计实现。

说下难点吧,我觉得后天逻辑还好,主要是前端部分真的需要点花点时间来思考,比如布局、交互设计的实现等等。

文档页面功能开发

1、任务拆解
  • 增加文档页面,首页点击电子书时,跳转到电子书文档页面
  • 左边显示文档树
  • 右边显示默认选择第一个节点的内容
  • 文档编辑增加预览功能
  • 无文档内容时,给出提示
  • 功能优化及问题修复
2、增加文档页面

首页点击电子书时,跳转到电子书文档页面,参考之前电子书列表中文档管理的路由跳转即可,示例代码如下:

代码语言:javascript
复制
<router-link :to="'/doc?ebookId='+item.id">
  {{ item.name }}
</router-link>
3、左边显示文档树

就是把文档管理的树形数据变成菜单,选择对应菜单显示对应电子书,示例代码如下:

代码语言:javascript
复制
<a-row>
  <a-col :span="6">
    <a-tree
        v-if="level1 && level1.length"
        :defaultExpandAllRows="true"
        :tree-data="level1"
        @select="onSelect"
        :fieldNames="{title: 'name', key: 'id', value: 'id'}"
        :defaultExpandAll="true"
    >
    </a-tree>
  </a-col>
  <a-col :span="18">
  </a-col>
</a-row>
4、右边默认选择第一个节点

当进入文档页面时,默认就选择第一个节点内容,示例代码如下:

代码语言:javascript
复制
/**
   * 数据查询
   **/
  const handleQuery = () => {
    axios.get("/doc/all/" + route.query.ebookId).then((response) => {
      const data = response.data;
      if (data.success) {
        docs.value = data.content;
        level1.value = [];
        level1.value = Tool.array2Tree(docs.value, 0);
        setParent(level1.value)
        if (Tool.isNotEmpty(level1.value)) {
          defaultSelectedKeys.value = [level1.value[0].id];
          handleQueryContent(level1.value[0].id);
        }
      } else {
        message.error(data.message);
      }
    });
  };
5、文档编辑增加预览功能

就是增加一个按钮,点击后用一个抽屉显示即可,示例代码如下:

代码语言:javascript
复制
<!-- 预览按钮 -->
<a-button type="primary" @click="handlePreviewContent()">
  <EyeOutlined /> 内容预览
</a-button>
// 抽屉
<a-drawer width="750" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
  <div class="wangeditor" :innerHTML="previewHtml"></div>
</a-drawer>
6、无文档内容时,给出提示

判断接口返回数据,如果长度为0,就返回页面字符串显示,示例代码如下:

代码语言:javascript
复制
 <h3 v-if="level1.length === 0">对不起,找不到相关文档!</h3>
7、部分功能优化

图标的显示,需要先安装依赖如下:

代码语言:javascript
复制
npm install --save @ant-design/icons-vue

代码部分如下所示:

代码语言:javascript
复制
<a-button type="primary" @click="handlePreviewContent()">
  <EyeOutlined /> 内容预览
</a-button>

import {SmileOutlined, DownOutlined, ExclamationCircleOutlined,EyeOutlined} from '@ant-design/icons-vue';
 
components: {
  SmileOutlined,
  DownOutlined,
  EyeOutlined
},
8、效果

image.png

image.png

写在最后

这部分内容终于更新完,耗时大约五个小时吧,第一次感觉大脑饱和,有点整不动了,有种被压制的感觉呀,但是也真的好开心,又会了几个组件的使用。

但跳出来看,目前对我而言最大的快乐,也就是每天能会一旦点就可以啦,很简单而充实。

当然这也算单身狗的日常啦,感兴趣的同学可自行尝试!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-05-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 软件测试君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文档页面功能开发
    • 1、任务拆解
      • 2、增加文档页面
        • 3、左边显示文档树
          • 4、右边默认选择第一个节点
            • 5、文档编辑增加预览功能
              • 6、无文档内容时,给出提示
                • 7、部分功能优化
                  • 8、效果
                  • 写在最后
                  相关产品与服务
                  腾讯云服务器利旧
                  云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档