使用Vue從頭搭建前後端分離的應用
簡介：前後端分離一直是前端、後端同學所期望的方式，當然如果你所在的團隊中分工比較明確的話，畢竟解耦不僅是我們程序上的一種追求，工作方式同樣如此。那麼首先從整體上了解下項目整體情況吧：
後端項目：springboot(2.0+)
前端項目：vue-cli腳手架搭建的前端工程 + Node.js(8.9+)
IDE：前後端都採用IDEA(安裝vue.js插件，設置ES語法級別爲6以上即可進行前端項目的編碼，誰讓我們是後端來寫前端項目呢，苦笑~)，當然前端也可以採用Visual Studio Code
一、搭建基礎環境
1.1 安裝node.js環境
- Node簡介： 簡單的說 Node.js 就是運行在服務端的 JavaScript。Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
這些不免有些官方，從後端的視角來看的話，Node之於前端項目就像Tomcat之於後端項目，是用來發布前端項目並提供服務的，這樣做個類比也許更好理解。 - 下載： 從官網下載對應版本的node安裝包，我的系統是Ubuntu16，選擇linux 64位的tar.xz包：
![node官網]()
- 解壓： 解壓到指定目錄下(我的是在/opt/node目錄)，因爲我沒有使用root賬號，所以命令前都需要帶上
sudo來保證有權限執行相應命令，命令如下：
sudo tar -xvf node-v10.15.3-linux-64.tar.xz
![解壓]()
解壓完成後，就可以看到bin目錄裏有node和npm的文件了，其中npm即node package manager(node的包管理器)，就是對Node.js依賴的包進行管理，從後端的視角來看，就是Maven一樣的存在了
![解壓後]()
- 建立軟連接： 這樣就可以在全局執行相應的命令了，軟連接類似於一個指針，這樣不管在什麼路徑下執行
npm或node相關操作，都會由指向node安裝目錄的npm或node來執行，命令如下：
sudo ln -s /opt/node/node-v10.15.3-linux-x64/bin/node /usr/local/bin
sudo ln -s /opt/node/node-v10.15.3-linux-x64/bin/npm /usr/local/bin - 驗證： 執行如下命令查看是否安裝成功。
查看node版本：node -v
查看npm版本：npm -v
![驗證]()
- 安裝
cnpm： 因爲使用npm install安裝包時速度很慢，所以建議安裝cnpm後使用cnpm install來安裝包。cnpm是淘寶做的國內的一個鏡像，類似於Maven在國內做的私服地址一樣，這樣下載依賴的時候就會比訪問國外的資源要快了。步驟也跟上面的一樣，下載cnpm，配置軟連接，驗證，命令如下：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
sudo ln -s /opt/node/node-v10.15.3-linux-x64/bin/cnpm /usr/local/bin
cnpm -v
![cnpm]()
1.2 初始化vue前端項目
- 安裝vue腳手架
@vue/cli，用來快速搭建vue前端工程。只需要執行如下命令即可：
sudo npm install -g @vue/cli
![安裝腳手架]()
- 驗證是否安裝成功，如果有如下提示，則需要建立軟連接：
![驗證]()
- 建立軟連接：
sudo ln -s /opt/node/node-v10.15.3-linux-x64/bin/vue /usr/local/bin
![ruanlianjie]()
這時，@vue/cli腳手架就安裝完了，我們看到版本是3.0+，接下來就可以創建前端工程了 - 創建前端工程： 默認模式，創建一個工程名爲my-vue-project的項目
sudo vue create my-vue-project
接下來會讓選擇創建模式，default爲默認模式，都採用默認配置，當然如果是實際的項目的話，需要選擇第2個來手工指定相關配置。這裏爲了演示，先採用默認default
![模式]()
等待幾分鐘後就會自動創建完成，並提示接下來需要進入到項目的目錄內，啓用服務，如下：
![完成]()
按照提示進入目錄：cd my-vue-project，啓用服務：npm run serve，啓用後顯示訪問地址，兩種訪問方式，瀏覽器輸入後即可訪問。
![運行]()
打開後如下，默認項目創建成功。
![效果]()
當然如果不想用默認模式創建，可以採用第二種模式來手工指定相關配置，接下來看下如何處理：
- 創建前端工程： 手動選擇模式，同樣通過
sudo vue create my-new-vue命令創建工程，並進入模式選擇頁面，並選擇第二個選項，手工選擇功能特性，如下：
![手工模式]()
- vue-cli 內置支持了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。
對於每一項的功能，此處做個簡單描述：- TypeScript： 支持使用 TypeScript 書寫源碼。
- Progressive Web App (PWA) Support： PWA 支持。
- Router： 支持 vue-router ，類比後端controller的
RequestMapping。 - Vuex： 支持 vuex 。
- CSS Pre-processors： 支持 CSS 預處理器。
- Linter / Formatter： 支持代碼風格檢查和格式化。
- Unit Testing: 支持單元測試，同樣可以和後端的單元測試做類比。
- E2E Testing: 支持 E2E 測試。
![哪些配置]()
- 按如上選擇完後，接下來的默認yes即可，接下來需要選擇，在項目裏面需要支持何種動態樣式語言，此處提供了三個選項：
- SCSS/SASS
- LESS
- Stylus
此處選擇 LESS ，進入下一步：
- 格式化的配置，選擇最後一項
![格式化方式]()
- 單元測試，選擇目前最火的Jest
![單元測試方式]()
- 配置是否單獨保存，還是統一保存在package.json文件中，建議分開保存，便於管理
![配置文件是否單獨保存]()
- 是否將如上配置進行保存，以便下次創建時能用到
![是否保存配置]()
至此，創建完成~
二、vue項目基本配置介紹
2.1 項目的基本結構
- package.json項目中所有的依賴，類似後端maven中的pom文件，
node_modules即下載的依賴，類似maven中的jar包 - jest.config.js單元測試的配置，單元測試的具體代碼在
tests包下 - public包我們都知道vue是單頁面應用(SPA)，而public中的index.html即這個單頁面，通過
<div id="app"></div>中的app來掛載它所依賴的其他頁面
![public包]()
- src包是我們寫頁面最重要的包，類似於我們後端項目中的
src包，我們看下里邊具體都有什麼東東: - src–>assets 一些靜態資源，比如logo.png等；
- scr–>components 基礎組件，比如我們會寫一些通用的上傳組件、頁面佈局組件、分頁組件，放在這裏，以免重複造輪子；
- scr–>views 具體的頁面；
- scr–>App.vue vue的入口頁面，可以看下具體的內容，一般情況下
*.vue文件包含3個部分template:頁面模板，script:邏輯，style:樣式，我們可以看到這裏只有頁面模板及樣式，頁面模板也很簡單，只有一個div和router-view，而router-view是個很神奇的存在，router.js路由對應到什麼頁面，router-view就對應成什麼頁面。接下來看下路由
![app.vue]()
- scr–>router.js 頁面的路由，類似於後端項目的
controller，不過它是針對頁面的路由，不同的url對應到不同的*.vue頁面上，如下圖：/根路徑對應爲./views/Home.vue頁面，/about路徑對應爲./view/About.vue頁面。
![在這裏插入圖片描述]()
- src–>main.js入口文件，類比後端的
main函數，作用就是進行初始化，比如new Vue進行實例化；引入app.vue作爲根組件(父組件)，import 來引入子組件
![main.js]()
- src–>views–>Home.vue我們從路由中得知，訪問
/根路徑時加載Home.vue頁面，那麼看下這個頁面，可以看到該頁面引用了HelloWorld子組件，這類似於後端項目中的bean依賴，很少有bean是獨立存在的，總得通過@AutoWare或者@Resource依賴個其他bean吧，那就像頁面這樣，先import HelloWorld from "@/components/HelloWold.vue"引入，再聲明components:{ HelloWorld}，最後使用<HelloWorld msg="Welcome to your vue.js app">，其中msg就相當於在使用時給該組件的屬性賦值，那麼接下來看下HelloWorld組件
![home]()
- src–>views–>HelloWorld.vue該組件存在屬性
msg，聲明的方式如下props:{msg: String}，這樣父組件在調用該子組件時就可以對子組件賦值了
![hello world]()
以上我們瞭解了vue前端項目的基本結構~
以上我們瞭解了vue前端項目的基本結構~三、跨域問題解決方案
筆者目前的項目中，採用的是開發環境下前後端分離，生產環境中前後端不分離的模式。採用這種方式，主要是爲了充分利用服務器資源，因爲對於管理端的頁面，因爲並沒有太大的訪問量，所以前後端在一起打包部署並無不妥，前端負責頁面的跳轉，並通過Ajax向後端發起請求，後端爲前端提供數據。
而在開發環境中，爲了提高前後端開發的效率，前端同學只需要關注前端工程，後端同學關注後端工程即可。
不過在開發環境聯調的過程中，常會遇到跨域的問題，那麼接下來介紹下3種解決方案：
3.1 方案一：後端設置爲允許跨域
後端項目爲springboot 2.0，只需在啓動類中增加如下配置即可：
@SpringBootApplication
public class WebLauncher extends SpringBootServletInitializer implements WebMvcConfigurer{
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
return builder.sources(WebLauncher.class);
}
public static void main(String args[]){
SpringApplication.run(WebLauncher.class, args);
}
/**
* 允許跨域訪問
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowCredentials(true)
.allowedOrigins("*")
.allowedMethods("*")
//跨域允許時間
.maxAge(3600);
}
}
3.2 方案二：前端設置的域名和後端保持一致
前端項目訪問地址默認爲localhost:8080，後端一般爲hppt://www.xxx.com，這樣的話前端發起Ajax請求肯定會遇到跨域問題，如果我們把前端配置成後端域名，這樣就不存在跨域問題了嘛(一種奇淫技巧的趕腳……)
由於vue-cli 3.0+版本節省了很多配置，就像springboot一樣配置直接默認化了，需要我們增加vue.config.js配置文件。如下：
配置內容如下：
module.exports = {
devServer: {
open: true,
host: 'www.xxx.com', //配置爲後端域名即可，默認爲0.0.0.0，即localhost
port: 83, //如果跟後端項目在同一臺電腦上啓動服務，端口改成不一樣即可
https: false,
disableHostCheck: true
},
}
3.2 方案二：前端設置代理來訪問後端
同樣在vue.config.js配置中配置代理，來訪問後端
module.exports = {
devServer: {
open: true,
host: '0.0.0.0',
port: 83,
https: false,
// 代理相關配置，開發聯調打開,
proxy: {
'/apis': {
target: 'http://www.xxx.com', //後端域名
secure: false, // 如果是https接口，需要配置這個參數
changeOrigin: true, //允許跨域
pathRewrite: {
'^/apis': '/'
}
},
},
disableHostCheck: true
},
}
我們的Ajax請求的URL就要以/apis開頭了，如下：
export function add(params) {
return fetch({
url: '/apis/add/user', //注意此處一定要以/apis開頭
method: 'post',
params
})
}
這樣的話，我們在vue的axios組件中發起Ajax請求的地址改爲/apis/add/user，就被代理成了http://www.example.com/add/user，解決了跨域問題。
四、其他問題
打包、部署待完善