基于Vue的圖書銷售系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

趙龍 王風(fēng)碩

摘要：人們購買圖書的方式逐漸變成了網(wǎng)上購買，而隨著大數(shù)據(jù)時(shí)代的發(fā)展，人們對(duì)圖書的需求反而增大。該文也正是在如此的條件下，對(duì)基于Vue的圖書銷售系統(tǒng)進(jìn)行了設(shè)計(jì)與實(shí)現(xiàn)。

關(guān)鍵詞：圖書銷售;Vue.js;B/S

中圖分類號(hào)：TP311? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）36-0081-02

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 引言

1.1 項(xiàng)目背景

在當(dāng)代信息技術(shù)發(fā)達(dá)的情況下，各種信息通過網(wǎng)絡(luò)的途徑進(jìn)入我們的視野，同時(shí)逐漸地影響我們的生活，影響著人們的思維方式和行動(dòng)方式。在如此影響下，傳統(tǒng)的商品營銷模式也逐漸跟隨時(shí)代的步伐，與以往產(chǎn)生了不同。于是網(wǎng)絡(luò)購物系統(tǒng)就出現(xiàn)了，讓人們輕松、方便地購買自己需要的物品，還能送貨到家，更加符合當(dāng)代人的生活方式。由此可以看出，基于Vue的圖書銷售系統(tǒng)——專門為售賣圖書而開發(fā)的系統(tǒng)，是廣大圖書愛好者的福利，讓人們生活更加便利。

1.2 Vue.js框架

Vue.js框架是一種用于構(gòu)造以數(shù)據(jù)為驅(qū)動(dòng)的Web用戶界面的先進(jìn)型框架[1]。Vue的一個(gè)核心庫在視圖層，對(duì)于項(xiàng)目開發(fā)者而言更加易于操作和上手，同時(shí)也讓他們可以進(jìn)行第三方庫的整合，對(duì)于已有的項(xiàng)目亦是如此。另一方面，Vue.js與一個(gè)現(xiàn)代化的工具鏈可以很好地結(jié)合在一起使用，各種支撐類庫也都可以。Vue.js還可以為單個(gè)頁面的應(yīng)用程序提供驅(qū)動(dòng)。

Html超文本標(biāo)記（標(biāo)簽）的語言，是由各種不同類型的標(biāo)簽所組合而成，可以被廣泛應(yīng)用于設(shè)計(jì)和制作各類網(wǎng)頁，并且要告知一個(gè)瀏覽器應(yīng)當(dāng)如何去理解和顯示這些頁面。

CSS對(duì)網(wǎng)頁美觀進(jìn)行優(yōu)化和裝飾，提高了Web開發(fā)的工作效率。

1.3 B/S結(jié)構(gòu)介紹

B/S一種常見的數(shù)據(jù)庫運(yùn)用結(jié)構(gòu)。這種結(jié)構(gòu)可分為三層，第一層為表現(xiàn)層（UI），用于對(duì)用戶和后臺(tái)數(shù)據(jù)進(jìn)行交互從而進(jìn)行查詢，然后輸出所查詢的結(jié)果來滿足用戶的需求;第二層是邏輯層（BLL），它的作用是對(duì)服務(wù)器的操作來滿足客戶端的應(yīng)用進(jìn)行邏輯處理;第三層是數(shù)據(jù)層（DAL），數(shù)據(jù)層主要是對(duì)后臺(tái)數(shù)據(jù)庫的管理同時(shí)可以直接對(duì)后臺(tái)數(shù)據(jù)庫進(jìn)行操作處理，例如對(duì)圖書信息的增、刪、查、改等。B/S結(jié)構(gòu)對(duì)于本系統(tǒng)后臺(tái)數(shù)據(jù)的管控有著重要的作用，這樣可以在開發(fā)中對(duì)數(shù)據(jù)更方便地進(jìn)行處理，可以更加靈活、有效地對(duì)大量圖書信息進(jìn)行入庫操作，同時(shí)也滿足用戶對(duì)大量圖書的需求。

2 用戶需求分析

對(duì)于圖書愛好者來說，其需求有以下幾點(diǎn)：可以有效快捷地查詢得到自己需要閱讀的各類圖書詳細(xì)資料;也可以通過網(wǎng)絡(luò)查看詳盡的有關(guān)圖書資料的相關(guān)信息（如作者、簡介、照片、產(chǎn)品日期等）;也可以通過管理自己的購物車（對(duì)以后加入您所需要的購物車進(jìn)行圖書添加或者是刪除、修改您需要的圖書數(shù)量，選擇一種付費(fèi)的方式，并且在網(wǎng)上寫下訂單）;同時(shí)還能夠?qū)崟r(shí)地查看自己的訂單和歷史上的購物資料或者是修改個(gè)人的登錄等信息。

3 系統(tǒng)總體設(shè)計(jì)

3.1 設(shè)計(jì)目標(biāo)

基于Vue的圖書銷售系統(tǒng)是普通讀書愛好者的極大福利，這是一款專門為他們?cè)O(shè)計(jì)的既簡單方便、又易操作的圖書售賣系統(tǒng)，使其可以及時(shí)有效地購買所需的圖書。

3.2 功能模塊設(shè)計(jì)

圖書銷售系統(tǒng)主要?jiǎng)澐譃槿蠊δ苣K：銷售管理、客戶管理、基本信息管理，如圖1。

3.2 部分功能實(shí)現(xiàn)代碼

地址添加實(shí)現(xiàn)，核心代碼如下：

clickAdd（）{

//添加

if（this.flag）{

this.addressList.forEach（item=>{

if（item.user===this.input）{

item.address=this.di;

item.number=this.val;

}

}）;

this.input="";

this.val="";

this.address="";

this.save（）;

this.flag=false;

}else{

if（this.input.length！==0&&this.val！==0）{

varrel=true;

this.addressList.forEach（（item）=>{

if（item.name==this.input||item.number==this.val||item.address==this.address）{

this.$message（"地址信息已存在"）;

rel=false;

returnfalse;

}

}）;

4 數(shù)據(jù)庫設(shè)計(jì)

4.1 E-R圖設(shè)計(jì)

圖書庫存表中的書可以銷售給多個(gè)客戶，一個(gè)客戶也可以購買多本書（圖書庫存表和客戶表是多對(duì)多聯(lián)系）;

圖書庫存表中的書可以由多個(gè)供應(yīng)商提供入庫，一個(gè)供應(yīng)商也可以給多個(gè)圖書館提供庫存量（圖書庫存表和供應(yīng)商表是多對(duì)多聯(lián)系）;

圖書庫存表中的書由一個(gè)出版社提供，一個(gè)出版社可以給多個(gè)圖書館提供庫存量（圖書庫存表和出版社是一對(duì)多聯(lián)系）;

圖書庫存表中的每本書屬于圖書分類表中某一類，圖書分類表中的每個(gè)類中有多本書（圖書庫存表和圖書分類是一對(duì)多聯(lián)系）。如圖2為全局E-R圖。

4.2 邏輯設(shè)計(jì)

1）將實(shí)體轉(zhuǎn)化為關(guān)系模式

圖書（主要包括各類圖書產(chǎn)品編號(hào)，isbn，圖書產(chǎn)品名稱，圖書產(chǎn)品種類注冊(cè)號(hào)，作者，版次，出版日期，庫從注冊(cè)數(shù)量，圖書銷售單價(jià)，出版社圖書編號(hào)）;

圖書分類（圖書分類號(hào)，圖書分類名稱）;

供應(yīng)商（供應(yīng)商編號(hào)，供應(yīng)商名稱，出版社地址，所在城市，郵政編碼，聯(lián)系電話）;

客戶（客戶編號(hào)，客戶名稱，性別，地址，聯(lián)系電話）;

出版社（出版社編號(hào)，出版社名稱，出版社地址，所在城市，郵政編碼，聯(lián)系電話）。

2）將聯(lián)系轉(zhuǎn)化為關(guān)系模式

銷售（產(chǎn)品銷售單位名稱，圖書產(chǎn)品編號(hào)，銷售圖書時(shí)間，銷售圖書數(shù)量，銷售產(chǎn)品單價(jià)，客戶服務(wù)名稱，經(jīng)手）;

入庫單（內(nèi)容包括圖書入庫單號(hào)，圖書采購編號(hào)，入庫確定時(shí)間和交貨日期，購入各類圖書的注冊(cè)數(shù)量，圖書采購單價(jià)，供應(yīng)商圖書編號(hào)，經(jīng)手）。

3）關(guān)系模式的優(yōu)化

圖書（主要包括各類圖書產(chǎn)品編號(hào)，isbn，圖書產(chǎn)品名稱，圖書產(chǎn)品種類注冊(cè)號(hào)，作者，版次，出版日期，庫從注冊(cè)數(shù)量，圖書銷售單價(jià)，出版社圖書編號(hào)）;

圖書分類（圖書分類號(hào)，圖書分類名稱）;

供應(yīng)商（供應(yīng)商編號(hào)，供應(yīng)商名稱，出版社地址，所在城市，郵政編碼，聯(lián)系電話）;

客戶（客戶編號(hào)，客戶名稱，性別，地址，聯(lián)系電話）;

出版社（出版社編號(hào)，出版社名稱，出版社地址，所在城市，郵政編碼，聯(lián)系電話）;

銷售（產(chǎn)品銷售單位名稱，圖書產(chǎn)品編號(hào)，銷售圖書時(shí)間，銷售圖書數(shù)量，銷售產(chǎn)品單價(jià)，客戶服務(wù)名稱，經(jīng)手）;

入庫單（內(nèi)容包括圖書入庫單號(hào)，圖書采購編號(hào)，入庫確定時(shí)間和交貨日期，購入各類圖書的注冊(cè)數(shù)量，圖書采購單價(jià)，供應(yīng)商圖書編號(hào)，經(jīng)手）。

4.3 數(shù)據(jù)庫實(shí)現(xiàn)

數(shù)據(jù)庫系統(tǒng)架構(gòu)設(shè)計(jì)的性能優(yōu)劣與運(yùn)用好壞直接會(huì)影響一個(gè)系統(tǒng)的實(shí)際工作效率及其所要求能達(dá)到的業(yè)務(wù)效果[2]。以下是本系統(tǒng)涉及的實(shí)體分別對(duì)應(yīng)表，具體設(shè)計(jì)見表1。

4.4 數(shù)據(jù)庫備份

數(shù)據(jù)庫維護(hù)工作主要用于定期對(duì)數(shù)據(jù)庫進(jìn)行備份。常見的備份有兩種方法：一種是利用資源管理器進(jìn)行備份，一種是利用SQL語句進(jìn)行備份。

5 用戶界面設(shè)計(jì)

5.1 用戶界面

用戶界面是用戶與系統(tǒng)直接地交流、傳遞信息的通道，對(duì)于用戶而言，他們的需要是來自用戶界面，所以用戶界面功能設(shè)計(jì)就尤為重要。

5.2 功能界面設(shè)計(jì)

本系統(tǒng)分別由登錄頁面、注冊(cè)頁面、系統(tǒng)的主界面、圖書篩選頁面、個(gè)人中心頁面、圖書詳情頁面組成。

登錄頁面主要是用戶賬號(hào)登錄（只有通過登錄才能購買用戶所需要的圖書）;注冊(cè)頁面是用戶注冊(cè)賬號(hào)和實(shí)名制（用戶所有信息都是保密的，只有用戶自己可以查看）;主頁面是本系統(tǒng)對(duì)好評(píng)書籍的推薦和各類圖書的展示;篩選頁面主要功能是給用戶提供一個(gè)瀏覽和選擇圖書的頁面（用戶可以通過對(duì)評(píng)分、價(jià)格、類別等進(jìn)行挑選）;個(gè)人中心頁面主要是用戶對(duì)個(gè)人信息的管理（主要包括用戶名、用戶密碼、用戶地址、用戶聯(lián)系方式等的修改），以及圖書詳情頁面主要是介紹圖書基本信息（例如圖書名字、圖書作者、圖書價(jià)格、圖書出版社等）。

6 結(jié)束語

Vue.js框架是一種用于構(gòu)造以數(shù)據(jù)為驅(qū)動(dòng)的Web用戶界面的先進(jìn)型框架[1]。本項(xiàng)目前端頁面主要采用VisualStudioCode來進(jìn)行Vue.js編碼實(shí)現(xiàn)的，后臺(tái)數(shù)據(jù)庫選擇MySQL關(guān)系型數(shù)據(jù)庫，這樣所設(shè)計(jì)的網(wǎng)絡(luò)圖書銷售系統(tǒng)就會(huì)更加安全、可靠。本文的論述借鑒了其他的管理系統(tǒng)的技術(shù)，也同時(shí)結(jié)合了自身所學(xué)的知識(shí)，對(duì)基于Vue的圖書銷售系統(tǒng)進(jìn)行功能、界面的設(shè)計(jì)與實(shí)現(xiàn)。而后臺(tái)數(shù)據(jù)庫還有一些欠缺，只是進(jìn)行了初步設(shè)計(jì)，進(jìn)行了理論上的關(guān)系轉(zhuǎn)化，即邏輯設(shè)計(jì)，還沒有真正有效地建立。對(duì)本系統(tǒng)的初步開發(fā)，亦可以有效地提高圖書銷售的效率、服務(wù)質(zhì)量、提升管理效率等。

參考文獻(xiàn)：

[1] Vue.js.vue.js官方[EB/OL].[2021-03-03].https：//cn.vuejs.org/.

[2] 周文瓊，王樂球，葉玫，等.基于asp.net mvc框架的高校網(wǎng)絡(luò)財(cái)務(wù)信息查詢管理系統(tǒng)的設(shè)計(jì)和其實(shí)現(xiàn)[J].中國大學(xué)數(shù)據(jù)庫管理，2013，12（1）：62-63.

【通聯(lián)編輯：梁書】