當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

guns常用功能整理

發布時間：2024/3/24 编程问答 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 guns常用功能整理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

guns常用功能整理

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

guns常用功能整理

一、ajax接口請求（常用）

1.1：引入插件庫

import axios from 'axios';

1.2：調用即可

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

? .then(回調)

二、es6模塊調用

import { 方法名 } from 調用路徑;

2.1：當前文件下使用

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

2.2：封裝的代碼暴露出去

三、創建template模板

3.1:html節點創建模板

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

slots: { customRender: ‘examine’ }

四、封裝文件上傳代碼

4.1:利用es6導入導出原理，新建一個js文件

>static async blobDownload(url, params,filename) {if (params === undefined) {params = {};}if(filename === undefined){filename = '導出文件.xlsx'}const form = paramsaxios({ // 用axios發送post請求method: 'post',url: url,data: form,responseType: 'blob' // 表明返回服務器返回的數據類型}).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：可以再次將接口調用代碼進行封裝,這樣代碼會更加簡潔清晰

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

4.3:調用方法

export(record.jobId, record.jobName)

記住方法一定要導出才能夠調用

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

5.1：實現拖拽，主要是獲取它當前的位置

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：圖片放大也是通過當前位置以及它的長寬來進行處理

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：圖片的切換主要通過獲取數組對應的下標以及其他信息

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+后臺管理系統sku文件

六、websocket長連接

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

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

6.2:接著在websocket自帶的方法體里面進行數據的回調以及錯誤判斷

websocket.onopen = function () {console.log('連接已經建立');};websocket.onmessage = function (e) {getMessage(e);};websocket.onerror = function () {netWorkOutAge.value = true;console.log('發生錯誤');console.log('onerror發送成功');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發送成功');//斷開網絡后連接網絡刷新請求console.log('斷開連接后發送成功');//連接關閉啟動定時任務五秒后在創建heartCheck.start();};

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

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

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

七、右側固定導航欄

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;}});

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

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：調用執行即可

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

兩個參數分別對應標題和文本

九、輸入框防抖

9.1：下載lodash-es插件

import { debounce } from ‘lodash-es’;

9.2：以下為防抖代碼

//防抖防止多次調用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：運用到當前的輸入框組件當中

<a-selectshow-searchplaceholder="請輸入店鋪名稱"style="width: 300px":default-active-first-option="false":show-arrow="false":not-found-content="fetch ? undefined : '搜索內容不存在'"@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：數據表格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事件就代表獲取當前頁數 tablaChange(pagination) {this.pageNo = pagination.current;}

10.3：表頭設置

10.4：表格內容體里面要設置動態的數據或者是是否可操作可以使用插槽的方式

在當前表頭設置 customRender: record => {return record.text == 0 ? '在線支付' : record.text == 1 ? '線下支付' : '賬期支付';} 其次就可以生成模板在文本當中 <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：將需要設為彈窗的組件置于父組件當中

調用子組件 import { BrandApi } from '@/api/BrandApi'; 生成模板即可 <brand-edit v-model:visible="showEdit" :data="current" @done="reload" />

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

11.2：子組件接收參數

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

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

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

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

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

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

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

常見的坑

一、下拉框脫離文本

在根節點添加這個方法即可

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

二、在guns系統當中路由跳轉數據不更新，watch和computed都不管用？

直接使用unUpdated生命周期即可

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

…

說明

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

vue3.x

https://cn.vuejs.org/

ant-design

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：魅族 android9.0,魅族Flym
下一篇： WooCommerce入门指南：添加新订