guns常用功能整理

• guns常用功能整理
• • • 一、ajax接口請求（常用）
    • • • 1.1：引入插件庫
        • 1.2：調(diào)用即可
    • 二、es6模塊調(diào)用
    • • • 2.1：當(dāng)前文件下使用
        • 2.2：封裝的代碼暴露出去
    • 三、創(chuàng)建template模板
    • • • 3.1:html節(jié)點創(chuàng)建模板
        • 3.2：常用于表格元素增加slots
    • 四、封裝文件上傳代碼
    • • • 4.1:利用es6導(dǎo)入導(dǎo)出原理，新建一個js文件
        • 4.2：可以再次將接口調(diào)用代碼進行封裝,這樣代碼會更加簡潔清晰
        • 4.3:調(diào)用方法
    • 五、圖片的放大縮小以及移動切換
    • • • 5.1：實現(xiàn)拖拽，主要是獲取它當(dāng)前的位置
        • 5.2：圖片放大也是通過當(dāng)前位置以及它的長寬來進行處理
        • 5.3：圖片的切換主要通過獲取數(shù)組對應(yīng)的下標(biāo)以及其他信息
    • 六、websocket長連接
    • • • 6.1：獲取長連接地址并繼承
        • 6.2:接著在websocket自帶的方法體里面進行數(shù)據(jù)的回調(diào)以及錯誤判斷
        • 6.3：值得注意的點是，長連接需要保持一直通信，所以前端要不斷發(fā)請求，類似于心跳機制，保證前后端連接不斷開
    • 七、右側(cè)固定導(dǎo)航欄
    • • • 7.1：下載tocbot插件并且引用
        • 7.2：直接初始化
    • 八、文字高亮
    • • • 8.1：es6封裝高亮代碼
        • 8.2：調(diào)用執(zhí)行即可
    • 九、輸入框防抖
    • • • 9.1：下載lodash-es插件
        • 9.2：以下為防抖代碼
        • 9.3：運用到當(dāng)前的輸入框組件當(dāng)中
    • 10、table組件常用
    • • • 10.1：數(shù)據(jù)表格table ***https://www.antdv.com/components/table/#Table***官方文檔
        • 10.2：組件常用
        • 10.3：表頭設(shè)置
        • 10.4：表格內(nèi)容體里面要設(shè)置動態(tài)的數(shù)據(jù)或者是是否可操作可以使用插槽的方式
    • 11、彈出層
    • • • 11.1：將需要設(shè)為彈窗的組件置于父組件當(dāng)中
        • 11.2：子組件接收參數(shù)
        • 11.3：子組件當(dāng)中多為輸入框回顯以及下拉框的形式
• 常見的坑
• • • 一、下拉框脫離文本
    • • • 在根節(jié)點添加這個方法即可
    • 二、在guns系統(tǒng)當(dāng)中路由跳轉(zhuǎn)數(shù)據(jù)不更新，watch和computed都不管用？
    • • • 直接使用unUpdated生命周期即可
    • 三、在使用長連接或者其他需要使用到setInterval或者setTimeout時處理完畢時一定要終止它，否則長時間不處理會導(dǎo)致內(nèi)存溢出，界面卡死
• 說明
• • • • • 我們系統(tǒng)主要是用vue3.x加上ant-design插件庫為了方便代碼維護

guns常用功能整理

一、ajax接口請求（常用）

1.1：引入插件庫

import axios from 'axios';

1.2：調(diào)用即可

axios({? url: 接口路徑,? method: 請求方式,}).then(回調(diào)方法)> 或者fetch(路徑, {? method: 請求方法})

? .then(回調(diào))

二、es6模塊調(diào)用

import { 方法名 } from 調(diào)用路徑;

2.1：當(dāng)前文件下使用

function debounce(){// axios}export default{debounce,}

2.2：封裝的代碼暴露出去

三、創(chuàng)建template模板

3.1:html節(jié)點創(chuàng)建模板

<template #examine="{record }">? <a-space>? <a @click="examine(record.fileName)">查看</a>? </a-space>? </template>

3.2：常用于表格元素增加slots

slots: { customRender: ‘examine’ }

四、封裝文件上傳代碼

4.1:利用es6導(dǎo)入導(dǎo)出原理，新建一個js文件

>static async blobDownload(url, params,filename) {if (params === undefined) {params = {};}if(filename === undefined){filename = '導(dǎo)出文件.xlsx'}const form = paramsaxios({ // 用axios發(fā)送post請求method: 'post',url: url,data: form,responseType: 'blob' // 表明返回服務(wù)器返回的數(shù)據(jù)類型}).then((res) => { // 處理返回的文件流? const content = res.data? const blob = new Blob([content])? if ('download' in document.createElement('a')) { // 非IE下載? const elink = document.createElement('a')? elink.download = filename? elink.style.display = 'none'? elink.href = URL.createObjectURL(blob)? document.body.appendChild(elink)? elink.click()? URL.revokeObjectURL(elink.href) // 釋放URL 對象? document.body.removeChild(elink)? } else { // IE10+下載? navigator.msSaveBlob(blob, filename)? }? return true})}

4.2：可以再次將接口調(diào)用代碼進行封裝,這樣代碼會更加簡潔清晰

>static export(params,obj,name) {return Request.blobDownload('/ai-plus/bank/flow/task/result/excel?taskId='+params,obj,name);}

4.3:調(diào)用方法

export(record.jobId, record.jobName)

記住方法一定要導(dǎo)出才能夠調(diào)用

五、圖片的放大縮小以及移動切換

5.1：實現(xiàn)拖拽，主要是獲取它當(dāng)前的位置

let oImg = e.target;let disX = e.clientX - oImg.offsetLeft;let disY = e.clientY - oImg.offsetTop;document.onmousemove = e => {e.preventDefault();let left = e.clientX - disX;let top = e.clientY - disY;document.querySelector('.moveImage').style.left = left + 'px';document.querySelector('.moveImage').style.top = top + 'px';};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;};

5.2：圖片放大也是通過當(dāng)前位置以及它的長寬來進行處理

let nowScrollTop = document.getElementById('masks').scrollTop;let nowScrollLeft = document.getElementById('masks').scrollLeft;if (nowScrollTop - (offsetY - pdfObj.imgOffsetY) >= 0) {document.getElementById('masks').scrollTop = nowScrollTop - (offsetY - pdfObj.imgOffsetY);}if (nowScrollLeft - (offsetX - pdfObj.imgOffsetX) >= 0) {document.getElementById('masks').scrollLeft = nowScrollLeft - (offsetX - pdfObj.imgOffsetX);}

5.3：圖片的切換主要通過獲取數(shù)組對應(yīng)的下標(biāo)以及其他信息

if (this.mainImgUrl.indexOf(imgUrl) !== -1) {let index = this.mainImgUrl.indexOf(imgUrl);this.mianImage(this.showMainImgUrl[index - 1], index - 1);} else {let index = this.detailImgUrl.indexOf(imgUrl);this.detailImage(this.showDetailImgUrl[index - 1], index - 1);}

具體可參照ai+后臺管理系統(tǒng)sku文件

六、websocket長連接

6.1：獲取長連接地址并繼承

websocket = new WebSocket('ws://172.168.30.5:8089/biSocket/1513721148340064257');

6.2:接著在websocket自帶的方法體里面進行數(shù)據(jù)的回調(diào)以及錯誤判斷

websocket.onopen = function () {console.log('連接已經(jīng)建立');};websocket.onmessage = function (e) {getMessage(e);};websocket.onerror = function () {netWorkOutAge.value = true;console.log('發(fā)生錯誤');console.log('onerror發(fā)送成功');heartCheck.start();};websocket.onclose = function (e) {console.log('websocket 斷開: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);netWorkOutAge.value = true;document.querySelector('.main').setAttribute('style', 'opacity:0.4');console.log('onclose發(fā)送成功');//斷開網(wǎng)絡(luò)后連接網(wǎng)絡(luò)刷新請求console.log('斷開連接后發(fā)送成功');//連接關(guān)閉啟動定時任務(wù) 五秒后在創(chuàng)建heartCheck.start();};

6.3：值得注意的點是，長連接需要保持一直通信，所以前端要不斷發(fā)請求，類似于心跳機制，保證前后端連接不斷開

//定時器 只執(zhí)行一次的那種 只是為了限制重連頻率 = =let heartCheck = {timeout: 5000, //重連時間timeoutObj: null,start: function () {this.timeoutObj = setTimeout(function () {websocket.send("{'messageType': 'ROBOT_CURRENT_JOB_ACK'}");getSocket(); //重新創(chuàng)建 websocket 對象并賦值}, this.timeout);}};

保證不斷開的原理就是設(shè)置定時器，具體可看mro-bi-fronted這個項目代碼

七、右側(cè)固定導(dǎo)航欄

7.1：下載tocbot插件并且引用

import * as tocbot from 'tocbot';

7.2：直接初始化

tocbot.init({tocSelector: '.allTitles',contentSelector: '.content_left',ignoreSelector: 'js-toc-ignore',headingSelector: 'h1',scrollSmooth: true,hasInnerContainers: false,headingsOffset: 80,scrollSmoothOffset: true,fixedSidebarOffset: 'auto',scrollEndCallback: function() {window.tocPhase = null;},onclick: function() {window.tocPhase = true;}});

注意一定要注意它的執(zhí)行棧的執(zhí)行順序，在異步中使用該方法

https://blog.csdn.net/cune1359/article/details/106844182

官方文檔

八、文字高亮

文字高亮不僅后端可以處理，前端也可以處理

8.1：es6封裝高亮代碼

export function highLightTableMsg(msg, highLightStr) {if (msg == null) {msg = ''}if (highLightStr == null) {highLightStr = ''}if (msg instanceof Object) {msg = JSON.stringify(msg)}if (highLightStr instanceof Object) {highLightStr = JSON.stringify(highLightStr)}if (!(msg instanceof String)) {msg = msg.toString()}if (!(highLightStr instanceof String)) {highLightStr = highLightStr.toString()}var htmlStr = ''if (highLightStr.length > 0) {if (msg.indexOf(highLightStr) !== -1) {assemblyStr(msg, highLightStr)} else {htmlStr = '<span>' + msg + '</span>'}} else {htmlStr = '<span>' + msg + '</span>'}function assemblyStr(msgAssembly, highLightAssembly) {if (msgAssembly.indexOf(highLightAssembly) !== -1) {var length = highLightAssembly.lengthvar start = msgAssembly.indexOf(highLightAssembly)htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span class="log-hight-light" style="color:#C92B2F">' + highLightAssembly + '</span>'msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)assemblyStr(msgAssembly, highLightAssembly)} else {htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'}}return htmlStr}

8.2：調(diào)用執(zhí)行即可

import { highLightTableMsg } from '../../utils/highLight'; highLightTableMsg(val, searchValue); //查詢結(jié)果標(biāo)紅

兩個參數(shù)分別對應(yīng)標(biāo)題和文本

九、輸入框防抖

9.1：下載lodash-es插件

import { debounce } from ‘lodash-es’;

9.2：以下為防抖代碼

//防抖防止多次調(diào)用const filterOption = debounce(async value => {let allDataValue = await axios.get(`store/mall/list?storeName=${value}`);if (allDataValue.data.code === '00000') {if (allDataValue.data.data.length > 0) {allDataValue.data.data.forEach(() => {dataValue.value = allDataValue.data.data.map(element => ({value: element.storeName,storeId: element.storeId}));});storeArr.push(...allDataValue.data.data)fetch.value = true;} else {fetch.value = false;}}}, 300);

9.3：運用到當(dāng)前的輸入框組件當(dāng)中

<a-selectshow-searchplaceholder="請輸入店鋪名稱"style="width: 300px":default-active-first-option="false":show-arrow="false":not-found-content="fetch ? undefined : '搜索內(nèi)容不存在'"@search="filterOption":getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}":options="dataValue"@change="handleChange"><template v-if="fetch" #notFoundContent><a-spin size="small"></a-spin></template></a-select>

10、table組件常用

10.1：數(shù)據(jù)表格table https://www.antdv.com/components/table/#Table官方文檔

10.2：組件常用

<ele-pro-tableref="table"row-key="brandId":datasource="url":columns="columns":where="where"@change="tablaChange"v-model:selection="selection":scroll="{ x: 'max-content' }"></ele-pro-table>

組件自帶的有分頁，請求地址，還有頁碼點擊的事件

比如說@change事件就代表獲取當(dāng)前頁數(shù) tablaChange(pagination) {this.pageNo = pagination.current;}

10.3：表頭設(shè)置

const columns = [{title: '商城訂單編號',dataIndex: 'ordersSn'},{title: 'orderId',dataIndex: 'omsSn'},{title: 'OMS推送狀態(tài)',dataIndex: 'omsCreateStatus',customRender: record => {return record.record.omsCreateStatus == 1 ? '推送成功' : '推送失敗';}},{title: '下單企業(yè)名稱',dataIndex: 'companyName'},{title: '下單用戶名稱',dataIndex: 'memberName'},{title: '用戶聯(lián)系電話',dataIndex: 'memberMobile'},{title: '商城訂單狀態(tài)',dataIndex: 'ordersStateName'},{title: '訂單金額',dataIndex: 'ordersAmount'},{title: '支付方式',dataIndex: 'payment',customRender: record => {return record.text == 0 ? '在線支付' : record.text == 1 ? '線下支付' : '賬期支付';}},{title: '下單時間',dataIndex: 'createTime',// customRender: ({ item }) => moment(item).format('YYYY-MM-DD:HH:MM:SS')},{title: '操作',key: 'action',width: 150,align: 'center',slots: { customRender: 'action' }}];

10.4：表格內(nèi)容體里面要設(shè)置動態(tài)的數(shù)據(jù)或者是是否可操作可以使用插槽的方式

在當(dāng)前表頭設(shè)置 customRender: record => {return record.text == 0 ? '在線支付' : record.text == 1 ? '線下支付' : '賬期支付';} 其次就可以生成模板在文本當(dāng)中 <!-- table操作欄按鈕 --><template #action="{ record }"><a-space><a @click="openEdit(record)">詳情</a><a-divider type="vertical" /><a-popconfirmv-if="record.omsCreateStatus !== 1"title="是否確定要重新推送"ok-text="是"cancel-text="否"@confirm="confirm(record.ordersId)"@cancel="cancel"><a href="#">重新推送</a></a-popconfirm></a-space></template>

提示：局部刷新表格可以通過ajax請求的原理，增加一個loading框讓用戶以為是在刷新界面

11、彈出層

彈出層主要是父與子之間的通信，利用父傳子的原理

11.1：將需要設(shè)為彈窗的組件置于父組件當(dāng)中

調(diào)用子組件 import { BrandApi } from '@/api/BrandApi'; 生成模板即可 <!-- 編輯彈窗 --><brand-edit v-model:visible="showEdit" :data="current" @done="reload" />

可以看出，‘ ：’是父組件傳給子組件的值；‘@’是傳遞的一種方法回調(diào)

11.2：子組件接收參數(shù)

emits: ['done', 'update:visible'],inject: ['reload'],props: {// 彈窗是否打開visible: Boolean,// 修改回顯的數(shù)據(jù)data: Object},

不了解的小伙伴可以看看這篇博客

http://events.jianshu.io/p/be840cc0fa6a

11.3：子組件當(dāng)中多為輸入框回顯以及下拉框的形式

一般來說，會先都是通過v-model雙向綁定來實現(xiàn)的

其次，回顯得注意那些為必填非必填的情況

// 表單驗證規(guī)則const rules = {showImage: [{ required: true, message: '請輸入品牌圖片', type: 'string', trigger: 'blur' }],brandName: [{ required: true, message: '請輸入品牌名稱', type: 'string', trigger: 'blur' }],registerNumber: [{ required: true, message: '請輸入商標(biāo)注冊號', type: 'string', trigger: 'blur' }]},

常見的坑

一、下拉框脫離文本

在根節(jié)點添加這個方法即可

:getPopupContainer="(triggerNode) => {return triggerNode.parentNode || document.body}"

二、在guns系統(tǒng)當(dāng)中路由跳轉(zhuǎn)數(shù)據(jù)不更新，watch和computed都不管用？

直接使用unUpdated生命周期即可

三、在使用長連接或者其他需要使用到setInterval或者setTimeout時處理完畢時一定要終止它，否則長時間不處理會導(dǎo)致內(nèi)存溢出，界面卡死

…

說明

我們系統(tǒng)主要是用vue3.x加上ant-design插件庫為了方便代碼維護

vue3.x

https://cn.vuejs.org/

ant-design

https://www.antdv.com/components/overview

總結(jié)

以上是生活随笔為你收集整理的guns常用功能整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。