Vue實現先後端分離項目的初體驗

時間 2019-11-10

標籤 vue 實現後端分離項目體驗简体版

原文原文鏈接

Vue實現先後端分離項目的初體驗javascript

通過以前學習的Vue的知識：css

其實咱們已經能夠開始實戰運用到實際的Web項目中了，因爲本人是Java後端開發的，因此後端是基於SpringMVC的。html

如下咱們將演示如何使用Vue組件實現一個用戶登陸系統。前端

vue

介紹

後端

後端基於spring、springMVC、mybatis框架java

對後端SSM框架搭建不熟悉的能夠參考個人博文： SSM項目整合node

前端

前端使用了wepack打包工具，利用了vue.cli腳手架快速搭建的項目。因爲本人對一些技術也不是很熟悉，因此給你們提供些官方文檔，想要深刻學習仍是要仔細分析官方文檔。傳送門以下（也是本項目要用到的）：webpack

以上技術都是比較經常使用的，webpack相似一個打包工具，它會將你項目中的Vue組件打包爲一個龐大的js文件（固然咱們是看不懂的），而咱們的前端項目是部署在node.js提供的web容器中的。git

即先後端分離的實際效果是這樣的： github

有沒有感受很神奇，哈哈，反正我第一次見到的時候就是以爲很神奇，由於html中徹底看不到任何js、css代碼，可是卻能渲染出來這麼好看的頁面。下面咱們就講一下，怎麼實現這個過程吧！！

環境

上面咱們提到的技術，在本案例中都會遇到，後端的SSM框架請參考個人博客文檔，介紹一下前端環境的搭建：

一、安裝node.js

具體安裝流程仍是要去看node.js官網。若是安裝完成，請在終端輸入npm -v查看是否安裝成功。通常會出現相似以下版本號：

v8.11.3

二、安裝VueCLI腳手架

VueCLI可以幫助咱們快速搭建一個webpack的項目。

在已經安裝好node.js的前提上，在終端輸入：npm install vue-cli -g開始安裝VueCLI。若是安裝完成，請在終端輸入：vue -V，會出現以下版本信息：

2.9.6

具體安裝流程能夠參看：博文

因爲VueCLI腳手架已經幫咱們安裝好了webpack、以及相關的node依賴包，因此咱們不須要再手動安裝了。

範例

若是安裝完成，咱們能夠看到出現以下目錄結構：

啓動項目

在終端項目路徑下輸入npm run dev命令；正常狀況下，會出現以下信息：

在瀏覽器中輸入指定的URL，會出現以下頁面：

咱們繼續觀察，打開項目中的index.html

咱們看到，這個HTML中沒有任何代碼，甚至沒有引入js、css，可是頁面中的視圖是怎樣渲染出來的呢？

仔細看項目結構，咱們能看到在src/components/下有一個HelloWorld.vue程序，咱們頁面中的程序就是經過這些.vue組件來渲染出來的。

打包項目

若是咱們想將項目部署到服務器上，你放一堆.vue程序，瀏覽器是沒法解析出來的，因此咱們須要瞭解一下webpack的打包命令：

npm run build

正常狀況下，會顯示上圖中的信息，表示打包成功了，會在項目根目錄中生成一個叫dist的文件夾，裏面是生成的靜態項目：

咱們雙擊dist/index.html，會看到和以前同樣的頁面，可是其中引入了一個XX.js文件

開始

通過上面的步驟咱們應該瞭解到了所謂前端分離的簡易概念，其實在以前的博文： Vue組件咱們已經瞭解到了Vue的模塊化開發流程。配合.vue組件，其實思路仍是相同的。

搭建前端

開始以前，咱們首先要安裝vue-resource（element-ui），執行：

npm install vue-resource npm install element-ui

第一步：修改main.js

main.js文件是webpack的核心入口，咱們須要在其中引入Vue-resource以及router

import VueResource from 'vue-resource'

import router from './router/index.js'

在Vue實例中註冊router

new Vue({
	router,
});

完整代碼：

第二步：修改router/index.js

這是有關Vue路由的配置，前面咱們也已經講過了vue的路由，這裏再也不多說，代碼以下：

如上就配置了，若是你訪問localhost:8081/，那麼就會自動路由跳轉到login.vue組件中，提示咱們登陸;其中的/home表示，若是登陸成功，就跳轉到home.vue組件中，至關於登陸成功後跳轉到後臺頁面。

第三步：建立login.vue

在src/components/下建立login.vue組件。

login組件中表單樣式就再也不講了，咱們主要看一下怎樣利用v-model綁定表單數據，並請求後端

表單原型

<!-- 登陸表單 -->
<el-form :model="login" status-icon :rules="rule" ref="login">
    <el-form-item prop="username">
        <el-input prefix-icon="el-icon-ump-yonghu" v-model="login.username"
                  auto-complete="off"/>
    </el-form-item>
    <el-form-item prop="password">
        <el-input prefix-icon="el-icon-ump-mima" type="password" v-model="login.password"
                  auto-complete="off"/>
    </el-form-item>
    <el-form-item>
        <el-checkbox class="check" v-model="checked">記住我</el-checkbox>
    </el-form-item>
    <el-form-item>
        <el-button class="btn" type="primary" @click="submitForm('login')">登陸</el-button>
    </el-form-item>
</el-form>
<div>
    <p><a href="#" class="tips">尚未帳號？點我去註冊</a></p>
</div>

在上面的表單中，咱們只須要關注三個點：

v-model="login.username"
v-model="login.password"
@click="submitForm('login')"

爲何不關注其餘的？注意，這個案例因爲我使用了element-ui，從標籤中就能看出來，其中涉及到了一些element-ui提供的js校驗，咱們只須要關注Vue的邏輯便可。

提交表單

關於上面提到的element-ui的校驗部分

表單提交方法部分

methods: {
    submitForm(login) {
        this.$refs[login].validate((valid) => {
            if (valid) {
                //提交表單
                this.$http.post('http://127.0.0.1:8080/login.do', {
                    username: this.login.username,
                    password: this.login.password
                }).then(result => {
                    console.log(result);
                    if (result.bodyText === 'index') {
                        this.$router.push({ path: 'home' }); //跳轉到home組件中
                    } else {
                        console.log("登陸失敗");
                        return false;
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
}

上面就是咱們要講到的核心部分：請求後端的接口

解釋：

首先須要注意的this.$refs[login].validate((valid)){}是element-ui提供的表單驗證的邏輯，可是是結合vue.js的。由於咱們若在不驗證表單直接提交的時候，會在表單提交按鈕中直接傳@click="submitForm(login)"，由於此時的login是一個data中已經聲明的對象，其中包含兩個參數：username,password。而element-ui提供的方式則會根據.validate()獲取到login所包含的參數從而實現校驗。
通過上面的校驗，若是校驗成功，那麼將調用this.$http.post()進行提交post表單，這是vue-resource提供的方式，博文中咱們也講過。其中包含了兩個參數，username,password。
請求成功，調用.then()回獲取到成功的請求結果。判斷請求的結果：我這裏是從後端返回的參數（return "index"）中判斷是否登陸成功，若是能錄成功，就應該跳轉到home組件中。
調用vue-router中提供的$router.push方法，咱們能夠理解爲向Router對象中添加了一條路由地址，其URL是：path: 'home'，那麼就代表了會跳轉帶名字叫/home的路徑下，整好對應的是咱們配置好的home.vue組件。

注意：

最重要的就是跨域請求問題，本例中node.js提供的web服務器地址是：127.0.0.1:8081，可是咱們後端Tomcat服務器的地址是：127.0.0.1:8080，而默認是不能在一個域中訪問另外一個域中的資源的，因此也就出現了跨域請求的概念。
其次重要的就是$http.post()的第一個參數：URL地址，不要寫locahost:，不要寫.... 具體緣由不是很清楚，否則請求還會報錯爲跨域請求。
解決跨域請求的方式也有不少，這裏我提供一個比較簡單的方式，只須要在後端的web.xml中提供一個容許跨域訪問的過濾器就好了，後面會介紹。
還有就是以前咱們就說過Vue中默認提交的post請求時不包含表單格式的，因此須要配置，我已經在main.js中寫了Vue.http.options.emulateJSON = true;設置全局表單提交格式，因此在post()方法中就沒有設置。

第四部：建立home.vue

在src/components/下建立home.vue組件

搭建後端

通過上面介紹了前端搭建步驟後，搭建後端咱們就相對熟悉了，咱們的目標就是在controller中提供一個接口login.do讓前端訪問。

解決跨域請求

以前已經說了跨域請求很重要，否則咱們寫的全部請求都沒法順利訪問後端接口。解決的方式以下：

配置

咱們只須要在項目中的web.xml中配置以下代碼便可。由於這個過濾器是tomcat提供的，因此咱們並不須要導入任何jar包。

<!--配置容許跨域訪問-->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>