基于uve.js的資產(chǎn)管理界面設(shè)計

林中華 呂習(xí)棟

在實驗室管理中，資產(chǎn)管理占有很大的比重，隨著社會經(jīng)濟(jì)的飛速發(fā)展，新舊設(shè)備更新迭代的速度這幾年呈幾何式增長，隨之而來的問題就是舊的設(shè)備還在使用，新的設(shè)備也不斷加入，管理這些設(shè)備資產(chǎn)變得非常繁瑣。管理員除了要對設(shè)備進(jìn)行入庫、出庫登記，做好設(shè)備移動位置、設(shè)備借還的記錄，還要每天檢查設(shè)備的安放位置，每年還要應(yīng)對檢查，占用了大量的時間和精力。本文中的資產(chǎn)管理軟件就是基于這個需求而開發(fā)的。

介紹開發(fā)軟件

1. Vue

Vue是vue.js的簡寫，從后綴的js我們可以看出這是一款js框架。在前端開發(fā)中框架非常之多，因為人們對網(wǎng)頁界面的要求越來越高，基礎(chǔ)的Html+Css+JavaScript的嵌套已經(jīng)無法滿足程序開發(fā)的需要，目前市面上常用的網(wǎng)頁幾乎都是使用框架處理。如果不使用框架來編程網(wǎng)頁也可以，但只適用于測試或者學(xué)習(xí)，商用的話用戶對界面功能的要求校多，且需要不斷改動，所以一款好用的框架是每個程序員的剛需。

2. Element

Element是餓了么公司開發(fā)的一款前端UI組件庫，Element和Vue處理的事情不相同，element只負(fù)責(zé)圖形界面的設(shè)計和展示，而Vue更像一個電腦里面的系統(tǒng)，負(fù)責(zé)協(xié)調(diào)各個組件的運行和最終的項目發(fā)布。

3.基本框架

本次開發(fā)的資產(chǎn)管理系統(tǒng)是一個部署到服務(wù)器的網(wǎng)頁代碼，用戶不需要安裝，隨時打開瀏覽器輸入網(wǎng)址就可以操作，網(wǎng)頁還是響應(yīng)式的，也就是說可以使用手機(jī)打開，界面會自動調(diào)整到合適手機(jī)的字體大小，操作界面也符合手機(jī)的操作習(xí)慣。

本項目的編寫語言以Html，Css，JavaScript為基礎(chǔ)，然后導(dǎo)入Vue總框架，在Vue上再導(dǎo)入element框架。操作界面結(jié)構(gòu)分為當(dāng)前資產(chǎn)、歷史數(shù)據(jù)和設(shè)置菜單3個部分。

項目搭建

1.創(chuàng)建Vue工程

Vue只能在命令輸入框輸入指令執(zhí)行操作，創(chuàng)建命令的指令是vue create manage，其中manage是工程名字，這樣在當(dāng)前的目錄下就會創(chuàng)建了一個叫做manage的文件夾，里面包含了項目所需要的各種文件，這樣的好處是不用自己到處創(chuàng)建文件夾然后再到官網(wǎng)下載依賴文件。

Vue使用的是JavaScript語言，其中主要文件包括main.js這個文件是整個框架的開端，在main.js里面，要引入其他的組件，并將Vue整個對象實例化，就是new Vue（），并且在里面?zhèn)魅氤跏贾担壎―OM的id。

Vue是屬于數(shù)據(jù)驅(qū)動型的，相比之前使用的Html+Css+JavaScript，它不需要通過查找對應(yīng)的DOM修改數(shù)值，直接修改數(shù)據(jù)DOM里面的數(shù)值就會發(fā)生變化，大大提高了開發(fā)者的效率。

2.引入element組件庫

在main.js中通過import element from‘element，Vue.use（ElementUI）引入element插件，這樣的話就可以在其他模板中使用element組件。

首先在html區(qū)域?qū)懭胍粋€div標(biāo)簽，然后再script位置對標(biāo)簽進(jìn)行初始化，就可以引入組件了。初始化的函數(shù)是：echarts. init（document.getElementById（main2）），其中main2是div的id名稱。通過這方式，我們先后引入了布局容器組件、導(dǎo)航菜單組件及表格組件。然后通過修改各個菜單里面的文字標(biāo)簽，顯示正確的文字。圖1為軟件在element的加持下展示的樣子，界面很友好大方。

本文的資產(chǎn)管理軟件根據(jù)實際的需求出發(fā)，很好地解決了資產(chǎn)管理人員在實際工作遇到的問題，把繁瑣、重復(fù)的事情交給計算機(jī)處理，使用者只需要關(guān)注自己的錄入工作，大大提高了效率，管理軟件中的統(tǒng)計功能可以讓使用者直觀地看到資產(chǎn)的總體情況，以及資產(chǎn)每天的變動情況。