柚子快報(bào)激活碼778899分享：數(shù)據(jù)庫設(shè)計(jì)與前端框架

Kohls優(yōu)選坊綜合2025-05-05190

http://yzkb.51969.com/

?數(shù)據(jù)庫設(shè)計(jì)與前端框架

學(xué)習(xí)目標(biāo)：

理解多租戶的數(shù)據(jù)庫設(shè)計(jì)方案

熟練使用PowerDesigner構(gòu)建數(shù)據(jù)庫模型理解前端工程的基本架構(gòu)和執(zhí)行流程

完成前端工程企業(yè)模塊開發(fā)

多租戶SaaS平臺(tái)的數(shù)據(jù)庫方案

多租戶是什么

多租戶技術(shù)（Multi-TenancyTechnology）又稱多重租賃技術(shù)：是一種軟件架構(gòu)技術(shù)，是實(shí)現(xiàn)如何在多用戶環(huán)境下

（此處的多用戶一般是面向企業(yè)用戶）共用相同的系統(tǒng)或程序組件，并且可確保各用戶間數(shù)據(jù)的隔離性。簡(jiǎn)單講：在一臺(tái)服務(wù)器上運(yùn)行單個(gè)應(yīng)用實(shí)例，它為多個(gè)租戶（客戶）提供服務(wù)。從定義中我們可以理解：多租戶是一種架構(gòu)，目的是為了讓多用戶環(huán)境下使用同一套程序，且保證用戶間數(shù)據(jù)隔離。那么重點(diǎn)就很淺顯易懂了，多租戶的重點(diǎn)就是同一套程序下實(shí)現(xiàn)多用戶數(shù)據(jù)的隔離

需求分析

傳統(tǒng)軟件模式，指將軟件產(chǎn)品進(jìn)行買賣，是一種單純的買賣關(guān)系，客戶通過買斷的方式獲取軟件的使用權(quán)，軟件的源碼屬于客戶所有，因此傳統(tǒng)軟件是部署到企業(yè)內(nèi)部，不同的企業(yè)各自部署一套自己的軟件系統(tǒng)

Saas模式，指服務(wù)提供商提供的一種軟件服務(wù)，應(yīng)用統(tǒng)一部署到服務(wù)提供商的服務(wù)器上，客戶可以根據(jù)自己的實(shí)際需求按需付費(fèi)。用戶購買基于WEB的軟件，而不是將軟件安裝在自己的電腦上，用戶也無需對(duì)軟件進(jìn)行定期的維護(hù) 與管理

在SaaS平臺(tái)里需要使用共用的數(shù)據(jù)中心以單一系統(tǒng)架構(gòu)與服務(wù)提供多數(shù)客戶端相同甚至可定制化的服務(wù)，并且仍可以保障客戶的數(shù)據(jù)正常使用。由此帶來了新的挑戰(zhàn)，就是如何對(duì)應(yīng)用數(shù)據(jù)進(jìn)行設(shè)計(jì)，以支持多租戶，而這種設(shè)計(jì)的思路，是要在數(shù)據(jù)的共享、安全隔離和性能間取得平衡。

多租戶的數(shù)據(jù)庫方案分析

目前基于多租戶的數(shù)據(jù)庫設(shè)計(jì)方案通常有如下三種：

獨(dú)立數(shù)據(jù)庫共享數(shù)據(jù)庫、獨(dú)立 Schema共享數(shù)據(jù)庫、共享數(shù)據(jù)表

獨(dú)立數(shù)據(jù)庫

獨(dú)立數(shù)據(jù)庫：每個(gè)租戶一個(gè)數(shù)據(jù)庫。

優(yōu)點(diǎn)：為不同的租戶提供獨(dú)立的數(shù)據(jù)庫，有助于簡(jiǎn)化數(shù)據(jù)模型的擴(kuò)展設(shè)計(jì)，滿足不同租戶的獨(dú)特需求；如果出現(xiàn)故障，恢復(fù)數(shù)據(jù)比較簡(jiǎn)單。

缺點(diǎn)：增多了數(shù)據(jù)庫的安裝數(shù)量，隨之帶來維護(hù)成本和購置成本的增加

這種方案與傳統(tǒng)的一個(gè)客戶、一套數(shù)據(jù)、一套部署類似，差別只在于軟件統(tǒng)一部署在運(yùn)營商那里。由此可見此方案用戶數(shù)據(jù)隔離級(jí)別最高，安全性最好，但是成本較高

共享數(shù)據(jù)庫、獨(dú)立 Schema

（1）什么是Schema

oracle數(shù)據(jù)庫：在oracle中一個(gè)數(shù)據(jù)庫可以具有多個(gè)用戶，那么一個(gè)用戶一般對(duì)應(yīng)一個(gè)Schema，表都是建立在Schema中的,（可以簡(jiǎn)單的理解：在oracle中一個(gè)用戶一套數(shù)據(jù)庫表）

騷戴理解：其實(shí)oracle的Schema就相當(dāng)于mysql中的database

mysql數(shù)據(jù)庫：mysql數(shù)據(jù)中的schema比較特殊，并不是數(shù)據(jù)庫的下一級(jí)，而是等同于數(shù)據(jù)庫。比如執(zhí)行create schema test 和執(zhí)行create database test效果是一模一樣的

共享數(shù)據(jù)庫、獨(dú)立 Schema：即多個(gè)或所有的租戶使用同一個(gè)數(shù)據(jù)庫服務(wù)（如常見的ORACLE或MYSQL數(shù)據(jù)庫），但是每個(gè)租戶一個(gè)Schema。

優(yōu)點(diǎn)：為安全性要求較高的租戶提供了一定程度的邏輯數(shù)據(jù)隔離，并不是完全隔離；每個(gè)數(shù)據(jù)庫可支持更多的租戶數(shù)量。

缺點(diǎn)：如果出現(xiàn)故障，數(shù)據(jù)恢復(fù)比較困難，因?yàn)榛謴?fù)數(shù)據(jù)庫將牽涉到其他租戶的數(shù)據(jù)；如果需要跨租戶統(tǒng)計(jì)數(shù)據(jù)，存在一定困難。

這種方案是方案一的變種。只需要安裝一份數(shù)據(jù)庫服務(wù)，通過不同的Schema對(duì)不同租戶的數(shù)據(jù)進(jìn)行隔離。由于數(shù)據(jù)庫服務(wù)是共享的，所以成本相對(duì)低廉。

騷戴理解：共享數(shù)據(jù)庫、獨(dú)立 Schema方案其實(shí)就是假如我在服務(wù)器上安裝了一個(gè)mysql服務(wù)端，然后每一個(gè)用戶就給他創(chuàng)建一個(gè)數(shù)據(jù)庫database，這樣多個(gè)用戶就只需要?jiǎng)?chuàng)建多個(gè)database數(shù)據(jù)庫即可，不需要像獨(dú)立數(shù)據(jù)庫方案一樣每一個(gè)用戶我就要去搭建一個(gè)mysql服務(wù)端。共享數(shù)據(jù)庫、共享數(shù)據(jù)表方案就是我就一個(gè)數(shù)據(jù)庫，一套數(shù)據(jù)庫表，大家都用這個(gè)，至于怎么區(qū)分到底哪條記錄是哪個(gè)用戶的？加個(gè)用戶標(biāo)識(shí)的字段就可以了！

共享數(shù)據(jù)庫、共享數(shù)據(jù)表

共享數(shù)據(jù)庫、共享數(shù)據(jù)表：即租戶共享同一個(gè)Database，同一套數(shù)據(jù)庫表（所有租戶的數(shù)據(jù)都存放在一個(gè)數(shù)據(jù)庫的同一套表中）。在表中增加租戶ID等租戶標(biāo)志字段，表明該記錄是屬于哪個(gè)租戶的。

優(yōu)點(diǎn)：所有租戶使用同一套數(shù)據(jù)庫，所以成本低廉。

缺點(diǎn)：隔離級(jí)別最低，安全性最低，需要在設(shè)計(jì)開發(fā)時(shí)加大對(duì)安全的開發(fā)量，數(shù)據(jù)備份和恢復(fù)最困難。

這種方案和基于傳統(tǒng)應(yīng)用的數(shù)據(jù)庫設(shè)計(jì)并沒有任何區(qū)別，但是由于所有租戶使用相同的數(shù)據(jù)庫表，所以需要做好對(duì) 每個(gè)租戶數(shù)據(jù)的隔離安全性處理，這就增加了系統(tǒng)設(shè)計(jì)和數(shù)據(jù)管理方面的復(fù)雜程度。

SAAS-HRM數(shù)據(jù)庫設(shè)計(jì)

在SAAS-HRM平臺(tái)中，分為了試用版和正式版。處于教學(xué)的目的，試用版采用共享數(shù)據(jù)庫、共享數(shù)據(jù)表的方式設(shè) 計(jì)。正式版采用基于mysql的共享數(shù)據(jù)庫、獨(dú)立 Schema設(shè)計(jì)。

數(shù)據(jù)庫設(shè)計(jì)與建模

數(shù)據(jù)庫設(shè)計(jì)的三范式

三范式

第一范式（1NF）：確保每一列的原子性（做到每列不可拆分）

第二范式（2NF）：在第一范式的基礎(chǔ)上，非主字段必須依賴于主字段（一個(gè)表只做一件事）

第三范式（3NF）：在第二范式的基礎(chǔ)上，消除傳遞依賴

反三范式：反三范式是基于第三范式所調(diào)整的，沒有冗余的數(shù)據(jù)庫未必是最好的數(shù)據(jù)庫，有時(shí)為了提高運(yùn)行效率，就必須降低范式標(biāo)準(zhǔn)，適當(dāng)保留冗余數(shù)據(jù)。

騷戴理解：第二范式其實(shí)就是假如有一個(gè)學(xué)生表，除了學(xué)生基本信息的一些字段，如果你還有課程成績相關(guān)的字段在這個(gè)表就不符合第二范式，把課程成績相關(guān)字段拆出來分作一個(gè)成績表，那就符合第二范式。繼續(xù)上面的例子，現(xiàn)在已經(jīng)分成了學(xué)生表和成績表，學(xué)生表里有個(gè)字段是成績表的id，那么我每次查詢學(xué)生的所有信息（包括成績）我都要去查詢學(xué)生表然后根據(jù)成績id去成績表再查一次，這樣就要查詢兩次，所以就有了反三范式的出現(xiàn)，反三范式就是加冗余字段，也就是把成績信息又加到學(xué)生表里，這樣只要查詢學(xué)生表就可以查詢出學(xué)生的所有信息，當(dāng)然這是跟第二范式?jīng)_突的，所以叫“反”三范式。至于這個(gè)三范式其實(shí)就是假如有個(gè)表，里面有單價(jià)和數(shù)量兩個(gè)字段，那么就可以根據(jù)單價(jià)和數(shù)量去計(jì)算出總價(jià)，所以就可以不需要總價(jià)這個(gè)字段，這也叫傳遞依賴

數(shù)據(jù)庫建模

了解了數(shù)據(jù)的設(shè)計(jì)思想，那對(duì)于數(shù)據(jù)庫表的表設(shè)計(jì)應(yīng)該怎么做呢？答案是數(shù)據(jù)庫建模

數(shù)據(jù)庫建模：在設(shè)計(jì)數(shù)據(jù)庫時(shí)，對(duì)現(xiàn)實(shí)世界進(jìn)行分析、抽象、并從中找出內(nèi)在聯(lián)系，進(jìn)而確定數(shù)據(jù)庫的結(jié)構(gòu)。它主要包括兩部分內(nèi)容：確定最基本的數(shù)據(jù)結(jié)構(gòu)；對(duì)約束建模。

建模工具

對(duì)于數(shù)據(jù)模型的建模，最有名的要數(shù)PowerDesigner，PowerDesigner是在中國軟件公司中非常有名的，其易用性、功能、對(duì)流行技術(shù)框架的支持、以及它的模型庫的管理理念，都深受設(shè)計(jì)師們喜歡。他的優(yōu)勢(shì)在于：不用在使用create table等語句創(chuàng)建表結(jié)構(gòu)，數(shù)據(jù)庫設(shè)計(jì)人員只關(guān)注如何進(jìn)行數(shù)據(jù)建模即可，將來的數(shù)據(jù)庫語句，可以自動(dòng)生成

使用pd建模

選擇新建數(shù)據(jù)庫模型打開PowerDesigner，文件->建立新模型->model types（選擇類型）->Physical Data Model(物理模型)

控制面板

創(chuàng)建數(shù)據(jù)庫表

點(diǎn)即面板按鈕中的創(chuàng)建數(shù)據(jù)庫按鈕創(chuàng)建數(shù)據(jù)庫模型

切換columns標(biāo)簽，可以對(duì)表中的所有字段進(jìn)行配置

如果基于傳統(tǒng)的數(shù)據(jù)庫設(shè)計(jì)中存在外鍵則可以使用面版中的Reference配置多個(gè)表之間的關(guān)聯(lián)關(guān)系，效果如下圖

導(dǎo)出sql

菜單->數(shù)據(jù)庫（database）->生成數(shù)據(jù)庫表結(jié)構(gòu)（Generate Database）

前端框架

腳手架工程

此項(xiàng)目采用目前比較流行的前后端分離的方式進(jìn)行開發(fā)。前端是在傳智播客研究院開源的前端框架（黑馬Admin商用后臺(tái)模板）的基礎(chǔ)上進(jìn)行的開發(fā)。

官網(wǎng)上提供了非?；A(chǔ)的腳手架，如果我們使用官網(wǎng)的腳手架需要自己寫很多代碼比如登陸界面、主界面菜單樣式等內(nèi)容。課程已經(jīng)提供了功能完整的腳手架，我們可以拿過來在此基礎(chǔ)上開發(fā)，這樣可以極大節(jié)省我們開發(fā)的時(shí)間。

技術(shù)棧

vue 2.5++elementUI 2.2.2 vuexaxiosvue-router vue-i18n

前端環(huán)境

node 8.++npm 5.++

啟動(dòng)與安裝

官網(wǎng)上提供了非常基礎(chǔ)的腳手架，如果我們使用官網(wǎng)的腳手架需要自己寫很多代碼比如登陸界面、主界面菜單樣式等內(nèi)容。課程已經(jīng)提供了功能完整的腳手架，我們可以拿過來在此基礎(chǔ)上開發(fā)，這樣可以極大節(jié)省我們開發(fā)的時(shí)間。

解壓提供的資源包在命令提示符進(jìn)入該目錄，輸入命令：

cnpm install

通過淘寶鏡像下載安裝所有的依賴，幾分鐘后下載完成如果沒有安裝淘寶鏡像，請(qǐng)使用npm install

關(guān)閉語法檢查

打開將useEslint的值改為false。

config/index.js

useEslint: false,

此配置作用: 是否開啟語法檢查，語法檢查是通過ESLint 來實(shí)現(xiàn)的。我們現(xiàn)在科普一下,什么是ESLint : ESLint 是一個(gè)語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。如果我們開啟了 Eslint , 也就意味著要接受它非?？量痰恼Z法檢查，包括空格不能少些或多些，必須單引不能雙引，語句后不可以寫分號(hào)等等，這些規(guī)則其實(shí)是可以設(shè)置的。我們作為前端的初學(xué)者，最好先關(guān)閉這種校驗(yàn)，否則會(huì)浪費(fèi) 很多精力在語法的規(guī)范性上。如果以后做真正的企業(yè)級(jí)開發(fā)，建議開啟

輸入命令：

npm run dev

工程結(jié)構(gòu)

整個(gè)前端工程的工程目錄結(jié)構(gòu)如下：

├── assets | 資源

├── build | webpack編譯配置

├── config | 全局變量

├── src | 源碼

│ ├── api | 數(shù)據(jù)請(qǐng)求

│ ├── assets | 資源

│ ├── components | 組件

│ ├── mixins | mixins

│ ├── filters | vue filter

│ ├── icons | 圖標(biāo)

│ ├── lang | 多語言

│ ├── router | 路由

│ ├── store | 數(shù)據(jù)

│ ├── styles | 樣式

│ ├── utils | 工具函數(shù)庫

│ ├── module-dashboard | 框架程序

│ │ ├── assets

│ │ ├── components

│ │ ├── pages

│ │ ├── router

│ │ └── store

│ ├── module-example | 示例程序

│ │ ├── assets

│ │ ├── components

│ │ ├── pages

│ │ ├── router

│ │ └── store

│ ├── App.vue | app

│ ├── main.js | 主引導(dǎo)

│ └── errorLog.js | vue全局錯(cuò)誤捕捉

├── dist | 編譯發(fā)布目錄

├── README.md

├── index.html | 頁面模板

├── package.json | npn包配置

├── static

└── test | 測(cè)試

├── e2e

└── unit

執(zhí)行流程分析

路由和菜單

路由和菜單是組織起一個(gè)后臺(tái)應(yīng)用的關(guān)鍵骨架。本項(xiàng)目側(cè)邊欄和路由是綁定在一起的，所以你只有在@/router/index.js 下面配置對(duì)應(yīng)的路由，側(cè)邊欄就能動(dòng)態(tài)的生成了。大大減輕了手動(dòng)編輯側(cè)邊欄的工作量。

當(dāng)然這樣就需要在配置路由的時(shí)候遵循很多的約定這里的路由分為兩種， constantRouterMap 和 asyncRouterMap 。

constantRouterMap 代通用頁面。asyncRouterMap 代表那些業(yè)務(wù)中通過 addRouters 動(dòng)態(tài)添加的頁面。

騷戴理解：路由分為兩種，公共路由和模塊路由，公共路由就是下面的第二個(gè)紅框畫出來的，通常就是登錄、注冊(cè)、404頁面這些公共模塊的路由定義，下面module-saas-clients就是一個(gè)模塊，所有模塊通常都是以module開頭的，那么模塊下面的router路由自然就是模塊路由

其實(shí)每一個(gè)模塊就是下面的左側(cè)欄，例如這個(gè)模塊對(duì)應(yīng)的就是SAAS企業(yè)這個(gè)左側(cè)欄，

前端數(shù)據(jù)交互

一個(gè)完整的前端 UI 交互到服務(wù)端處理流程是這樣的：

UI 組件交互操作；調(diào)用統(tǒng)一管理的 api service 請(qǐng)求函數(shù)；使用封裝的 request.js 發(fā)送請(qǐng)求；獲取服務(wù)端返回；更新 data；

從上面的流程可以看出，為了方便管理維護(hù)，統(tǒng)一的請(qǐng)求處理都放在 src/api 文件夾中，并且一般按照 model緯度進(jìn)行拆分文件

api/

frame.js

menus.js

users.js

permissions.js

...

其中， src/utils/request.js 是基于 axios 的封裝，便于統(tǒng)一處理 POST，GET 等請(qǐng)求參數(shù)，請(qǐng)求頭，以及錯(cuò)誤提示信息等。具體可以參看 request.js。它封裝了全局 request攔截器、 respone攔截器、統(tǒng)一的錯(cuò)誤處理、統(tǒng)一做了超時(shí)，baseURL設(shè)置等

騷戴理解：這里我一開始不理解為什么明明用的是demo卻可以找到module-demo這個(gè)模塊？

上面的這個(gè)main.js里面定義了模塊的名稱，所以你的路徑里用的是demo也可以找到module-demo這個(gè)模塊

企業(yè)管理

需求分析

在通用頁面配置企業(yè)管理模塊，完成企業(yè)的基本操作

搭建環(huán)境

新增模塊

手動(dòng)創(chuàng)建

方式一：在src目錄下創(chuàng)建文件夾，命名規(guī)則：module-模塊名稱（）

在文件夾下按照指定的結(jié)構(gòu)配置assets，components，pages，router，store等文件

使用命令自動(dòng)創(chuàng)建

安裝命令行工具

npm install -g itheima-cli

執(zhí)行命令

itheima moduleAdd saas-clients

`saas-clients` 是新模塊的名字

自動(dòng)創(chuàng)建這些目錄和文件

│ ├── module-saas-clients | saas-clients模塊主目錄

│ │ ├── assets | 資源

│ │ ├── components | 組件

│ │ ├── pages | 頁面

│ │ │ └── index.vue | 示例

│ │ ├── router | 路由

│ │ │ └── index.js | 示例

│ │ └── store | 數(shù)據(jù)

│ │ └── app.js | 示例

每個(gè)模塊所有的素材、頁面、組件、路由、數(shù)據(jù)，都是獨(dú)立的，方便大型項(xiàng)目管理，在實(shí)際項(xiàng)目中會(huì)有很多子業(yè)務(wù)項(xiàng)目，它們之間的關(guān)系是平行的、低耦合、互不依賴。

構(gòu)造模擬數(shù)據(jù)

在/src/mock中添加模擬數(shù)據(jù)company.js

import Mock from 'mockjs'

import { param2Obj } from '@/utils'

const List = []

const count = 100

for (let i = 0; i < 3; i++) {

let data = {

id: "1"+i,

managerId: "string",

version: "試用版v1.0",

renewalDate: "2018-01-01",

expirationDate: "2019-01-01",

companyArea: "string",

companyAddress: "string",

businessLicenseId: "string",

legalRepresentative: "string",

companyPhone: "13800138000",

mailbox: "string",

companySize: "string",

industry: "string",

remarks: "string",

auditState: "string",

state: "1",

balance: "string",

createTime: "string"

}

List.push(data)

}

export default {

list: () => {

return {

code: 10000,

success: true,

message: "查詢成功",

data:List

}

sassDetail:() => {

return {

code: 10000,

success: true,

message: "查詢成功",

data:{

id: "10001",

managerId: "string",

version: "試用版v1.0",

renewalDate: "2018-01-01",

expirationDate: "2019-01-01",

companyArea: "string",

companyAddress: "string",

businessLicenseId: "string",

legalRepresentative: "string",

companyPhone: "13800138000",

mailbox: "string",

companySize: "string",

industry: "string",

remarks: "string",

auditState: "string",

state: "1",

balance: "string",

createTime: "string"

}

配置模擬API接口攔截規(guī)則

在/src/mock/index.js中配置模擬數(shù)據(jù)接口攔截規(guī)則

import Mock from 'mockjs'

import TableAPI from './table'

import ProfileAPI from './profile'

import LoginAPI from './login'

import CompanyAPI from './company'

Mock.setup({

//timeout: '1000'

})

//如果發(fā)送請(qǐng)求的api路徑匹配，攔截

//第一個(gè)參數(shù)匹配的請(qǐng)求api路徑，第二個(gè)參數(shù)匹配請(qǐng)求的方式，第三個(gè)參數(shù)相應(yīng)數(shù)據(jù)如何替換

Mock.mock(/\/table\/list\.*/, 'get', TableAPI.list)

//獲取用戶信息

Mock.mock(/\/frame\/profile/, 'post', ProfileAPI.profile)

Mock.mock(/\/frame\/login/, 'post', LoginAPI.login)

//配置模擬數(shù)據(jù)接口

// /company/12

Mock.mock(/\/company\/+/, 'get', CompanyAPI.sassDetail)//根據(jù)id查詢

Mock.mock(/\/company/, 'get', CompanyAPI.list) //訪問企業(yè)列表

注冊(cè)模塊

編輯src/main.js

...

* 注冊(cè) - 業(yè)務(wù)模塊

import dashboard from '@/module-dashboard/' // 面板

import saasClients from '@/module-saas-clients/' //剛新添加的企業(yè)管理

Vue.use(dashboard, store)

Vue.use(saasClients, store)

...

配置路由菜單

打開剛才自動(dòng)創(chuàng)建的/src/module-saas-clients/router/index.js

import Layout from '@/module-dashboard/pages/layout'

const _import = require('@/router/import_' + process.env.NODE_ENV)

export default [

{

path: '/saas-clients',

component: Layout,

redirect: 'noredirect',

meta: {

title: 'SaaS企業(yè)管理',

icon: 'international'

root: true,

children: [

{

path: 'index',

component: _import('saas-clients/pages/index'),

meta: {title: 'SaaS企業(yè)', icon: 'international', noCache: true}

}

]

}

]

騷戴理解： path: '/saas-clients'是父路徑， component: _import('saas-clients/pages/index')可不是子路徑， path: 'index'才是子路徑，我一開始以為 component: _import('saas-clients/pages/index')是子路徑，其實(shí) component: _import('saas-clients/pages/index') 只是說從根據(jù)這個(gè)路徑去找Vue視圖頁面

編寫業(yè)務(wù)頁面

創(chuàng)建/src/module-saas-clients/pages/index.vue

注意文件名駝峰格式首字小寫

頁面請(qǐng)放在目錄 /src/module-saas-clients/pages/

組件請(qǐng)放在目錄 /src/module-saas-clients/components/

頁面路由請(qǐng)修改 /src/module-saas-clients/router/index.js

企業(yè)操作

創(chuàng)建api

在api/base目錄下創(chuàng)建企業(yè)數(shù)據(jù)交互的API（saasClient.js）

import {createAPI, createFormAPI} from '@/utils/request'

export const list = data => createAPI('/company', 'get', data)

export const detail = data => createAPI(`/company/${data.id}`, 'get', data)

騷戴理解：`/company/${data.id}`這里注意帶參數(shù)的寫法，然后注意是梵引號(hào)不是單引號(hào)

企業(yè)列表

在src\module-saas-clients\pages\index.vue里面引用上面的API

騷戴理解：import {list} from '@/api/base/saasClient'通過這句引用API，在getList方法里面去用list()，這里也并沒有直接發(fā)請(qǐng)求給后端，而是演示了一下mock怎樣模擬數(shù)據(jù)，在src\mock\company.js填寫模擬數(shù)據(jù)，然后注冊(cè)到mock里面進(jìn)行攔截，在src\mock\index.js這里面注冊(cè)模擬的mockAPI，然后設(shè)置攔截路徑，攔截對(duì)應(yīng)的請(qǐng)求然后返回模擬數(shù)據(jù)

騷戴理解：

/\/company\/+/ 表示一個(gè)正則表達(dá)式，匹配包含 /company/ 后面跟著一個(gè)或多個(gè)字符的字符串，比如:

/company/apple/company/google/maps/company/microsoft/windows/excel

但是不匹配以下字符串：

/company//company/companyapple

而 /\/company/ 則表示一個(gè)正則表達(dá)式，匹配所有以 "/company" 開頭的字符串，包括:

/company/company/apple/company/google/maps/company/microsoft/windows/excel

它也會(huì)匹配包含 /company 例如 /companyapple ，因?yàn)樵撜齽t表達(dá)式只匹配字符串開始部分的 /company。

import Mock from 'mockjs'

import { param2Obj } from '@/utils'

const List = []

const count = 100

for (let i = 0; i < 3; i++) {

let data = {

id: "1"+i,

managerId: "string",

version: "試用版v1.0",

renewalDate: "2018-01-01",

expirationDate: "2019-01-01",

companyArea: "string",

companyAddress: "string",

businessLicenseId: "string",

legalRepresentative: "string",

companyPhone: "13800138000",

mailbox: "string",

companySize: "string",

industry: "string",

remarks: "string",

auditState: "string",

state: "1",

balance: "string",

createTime: "string"

}

List.push(data)

}

export default {

list: () => {

return {

code: 10000,

success: true,

message: "查詢成功",

data:List

}

sassDetail:() => {

return {

code: 10000,

success: true,

message: "查詢成功",

data:{

id: "10001",

managerId: "string",

version: "試用版v1.0",

renewalDate: "2018-01-01",

expirationDate: "2019-01-01",

companyArea: "string",

companyAddress: "string",

businessLicenseId: "string",

legalRepresentative: "string",

companyPhone: "13800138000",

mailbox: "string",

companySize: "string",

industry: "string",

remarks: "string",

auditState: "string",

state: "1",

balance: "string",

createTime: "string"

}

騷戴理解：這里兩個(gè)前端的點(diǎn)，通過以下的語句來實(shí)現(xiàn)序號(hào)排列數(shù)據(jù)，注意這個(gè)序號(hào)不是數(shù)據(jù)庫里的id

通過下面的代碼塊來實(shí)現(xiàn)按鈕， disabled直接設(shè)置按鈕可不可設(shè)置

騷戴理解：這里我抽出來主要是要學(xué)會(huì)通過Vue的方式去發(fā)請(qǐng)求，注意是單引號(hào)去拼接請(qǐng)求的url路徑

企業(yè)詳情

（1）配置路由

在 /src/module-saas-clients/router/index.js 添加新的子路由配置

{

path: 'details/:id',

component: _import('saas-clients/pages/sass-details'),

meta: {title: 'SaaS企業(yè)詳情', icon: 'international', noCache: false}

}

（2）定義公共組件在/src/module-saas-clients/components/下創(chuàng)建公共的組件頁面enterprise-info.vue

（3）完成詳情展示在在/src/module-saas-clients/pages/下創(chuàng)建企業(yè)詳情視圖details.vue

騷戴理解: activeName: 'first'是默認(rèn)加載first這個(gè)tab，如下所示

this.$route.params.id表示獲取當(dāng)前頁面url路由參數(shù)中為"id"的值，并將其賦值給變量“id”。

具體來說，假設(shè)url為example.com/page/123，那么在vue.js應(yīng)用程序中，如果當(dāng)前頁面的路由配置為{ path: '/page/:id', component: mycomponent }，則this.$route.params.id的值將為"123"。因此，以上代碼將把"123"賦值給變量“id”。

接口對(duì)接

（1）啟動(dòng)企業(yè)微服務(wù)服務(wù)

（2）在 config/dev.env.js 中配置請(qǐng)求地址

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

BASE_API: '"http://localhost:9001/"'

})

騷戴理解：如果要前后端聯(lián)調(diào)的話就需要把src\mock\index.js路徑下的mock給禁用掉，然后修改上面的BASE_API: '"http://localhost:9001/"'為后端端口的地址，這樣請(qǐng)求才會(huì)走后端

柚子快報(bào)激活碼778899分享：數(shù)據(jù)庫設(shè)計(jì)與前端框架