前后端分離開發(fā)是目前流行的大趨勢术徊，所謂前后端分離，僅從技術(shù)層面講主要是指前端通過調(diào)用后端提供的接口實(shí)現(xiàn)頁面的交互邏輯宝磨。
具體可以使用nodeJS弧关、axios盅安、ajax等進(jìn)行交互，使用前后端分離開發(fā)主要有解耦和提高性能兩點(diǎn)考慮：

• 解耦：實(shí)現(xiàn)了前后端的解耦世囊、靜態(tài)資源與動(dòng)態(tài)資源的分離别瞭。
• 提高性能：減少了后端服務(wù)器壓力，不再是全局刷新株憾，而是異步加載局部刷新蝙寨。

本文從整體上介紹Vue框架的開發(fā)流程，結(jié)合具體的案例嗤瞎，使用Vue框架調(diào)用具體的后端接口墙歪。

一、Vue框架的開發(fā)流程介紹

當(dāng)我們從github上下載一個(gè)前端模板框架到本地后贝奇，框架中經(jīng)常會(huì)自帶有一些跳轉(zhuǎn)顯示類的功能虹菲，我們可以通過查看這些功能是如何實(shí)現(xiàn)的，進(jìn)而一步步改造為我們需要的樣子掉瞳。在這一開發(fā)過程中毕源，主要有4個(gè)重要的具體操作，下面依次介紹這4個(gè)具體的步驟：

Vue框架開發(fā)的大致流程

步驟1：添加路由規(guī)則

• 在頁面的左邊菜單欄陕习，我們點(diǎn)擊不同的選項(xiàng)卡霎褐，在瀏覽器的輸入框就會(huì)自帶跳轉(zhuǎn)出不同的url，這一過程就稱作"路由"(你當(dāng)然可以簡單的將"路由"理解為是"選路")该镣。

  
  
  路由

• 這些路由規(guī)則需要在router/index.js 中編寫冻璃。
  在入口文件main.js中，導(dǎo)入了router文件损合，當(dāng)我們需要為項(xiàng)目編寫路由規(guī)則時(shí)省艳，就需要在router/index.js 中編寫。
  

  在這里插入圖片描述

步驟2：添加要跳轉(zhuǎn)的路徑

在添加路由規(guī)則時(shí)塌忽，通過component屬性可以設(shè)置要跳轉(zhuǎn)的路徑拍埠，并且需要在對應(yīng)的路徑上創(chuàng)建對應(yīng)的文件。

設(shè)置要跳轉(zhuǎn)的路徑

步驟3：定義接口路徑

• 在頁面中引入了api下的js文件土居，該文件中定義了接口路徑的一部分。
  
  頁面中引入了api下的js文件

• 接口路徑的另一部分是 config/dev.env.js 中的BASE_API屬性嬉探，BASE_API與url共同構(gòu)成了項(xiàng)目頁面的訪問路徑擦耀。
  
  BASE_API與url一起構(gòu)成頁面的訪問路徑

步驟4：使用axios進(jìn)行接口調(diào)用

設(shè)置好路由規(guī)則、要跳轉(zhuǎn)的路徑涩堤、接口路徑之后眷蜓，我們就需要使用axios進(jìn)行接口調(diào)用，具體是在頁面引入JS文件胎围，使用axios進(jìn)行接口調(diào)用吁系，把接口返回?cái)?shù)據(jù)在頁面顯示德召。

二、通過Vue框架調(diào)用后端接口實(shí)踐

繼續(xù)以《分布式醫(yī)療掛號(hào)系統(tǒng)》為例汽纤，之前的文章中已經(jīng)完成了醫(yī)院設(shè)置接口的開發(fā)上岗，目前已經(jīng)有了具體的后端接口，下面根據(jù)上文配置好前端環(huán)境蕴坪，嘗試使用Vue框架調(diào)用后端醫(yī)院設(shè)置表的查詢接口肴掷，進(jìn)而顯示接口中的數(shù)據(jù)：

1.添加醫(yī)院設(shè)置路由

• 在router/index.js中設(shè)置路由規(guī)則：
  路由醫(yī)院記錄列表：/hospSet/list
  路由醫(yī)院記錄添加：/hospSet/add

添加醫(yī)院設(shè)置路由規(guī)則

2.添加跳轉(zhuǎn)的路徑

• 繼續(xù)在router/index.js的component屬性中添加跳轉(zhuǎn)的路徑：
  跳轉(zhuǎn)到醫(yī)院記錄列表：@/views/hospset/list
  跳轉(zhuǎn)到醫(yī)院記錄添加：@/views/hospset/add

添加要跳轉(zhuǎn)的路徑

3.定義接口路徑

• 在api文件夾下創(chuàng)建名為hspset.js的文件，定義后端接口路徑背传。
  
  定義接口路徑

在config/dev.env.js 中修改接口ip地址和端口號(hào)：

• 注意不要改為https呆瞻，因?yàn)閔ttps為加密傳輸，需要授權(quán)后才能操作径玖。

  
  
  修改為本機(jī)8201端口

4.使用axios進(jìn)行接口調(diào)用

醫(yī)院設(shè)置的接口調(diào)用代碼寫在下圖的list.vue中痴脾，下圖顯示了前端調(diào)用后端的整體過程：

前端調(diào)用接口的過程

二、測試

1.測試后端接口

首先在一樣設(shè)置數(shù)據(jù)庫表中準(zhǔn)備好4條記錄梳星。

醫(yī)院設(shè)置數(shù)據(jù)庫表

條件查詢帶分頁接口測試

2.跨域訪問問題

在前后端整合時(shí)，當(dāng)以下三個(gè)部分中存在一個(gè)及以上不相同時(shí)丰泊，會(huì)出現(xiàn)跨域問題：

• 訪問協(xié)議
• 訪問地址
• 訪問端口號(hào)

解決跨域問題最簡單的方式：使用 @CrossOrigin 注解薯定，將其加在發(fā)出請求的Controller類上即可。

3.狀態(tài)碼問題

編寫后端代碼時(shí)瞳购，我們定義了成功狀態(tài)碼為200话侄，而在前端模板中，使用的是20000作為成功狀態(tài)碼学赛。為了前后端統(tǒng)一年堆，可以將前端 utils/request.js 中的成功狀態(tài)碼改為200和后端匹配。

4.最終測試

前端整合后端測試

可以看到點(diǎn)擊醫(yī)院設(shè)置列表后盏浇，成功到達(dá)后端進(jìn)而調(diào)用了醫(yī)院設(shè)置表的數(shù)據(jù)庫变丧，獲得了醫(yī)院設(shè)置表的JSON數(shù)據(jù)，后續(xù)可以通過此JSON數(shù)據(jù)將其顯示在頁面上绢掰！