林中華 呂習(xí)棟

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

介紹開(kāi)發(fā)軟件

1. Vue

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

2. Element

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

3.基本框架

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

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

項(xiàng)目搭建

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

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

Vue使用的是JavaScript語(yǔ)言，其中主要文件包括main.js這個(gè)文件是整個(gè)框架的開(kāi)端，在main.js里面，要引入其他的組件，并將Vue整個(gè)對(duì)象實(shí)例化，就是new Vue（），并且在里面?zhèn)魅氤跏贾?，要綁定DOM的id。

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

2.引入element組件庫(kù)

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

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

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