一個Java程序猿眼中的先後端分離以及Vue.js入門

時間 2019-11-26

標籤一個 java 程序眼中後端分離以及 vue.js vue 入門欄目 Java 简体版

原文原文鏈接

鬆哥的書裏邊，其實有涉及到 Vue，可是並無詳細說過，緣由很簡單，Vue 的資料都是中文的，把 Vue.js 官網的資料從頭至尾瀏覽一遍該懂的基本就懂了，我的感受這個是最好的 Vue.js 學習資料，所以在個人書裏邊就沒有多說。可是最近總結小夥伴遇到的問題，感受不少人對先後端分離開發仍是兩眼一抹黑，因此今天鬆哥想和你們聊一下先後端分離以及 Vue.js 的一點事，算是一個簡單的入門科普吧。javascript

先後端不分

後端模板：Jsp、FreeMarker、Velocity
前端模板：Thymeleaf

先後端不分，Jsp 是一個很是典型寫法，Jsp 將 HTML 和 Java 代碼結合在一塊兒，剛開始的時候，確實提升了生產力，可是時間久了，大夥就發現 Jsp 存在的問題了，對於後端工程師來講，可能不太精通 css ，因此流程通常是這樣前端設計頁面-->後端把頁面改形成 Jsp --> 後端發現問題 --> 頁面給前端 --> 前端不會Jsp。這種方式效率低下。特別是在移動互聯網興起後，公司的業務，通常除了 PC 端，還有手機端、小程序等，一般，一套後臺系統須要對應多個前端，此時就不能夠繼續使用先後端不分的開發方式了。css

在先後端不分的開發方式中，通常來講，後端可能返回一個 ModelAndView ，渲染成 HTML 以後，瀏覽器固然能夠展現，可是對於小程序、移動端來講，並不能很好的展現 HTML（實際上移動端也支持HTML，只不過運行效率低下）。這種時候，後端和前端數據交互，主流方案就是經過 JSON 來實現。html

先後端分離

先後端分離後，後端再也不寫頁面，只提供 JSON 數據接口（XML數據格式如今用的比較少），前端能夠移動端、小程序、也能夠是 PC 端，前端負責 JSON 的展現，頁面跳轉等都是經過前端來實現的。前端後分離後，前端目前有三大主流框架：前端

做者尤雨溪，Vue自己借鑑了 Angular，目前GitHubstar數最多，建議後端工程師使用這個，最大的緣由是Vue上手容易，能夠快速學會，對於後端工程師來講，能快速搭建頁面解決問題便可，可是若是你是專業的前端工程師，我會推薦你三個都去學習。就目前國內前端框架使用狀況來講，Vue 算是使用最多的。並且目前來講，有大量 Vue 相關的周邊產品，各類 UI 框架，開源項目，學習資料很是多。vue

React

Facebook 的產品。是一個用於構建用戶界面的 js 庫，React 性能較好，代碼邏輯簡單。java

Angular

AngularJS 是一款由 Google 維護的開源 JavaScript 庫，用來協助單一頁面應用程序運行。它的目標是透過 MVC 模式（MVC）功能加強基於瀏覽器的應用，使開發和測試變得更加容易。node

Vue簡介

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。webpack

只關注視圖層
MVVM 框架

你們在使用 jQuery 過程當中，摻雜了大量的 DOM 操做，修改視圖或者獲取 value ，都須要 DOM 操做，MVVM 是一種視圖和數據模型雙向綁定的框架，即數據發生變化，視圖會跟着變化，視圖發生變化，數據模型也會跟着變化，開發者不再須要操做 DOM 節點。nginx

以下一個簡單的九九乘法表讓你們感覺一下 MVVM ：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <table border="1">
        <tr v-for="i in parseInt(num)">
            <td v-for="j in i">{{j}}*{{i}}={{i*j}}</td>
        </tr>
    </table>
</div>
<script> var app = new Vue({ el: "#app", data: { num:9 } }); </script>
</body>
</html>
複製代碼

用戶修改輸入框中的數據，引發變量的變化，進而實現九九乘法表的更新。

SPA

SPA（single page web application），單頁面應用，是一種網絡應用程序或網站的模型，它經過動態重寫當前頁面來與用戶交互，而非傳統的從服務器從新加載整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗，使應用程序更像一個桌面應用程序。在單頁應用中，全部必要的代碼（ HTML、JavaScript 和 CSS ）都經過單個頁面的加載而檢索，或者根據須要（一般是爲響應用戶操做）動態裝載適當的資源並添加到頁面。SPA 有一個缺點，由於 SPA 應用部署後只有1個頁面，並且這個頁面只是一堆 js 、css 引用，沒有其餘有效價值，所以，SPA 應用不易被搜索引擎收錄，因此，通常來講，SPA 適合作大型企業後臺管理系統。

Vue 使用方式大體上能夠分爲兩大類：

直接將Vue在頁面中引入，不作 SPA 應用
SPA應用

基本環境搭建

首先須要安裝兩個東西：

NodeJS
npm

直接搜索下載 NodeJS 便可，安裝成功以後，npm 也就有了。安裝成功以後，能夠在 cmd 命令哈驗證是否安裝成功：

NodeJS 安裝成功以後，接下來安裝 Vue的工具：

npm install -g vue-cli   # 只須要第一次安裝時執行
vue init webpack my-project  # 使用webpack模板建立一個vue項目
cd my-project #進入到項目目錄中
npm install  # 下載依賴（若是在項目建立的最後一步選擇了自動執行npm install，則該步驟能夠省略）
npm run dev # 啓動項目 
複製代碼

啓動成功後，瀏覽器輸入 http://localhost:8080 就能看到以下頁面：

執行 npm install 命令時，默認使用的是國外的下載源，能夠經過以下代碼配置爲使用淘寶的鏡像：

npm config set registry https://registry.npm.taobao.org
複製代碼

修改完成後，就能有效提升下載的成功率。

Vue 項目結構介紹

Vue 項目建立完成後，使用 Web Storm 打開項目，項目目錄以下：

build 文件夾，用來存放項目構建腳本
config 中存放項目的一些基本配置信息，最經常使用的就是端口轉發
node_modules 這個目錄存放的是項目的全部依賴，即 npm install 命令下載下來的文件
src 這個目錄下存放項目的源碼，即開發者寫的代碼放在這裏
static 用來存放靜態資源
index.html 則是項目的首頁，入口頁，也是整個項目惟一的HTML頁面
package.json 中定義了項目的全部依賴，包括開發時依賴和發佈時依賴

對於開發者來講，之後 99.99% 的工做都是在 src 中完成的，src 中的文件目錄以下：

assets 目錄用來存放資產文件
components 目錄用來存放組件（一些可複用，非獨立的頁面），固然開發者也能夠在 components 中直接建立完整頁面。
推薦在 components 中存放組件，另外單獨新建一個 page 文件夾，專門用來放完整頁面。
router 目錄中，存放了路由的js文件
App.vue 是一個Vue組件，也是項目的第一個Vue組件
main.js至關於Java中的main方法，是整個項目的入口js

main.js 內容以下：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
複製代碼

在main.js 中，首先導入 Vue 對象
導入 App.vue ，而且命名爲 App
導入router，注意，因爲router目錄下路由默認文件名爲 index.js ，所以能夠省略
全部東西都導入成功後，建立一個Vue對象，設置要被Vue處理的節點是 '#app'，'#app' 指提早在index.html 文件中定義的一個div
將 router 設置到 vue 對象中，這裏是一個簡化的寫法，完整的寫法是 router:router，若是 key/value 如出一轍，則能夠簡寫。
聲明一個組件 App，App 這個組件在一開始已經導入到項目中了，可是直接導入的組件沒法直接使用，必需要聲明。
template 中定義了頁面模板，即將 App 組件中的內容渲染到 '#app' 這個div 中。

所以，能夠猜想，項目啓動成功後，看到的頁面效果定義在 App.vue 中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
<script> export default { name: 'App' } </script>
<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
複製代碼

App.vue 是一個vue組件，這個組件中包含三部份內容：1.頁面模板（template）；2.頁面腳本（script）；3.頁面樣式（style）
頁面模板中，定義了頁面的 HTML 元素，這裏定義了兩個，一個是一張圖片，另外一個則是一個 router-view
頁面腳本主要用來實現當前頁面數據初始化、事件處理等等操做
頁面樣式就是針對 template 中 HTML 元素的頁面美化操做

須要額外解釋的是，router-view，這個指展現路由頁面的位置，能夠簡單理解爲一個佔位符，這個佔位符展現的內容將根據當前具體的 URL 地址來定。具體展現的內容，要參考路由表，即 router/index.js 文件，該文件以下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
複製代碼

這個文件中，首先導入了Vue對象、Router對象以及 HelloWorld 組件，
建立一個Router對象，並定義路由表
這裏定義的路由表，path爲 / ，對應的組件爲 HelloWorld，即瀏覽器地址爲 / 時，在router-view位置顯示 HelloWorld 組件

WebStorm 中啓動Vue

也能夠直接在 webstorm 中配置vue並啓動，點擊右上角進行配置：

而後配置一下腳本：

配置完成後，點擊右上角啓動按鈕，就能夠啓動一個 Vue 項目，以下：

項目編譯

這麼大一個前端項目，確定無法直接發佈運行，當開發者完成項目開發後，將 cmd 命令行定位到當前項目目錄，而後執行以下命令對項目進行打包：

npm run build
複製代碼

打包成功後，當前項目目錄下會生成一個 dist 文件夾，這個文件夾中有兩個文件，分別是 index.html 和 static ，index.html 頁面就是咱們 SPA 項目中惟一的 HTML 頁面了，static 中則保存了編譯後的 js、css等文件，項目發佈時，可使用 nginx 獨立部署 dist 中的靜態文件，也能夠將靜態文件拷貝到 Spring Boot 項目的 static 目錄下，而後對 Spring Boot 項目進行編譯打包發佈。