整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
融界2024年7月9日消息，天眼查知識產權信息顯示，稅友軟件集團股份有限公司取得一項名為“一種數據交互方法、系統、電子設備及存儲介質“，授權公告號CN113010237B，申請日期為2021年3月。
專利摘要顯示，本發明公開了一種數據交互方法，包括：HTML程序利用HTML容器提供的服務接口生成本地資源獲取請求，并通過HTML容器的容器進程將本地資源獲取請求發送至本地服務容器；本地服務容器利用本地服務容器中包含的業務服務對接收到的本地資源獲取請求進行處理，得到相應的本地資源數據，并將本地資源數據發送至HTML容器；HTML容器接收本地資源數據，并將本地資源數據發送至HTML程序；本方法中的HTML程序可直接使用HTML容器及本地服務容器進行本地資源獲取，可確保HTML程序擺脫HTTP服務的束縛，以使HTML能夠更好地在本地程序中進行應用；本發明還提供數據交互系統、電子設備及存儲介質，具有上述有益效果。
本文源自金融界
本系列上一篇文章分析了數據交互基礎面試題，詳見連接：Web前端面試題剖析：數據交互
本次為大家解讀中高級數據交互問題。
REST Web Services
在REST應用中，默認通過HTTP協議，并且使用GET、POST、PUT和DELETE方法對資源進行操作，這樣的設計風格和Web標準完全契合。
REST的最佳應用場景是公開服務，使用HTTP并遵循REST原則的Web服務，我們稱之為RESTful Web Service。RESTful Web Service從以下三個方面進行資源定義：
下圖展示了RESTful Web Service的執行流程
中間層：
在 Node.js 中，你可以使用 http-proxy 完成一些簡單的代理請求的服務，當然也可以使用具有更多功能的 express-gateway。
在第一個 API Gateway 示例中，我們在其代理請求到真實的服務之前，先進行權限認證。
const express = require('express')
const httpProxy = require('express-http-proxy')
const app = express()
const userServiceProxy = httpProxy('https://user-service')
// Authentication
app.use((req, res, next) => {
// TODO: my authentication logic
next()
})
// Proxy request
app.get('/users/:userId', (req, res, next) => {
userServiceProxy(req, res, next)
})
另一種方式是由 API Gateway 向微服務發送請求，再將響應回饋給客戶端：
const express = require('express')
const request = require('request-promise-native')
const app = express()
// Resolve: GET /users/me
app.get('/users/me', async (req, res) => {
const userId = req.session.userId
const uri = `https://user-service/users/${userId}`
const user = await request(uri)
res.json(user)
})
總結：
API Gateway 提供了一個中間層來協調客戶端和微服務架構。它有助于幫助我們完成單一職責原則，讓我們的應用或者服務持續的關注一件事。你可以將通用邏輯放入 API Gateway 中，但是也應該注意不要過度的使用 API Gateway。
前后端分離架構
原創不易，歡迎關注、轉發、點贊。
命是有周期的，比如一個人的生老病死便是他的生命周期；一個公司和企業也是擁有周期的，從創立，穩定，發展，到上市；本章節我們主要學習vue的生命周期以及vue中的數據交互。對于vue來說它只是一段執行的代碼，為什么擁有周期呢？通過本章節的學習你會擁有答案。并且本章節中的第二部分內容也是很重要的，叫做數據交互，也就是如何使前端和后端進行數據的傳遞，這里讀者應該想起ajax技術，vue中提供了Axios技術來替換ajax完成數據交互。
在vue官網中針對生命周期提供了一張圖片來展示周期內的不同階段，并且配文：“你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。”但是仍然建議你對生命周期充分理解，避免將來在學習和編程過程中踩坑。
學習Vue的生命周期之前，我們先做一個小的思考，人的一生有不同的階段，大概分為出生，嬰兒，兒童，少年，青年，老年，到最終生命的消亡。每個人都會按照固定的順序經歷不同的階段，并且會在不同的階段做不同的事情。這些固定順序的階段就組成了一個人的生命周期，那生命周期有什么用呢？比如一個人要結婚，這個事情正常來說肯定是要發生在一個人的青年或者中年階段，那如果發生在兒童階段，那就亂套了。總結來說一個人的生命周期可以保證這個人在正確的階段做正確的事情。
那么我們在回到Vue本身，回顧第一章我們學習過的Vue實例的創建代碼。
Var app = new Vue({
el: "#app",
data: {
msg: "hello world" }
})
我們知道每個Vue應用都是從Vue實例的初始化開始的。Vue 實例在被創建時都要經過一系列的過程，比如創建、數據初始化、掛載、更新、銷毀等，這就是一個Vue所謂的生命周期。Vue在經歷不同的過程時會調用不同的函數，我們將這些函數叫做生命周期鉤子函數，或者生命周期函數。
總結來說，一個Vue實例擁有生命周期，這些生命周期會順序執行，在經歷不同的過程時會自動調用生命周期函數。開發者可以將自己的業務邏輯代碼編寫在不同的生命周期函數內，這樣就是可以實現在Vue實例不同的過程中執行不同的代碼。
這里先列出所有的鉤子函數，然后我們再一一詳解:
我們先創建本章節的第一個案例，此案例中包含鉤子函數的代碼編寫方式，注意運行時打開控制臺查看日志，console中輸出的結果可以幫助我們了解生命周期鉤子函數。創建index.html，代碼內容如3-1所示。
例3-1 index.html
運行index.html，有些讀者對vscode的使用可能不是特別熟悉，這里說一下簡要的步驟：1點擊菜單欄中的運行；2點擊啟動調試；3選擇運行環境，比如谷歌瀏覽器，如果沒有谷歌瀏覽器可以配置自己本機的瀏覽器環境。
運行結果如圖3.1所示。
圖3.1 運行結果
代碼解釋：
我們拿其中的beforeCreate的鉤子函數進行講解，鉤子函數書寫在vue實例的初始化選項中，屬性名為鉤子函數名稱，屬性值為函數，函數會在鉤子函數的對應生命周期被自動調用執行。
beforeCreate: function() {
console.group('------beforeCreate創建前狀態------');
console.log(this.$el); //undefined
console.log(this.$data); //undefined
console.log(this.message)
}
其中this.$el,this.$data,this.message分別在不同的生命周期用于獲取當前Vue實例的el選項，data選項，message數值，通過控制臺我們可以探究他們分別在什么階段有值，我們會在各個鉤子函數詳細講解中進行學習。
通過運行結果我們可以看到鉤子函數執行的順序為：beforeCreate，created，beforeMount，mounted,也說明了在vue實例創建過程中，按照順序經歷了，實例創建之前，實例創建成功后，掛載之前，掛載完成后。這些函數要求開發者按照案例3.1中的形式書寫，執行是由Vue在經歷不同的生命周期時自動調用的。
有同學可能會問，為什么沒有執行其他的幾個鉤子函數，比如beforeDestroy，destroyed等。這個問題其實很好回答，從字面意思分析一下這些鉤子函數。拿destroyed來說，destroyed表示銷毀，也就是說這個函數只會在實例銷毀時才會執行，實例沒有經歷銷毀的過程，所以也不會執行對應的鉤子函數。
Vue完整的生命周期以及鉤子函數如圖3.2所示。
圖3.2 Vue生命周期
準備階段開始創建Vue實例，我們結合圖片分析此階段發生了什么事情，如圖3.3所示。
圖3.3 開始階段
beforeCreate: function() {
console.group('------beforeCreate創建前狀態------');
console.log(this.$el); //undefined
console.log(this.$data); //undefined
console.log(this.message)
}
create表示創建，beforeCreate也就是創建之前，值得注意的是，這里并不是表示在Vue實例初始化之前，而是在實例開始初始化之后，但是實例未完全創建之前。此時實例的選項對象還未創建，el 和 data 并未初始化，因此無法訪問methods， data等選項。對應的運行結果中可以看到此時獲取實例對象的el,data,message選項都是undefined：
------beforeCreate創建前狀態------
undefined
undefined
undefined
初始化數據階段進行了Vue實例的中選項的初始化，比如el，data，methods等但是還未編譯模板。如圖3.4所示。
圖3.4 初始化階段
created: function() {
console.group('------created創建完畢狀態------');
console.log(this.$el); //undefined
console.log(this.$data); //已被初始化
console.log(this.message); //已被初始化
},
通過控制臺的打印我們可以看出，此時data和message可以獲取其值，但是el還是undefined，el指定的就是我們的模板，也就是說此時還未編譯模板。created對應的運行結果如下：
------created創建完畢狀態------
undefined
{message: <accessor>, __ob__: Observer}
學習Vue生命周期
從creatd()鉤子函數到beforeMount鉤子函數之間稱之為編譯模板階段，此時模板編譯成功，生成了一個編譯好的模板字符串，在內存中將這個模板字符串渲染為內存中的DOM，但是還在內存中，沒有掛載到頁面中。具體流程如圖3.5所示。
圖3.5 編譯模板階段
beforeMount: function() {
console.group('------beforeMount掛載前狀態------');
console.log( (this.$el)); //已被初始化
console.log(this.$data); //已被初始化
console.log(this.message); //已被初始化
},
beforeMount對應的運行結果我們可以看出，此時vue實現的內部選項已經初始化完畢，可以分別獲取el和data的值。但是值得注意的是在beforeMount鉤子函數找那個并不是能對頁面中的元素進行修改，原因是beforeMount()鉤子函數是觸發在編譯階段的，此時還沒搭載到頁面上，就無法對頁面上的元素和內容進行修改。
------beforeMount掛載前狀態------
div#app
{message: <accessor>, __ob__: Observer}
學習Vue生命周期
上一個階段是編譯階段，在內存中生成的是虛擬的DOM，還沒掛載到頁面上，編譯階段還不能操作頁面上的dom元素。編譯模板階段之后就是掛載階段，此時在內存中的虛擬DOM掛載到了瀏覽器的頁面上，我們可以操作頁面上的DOM元素了！此階段的流程如圖3.6所示。
圖3.6 掛在頁面階段
mounted: function() {
console.group('------mounted 掛載結束狀態------');
console.log(this.$el); //已被初始化
console.log( this.$data); //已被初始化
console.log( this.message); //已被初始化
},
對應的日志輸出：
-------mounted 掛載結束狀態-----
div#app
{message: <accessor>, __ob__: Observer}
學習Vue生命周期
在mounted()鉤子函數之后，vue實例已經創建完畢了，這個運行階段有兩個鉤子函數，只有當data中的數據發生改變時，才會觸發。也就是beforeUpdate和updated。此階段的流程如圖3.7所示。
圖3.7 運行階段
我們發現例3.1中并沒有執行此階段的兩個鉤子函數，原因是我們例3.1中并未涉及到數據的改變，那么我們接下來創建index2.html來演示beforeUpdate和update函數的執行。代碼如例3-2所示：
運行結果：
當我們點擊按鈕之后，會執行methods中的show函數，在show函數中將data中的msg的值進行了變更，此時就會觸發beforeUpdate函數，在beforeUpdate中通過dom元素獲取的數據還是修改之前msg的值，直接通過msg屬性獲取的值是修改之后的數據，證明了此時beforeUpdate執行在數據修改之前。
當用戶關閉整個頁面或者執行了某些$destroy時，就會從運行階段進入銷毀階段此階段的流程如圖3.8所示。
圖3.8 銷毀階段
beforeDestroy ：銷毀前執行的鉤子函數，可以繼續使用vue實例中的數據，如data， methods，filters，derictives等等。
destroyed : 已經銷毀了，vue實例中的數據不可用了。
本小節我們學習Axios數據交互。我們都知道動態網站的數據都是存在于服務器的數據庫中，那么對于完整的項目來說一般需要涉及到前端和后端的數據交互才能夠實現將后端的數據展示在前端的頁面上，沒有學習Axios之前我們會采用原生的ajax或者jquery提供的封裝來完成數據交互。在Vue中我們更加建議使用Axios來替代原生ajax和jQuery封裝來實現數據交互。
首先我們來看一下關鍵的自我介紹：“Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。”我們需要復習一些名詞和常識。
總結來說Axios是es6中提供的語法，通過promise實現對ajax技術的一種封裝，就像jQuery實現ajax封裝一樣。ajax技術也實現了網頁的局部數據刷新，axios實現了對ajax的封裝。這里我們做一下代碼上的對比。
Axios語法：
axios({
url: '/getUsers',
method: 'get',
responseType: 'json', // 默認的
data: {
“name”: ‘aaa’,
“id”:1
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
}）
jquery封裝ajax語法：
$.ajax({
url: '/getUsers',
type: 'get',
dataType: 'json',
data: {
“name”: ‘aaa’,
“id”:1
},
success: function (response) {
console.log(response)；
}
})
從語法來說axios和jQuery的封裝代碼結構上的區別并不大，那么我們為什么要使用Axios呢，我們來做一下兩種方式特點的對比。
ajax特點：
axios特點：
可能大家對interceptor（攔截器）并不是很熟悉，在這里作下介紹，攔截器可以在請求發送前和發送請求后做一些處理。有一張圖可以清晰的了解它在一次HTTP請求中做了什么，如下圖3.9所示。
圖3.9 攔截器
了解過Axios之后，我們開始學習Axios的使用，第一步就是需要進行安裝，也就是在自己的應用中引入Axios環境。這里有三種方式進行安裝，讀者可以自行選擇自己了解的方式，他們的導入分別如下。
使用 npm執行命令:
$ npm install axios
使用 bower工具:
$ bower install axios
使用 csdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Axios的使用并不復雜，代碼中重要部分是指定請求方式，請求路徑，請求參數，相應處理等，聽到這里是不是覺得axios使用流程上和jQuery封裝的ajax操作十分類似，確實是這樣，只是使用的對象和方法屬性不同而已，接下來我們直接通過代碼來學習Axios的基本使用。代碼如例3-3所示。
例3-3 index3.html
1.1 請簡述vue的優點。
1.2 請簡述vue和jQuery的區別。
1.3 請簡述vue起步的操作流程。
1.4 請簡述什么是MVC，MVVM？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
