寫在前面 這部分真的感覺超級難，其實也不能說難，主要是真的想不到這個思路應該這麼做，或者說他好厲害，他怎麼知道該這麼設計實現。 說下難點吧，我覺得後天邏輯還好，主要是前端部分真的需要點花點時間來思考，比如佈局、交互設計的實現等等。 文檔頁面功能開發 1、任務拆解 增加文檔頁面，首頁點擊電子書時，跳轉 ...
寫在前面
這部分真的感覺超級難，其實也不能說難，主要是真的想不到這個思路應該這麼做，或者說他好厲害，他怎麼知道該這麼設計實現。
說下難點吧，我覺得後天邏輯還好，主要是前端部分真的需要點花點時間來思考，比如佈局、交互設計的實現等等。
文檔頁面功能開發
1、任務拆解
- 增加文檔頁面，首頁點擊電子書時，跳轉到電子書文檔頁面
- 左邊顯示文檔樹
- 右邊顯示預設選擇第一個節點的內容
- 文檔編輯增加預覽功能
- 無文檔內容時，給出提示
- 功能優化及問題修複
2、增加文檔頁面
首頁點擊電子書時，跳轉到電子書文檔頁面，參考之前電子書列表中文檔管理的路由跳轉即可，示例代碼如下：
<router-link :to="'/doc?ebookId='+item.id">
{{ item.name }}
</router-link>
3、左邊顯示文檔樹
就是把文檔管理的樹形數據變成菜單，選擇對應菜單顯示對應電子書，示例代碼如下：
<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、右邊預設選擇第一個節點
當進入文檔頁面時，預設就選擇第一個節點內容，示例代碼如下：
/**
* 數據查詢
**/
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、文檔編輯增加預覽功能
就是增加一個按鈕，點擊後用一個抽屜顯示即可，示例代碼如下：
<!-- 預覽按鈕 -->
<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，就返回頁面字元串顯示，示例代碼如下：
<h3 v-if="level1.length === 0">對不起，找不到相關文檔！</h3>
7、部分功能優化
圖標的顯示，需要先安裝依賴如下：
npm install --save @ant-design/icons-vue
代碼部分如下所示：
<a-button type="primary" @click="handlePreviewContent()">
<EyeOutlined /> 內容預覽
</a-button>
import {SmileOutlined, DownOutlined, ExclamationCircleOutlined,EyeOutlined} from '@ant-design/icons-vue';
components: {
SmileOutlined,
DownOutlined,
EyeOutlined
},
8、效果
寫在最後
這部分內容終於更新完，耗時大約五個小時吧，第一次感覺大腦飽和，有點整不動了，有種被壓制的感覺呀，但是也真的好開心，又會了幾個組件的使用。
但跳出來看，目前對我而言最大的快樂，也就是每天能會一旦點就可以啦，很簡單而充實。
當然這也算單身狗的日常啦，感興趣的同學可自行嘗試！
優秀不夠，你是否無可替代
軟體測試交流QQ群：721256703，期待你的加入！！
歡迎關註我的微信公眾號：軟體測試君
