基于Vue的圖書銷售系統設計與實現

趙龍 王風碩

摘要：人們購買圖書的方式逐漸變成了網上購買，而隨著大數據時代的發展，人們對圖書的需求反而增大。該文也正是在如此的條件下，對基于Vue的圖書銷售系統進行了設計與實現。

關鍵詞：圖書銷售;Vue.js;B/S

中圖分類號：TP311? ?文獻標識碼：A

文章編號：1009-3044（2021）36-0081-02

開放科學（資源服務）標識碼（OSID）：

1 引言

1.1 項目背景

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

1.2 Vue.js框架

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

Html超文本標記（標簽）的語言，是由各種不同類型的標簽所組合而成，可以被廣泛應用于設計和制作各類網頁，并且要告知一個瀏覽器應當如何去理解和顯示這些頁面。

CSS對網頁美觀進行優化和裝飾，提高了Web開發的工作效率。

1.3 B/S結構介紹

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

2 用戶需求分析

對于圖書愛好者來說，其需求有以下幾點：可以有效快捷地查詢得到自己需要閱讀的各類圖書詳細資料;也可以通過網絡查看詳盡的有關圖書資料的相關信息（如作者、簡介、照片、產品日期等）;也可以通過管理自己的購物車（對以后加入您所需要的購物車進行圖書添加或者是刪除、修改您需要的圖書數量，選擇一種付費的方式，并且在網上寫下訂單）;同時還能夠實時地查看自己的訂單和歷史上的購物資料或者是修改個人的登錄等信息。

3 系統總體設計

3.1 設計目標

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

3.2 功能模塊設計

圖書銷售系統主要劃分為三大功能模塊：銷售管理、客戶管理、基本信息管理，如圖1。

3.2 部分功能實現代碼

地址添加實現，核心代碼如下：

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 數據庫設計

4.1 E-R圖設計

圖書庫存表中的書可以銷售給多個客戶，一個客戶也可以購買多本書（圖書庫存表和客戶表是多對多聯系）;

圖書庫存表中的書可以由多個供應商提供入庫，一個供應商也可以給多個圖書館提供庫存量（圖書庫存表和供應商表是多對多聯系）;

圖書庫存表中的書由一個出版社提供，一個出版社可以給多個圖書館提供庫存量（圖書庫存表和出版社是一對多聯系）;

圖書庫存表中的每本書屬于圖書分類表中某一類，圖書分類表中的每個類中有多本書（圖書庫存表和圖書分類是一對多聯系）。如圖2為全局E-R圖。

4.2 邏輯設計

1）將實體轉化為關系模式

圖書（主要包括各類圖書產品編號，isbn，圖書產品名稱，圖書產品種類注冊號，作者，版次，出版日期，庫從注冊數量，圖書銷售單價，出版社圖書編號）;

圖書分類（圖書分類號，圖書分類名稱）;

供應商（供應商編號，供應商名稱，出版社地址，所在城市，郵政編碼，聯系電話）;

客戶（客戶編號，客戶名稱，性別，地址，聯系電話）;

出版社（出版社編號，出版社名稱，出版社地址，所在城市，郵政編碼，聯系電話）。

2）將聯系轉化為關系模式

銷售（產品銷售單位名稱，圖書產品編號，銷售圖書時間，銷售圖書數量，銷售產品單價，客戶服務名稱，經手）;

入庫單（內容包括圖書入庫單號，圖書采購編號，入庫確定時間和交貨日期，購入各類圖書的注冊數量，圖書采購單價，供應商圖書編號，經手）。

3）關系模式的優化

圖書（主要包括各類圖書產品編號，isbn，圖書產品名稱，圖書產品種類注冊號，作者，版次，出版日期，庫從注冊數量，圖書銷售單價，出版社圖書編號）;

圖書分類（圖書分類號，圖書分類名稱）;

供應商（供應商編號，供應商名稱，出版社地址，所在城市，郵政編碼，聯系電話）;

客戶（客戶編號，客戶名稱，性別，地址，聯系電話）;

出版社（出版社編號，出版社名稱，出版社地址，所在城市，郵政編碼，聯系電話）;

銷售（產品銷售單位名稱，圖書產品編號，銷售圖書時間，銷售圖書數量，銷售產品單價，客戶服務名稱，經手）;

入庫單（內容包括圖書入庫單號，圖書采購編號，入庫確定時間和交貨日期，購入各類圖書的注冊數量，圖書采購單價，供應商圖書編號，經手）。

4.3 數據庫實現

數據庫系統架構設計的性能優劣與運用好壞直接會影響一個系統的實際工作效率及其所要求能達到的業務效果[2]。以下是本系統涉及的實體分別對應表，具體設計見表1。

4.4 數據庫備份

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

5 用戶界面設計

5.1 用戶界面

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

5.2 功能界面設計

本系統分別由登錄頁面、注冊頁面、系統的主界面、圖書篩選頁面、個人中心頁面、圖書詳情頁面組成。

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

6 結束語

Vue.js框架是一種用于構造以數據為驅動的Web用戶界面的先進型框架[1]。本項目前端頁面主要采用VisualStudioCode來進行Vue.js編碼實現的，后臺數據庫選擇MySQL關系型數據庫，這樣所設計的網絡圖書銷售系統就會更加安全、可靠。本文的論述借鑒了其他的管理系統的技術，也同時結合了自身所學的知識，對基于Vue的圖書銷售系統進行功能、界面的設計與實現。而后臺數據庫還有一些欠缺，只是進行了初步設計，進行了理論上的關系轉化，即邏輯設計，還沒有真正有效地建立。對本系統的初步開發，亦可以有效地提高圖書銷售的效率、服務質量、提升管理效率等。

參考文獻：

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

[2] 周文瓊，王樂球，葉玫，等.基于asp.net mvc框架的高校網絡財務信息查詢管理系統的設計和其實現[J].中國大學數據庫管理，2013，12（1）：62-63.

【通聯編輯：梁書】